Textures loading error(JS Animation)

140 views Asked by At

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.

1

There are 1 answers

0
Алексей Титов On BEST ANSWER