纹理加载错误（JS 动画）答案

【问题标题】：Textures loading error(JS Animation)纹理加载错误（JS 动画）
【发布时间】：2015-06-22 13:53:18
【问题描述】：

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

工作原理：我在新的地方绘制纹理，并在旧的地方逐步删除它。

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

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

代码

!)function animate 做一步动画

有3个版本：

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 Bytes，其分辨率为 (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);
}

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

【问题讨论】：

看起来像是加载问题...你能提供更多代码吗？
它在控制台中说了什么吗？像图像达到最大尺寸还是什么？
控制台为空。我也压缩了图片，但没有帮助（仍然存在滞后）。顺便说一句，单位纹理几乎总是可以的。（小尺寸）。但我需要高质量的纹理。
是的，你使用预加载吗？
谢谢，delueg。你引导我走对了路。

标签： javascript animation pixi.js