如何移动PIXI显示对象

我有以下文件（使用上一个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;

但它不起作用。请帮忙。

问题在于您要附加和移动XALUI.Button而不是内部PIXI.Sprite。只有当您将PIXI.Sprite添加到舞台上时，才能在内部精灵（this._button.position.x）上设置位置。由于DisplayObjects不包含多个DisplayObject，因此舞台没有对实际精灵的引用。有几种方法可以解决这个问题。首先，您可以继承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>

相关内容

最新更新

热门标签：