如何移动 PIXI DisplayObject？

Question

我有以下文件（使用最新的 PIXI.js 版本）：

index.html

<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 1</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
            width:100%;
            height:100%;
        }
        canvas {
            display:block;
        }
    </style>
    <script src="js/pixi.js"></script>
    <script src="js/XALUI/XALUI.js"></script>
    <script src="js/XALUI/Button.js"></script>
</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("bunny.png");

    // XALUI
    var button = new XALUI.Button(texture);
    stage.addChild(button);

    function animate() {
        button.position.x = button.position.x + 20;

        // render the stage   
        renderer.render(stage);

        requestAnimFrame( animate );
    }

    </script>

    </body>
</html>

js/XALUI/Button.js

XALUI.Button = function(texture) {
    PIXI.DisplayObject.call(this);

    this._button = new PIXI.Sprite(texture);
}

XALUI.Button.prototype = Object.create(PIXI.DisplayObject.prototype);
XALUI.Button.prototype.constructor = XALUI.Button;

XALUI.Button.prototype._renderWebGL = function(renderSession) {
    this._button._renderWebGL(renderSession);
}

XALUI.Button.prototype._renderCanvas = function(renderSession) {     
    this._button._renderCanvas(renderSession);
};

如何将我的按钮移动到另一个位置或另一个初始位置？我试过设置 position.x:

    var button = new XALUI.Button(texture);
    button.position.x = 100;

并且还尝试设置精灵的位置：

    this._button = new PIXI.Sprite(texture);
    this._button.position.x = 100;

但是没有用。请帮忙。

Answer 1

问题在于您正在附加和移动 XALUI.Button 而不是内部 PIXI.Sprite。设置内部精灵 (this._button.position.x) 的位置只有在您将 PIXI.Sprite 添加到舞台时才有效。由于 DisplayObjects 不包含多个 DisplayObjects，因此舞台没有对实际精灵的引用。有几种方法可以解决这个问题。首先，您可以继承自 PIXI.Sprite

XALUI.Button = function(texture) {
  PIXI.Sprite.call(this, texture);
};
XALUI.Button.prototype = Object.create(PIXI.Sprite.prototype);
XALUI.Button.prototype.constructor = XALUI.Button;

或者让它以与上述相同的方式从 DisplayObjectContainer 继承，但这意味着一个按钮将包含多个图形对象，因此请执行最适合您的操作。这是第一种方法的工作示例。

var XALUI = {};

// Inherits from PIXI.Sprite
XALUI.Button = function(texture) {
  PIXI.Sprite.call(this, texture);
};
XALUI.Button.prototype = Object.create(PIXI.Sprite.prototype);
XALUI.Button.prototype.constructor = XALUI.Button;

// Prepare the stage
var stage = new PIXI.Stage(0x66FF99);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/examples/1/bunny.png");
var button = new XALUI.Button(texture);

document.body.appendChild(renderer.view);
requestAnimationFrame(animate);
stage.addChild(button);

// Animate the button
function animate() {
  button.position.x = button.position.x + 5;
  if (button.position.x > window.innerWidth + button.width) {
    button.position.x = -button.width;
  }
  renderer.render(stage);
  requestAnimationFrame(animate);
}

<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v2.0.0/bin/pixi.js"></script>

如何移动 PIXI DisplayObject？

How to move a PIXI DisplayObject?

javascript

pixi.js