Intruduction: I am writing a simple animation with JavaScript and PIXI.js.
How it's working: I paint textures in new places and delete it in old places by every step.
Problem: Sometimes i get these results(some textures are not displayed and CPU loaded on 50%) http://itmages.ru/image/view/2649716/a5ae37b5
But if i updating the page i can get normal results (not always) and CPU loaded on 2-3% http://itmages.ru/image/view/2649736/ca696082
Code
!)function animate does one step of animation
There are 3 versions:
1)
anim();
function anim() {
setTimeout(function() {
requestAnimationFrame(anim);
animate();
}, 40);
}
2)setInterval(function() {requestAnimationFrame(animate);}, 50);
3)setInterval(animate, 50);
I loading pictures with that function:
function presets()
{
unit_texture = new PIXI.Texture.fromImage('/assets/unit_2.png');//('/images/unit_2.png')
shell_texture = new PIXI.Texture.fromImage('/assets/shell.png'); //('/images/shell.png')
}
unit_2.png is about 377 Bytes and it's resolution is (19 x 20)
shell.png is about 30 KB and it's resolution is (200x200)
After loading i use these textures to make sprites (PIXI)
function Unit(id, x, y, energy, hp)
{
this.id = id;
this.x = x;
this.y = y;
this.energy = energy;
this.hp = hp;
this.sprite = new PIXI.Sprite(unit_texture);
this.sprite.width = 2 * 50;
this.sprite.height = 2 * 50;
this.sprite.anchor.x = 0.5;
this.sprite.anchor.y = 0.5;
this.sprite.position.x = x;
this.sprite.position.y = y;
stage.addChild(this.sprite);
}
At every step i delete all old Unit objects and create new Unit objects.
(I can't just move them because of organizaion of my system).
I think the biggest trap here is making sprite many times, but i could not fix it yet.
PIXI.Texture.fromImage function is asynchronous.
http://www.html5gamedevs.com/topic/2620-settexture-doesnt-always-use-preloaded-images/ Possible solution of this problem is here:
http://www.html5gamedevs.com/topic/7674-load-textures-synchronously/