CreateJS缓存对象 - 现在对象在舞台上不再动画

Question

CreateJS缓存对象 - 现在对象在舞台上不再动画

3

我正在使用CreateJS将图形（形状）和位图添加到我的舞台上，并将其添加到我的HTML5画布中。在将大小为20px的圆形图形在屏幕上移动一段时间后，会出现严重的延迟问题。

我按照这篇文章来确定性能问题：http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/ 因此，我尝试进行缓存... 现在当我按键时，圆圈不会移动。我是否缓存不正确？

world = new createjs.Container();   

segment = new createjs.Shape();
segment.graphics.beginFill("red").drawCircle(0, 0, 20);
segment.x = 100;
segment.y = 100;

segment2 = new createjs.Shape();
segment2.graphics.beginFill("black").drawCircle(0, 0, 20);
segment2.x = 150;
segment2.y = 150;

ContainerOfPeople = new createjs.Container();   
ContainerOfPeople.addChild(segment, segment2);

world.addChild(ContainerOfPeople); //add container of people to world container (which will contain all objects in a container)
world.cache(0, 0, 1000, 1000); //cache all objects within world container

stage.addChild(world);

编辑：

如果我在创建地图后不缓存瓦片，我可以看到它们渲染到画布上：

function createWorld() {
    background = new createjs.Container();      

    for (var y = 0; y < mapWidth; y++) {
        for (var x = 0; x < mapHeight; x++) {
            var tile = new createjs.Bitmap('images/tile.png');
            tile.x = x * 28;
            tile.y = y * 30;
            background.addChild(tile);
        }
    }
    //background.cache(0, 0, mapWidth, mapHeight);
    stage.addChild(background); 
}

enter image description here

如果我缓存了瓷砖子元素的背景容器，它将不会被渲染。

function createWorld() {
    background = new createjs.Container();      

    for (var y = 0; y < mapWidth; y++) {
        for (var x = 0; x < mapHeight; x++) {
            var tile = new createjs.Bitmap('images/tile.png');
            tile.x = x * 28;
            tile.y = y * 30;
            background.addChild(tile);
        }
    }
    background.cache(0, 0, mapWidth, mapHeight);
    stage.addChild(background); 
}

enter image description here

Why?

- user3871

我认为你的问题不是来自这个简单的循环。我们需要更多的代码来帮助你。 - Raphaël Malié

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew · Accepted Answer

如果你正在动画/移动其子对象，则不希望缓存整个世界。把缓存想象成对DisplayObject及其所有子项进行快照。在缓存期间，除非再次更新缓存（如EaselJS文档中所述），否则您看不到对子对象进行的任何更改。

http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#method_cache

缓存 (x y width height [scale=1])

在cache:735中定义

将显示对象绘制到新的画布中，然后用于后续的绘制。对于不经常更改的复杂内容（例如，具有许多不移动的子项的容器或复杂的矢量形状），这可以提供更快的渲染，因为不需要每次都重新渲染内容。缓存的显示对象可以自由移动、旋转、淡化等，但是如果其内容发生更改，则必须通过调用updateCache()或cache()手动更新缓存。您必须通过x、y、w和h参数指定缓存区域。这定义了将使用此显示对象的坐标渲染和缓存的矩形。

为了扩展说明，假设您有一个游戏角色，它是由6个子形状（2只手臂、2只腿、一个身体和一个头）组成的容器。在游戏过程中，角色的手臂和腿会动。在这种情况下，您不想缓存角色，因为每次手臂和腿移动时都需要更新缓存，从而消除了缓存带来的任何性能增益。

然而，假设角色死亡后，他会呈现死亡状态并消失。在这种情况下，你应该缓存角色，因为alpha动画随着需要考虑的形状数量增加而变得越来越CPU密集。通过缓存角色，你有效地告诉CPU只对一个形状进行补间动画，而不是6个。当你的alpha补间动画完成并且你想让玩家回到第二轮时，你可以使用uncache命令。更新当首次引用图片时，easeljs会异步加载图片。因为你没有预加载图像，所以当你缓存背景时，图像数据尚未加载到内存中。

http://jsfiddle.net/8EvUX/

这是一个示例，其中图像被嵌入为base64编码字符串，因此可立即缓存以证明缓存按预期工作。我的建议是在将图像添加到舞台之前使用preloadjs库先加载您的图像。