LOFTER-网易轻博

这一部分我们将会在游戏中增加图片和动画。我们将会继续以前的，我们已经开发好的足够互动的休闲手机游戏。

在游戏里我们将会保留这些特性并且添加更多的移动和更好的图片。

请参考下面的所有章节：

1. Introduction to game development

2. Set up a playable game

3. Graphics and animation (you are here)

4. Views and dialog boxes

5. Scoring, storage, and sound

6. Finishing up and packaging

先决条件（略，和部分一相同）

Adding sprites(增加）

对于每个Fly类的实例（或者说子类），我们都需要准备和保存2套sprite。

其中一套包含2个sprite，通过添加了动画后将会显示为1个。我们需要把它作为List。

另外一套当fly死的时候将会显示。

我们还需要另外一个实例参数来保存flying动画的时候那一个sprite会被显示。

首先从Flame，import sprite.dart：

import 'package:flame/sprite.dart';

增加下面的参数：

List<Sprite> flyingSprite;

Sprite deadSprite;

double flyingSpriteIndex = 0;

注意： 上面的sprite的参数在本类中将不会被初始化，因为每一个子类将会使用不同的sprite。

在render方法中，依据fly的状态（dead or alive）来绘制sprite。

void render(Canvas c) {
  if (isDead) {
    deadSprite.renderRect(c, flyRect.inflate(2));
  } else {
    flyingSprite[flyingSpriteIndex.toInt()].renderRect(c, flyRect.inflate(2));
  }
}

说明：render方法通过检测isDead参数来确定那个sprite会被显示。如果当前的参数是dead，那么deadSprite会被绘制，发自flyingSpriteList的第一个内容会被绘制。

对于flyingSpriteIndex.toInt()，List和Array对象被访问通过整数的index，但是flyingSpriteIndex是一个double类型的参数，所以我们需要首先把它转换为int。之所以这是一个double的类型，是由于在我们后面会看到的update方法里面，使用time delta（这是一个double的类型）来增加它。

------

说明：首先我们把参数flyingSpriteIndex增加30乘以time delta，记得需要在绘制的过程中转换为int，然后这个int的值用来确定那个frame（帧）会显示，第一个（index为0）或者第二个（index为1）。

我们尝试完成每秒15flaps（15个动画轮回），由于我们每个轮回有2个动画frame（帧），我们将会显示美妙30个frames（帧）动画。

注：每秒update/canvas会运行60次，即60帧，也就是说每隔0.0166秒（1个delta，也就是update的t），运行一次。举例，如果频率需要是3次/s，则需要累积delta超过60/3*t时促发update运行。

我们来看看游戏是每秒运行60frames，在update方法里粗略的计算为每16.6毫秒（这个是time delta的值，但是按秒计算）开始执行一次。 起始的flyingSpriteIndex值为0。

对于第一个frame（帧），30 * 0.0166增加到flyingSpriteIndex，flyingSpriteIndex现在是0.498。如果我们执行这个值的.toInt()，仍然会得到0，这时会显示第一个图片。

对于第二个frame（帧），flyingSpriteIndex再增加一个30 * 0.0166的值为0.996。如果你执行.toInt()，仍然会得到0，这时仍然会显示第一个图片。

然后对于第三个frame（帧），flyingSpriteIndex再增加一个30 * 0.0166的值为1.494。执行.toInt()，会得到1，这时会显示第二个图片。

然后到第四个frame（帧），flyingSpriteIndex再增加一个30 * 0.0166的值为1.992。执行.toInt()，仍然会得到1，这时仍然会显示第二个图片。

到第五个frame（帧），flyingSpriteIndex再增加一个30 * 0.0166的值为2.49。

我们执行一段代码当flyingSpriteIndex的值大于等于2时重置flyingSpriteIndex的值，由于我们没有第三个图片（index 2）。

我们得到的值现在是2.49。

我们减去2让它变成0.49，这样执行.toInt()，会得到0，这时会显示第一个图片。

这样循环着执行每4个frames（帧）执行一个轮回，总共15个轮回每一秒，每一个轮回在2个图片frames（帧）里循环显示。

.