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繪製下降方塊

回答

相關問題