3

我知道 EaselJS 有一种很棒的方式来管理他们的精灵，但是有没有可能让它更容易呢？

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

很少有人指出为什么我如此想要这个：

  • Flash CS6 生成 Spritesheet 功能可创建可供使用的 TextureAtlas
  • 提高加载时间
  • 节省带宽
  • 更好的开发时间

我不知道如何开始这个，任何帮助将不胜感激。

4

1 回答 1

3

好的，我会稍微扩展一下我的评论。

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

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

默认情况下，Bitmap 的实例是整个图像。但是，您可以将位图精确定位到该图像的某个区域。例如，假设图像包含一行 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 在幕后处理动画精灵的方式。

于 2012-11-16T16:16:45.013 回答