使用纹理映射和EaselJs

Question

我知道EaselJS有一种很棒的方法来管理他们的精灵，但是它能让它变得更容易吗？

下面的链接说服我使用纹理叠加：http://www.altdevblogaday.com/2012/09/17/building-an-html5-game-dont-shrug-off-atlases/

我为什么如此渴望这样做，几乎没有什么指点：

• Flash CS6 Generate Spritesheet特性创建TextureAtlas，可供使用
• 改善负载时间
• 节省带宽
• 更好的开发时间

我不知道如何启动这个项目，任何帮助都将不胜感激。

Answer 1

好吧，我会再谈一谈我的评论。

当您在EaselJS中创建一个显示元素时，给它一个源映像：

srcImage = new Image();
srcImage.src = "http://whatever.com/image.png";
...
sprite1 = new Bitmap(srcImage);

默认情况下，位图的实例是整个图像。但是，您可以将位图精确定位到该图像的某个区域。例如，假设图像包含一行32x32块：

sprites = [];
for(i=0; i<8; i++) {
  sprites[i] = new Bitmap(srcImage);
  sprites[i].sourceRect = { x:i*32, y:0, width:32, height:32 };
}

现在有了八个精灵，每个都指向源映像的一个不同的32x32区域。

您还可以动态地更改它：

sprCursor = new Bitmap(srcImage);
sprCursor.sourceRect = ( x:0, y:0, width:32, height:32 };
...
if(cursorOverButton) {
  sprCursor.sourceRect = { x:32, y:0, width:32, height:32 };
  // or more efficiently, sprCursor.sourceRect.x = 32;
}

我想这就是EaselJS在幕后处理动画精灵的方式。