画架将图像分成几块

Question

我是easeljs 的新手，想知道如何将图像分割成给定数量的块。从到目前为止我收集到的信息来看，我应该使用 SpriteSheets 来完成此操作。但是，我看到的唯一教程是在一个 Spritesheet 中包含多个图像的教程，而不是一个图像分成多个图像并放入 SpriteSheet 的教程。 到目前为止，这是我的代码（我知道变量 frames 是未定义的，因为我还不能正确访问 spriteSheet 数组）：

  var data = {
    images: ["/images/teemo.png"],
    frames: {width:50, height:50}
  };
  var spriteSheet = new createjs.SpriteSheet(data);
  console.log(spriteSheet);
  console.log(spriteSheet[frames]);
  var frames = spriteSheet[frames];
  console.log(frames);
  for (var i=0; i<frames.length; i++){
    var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
  }

Answer 1

spritesheet 是一种有趣的方式（虽然不是该类的真正意图）。不过你的用法是错误的。

1. 创建 Spritesheet
2. 创建 Sprite 实例（在 EaselJS 0.6.1 及更早版本中称为 BitmapAnimation），每个实例都指向同一个 SpriteSheet 实例
3. 使用 sprite.gotoAndStop(frame) 让每个实例显示不同的片段

这是一个例子：

for (var i=0; i< numberOfImages; i++) {
    var sprite = new createsjs.Sprite(spriteSheetData);
    sprite.gotoAndStop(i);
    stage.addChild(sprite);
    // Other stuff
}

您还可以使用 Bitmap 和 sourceRect 属性裁剪图像，该属性使用 Rectangle 来定义裁剪区域。这最终与上述方法大致相同，但可能需要更多的工作来确定每个 Rectangle 尺寸。

干杯。