Flutter Flame 实现接龙纸牌游戏教程（一）：准备工作

Klondike 是一种流行的纸牌游戏。在本教程中，我们将一步步讲解如何使用Flame引擎来编写这个游戏。

本教程假设你至少已经熟悉一些常见的编程概念，并且熟悉Dart编程语言。

开始任何游戏项目之前，你需要给它起一个名字。对于这个教程，我们将简单地命名为klondike。

请记住这个名字，前往教程并完成必要的设置步骤。当你回来时，应该已经有一个包含以下内容的main.dart文件：

import 'package:flame/game.dart';
import 'package:flutter/widgets.dart';

void main() {
  final game = FlameGame();
  runApp(GameWidget(game: game));
}

规划

当我们开始一个新项目时，通常都会觉得有点不知所措，不知道该从哪里开始。我发现做一个粗略的草图来规划我即将编写的代码是很有帮助的，这样就可以有一个参考点。下面就是我为纸牌接龙游戏制作的草图：

从这幅草图中，我们不仅可以看出游戏的整体布局，还能看到各种对象的名称。这些名称是纸牌接龙游戏中的标准术语。这挺幸运的，因为通常来讲，为各种类确定合适的名称是一项相当具有挑战性的任务。

观察这个草图，我们已经可以想象出游戏的高层结构。显然，会有一个Card类，但也会有Stock类、Waste类、包含七个Piles的Tableau，以及四个Foundations。可能还会有一个Deck。所有这些组件将通过从FlameGame派生出来的KlondikeGame相互绑定。

资源

在任何游戏开发中，另一个重要的方面是游戏资源。这包括图片、精灵、动画、声音、纹理、数据文件等等。在像纸牌接龙这样简单的游戏中，我们不需要很多复杂的图形，但是为了绘制纸牌，我们仍然需要一些精灵图。

为了准备这些图形资源，我首先拿了一张实体的扑克牌进行测量，发现它的尺寸是63毫米×88毫米，大约是10:14的比例。因此，我决定我的游戏中的纸牌应该以1000×1400像素的大小渲染，我应该按照这个比例来绘制所有图像。

请注意，这里具体的像素尺寸并不是特别重要，因为这些图像最终会根据设备的实际分辨率进行放大或缩小。这里我使用的分辨率可能比手机需要的要大，但它也非常适合像iPad这样的大型设备。

现在，不多说了，这里是我为纸牌接龙游戏准备的图形资源（我不是艺术家，请不要太苛刻评价）：

右键点击图片，选择“另存为...”，然后将其保存在项目的assets/images文件夹中。此时我们项目的结构看起来是这样的（当然也有其他文件，但这些是重要的）：

klondike/
 ├─assets/
 │  └─images/
 │     └─klondike-sprites.png
 ├─lib/
 │  └─main.dart
 └─pubspec.yaml

顺便说一下，这种文件被称为精灵表：它只是一个包含多个独立图像的单一文件。我们在这里使用精灵表的简单原因是，加载单个大图像比加载许多小图像要快。此外，渲染从单一源图像中提取的精灵也可能更快，因为Flutter会将多个这样的绘图命令优化为单个drawAtlas命令。

以下是我的精灵表的内容：

• 数字2，3，4，…，K，A。理论上，我们可以将这些作为文本字符串在游戏中渲染，但是我们需要将字体作为资产包含在内 - 似乎将它们作为图像更简单。
• 花色标记：♥，♦，♣，♠。同样，我们本可以使用Unicode字符来表示这些，但是图像的定位要容易得多。
• 火焰标志，用于卡片的背面。
• 杰克、皇后和国王的图片。通常每个花色都会有对应的图案，但是画这些图案让我太累了，所以只画了这些。

另外，你需要告诉Flutter关于这个图像（仅将其放在assets文件夹中是不够的）。为了做到这一点，让我们在pubspec.yaml文件中添加以下行：

flutter:
  assets:
    - assets/images/

好的，准备工作已经足够了 - 让我们开始编码吧！

---

教程翻译自 Flame 官方文档：Klondike 教程