点击精灵时,Pixi没有改变位置

时间:2017-05-16 08:30:36

标签: javascript canvas pixi.js pixijs

我正在尝试创建一个示例pixi应用程序。我有图像的地方,当用户点击图像时,它应该移动它的位置。

var canvasWidth = window.innerWidth;
var canvasHight = window.innerHeight

var renderer = PIXI.autoDetectRenderer(canvasWidth, canvasHight);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

PIXI.loader
    .add('images/sample.png')
    .add('images/background.jpg')
    .load(setup);

function setup() {
    var backGround = new PIXI.Sprite(
        PIXI.loader.resources["images/background.jpg"].texture);
    var steve = new PIXI.Sprite(
        PIXI.loader.resources["images/sample.png"].texture);
    backGround.hieght = canvasHight;
    backGround.width = canvasWidth;
    setPropertiesToSteve(steve);
    stage.addChild(backGround);
    stage.addChild(steve);
    renderer.render(stage);
}

// Function just to set properties for steve
function setPropertiesToSteve(steve) {
    steve.interactive = true;
    steve.position.x = canvasWidth/2;
    steve.position.x = canvasWidth/4;
    steve.on('pointerdown',function(){
        steve.position.x = steve.position.x + 10;
    });
}

但是当我点击对象时什么也没发生。我是pixijs.ax的新手。我不知道如何处理这个问题。

1 个答案:

答案 0 :(得分:1)

你需要再次渲染舞台:) 看看官方的Pixi示例https://pixijs.github.io/examples/

他们使用PIXI.Application类设置常见的东西,比如自动重新渲染你的舞台的自动收报机