Flutter 遊戲開發，不只是程式：如何從有想法到實現一款遊戲(二)

前言

前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板，在這一篇文章中，會開始進行遊戲的設計與製作，目標是上架到 Google Play 與 App Store 平台上，讓我們開始吧！

遊戲設計

我要做的遊戲是關於數學簡單運算並加一點運氣的小遊戲，大家是否有玩過扭蛋、盒玩、一番賞、抽獎等等，我們無法事先知道會拿到什麼獎品，所以充滿了隨機性，這種未知性的感覺讓我們產生很大的樂趣，遊戲規則很簡單，目標是增加總積分，每位玩家起始積分為 100，總共為三個步驟：

• 第一步的主題是數學符號，畫面上會出現九個盒子，玩家可以隨機選至少一個最多三個的盒子，然後進行到下一步。
• 第二步的主題是數字，畫面上一樣會出現九個盒子，玩家須選擇前一步所選的盒子數量的盒子，有點繞口XD，例如：第一步選三個，那第二步也一定要選三個，接下來到最後一步。
• 第三步的主題是組合，根據前兩步所選的盒子進行算式組合，組合出合法的算式並得出結果。

製作企劃書

要製作一款遊戲我習慣先寫企劃書，主要大綱為：

1. 遊戲名稱
   - 需要與遊戲有所關聯性，會與遊戲 Logo 一同設計。
2. 目標族群
   - 上班族？學生？小朋友？
3. 遊戲簡述
   - 簡單描述遊戲內容或故事。
4. 遊戲玩法以及規則
   - 列出所有規則及玩法。
5. 遊戲頁面
   - 列出所有頁面，包含：Landing Page、主頁面、遊戲頁、設定頁。
6. 開發流程
   - 依照頁面或功能進行，我會先以遊戲的核心商業邏輯進行開發，先把遊戲主要玩法流程開發完，再慢慢補上其他功能。
7. 營利模式
   - 遊戲廣告模組應用與開發。
   - 是要做成 Banner 還是彈窗。
8. 其他

畫面設計(UI/UX)

接下來就是畫出遊戲各個頁面的 wireframe，我習慣使用 figma 設計，市面上還有很多工具可以用，例如：Adobe XD、Sketch，可以選一個自己喜歡的使用。

以下為主要頁面的設計：

wireframe

遊戲模板架構

首先我們把遊戲模板跑起來，你會看到一個簡易的 Landing Page，而main.dart 為主要的入口點，在這個檔案會注入所有的服務，包含：廣告模組、音樂模組、firebase 系統崩潰報告，在 lib/src 下會看到預設寫好的模組。

Landing Page

在 Flutter 中，pubspec.yaml 是一個重要的配置文件，它是管理 Flutter 專案所需的依賴項目和資源的方式之一。

在 pubspec.yaml 文件中，你可以定義你的應用程式所依賴的套件、圖像、字體、應用程式等等，Flutter 將使用 pub 工具來自動下載、編譯和管理這些依賴項目。該文件還可以指定應用程序的版號、描述、作者、網址等基本資訊。類似於 node.js npm 的 package.json。

依賴的套件

app 圖片、字體

接下來點擊開始遊戲會看到選擇關卡頁面，在這裡我們可以設計各種關卡列表給玩家選擇。

關卡選擇頁

點擊 Level 1 關卡並開始遊戲，遊戲玩法非常簡單只要在 slider 上拉超過 5% 就過關XD。

遊戲頁

遊戲結束

回到 Landing Page 我們點選 Settings 會進入到遊戲設定的頁面，在這裡可以設定玩家名稱、音樂開關或是語言等等。

設定頁

玩家資料都會存放在 PlayerProgress 資料夾下，透過 Provider 注入到 app ，底下的元件都可以呼叫並使用。

結語

企劃書跟遊戲畫面設計完後，終於要開始來寫遊戲啦，相信我在開發中企劃書跟遊戲畫面一定會反覆修改，也有可能打掉重寫，光是玩法我就改了兩三次，下一篇會開發主要核心邏輯的部分，其實我已經開始寫一部份了XD。

遊戲專案放在下方連結，謝謝你看到這裡 ^^