javascript - CreateJS 缓存对象 - 对象现在不会在舞台上设置动画

Question

我正在使用 CreateJS 将图形(形状)和位图添加到我的舞台，并将其添加到我的 HTML5 Canvas 。

在屏幕上移动圆圈图形(大小为 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);

---

编辑:

如果我在创建 map 后不缓存这些图 block ，我可以看到它们呈现在 Canvas 上:

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

如果我确实缓存了 tile children 的背景容器，它不会呈现

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

为什么？

Answer 1

如果您正在为它的子对象设置动画/移动它，您不会想要缓存整个世界。将缓存视为拍摄 DisplayObject 及其所有子项的快照。缓存项目时，您不会看到对子项所做的任何更改，直到您按照 EaselJS 文档中的说明再次更新缓存:

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

cache ( x y width height [scale=1] )

Defined in cache:735

Draws the display object into a new canvas, which is then used for subsequent draws. For complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick. The cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually update the cache by calling updateCache() or cache() again. You must specify the cache area via the x, y, w, and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.

为了进一步说明，假设您有一个游戏 Angular 色 Container由 6 个 child 形状、2 条 ARM 、2 条腿、一个 body 和一个头组成。在游戏过程中， Angular 色的 ARM 和腿会四处摆动。在这种情况下，您不想缓存 Angular 色，因为每次移动 ARM 和腿时都将被迫更新缓存，从而消除了缓存带来的任何性能提升。

但是，假设一旦 Angular 色死亡，他就会卡住在一个死的位置，并且 alpha 会从屏幕上消失。在这种情况下，您将缓存该字符。这是因为 alpha 动画变得越来越 CPU 密集，它必须考虑更多的形状。通过缓存 Angular 色，您实际上是在告诉 CPU 只补间一个形状而不是 6 个。然后您可以 uncache一旦您的 alpha tween 完成并且您想要返回第 2 轮的播放器。

更新

easeljs首次引用时异步加载图像。因为您没有预加载图像，所以在缓存背景时图像数据还没有加载到内存中。

http://jsfiddle.net/8EvUX/

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