EaselJS SpriteSheet与Sprite翻译

最近看到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类来获取更多建立帧和动画的信息

转载于:https://www.cnblogs.com/Eudora/p/4103257.html