一点点基础
游戏主循环（GameLoop）
游戏主循环是游戏的核心，计算机一次又一次运行的一组指令，用通俗的话来说，如果游戏有生命，那么游戏主循环就是游戏的心跳。
同时为了更好的理解游戏主循环，还需要引入一个计算机图像领域的知识——FPS，FPS全称是“Frames Per Second”，翻译为“每秒传输帧数”，意思就是，如果游戏以60FPS运行，则计算机每秒运行60次游戏主循环。总结一下就是，1帧==游戏主循环的一次运行。
通常来说，游戏主循环由两部分组成——更新（update）和渲染（render）。
游戏更新与渲染
如上图，更新（update）部分负责处理对象的移动，这里的对象可以是主角、NPC、敌人、障碍物、地图和其他需要更新的参数。你在游戏里能看到的大部分动作都在这部分发生，比如，计算主角的98K射出的子弹是否接触到敌人。
而渲染（render）部分通常只负责一件事，在更新（update）部分发生变化时，绘制屏幕上的所有对象，以便玩家看到的一切都是同步的。
游戏同步机制
在游戏中，同步机制是非常重要的，可以想象一下，现在更新一个NPC的位置，NPC处于正常状态，所以，你让NPC开始移动。但是，此时有一个子弹距离NPC只有几个像素的距离，你更新了子弹，它会击中NPC。
现在NPC已经死了，所以你不用绘制子弹。这个时候，你应该绘制NPC倒地动画的第一帧。
然后，在下一个游戏主循环中，您将跳过更新NPC位置，因为NPC已经死了，所以您改为渲染NPC垂死动画的第一帧，而不是倒地动画第二帧。
这会给玩家带来一种游戏不稳定的感觉，玩家在玩射击游戏，射击一个NPC的时候，NPC不会倒地，玩家再次射击，但是在子弹击中NPC之前，NPC就死了。
非同步渲染的不稳定性能可能不易被察觉，特别是当每秒运行60帧的高帧频率下，但如果这种情况经常发生，玩家还是会感觉出来的，然后就骂辣鸡游戏了。
所以，最好提前计算好所有内容，并且当计算完成后最终确定所有对象的状态时，再开始绘制屏幕。
开始撸码
使用Flame插件
在pubspec.yaml下添加flame插件，并通过flutter packages get命令下载插件，或者使用Visual Studio Code保存文件会自动下载插件。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
flame: ^0.13.0
Flame插件已经提供了一个完整的游戏开发框架，所以我们只需要专心编写实际的更新和渲染过程。首先，需要将应用程序转化为游戏模式，要做两个操作：全屏和纵向。而令人感到巴适的是，Flame插件已经封装好了这些实用的功能，我们只需要编写调用代码就可以了。
我们先在main.dart的顶部添加以下引用。
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
然后在main.dart的main函数内部创建Flame的Util类的实例，调用其实例的全屏（fullScreen）和设置方向（setOrientation）函数，同时要注意，因为这些函数的返回值类型是未来（Future），所以要在这些函数前面添加等待（await）。
未来（Future）、异步（async）和等待（await）是一种特殊的编码方法，它让那些需要长时间才能处理完成的代码在不同的线程上完成，而且不会阻塞主线程。
为了能够等待（await）未来（Future）处理完成，相关的代码必须在异步（async）函数内，所以我们必须修改main函数，使它成为一个异步函数。
void main() async {
Util flameUtil = Util();
await flameUtil.fullScreen();
await flameUtil.setOrientation(DeviceOrientation.portraitUp);
到这里为止，我们的main.dart里面应该有以下代码。
import 'package:flutter/material.dart';
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
void main() async {
Util flameUtil = Util();
await flameUtil.fullScreen();
await flameUtil.setOrientation(DeviceOrientation.portraitUp);
}
游戏主循环脚手架
在开头，我们知道在一个游戏应用中，游戏是在游戏主循环里面运行的。Flame插件已经提供了可以直接使用的游戏主循环脚手架，要使用这个脚手架，就要用到Flame的游戏（Game）抽象类。
创建一个名称为box-game.dart的新文件，然后开始编写BoxGame类，。
import 'dart:ui';
import 'package:flame/game.dart';
class BoxGame extends Game {
void render(Canvas canvas) {
// TODO: 实现渲染
}
void update(double t) {
// TODO: 实现更新
}
}
上面的代码中，导入dart:ui库，这样的话，等一下我们就可以使用画布（Canvas）类和大小（Size）类。然后导入package:flame/game.dart库，这个库里面包括我们现在使用的游戏（Game）抽象类，这个类有两个方法：更新（update）和渲染（render），我们直接用同名方法覆盖了它们。
在Dart 2.x版本中，@override注释和new关键字是可选的，所以在这里也不需要写。
接下来，我们在main.dart文件中创建BoxGame类的实例，并将其widget属性传递给runApp函数。同时，引用我们刚才创建的package:hello_flame/box-game.dart，让BoxGame类可以在main.dart中使用。
...
import 'package:hello_flame/box-game.dart';
void main() async {
...
BoxGame game = BoxGame();
runApp(game.widget);
到这里为止，我们的main.dart里面应该有以下代码。
import 'package:flutter/material.dart';
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
import 'package:hello_flame/box-game.dart';
void main() async {
Util flameUtil = Util();
await flameUtil.fullScreen();
await flameUtil.setOrientation(DeviceOrientation.portraitUp);
BoxGame game = BoxGame();
runApp(game.widget);
}
现在我们的应用程序可以被称为游戏了，运行游戏，会显示一个空白的黑屏，因为我们还没有在屏幕上绘制具体的内容。
屏幕的大小和尺寸
Flame这个游戏开发框架是以Flutter为基础的，而Flutter在屏幕上绘制时使用逻辑像素，因此，我们在Flame上调整游戏对象的大小时也是使用逻辑像素。
实际上，游戏（Game）抽象类上有个调整（resize）方法，这个方法接受大小（Size）类参数，使用这个参数就可以确定设备的屏幕大小。
首先在box-game.dart文件中，添加一个BoxGame类的实例变量screenSize，这个变量用于保持屏幕的大小，只有当屏幕的大小发生变化时才会更新，它也是Flame在屏幕上绘制对象时的基础。screenSize是Size类型的变量，与传递给调整（resize）方法的参数一致。
类变量screenSize的初始值为null，可以用来判断渲染过程中是否已知屏幕大小。接下来，我们编写一个同名方法覆盖调整（resize）方法。
class BoxGame extends Game {
Size screenSize;
...
void resize(Size size) {
screenSize = size;
super.resize(size);
}
到这里为止，我们的box-game.dart里面应该有以下代码。
import 'dart:ui';
import 'package:flame/game.dart';
class BoxGame extends Game {
Size screenSize;
void render(Canvas canvas) {
// TODO: 实现渲染
}
void update(double t) {
// TODO: 实现更新
}
void resize(Size size) {
screenSize = size;
super.resize(size);
}
}
绘制画布和背景
到这一步，游戏主循环已经存在，可以开始绘制一些对象了。在渲染（render）方法中，我们可以访问画布（Canvas），这个画布（Canvas）是Flame提供的，在画布（Canvas）上绘制游戏图形之后，Flame会将其绘制并将整个画布绘制到屏幕上。
在画布上绘图时，就像我们拿着画笔画画一样，先绘制最底层的背景对象，然后在上面绘制一些动物、植物或建筑物对象。
现在我们可以开始绘制背景，这个例子中游戏背景只是一个黑屏，可以使用以下代码绘制。
void render(Canvas canvas) {
// TODO: 实现渲染
// 在整个屏幕上绘制黑色背景
Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
Paint bgPaint = Paint();
bgPaint.color = Color(0xff000000);
canvas.drawRect(bgRect, bgPaint);
上面代码中，第一行声明了一个与屏幕一样大小的矩形（Rect），坐标位于（0,0），即屏幕的左上角，我们就用这个当游戏背景了。
然后，第二行声明一个绘制（Paint）类对象，其后尾随配置这个绘制（Paint）类对象的颜色（Color）。
最后一行代码使用前面定义的矩形（Rect）和绘制（Paint）实例在画布（Canvas）上绘制一个矩形。
绘制上层的对象
接下来的步骤中，我们会在屏幕的中间绘制一个游戏对象，在当前游戏中，游戏对象是一个小矩形图案。
void render(Canvas canvas) {
...
// 画一个盒子，如果获胜则将其设为绿色，否则为白色
double screenCenterX = screenSize.width / 2;
double screenCenterY = screenSize.height / 2;
Rect boxRect = Rect.fromLTWH(
screenCenterX - 75,
screenCenterY - 75,
150,
150,
);
Paint boxPaint = Paint();
boxPaint.color = Color(0xffffffff);
canvas.drawRect(boxRect, boxPaint);
}
上面代码中，前面2行代码声明两个变量，分别是用于保持屏幕中心坐标的变量，分别为屏幕宽度和高度的一半。
接下来的6行代码声明了一个150x150个逻辑像素大小的矩形，它位于屏幕中间，但是会向左偏移75个像素，向上偏移75个像素。
其余的代码前面绘制画布和背景的代码差不多，此时运行游戏，就可以看到黑色背景上有一个白色的矩形对象。
处理输入和胜利条件
到这里，我们已经完成了大部分内容，现在只需要接受玩家的输入了。在box-game.dart文件中，先导入Flutter的手势库（package:flutter/gestures.dart），然后还要添加点击操作的处理函数。
...
import 'package:flutter/gestures.dart';
class BoxGame extends Game {
...
void onTapDown(TapDownDetails d) {
// 处理点击
}
}
然后回到main.dart文件中，注册一个手势识别器（GestureRecognizer）并将其点击（onTapDown）事件链接到游戏的点击（onTapDown）处理程序。同时，我们也不要忘记在这里导入Flutter的手势库（package:flutter/gestures.dart），以便在此文件中可以使用手势识别器（GestureRecognizer）类。
再然后，定位到main函数内部，声明一个点击手势识别器（TapGestureRecognizer）并将其点击（onTapDown）事件分配给游戏的点击（onTapDown）处理程序。最后使用Flutter的工具库package:flame/util.dart中的添加手势识别器（addGestureRecognizer）函数注册手势识别器。
...
import 'package:flutter/gestures.dart';
void main() async {
...
BoxGame game = BoxGame();
TapGestureRecognizer tapper = TapGestureRecognizer();
tapper.onTapDown = game.onTapDown;
runApp(game.widget);
flameUtil.addGestureRecognizer(tapper);
}
到这里为止，我们的main.dart里面应该有以下代码。
import 'package:flutter/material.dart';
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
import 'package:hello_flame/box-game.dart';
import 'package:flutter/gestures.dart';
void main() async {
Util flameUtil = Util();
await flameUtil.fullScreen();
await flameUtil.setOrientation(DeviceOrientation.portraitUp);
BoxGame game = BoxGame();
TapGestureRecognizer tapper = TapGestureRecognizer();
tapper.onTapDown = game.onTapDown;
runApp(game.widget);
flameUtil.addGestureRecognizer(tapper);
}
现在，我们再回到box-game.dart文件中来，添加另一个实例变量hasWon来判断玩家是否胜利，定义一个布尔（bool）变量，默认为false表示玩家未取得胜利。
然后在渲染（render）方法里面，写一个条件判断，如果玩家已经胜利，将boxPaint的颜色设置成绿色，否则为白色。
class BoxGame extends Game {
...
bool hasWon = false;
void render(Canvas canvas) {
...
Paint boxPaint = Paint();
if (hasWon) {
boxPaint.color = Color(0xff00ff00);
} else {
boxPaint.color = Color(0xffffffff);
}
canvas.drawRect(boxRect, boxPaint);
}
...
}
最后我们还需要在游戏的点击（onTapDown）处理程序中添加逻辑代码，判断玩家是否点击了中间的矩形，如果是，就将hasWon变量的值转换为true，表示玩家已经取得胜利。
void onTapDown(TapDownDetails d) {
// 处理点击
double screenCenterX = screenSize.width / 2;
double screenCenterY = screenSize.height / 2;
if (d.globalPosition.dx >= screenCenterX - 75 &&
d.globalPosition.dx <= screenCenterX + 75 &&
d.globalPosition.dy >= screenCenterY - 75 &&
d.globalPosition.dy <= screenCenterY + 75) {
hasWon = true;
}
}
上面代码中，前面2行用来确定屏幕中心点的坐标，后面的5行多条件判断的if语句，用来判断点击坐标是否位于屏幕中间的150x150逻辑像素范围内。
如果是，就转换hasWon变量的值，并在下次调用渲染（render）方法时反映在屏幕上。同时我们这里将更新（update）方法留空了，因为这个游戏里不会更新任何内容呀。
到这里为止，我们的box-game.dart里面应该有以下代码。
import 'dart:ui';
import 'package:flutter/gestures.dart';
import 'package:flame/game.dart';
class BoxGame extends Game {
Size screenSize;
bool hasWon = false;
void render(Canvas canvas) {
// 在整个屏幕上绘制黑色背景
Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
Paint bgPaint = Paint();
bgPaint.color = Color(0xff000000);
canvas.drawRect(bgRect, bgPaint);
// 画一个盒子，如果获胜则将其设为绿色，否则为白色
double screenCenterX = screenSize.width / 2;
double screenCenterY = screenSize.height / 2;
Rect boxRect = Rect.fromLTWH(
screenCenterX - 75,
screenCenterY - 75,
150,
150,
);
Paint boxPaint = Paint();
if (hasWon) {
boxPaint.color = Color(0xff00ff00);
} else {
boxPaint.color = Color(0xffffffff);
}
canvas.drawRect(boxRect, boxPaint);
}
void update(double t) {
// TODO: 实现更新
}
void resize(Size size) {
screenSize = size;
super.resize(size);
}
void onTapDown(TapDownDetails d) {
// 处理点击
double screenCenterX = screenSize.width / 2;
double screenCenterY = screenSize.height / 2;
if (d.globalPosition.dx >= screenCenterX - 75 &&
d.globalPosition.dx <= screenCenterX + 75 &&
d.globalPosition.dy >= screenCenterY - 75 &&
d.globalPosition.dy <= screenCenterY + 75) {
hasWon = true;
}
}
}
运行游戏，可以看到效果如下所示。
开始用Flutter做游戏吧
网友评论