Question

我是画架的新手，想知道如何将图像分割成给定数量的图片。从我到目前为止收集的内容来看，我应该使用SpriteSheets来实现这一目标。但是，我见过的唯一教程是在一个Spritesheet中有多个图像的教程，而不是一个分为多个图像并放入SpriteSheet的图像。这是我的代码到目前为止（我知道变量帧是未定义的，因为我无法正确访问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是一种有趣的方式（虽然不是真正的类的意图）。你的用法是错误的。

创建Spritesheet
创建Sprite实例（在EaselJS 0.6.1和更早版本中称为BitmapAnimation），每个实例都指向同一个SpriteSheet实例
使用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来定义裁剪区域。这最终与上述方法大致相同，但可能需要更多工作来确定每个矩形尺寸。

干杯。

画架将图像分割成碎片

1 个答案: