纹理加载错误（JS动画）

Question

简介： 我正在用 JavaScript 和 PIXI.js.

编写一个简单的动画

工作原理：我一步一步在新地方画纹理，在旧地方删除它。

问题： 有时我得到这些结果（一些纹理没有显示并且 CPU 加载了 50%） http://itmages.ru/image/view/2649716/a5ae37b5

但是如果我更新页面我可以获得正常结果（并非总是如此）并且 CPU 加载了 2-3% http://itmages.ru/image/view/2649736/ca696082

代码

!)函数animate做一步动画

有3个版本：

1)

anim();
    function anim() {
        setTimeout(function() {
            requestAnimationFrame(anim);
            animate();
        }, 40);
    }

2)setInterval(function() {requestAnimationFrame(animate);}, 50);

3)setInterval(animate, 50);

我加载图片使用那个功能：

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 大约是 377 字节，它的分辨率是 (19 x 20)
shell.png 大约是 30 KB，它的分辨率是 (200x200)

加载后我使用这些纹理制作精灵 (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);
}

在每一步我删除所有旧单元对象和创建new 单位对象。
（我不能只是 移动它们 因为我的系统组织。
我认为这里最大的陷阱是多次制作精灵，但我还没有修复它。

Answer 1

PIXI.Texture.fromImage函数是异步.
http://www.html5gamedevs.com/topic/2620-settexture-doesnt-always-use-preloaded-images/ 此问题的可能 解决方案 在这里:
http://www.html5gamedevs.com/topic/7674-load-textures-synchronously/

纹理加载错误（JS动画）

Textures loading error(JS Animation)

javascript

animation

pixi.js