Pixi.js 画下落的方块

Question

我使用 PIXI.js 在 canvas 上绘制了一个基于网格的系统。

我正在尝试制作动画，首先每个粒子 position.y 是 -200，然后使用 Tween.js 我正在尝试制作它们坠落。

我把位置改到正确的位置，就是particle._y.

如您所见，跌落后会看到一些空位，CPU 过热。

http://jsbin.com/wojosopibe/1/edit?html,js,output

function animateParticles() {
    for (var k = 0; k < STAGE.children.length; k++) {

        var square = STAGE.children[k];
        new Tween(square, 'position.y', square._y, Math.floor(Math.random() * 80), true);

    }
}

我觉得我做错了什么。

谁能解释一下我做错了什么，为什么掉下来后会有一些空位？

Answer 1

空白的原因是您的一些动画没有开始。原因在这一行：

new Tween(square, 'position.y', square._y, Math.floor(Math.random() * 80), true);

查看 Tween.js 的函数定义，我看到了：

function Tween(object, property, value, frames, autostart)

第四个参数是frames。我假设这是完成动画所需的帧数。那么您的 Math.floor 函数有时会 return 为零，这意味着动画将没有帧并且不会开始！！

您可以改用 math.ceil() 来解决此问题。这样动画总是至少有 1 帧：

new Tween(square, 'position.y', square._y, Math.ceil(Math.random() * 80), true);

现在，关于性能，我建议进行不同的设置...

为所有这些图形对象制作动画是非常密集的。我的建议是绘制一个红色正方形，然后使用 RenderTexture 从正方形生成位图。然后您可以将 Sprites 添加到舞台上，这在动画时表现得更好。

//Cretae a single graphics object
var g = new PIXI.Graphics();
g.beginFill(0xFF0000).drawRect(0, 0, 2, 2).endFill();

//Render the graphics into a Texture
var renderTexture = new PIXI.RenderTexture(RENDERER, RENDERER.width, RENDERER.height);
renderTexture.render(g);

for (var i = 0; i < CONFIG.rows; i++) {
    for (var j = 0; j < CONFIG.cols; j++) {

        var x = j * 4;
        var y = i * 4;

        //Add Sprites to the stage instead of Graphics
        var PARTICLE = new PIXI.Sprite(renderTexture);
        PARTICLE.x = x;
        PARTICLE.y = -200;

        PARTICLE._y = H - y;

        STAGE.addChild(PARTICLE);
    }
}

此 link 将有更多 RenderTexture 示例： http://pixijs.github.io/examples/index.html?s=demos&f=render-texture-demo.js&title=RenderTexture

Pixi.js 画下落的方块

Pixi.js draw falling squares

javascript

canvas

pixi.js