Question

吴向明： 我正在用 JavaScript 和 PIXI.js 编写一个简单的动画。

如何运作：我在新的地方绘制纹理，并在每个步骤中将其删除。

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

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

代码

！）函数动画执行动画的一个步骤

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

每一步我删除所有旧单位对象和创建新单位对象。
（由于我的系统的组织，我不能只是 移动他们。）
我认为这里最大的陷阱是多次制作精灵，但我还是无法解决它。

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动画）

1 个答案: