Pixi.js绘制下降方块

我使用PIXI.js在画布上绘制了基于网格的系统。Pixi.js绘制下降方块

我试图动画的东西，首先每个粒子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); 

    } 
}

我觉得我做错了什么。

有人可以请解释我做错了什么，为什么有一些空的空间后坠落？

来源

2015-11-12 Hiero

空白空间的原因是你的一些动画没有启动。原因是在这一行：

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从正方形生成一个位图。然后，您可以将Sprites添加到舞台上，在制作动画时可以更好地执行WAY。

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

这个链接会产生渲染纹理的一些例子： http://pixijs.github.io/examples/index.html?s=demos&f=render-texture-demo.js&title=RenderTexture

来源

2015-11-12 21:37:16 Karmacon

它仍然laggy对我来说，我还能做什么，http://www.goodboydigital.com/pixijs/bunnymark/这里即时绘制60K兔子，仍然在60FPS – Hiero

我已经从图形生成纹理，并运行在60FPS。谢谢！ – Hiero

Pixi.js绘制下降方块

回答

相关问题