AS3精灵图集

Question

我有一张名为 mySprite.png 的图片。该图片是一个 5x5 的网格，每个小格子为 32x32 像素的精灵。这张图片已经被加载到了项目库中。

假设我在一个类内有一个 render() 函数，如何让这个类将自己绘制成来自这个精灵表资源的单个精灵呢？

- soundly_typed

Answer 1

简短回答是，您将需要使用BitmapData.copyPixels()仅从源精灵表中复制一小部分到显示在屏幕上的显示精灵。

例如：

private function DrawSpriteIndex( displayBitmap:Bitmap, spriteSheet:Bitmap, spriteIndex:int ):void {
  var spriteW:int = 32;
  var spriteH:int = 32;
  var sheetW:int = 5;

  displayBitmap.bitmapData.copyPixels(spriteSheet.bitmapData, 
                                       new Rectangle( (spriteIndex % sheetW) * spriteW, Math.floor(spriteIndex / sheetW) * spriteH, 32, 32),
                                       new Point(0,0)
                                      );
}

以下链接可能有所帮助——在我学习这个过程中也对我有所帮助：

• http://www.8bitrocket.com/2008/07/02/tutorial-as3-the-basics-of-tile-sheet-animation-or-blitting/
• http://www.8bitrocket.com/newsdisplay.aspx?newspage=13430
• http://www.8bitrocket.com/newsdisplay.aspx?newspage=14591
• http://www.8bitrocket.com/newsdisplay.aspx?newspage=15967

- HanClinto

Answer 2

另一种可能的方法是在工作表上放置一个32x32的掩码，然后只需移动工作表即可。

它的工作方式类似于（伪代码）：

var spriteMask:Sprite = new Sprite();
spriteMask.graphics.drawRect(0,0,32,32);
spriteSheetContainer.mask = spriteMask;

function render():void {    // this function is on the container of the sprite sheet (spriteSheetContainer in this example)
    // run offsetX & Y iteration logic.  I would assume something that uses a frame counter, modulus, and the sprite layout grid dimensions
    _spriteSheet.x = offsetX;    // move the sprite around under the mask
    _spriteSheet.y = offsetY;
}

在精灵表的容器上放置遮罩而不是精灵表本身非常重要，这样您就可以独立移动精灵表。

- RickDT

---

这样做会有一些相当严重的性能影响，因为Flash播放器仍在绘制整个图像，即使您看不到它。 - Tyler Egeto