Impact 主题（五）：动画

创建动画
Impact 中的动画由 AnimationSheet（一个大的包含所有单个动画帧的图像）来处理。Kilofox.Net

AnimationSheet 帧在左上角从 0 开始编号，然后继续读取方向。请注意，这与 BackgroundMaps 的“块”从 1 开始编号不同。

要创建一个 AnimationSheet，你得指定要使用的图像文件，以及这个图像的每一帧的宽度和高度。这个 AnimationSheet 应作为由预加载器加载的一个类的属性来建立。更多信息，请参阅“使用资源”。

当你创建了一个新的 Animation，你就可以交出 AnimationSheet 了。每个帧的显示时间是以“秒”来计算的。一组帧规定了动画序列。

1. // 用 blob.png 文件创建一个 AnimationSheet。
   
2. // 每个帧都是 16x16 px 
   
3. var animSheet = new ig.AnimationSheet( 'blob.png', 16, 16 );
   
4. 
   
5. // 用这个 AnimationSheet 创建一个动画。
   
6. // 每 0.2 秒显示一帧。动画序列为 [2,3,4] ，动画在最后一帧停止（最后一个参数为 true）。
   
7. var jumpAnim = new ig.Animation( animSheet, 0.2, [2,3,4], true );

复制代码

创建动画以后，你必须使用 .update() 方法为每个游戏帧更新它。你可以使用 .draw() 方法绘制它。Kilofox.Net

Entities 动画
在让实体产生动画的时候，你可以使用一些实用的实体方法，让自己更轻松一些。

每个实体都有一个 .animSheet 属性，你可以在这里为它加载默认的 AnimationSheet。Kilofox.Net

实体还有一个 .anims 对象，你用 .addAnim() 方法定义的所有动画都添加给它了。和 Animations 的构造函数一样，.addAnim() 方法采用同样的参数，除非它总是用 .animSheet 作为 AnimationSheet。

实体的 .draw() 方法在实体的位置自动绘制 .currentAnim。

1. // 创建你自己的实体，继承自 ig.Enitity 的子类
   
2. EntityBlob = ig.Entity.extend({    
   
3.     // 加载动画 sheet
   
4.     animSheet: new ig.AnimationSheet( 'blob.png', 16, 16 ),
   
5.     
   
6.     init: function( x, y, settings ) {
   
7.         // 为动画 sheet 添加动画
   
8.         this.addAnim( 'idle', 1.5, [1,1,2] );
   
9.         this.addAnim( 'jump', 0.2, [2,3,4], true );
   
10.         
    
11.         // 调用父类构造函数
    
12.         this.parent( x, y, settings );
    
13.     }
    
14. });

复制代码

这个实体已经可以用在 Weltmeister 上了，会在游戏中动起来。它的 .currentAnim 将被设置为“idle”动画，因为它是最先添加的。Kilofox.Net

若要切换动画，您只要把 .currentAnim 设置为在 .anims 中定义的一个动画即可。例如：

1. update: function() {
   
2.     if( someCondition ) {
   
3.         this.currentAnim = this.anims.jump.rewind();
   
4.     }
   
5.     else {
   
6.         this.currentAnim = this.anims.idle;
   
7.     }
   
8. }

复制代码

BackgroundMaps 动画
对于 BackgroundMaps，您可以指定哪些块为“动画”。每个 BackgroundMap 都有一个 .anims 属性，为 Animation 画出了“块”的编号。例如：

1. var data = [
   
2.     [1,2,6],
   
3.     [0,3,5],
   
4.     [2,8,1],
   
5. ];
   
6. var bg = new ig.BackgroundMap( 16, data, 'media/tileset.png' );
   
7. 
   
8. // AnimationSheet 使用的图像 *可以* 与 BackgroundMap 的 tileset 使用的图像不同。
   
9. var as = new ig.AnimationSheet( 'media/tiles.png', 16, 16 );
   
10. 
    
11. // 设置 BackgroundMap 编号为 5 的“块”为动画。
    
12. bg.anims[5] = new ig.Animation( as, 0.1, [0,1,2,3,4] );

复制代码

请注意， Animations 不是由 BackgroundMap 来更新的，而是必须由外部来更新的。ig.Game 有一些工具可以做这个。见 .backgroundAnims。Kilof