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

Question

我使用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); 
} 

如果我确实缓存了小孩的背景容器，它将不会渲染

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

缓存（XY宽度高度[规模= 1]）

定义于缓存：735

绘制显示对象到一个新的画布，然后将其用于随后的平局。对于不经常更改的复杂内容（例如，包含许多不移动的子项的容器或复杂的矢量形状），这可以提供更快的渲染速度，因为内容不需要在每次打勾时重新渲染。缓存的显示对象可以自由移动，旋转，褪色等，但是如果其内容发生更改，则必须通过再次调用updateCache（）或cache（）来手动更新缓存。您必须通过x，y，w和h参数指定缓存区域。这将定义将使用此显示对象的坐标进行渲染和缓存的矩形。

要扩大解释，假设你有一个游戏角色是由6周孩子的形状，2个胳膊，两条腿，身体和头部的Container。在游戏过程中，角色的手臂和腿部四处fla。。在这种情况下，您不希望缓存字符，因为每次移动手臂和腿时都会被迫更新缓存，从而消除缓存带来的任何性能增益。但是，假设一旦角色死亡，他会死在死亡的位置，并且alpha从屏幕上消失。在这种情况下，你会缓存字符。这是因为阿尔法动画变得越来越CPU密集，它需要考虑更多的形状。通过缓存的字符，就相当于告诉了CPU补间，而不是6只是一个形状然后可以uncache一旦你的阿尔法吐温是完整的，你想退回玩家的回合2

更新

easeljs第一次引用时会异步加载图像。由于您并未预加载图像，因此当您缓存背景时，图像数据尚未加载到内存中。

http://jsfiddle.net/8EvUX/

在此处，将图像嵌入为Base64编码字符串，因此可立即缓存来证明缓存按预期工作小提琴。我的建议是使用preloadjs库在加载到舞台之前首先加载你的图像。