priteSheet精靈動畫引擎
本文介紹Flash中SpriteSheet精靈序列圖與其它渲染方式的性能對比、SpriteSheet的原理及注意實現，最後實現了一個精靈序列圖的渲染引擎。本文的SpriteSheet引擎及demo可以在github上下載：https://github.com/saylorzhu/SpriteSheet
動畫渲染性能對比Flash中動畫製作方式有多種，如矢量動畫、位圖幀動畫、精靈序列圖等等。針對不同的製作方式，對同一個角色動畫進行如下測試：一個角色在屏幕上顯示5個實例，對應呼吸、施法、行走、受傷、普攻狀態。
測試運行的環境：
l Release version of Flash Player 12.0.159.1
l AMD Phenom(tm) II X4 830 Processor(2800 Mhz)
l Microsoft Windows 7 專業版 (32位)
得出測試結果如下表所示，爲了節約大小資源中所用位圖均爲png8。
表1：不同動畫渲染效率對比（具體測試數據與所使用資源有關）
從上表可以得出，精靈序列圖消耗CPU最少，並且文件大小適中，但內存消耗較大。對於遊戲來說，CPU銷燬越小，幀頻可以越大，遊戲越流暢。
圖1：精靈序列圖動畫效果及幀頻、內存信息
可以看出使用精靈序列圖幀頻和內存都非常穩定，內存沒有頻繁的gc，gc非常消耗cpu會造成遊戲卡頓現象。反觀其它渲染方式，會發現內存不穩定，這對遊戲性能是一個風險。
圖2：矢量動畫
圖3：矢量+cacheAsBitmap動畫
圖4：位圖動畫
圖5：位圖+導出類
下面詳細介紹下精靈序列圖的原理及注意事項。
精靈序列圖SpriteSheet精靈序列圖是一種大的網格式位圖，其中每一格都對應着一個動畫截屏，每一動畫截屏對應動畫的一幀。精靈序列圖通常採用PNG格式，這樣可以使用Alpha通道。
圖6：角色受傷動畫序列圖
除了大位圖之後，還必須有一個對應的數據描述文件，常用的格式有json、json-array、xml。數據描述文件，用來指定每幀動畫在大圖中的位置（偏移位置、寬、高等等），如json格式如下：
其中：
Key-"呼吸0000"：表示幀的名字/對應圖片文件名（json-array格式中，使用filename字段表示）;
frame: 圖片在大圖中的偏移位置(左上角爲原點)和大小(未旋轉前) 需要注意這裏的圖片大小是圖片未旋轉前的大小;
rotated: 是否旋轉(順時針方向);
trimmed: 是否有去掉周圍多餘的透明部分;
spriteSourceSize: x,y表示圖片未去掉周圍透明部分的偏移量,這是如果需要還原圖片原先的大小要用的;
sourceSize: 圖片的原始大小,包含透明部分;
渲染機制精靈序列圖使用位塊圖像傳輸（bit-blitting，blit = Bit-Block Image Transfer）技術，它涉及到使用位圖來渲染最終的顯示效果。 將需要顯示的效果，像素會繪製到一個已添加到舞臺上的位圖中。爲了表現動畫效果，會在一個循環中更新位圖的像素。關鍵步驟如下：
1) 加載動畫中需要的Sprite Sheet位圖數據（.png文件）
2) 在displayList中添加一個BitmapData目標位圖數據(畫布)
3) 向畫布複製或者擦除遊戲（copyPixel vs draw）
4) 根據遊戲顯示層次順序將Sprite Sheet複製到畫布
5) 在遊戲循環中重複第3、4步
copyPixel的效率比draw高，所以一般情況下，使用copyPixel複製圖像到畫布。
內存佔用在所有動畫渲染方式中，精靈序列圖對幀頻的影響是最小的。因爲精靈序列圖會預先被緩存到BitmapData實例中，這就可以使渲染速度變得更快。一定要隨時注意內存的佔用，仔細把控，詳盡規劃。精靈序列圖之所以效率高，是由於位圖序列都緩存在內存中從而可被快速調取。但這樣也可能會導致巨大的內存開銷。
注意：一張圖片佔用多少內存只取決於圖像的尺寸，而與圖像文件的類型和圖像壓縮無關。
位圖所佔內存（字節）= 位圖寬度 x 位圖高度 x 4
假設一幀的圖片的大小爲200x400像素，佔用內存312.5KB。如果一個動畫18幀，則佔用內存約5.5M。如果一個角色包含4個方向或4個動作的動畫，則佔用內存約22M。同屏在線10個角色，則佔用內存約220M。
SpriteSheet工具現在Flash cs6已經集成了將動畫導出爲SpriteSheet，如下圖所示：
圖7：Flash cs6導出SpriteSheet設置
TexturePacker也可以打包圖片爲SpriteSheet格式。
精靈序列圖引擎前面介紹了精靈序列圖的原理及注意事項，下面實現一個精靈序列圖動畫的引擎，支持Flash Cs6/TexturePacker導出的JSON、JSON-Array、Starling（XML）3種數據格式。
圖8：精靈序列圖引擎類圖
SpriteSheet類
圖9：SpriteSheet類
SpriteSheet繼承自flash.display.Sprite，包含一個bitmap成員用作畫布。使用定時器Timer來驅動動畫循環。
SpriteSheet使用類似Movieclip，提供play()、stop()、gotoAndPlay()、gotoAndStop()接口，並支持鼠標事件。
mAnimation成員（Animation實例）用於描述SpriteSheet當前表示的動作，如遊戲中一個角色包含呼吸、行走、施法、受傷動作。
mTextureAltas成員（TexureAtlas實例）用於維護整個精靈序列圖數據，並負責將特定幀位圖複製到畫布顯示。
TexureAtlas類TexureAtlas類保存了整個精靈序列圖數據，並根據SpriteSheet的當前動作，生成構成動畫的所有幀在精靈序列圖中的偏移和大小。
Animation類Animation動畫信息類。
l seqName表示動畫序列名(e.g. "walk")
l delay表示幀間隔
l loop表示動畫是否循環播放
l arFrames:Vector.<SpriteFrame>;// 幀信息數據
SpriteFrame類SpriteFrame類表示圖片在大圖中的偏移位置(左上角爲原點)和大小(未旋轉前)等等信息，根據數據描述文件生成。
圖10：SpriteFra示意
JsonFormat、JsonArrayFormat、XmlFormat類SpriteSheet序列圖數據解析類，分別解析對應格式的描述數據。
Demo實例SpriteSheet使用非常簡單，與原生Movieclip差異不大。下面的例子分別加載JSON、JSON-Array、XML格式的數據及對應的PNG資源，然後創建SpriteSheet實例。
作者：吳秦
出處：http://www.cnblogs.com/skynet/
本文基於吳秦（包含鏈接）.