EaselJS SpriteSheet與Sprite翻譯

標籤：style   io   color   ar   os   使用   sp   for   資料   

最近看到EaselJS相關內容，網上資料並不是很多，翻譯一下原文檔與個人理解，錯誤請留言，轉載請標明轉載出處。

SpriteSheet Class

Encapsulates the properties and methods associated with a sprite sheet. A sprite sheet is a series of images (usually animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x100 images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high).

The data passed to the SpriteSheet constructor defines three critical pieces of information:

1. The image or images to use.
2. The positions of individual image frames. This data can be represented in one of two ways: As a regular grid of sequential, equal-sized frames, or as individually defined, variable sized frames arranged in an irregular (non-sequential) fashion.
3. Likewise, animations can be represented in two ways: As a series of sequential frames, defined by a start and end frame [0,3], or as a list of frames [0,1,2,3].

一個精靈表是一系列映像（通常是動畫幀）合并成一個大的映像。例如一個動畫有8個100*100的圖片組成，可以組成一個400*200的精靈表（4幀跨越2個高度）。

被傳送給精靈表構造器的資料需要定義3個關鍵區段：

1.使用的映像

2.單獨映像幀的位置，資料可以通過兩種方式來表示：1：作為一個連續的規則網格，相同大小的幀；2：被設定在不規則（不連續）架構中的單獨定義可變大小的幀

3.同樣的動畫可通過兩種方式來表達：1：一系列連續的幀，通過開始結束幀定義[0,3]；2：一系列幀[0,1,2,3]

SpriteSheet Format

data = { 

// 定義幀率: 

// 指定頻率被設定在SpriteSheet上. 詳情見幀率 

framerate: 20, 

// 定義映像:

 // 使用映像列表或路徑

images: [image1, "path/to/image2.png"], 

//定義幀：

 //定義幀的簡單方式：有幀是連續的，所以僅需要幀的大小，定義幀的長寬，可選的幀數及初始位置x,y，如果數量被忽略，將通過映像自動計算 

frames: {width:64, height:64, count:20, regX: 32, regY:64}, 

// 複雜的方式：為幀定義單個矩形，第五個值為images列表中的下表索引 

frames: [ 

// x, y, width, height, imageIndex, regX, regY

 [0,0,64,64,0,32,64], [64,0,96,64,0] 

], 

// 定義動畫: 

// 簡單動畫定義：

定義一個連續的幀包含開始到結束，可以定義一個next動畫繼續執行（或假停止），可以定義播放速度 

animations: { 

// start, end, next, speed 

run: [0,8], jump: [9,12,"run",2] 

} 

// 複雜的方法是通過索引來指定幀

 animations: { 

run: { 

frames: [1,2,3,3,2,1] 

}, 

jump: { 

frames: [1,4,5,6,1], next: "run", speed: 2 

}, 

stand: { frames: [7] } 

} 

// 上述兩種方法可以結合起來，可以使用一個單一的幀定義： 

definition: animations: {

 run: [0,8,true,2], 

jump: { 

frames: [8,9,10,9,8], next: "run", speed: 2 }, stand: 7 

} 

}

speed frequency Example執行個體

To define a simple sprite sheet, with a single image "sprites.jpg" arranged in a regular 50x50 grid with two animations, "run" looping from frame 0-4 inclusive, and "jump" playing from frame 5-8 and sequencing back to run:

通過布滿50*50順序網格的單一映像來定義一個簡單精靈列表，有兩個動畫，0-4幀為奔跑，5-8幀為跳躍，之後接著奔跑

 

var data = { images: ["sprites.jpg"], frames: {width:50, height:50}, animations: {run:[0,4], jump:[5,8,"run"]} }; var spriteSheet = new createjs.SpriteSheet(data); var animation = new createjs.Sprite(spriteSheet, "run");

Sprite Class

Displays a frame or sequence of frames (ie. an animation) from a SpriteSheet instance. A sprite sheet is a series of images (usually animation frames) combined into a single image. For example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). You can display individual frames, play frames as an animation, and even sequence animations together.

翻譯：由SpriteSheet執行個體顯示一個幀或幀序列，一個精靈列表是一系列圖片（通常為動畫幀）組成的單一圖片，例如一個由8個100*100映像組成的動畫可以被組成一個400*200的精靈序列（4幀跨越兩個高度）。你可以作為動畫來顯示幀，播放幀，即時是在一塊的有序幀

See the SpriteSheet class for more information on setting up frames and animations.

通過閱讀SpriteSheet類來擷取更多建立幀和動畫的資訊

EaselJS SpriteSheet與Sprite翻譯