今日要點
》前言
》介紹 langaw 專案
》下載並編譯 langaw 專案
》下載並編譯 flame example 專案
》編譯 doc/examples/spritesheet 專案
》spritesheet 程式架構研究

前言

本來想介紹 langaw 專案，但我 build 失敗了，不過我還是完整的記錄下來 build 的過程，有高手有心得的話，再教導分享一下。

後面再加碼介紹了一下 flame example 編譯的過程，編譯了二個，都一次OK, 有時間再來研究其他的範例。

介紹 langaw 專案

這是再研究上一篇文章時，找到另一套遊戲引擎 Flame, 而今天要介紹的Github專案 Alekhin-Games/langaw
Langaw是一款無限點擊的遊戲，由Japa Alekhin Llemos 在 jap.alekhin.io中的遊戲開發教程中介紹。他使用 Flame 來撰寫遊戲並有完整的教學文章，帶我們一步步來熟悉 Flame 的使用，flame-engine/flame ， Flame 專案的目的是為Flutter開發的每個遊戲都會遇到的常見問題提供一套完整的解決方案，這個專案有 3.4K的星星，相當受到注目與支持。

這個APP是用來展示 Flame 的大多數功能的的示範遊戲app。他的星星數只有75星星，不太多，我還是好奇來研究一下，因為這麼認真寫教學文的熱心老師，實在值我好好學習一下。

README.md 沒有畫面，說明都寫在教學文裡了。

下載並編譯 langaw 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 langaw 專案囉。

% git clone https://github.com/spritewidget/spaceblast.git

Cloning into 'langaw'...
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 960 (delta 0), reused 1 (delta 0), pack-reused 956
Receiving objects: 100% (960/960), 11.44 MiB | 1.05 MiB/s, done.
Resolving deltas: 100% (481/481), done.

% cd langaw 
% flutter pub get

Running "flutter pub get" in spaceblast...     5.2s

試 build 一下，

% flutter run -d all

好吧，有錯誤，我們來試著查看看問題。

../../../.pub-cache/hosted/pub.dartlang.org/flame-0.11.1/lib/flame.dart:62:7: Error: The non-abstract class 'FlameBiding' is missing implementations for these members:

查一下 Flame 的 CHANGELOG

0.19.1
Bump AudioPlayers version to allow for web support
Adding Game#pauseEngine and Game#resumeEngine methods
Removing FlameBinding since it isn't used and clashes with newest flutter

試著更新一下 plugin 的版本編號

是編譯成功了，但是畫面一片白，慘～

好吧，有空再看看，必竟這個一年沒更新了，而 Flame 已經從他撰寫時的 0.11.0 更新到 0.27.0了

但是這麼結束好像沒得到什麼，那我們還是來 build 一下 Flame 的範例程式吧。 這總不會有問題。

下載並編譯 flame example 專案

% git clone https://github.com/flame-engine/flame.git

Cloning into 'flame'...
remote: Enumerating objects: 447, done.
remote: Counting objects: 100% (447/447), done.
remote: Compressing objects: 100% (279/279), done.
remote: Total 15089 (delta 240), reused 265 (delta 146), pack-reused 14642
Receiving objects: 100% (15089/15089), 26.80 MiB | 4.15 MiB/s, done.
Resolving deltas: 100% (11484/11484), done.

% cd flame/example
% ls

README.md
lib
pubspec.yaml

可以看到他只有 lib 目錄而已，前面的文章已經有介紹要怎麼辦了，我們先幫他把專案建立起來吧。

% flutter create .

Recreating project ....
ios/Runner.xcworkspace/contents.xcworkspacedata (created)
...中間省略
Running "flutter pub get" in example... 1.8s

Wrote 66 files.

% flutter run -d all

ok, 編譯成功了，可以看到一個白色的方塊在旋轉。哈

doc/examples/spritesheet

那我們在試一下其他的範例，更多的範例是放在 doc 目錄裡，我們再試一下 spritesheet 的範例。

% cd ..
% cd doc/examples/spritesheet 
% flutter create .
% flutter run -d all

ok, 編譯成功了，

可以看到右邊的機器人與幽靈在跑步。哈

這是完整的範例列表，有空我們再多練習幾個吧。

spritesheet 程式架構研究

Main.dart : Dashbook

今天就先這樣吧。

好，第16天，寫完。

參考:
flame example
jap.alekhin.io
flame 0.27.0
见微知著，Flutter在游戏开发的表现及跨平台带来的优势
2D Casual Mobile Game Tutorial – Step by Step with Flame and Flutter (Part 1 of 5)
Flutter 游戏开发(flame) 00 Flame介绍