文章/答案/技术大牛

发布

社区首页 >问答首页 >如何移动PIXI DisplayObject？

问如何移动PIXI DisplayObject？
EN

Stack Overflow用户

提问于 2015-03-30 13:54:03

回答 1查看 4.4K关注 0票数 1

我有以下文件(使用最后一个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;

但不起作用。请帮帮忙。

javascript

pixi.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-30 14:15:32

问题在于您正在附加和移动XALUI.Button，而不是内部PIXI.Sprite。在内部精灵(this._button.position.x)上设置位置只有在将PIXI.Sprite添加到舞台上时才能工作。由于DisplayObjects不包含多个DisplayObjects，所以这个阶段没有引用实际的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继承，但这意味着一个按钮将包含多个图形对象，所以要做最适合您的事情。下面是第一种方法的工作示例。

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29348047

复制

相似问题

问如何移动PIXI DisplayObject？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何移动PIXI DisplayObject？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何移动PIXI DisplayObject？
EN