Javascript Pixi.js绘制下落方块

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

我正在尝试设置这个东西的动画，首先每个粒子

position.y

是-200，然后使用

Tween.js

我试图让它们掉落

我将位置更改为正确的位置，即

粒子。_y

正如你们所注意到的，你们会看到坠落后有一些空位，CPU过热

函数animateParticles（）{
for（var k=0；k

我想我做错了什么

---

有人能解释一下我做错了什么，为什么跌倒后会出现一些空白吗？

出现空白的原因是你的一些动画没有启动。原因如下：

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

查看Tween.js的函数定义，我发现：

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

第四个参数是帧。我假设这是完成动画所需的帧数。 你的Math.floor函数有时会返回零，这意味着动画将没有帧并且不会开始

您可以改为使用math.ceil（）来解决这个问题。这样，动画将始终至少有一帧：

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

---

现在，关于性能，我建议以不同的方式设置它

设置所有这些图形对象的动画非常密集。我的建议是画一个红色方块，然后使用渲染器从方块生成位图。然后，您可以将精灵添加到舞台上，这样在设置动画时效果会更好

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

//创建单个图形对象
var g=新的PIXI.Graphics（）；
g、 beginull（0xFF0000）.drawRect（0,0,2,2）.endFill（）；
//将图形渲染为纹理
var renderTexture=new PIXI.renderTexture（RENDERER，RENDERER.width，RENDERER.height）；
renderTexture.render（g）；
对于（var i=0；i

此链接将提供更多RenderTexture示例：

---

对我来说还是太晚了，我还能做什么呢？这里我画了60K只兔子，仍然是60FPS。我已经从图形中生成了纹理，并以60FPS的速度运行。谢谢你！

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