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

默认情况下，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 };
}

你现在有8个精灵，每个精灵都指的是源图像的不同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如何在幕后处理动画精灵。

使用纹理图谱和EaselJs

1 个答案: