v5 Custom Application GameLoop - zlq4863947/pixi.js-cn GitHub Wiki

Pixi JS v5引入了应用程序插件，但是大多数人更喜欢制作自己的应用程序类和gameloop。

本文的所有代码都可以在我们的示例页面中复制

Default Application

对于 Hello World 应用程序和简单演示，我们有特殊的 Application 类mashup。 这样，我们可以忽略所有初始化问题，并得出以下结论：

// 初始化application
var app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

// 初始化精灵
var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
sprite.anchor.set(0.5);
sprite.position.set(app.screen.width/2, app.screen.height/2);
sprite.interactive = true;
sprite.buttonMode = true;

sprite.on('pointerdown', function() {
    sprite.scale.x *= 1.25;
    sprite.scale.y *= 1.25;
});

app.stage.addChild(sprite);

app.ticker.add(function(delta) {
    sprite.rotation += 0.1 * delta;
});

Custom application

要获得更多控制权，您可以手动设置所需的所有插件。 在这种情况下，我们可以设置ticker插件。

To have more control, you can manually setup all the plugins you need. In this case we setup ticker plugin.

// 初始化 renderer 和 ticker
var renderer = new PIXI.Renderer({ width: 800, height: 600, backgroundColor: 0x1099bb });
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

// 初始化 ticker
var ticker = new PIXI.Ticker();
ticker.add(() => {
    renderer.render(stage);
}, PIXI.UPDATE_PRIORITY.LOW);
ticker.start();

// 初始化精灵
var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
sprite.anchor.set(0.5);
sprite.position.set(renderer.screen.width/2, renderer.screen.height/2);
sprite.interactive = true;
sprite.buttonMode = true;

sprite.on('pointerdown', function() {
    sprite.scale.x *= 1.25;
    sprite.scale.y *= 1.25;
});

stage.addChild(sprite);

ticker.add(function(delta) {
    sprite.rotation += 0.1 * delta;
});

Custom GameLoop

有些应用程序需要更多控制。 让我们直接调用requestAnimationFrame。

// 初始化 renderer 和 ticker
var renderer = new PIXI.Renderer({ width: 800, height: 600, backgroundColor: 0x1099bb });
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

// 初始化 RAF
var oldTime = Date.now();

requestAnimationFrame(animate);
function animate() {
    var newTime = Date.now();
    var deltaTime = newTime - oldTime;
    oldTime = newTime;	
    if (deltaTime < 0) deltaTime = 0;
    if (deltaTime > 1000) deltaTime = 1000;
    var deltaFrame = deltaTime * 60 / 1000; //1.0 用于单帧
	
    // 在这更新你的游戏
    sprite.rotation += 0.1 * deltaFrame;
	
    renderer.render(stage);

    requestAnimationFrame(animate);
}

// 初始化精灵

var sprite = PIXI.Sprite.fromImage('required/assets/basics/bunny.png');
sprite.anchor.set(0.5);
sprite.position.set(renderer.screen.width/2, renderer.screen.height/2);
sprite.interactive = true;
sprite.buttonMode = true;

sprite.on('pointerdown', function() {
    sprite.scale.x *= 1.25;
    sprite.scale.y *= 1.25;
});

stage.addChild(sprite);