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不包含多个DisplayObject，因此该阶段没有引用实际的sprite。有几种方法可以解决这个问题。首先，您可以继承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继承，但这意味着按钮将包含多个图形对象，因此最适合您的方式。这是第一种方法的工作示例。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

如何移动PIXI DisplayObject？

1 个答案: