Pixi.js绘制下落的正方形

Pixi.js draw falling squares

本文关键字：正方形 js 绘制 Pixi      更新时间：2023-09-26

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

我正在尝试制作这个东西的动画，首先每个粒子position.y都是-200，然后使用Tween.js我试图让它们掉落。

我将位置更改为正确的位置，即particle._y。

正如你所注意到的，你会在摔倒后看到一些空位，CPU过热。

http://jsbin.com/wojosopibe/1/edit?html，js，输出

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

我想我做错了什么。

有人能解释一下我做错了什么吗？为什么摔倒后会有空位？

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

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（）来解决此问题。这样，动画将始终至少有1帧：

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

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

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

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

此链接将提供更多RenderTexture示例：http://pixijs.github.io/examples/index.html?s=demos&f=渲染纹理demo.js&title=渲染文本

相关文章：