Flutter 遊戲開發，不只是程式：如何從有想法到實現一款遊戲(二)
前言
前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板，在這一篇文章中，會開始進行遊戲的設計與製作，目標是上架到 Google Play 與 App Store 平台上，讓我們開始吧！
遊戲設計
我要做的遊戲是關於數學簡單運算並加一點運氣的小遊戲，大家是否有玩過扭蛋、盒玩、一番賞、抽獎等等，我們無法事先知道會拿到什麼獎品，所以充滿了隨機性，這種未知性的感覺讓我們產生很大的樂趣，遊戲規則很簡單，目標是增加總積分，每位玩家起始積分為 100，總共為三個步驟：
- 第一步的主題是數學符號，畫面上會出現九個盒子，玩家可以隨機選至少一個最多三個的盒子，然後進行到下一步。
- 第二步的主題是數字，畫面上一樣會出現九個盒子，玩家須選擇前一步所選的盒子數量的盒子，有點繞口XD，例如：第一步選三個，那第二步也一定要選三個，接下來到最後一步。
- 第三步的主題是組合，根據前兩步所選的盒子進行算式組合，組合出合法的算式並得出結果。
製作企劃書
要製作一款遊戲我習慣先寫企劃書，主要大綱為：
- 遊戲名稱
- 需要與遊戲有所關聯性，會與遊戲 Logo 一同設計。 - 目標族群
- 上班族？學生？小朋友？ - 遊戲簡述
- 簡單描述遊戲內容或故事。 - 遊戲玩法以及規則
- 列出所有規則及玩法。 - 遊戲頁面
- 列出所有頁面，包含：Landing Page、主頁面、遊戲頁、設定頁。 - 開發流程
- 依照頁面或功能進行，我會先以遊戲的核心商業邏輯進行開發，先把遊戲主要玩法流程開發完，再慢慢補上其他功能。 - 營利模式
- 遊戲廣告模組應用與開發。
- 是要做成 Banner 還是彈窗。 - 其他
畫面設計(UI/UX)
接下來就是畫出遊戲各個頁面的 wireframe，我習慣使用 figma 設計，市面上還有很多工具可以用，例如：Adobe XD、Sketch，可以選一個自己喜歡的使用。
以下為主要頁面的設計：
遊戲模板架構
首先我們把遊戲模板跑起來，你會看到一個簡易的 Landing Page，而main.dart 為主要的入口點，在這個檔案會注入所有的服務，包含：廣告模組、音樂模組、firebase 系統崩潰報告，在 lib/src 下會看到預設寫好的模組。
在 Flutter 中，pubspec.yaml 是一個重要的配置文件，它是管理 Flutter 專案所需的依賴項目和資源的方式之一。
在 pubspec.yaml 文件中，你可以定義你的應用程式所依賴的套件、圖像、字體、應用程式等等，Flutter 將使用 pub 工具來自動下載、編譯和管理這些依賴項目。該文件還可以指定應用程序的版號、描述、作者、網址等基本資訊。類似於 node.js npm 的 package.json。
接下來點擊開始遊戲會看到選擇關卡頁面，在這裡我們可以設計各種關卡列表給玩家選擇。
點擊 Level 1 關卡並開始遊戲，遊戲玩法非常簡單只要在 slider 上拉超過 5% 就過關XD。
回到 Landing Page 我們點選 Settings 會進入到遊戲設定的頁面，在這裡可以設定玩家名稱、音樂開關或是語言等等。
玩家資料都會存放在 PlayerProgress 資料夾下，透過 Provider 注入到 app ，底下的元件都可以呼叫並使用。
結語
企劃書跟遊戲畫面設計完後，終於要開始來寫遊戲啦，相信我在開發中企劃書跟遊戲畫面一定會反覆修改，也有可能打掉重寫，光是玩法我就改了兩三次，下一篇會開發主要核心邏輯的部分，其實我已經開始寫一部份了XD。
遊戲專案放在下方連結，謝謝你看到這裡 ^^
7會員
10內容數
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
在本文中，我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件，使用者可以輕鬆地輸入文字，廣泛應用於各類應用程式中，如表單、搜尋框和聊天介面等。
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片，以及如何載入網路圖片的完整過程。透過這篇文章，您將學會如何有效地管理圖片資源，並在應用程式中正確顯示圖片，提升您的 Flutter 開發技能。
這篇文章深入探討了 Flutter 框架中的 ElevatedButton（漂浮按鈕）元件。文章介紹了其基本用法，包括必填參數 onPressed 和 child 的解析，並示範了如何使用匿名函數來處理按鈕點擊事件。此外，還說明了如何設定按鈕的顏色和形狀，並提供了完整的範例程式碼。
在本篇教學中，我們介紹了 Flutter 中的 Row 和 Column 佈局容器，並探討了它們的基本用法及進階技巧。此外，我們還提到如何使用快捷鍵來格式化程式碼，以提升可讀性。
本文深入探討 Flutter 中的 Container 元件，這是一個多功能的包裝 Widget，能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距（margin）以及使用 BoxDecoration 來自訂樣式。
一個獨立開發者，立志打造顛覆性的遊戲體驗，在開拓全新玩法的道路上，砥礪前行。
大家好，我正在開發一款獨立遊戲，以魔法戰鬥為主題，如果想要嘗試遊戲的demo，歡迎到下方連結處，加入我的Discord群組。
魔法與戰鬥的世界---開發中的遊戲
這款遊戲發生在一個飄浮於雲端之上的世界，
這篇內容，將教你如何開啟新的GameMaker專案，並調整畫面佈局。也會講解，為何建議用英文語系，來進行遊戲開發。
這篇內容，簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。
獨立遊戲開發，很多時是一個想法和熱情冒出來後，就叫人衝到電腦前想快點把成品弄完……就算做不了完整版，至少也想有個Demo。
既然想「快點」，那還要不要「花額外時間」去寫企劃書呢？
在處理這個問題之前，要先理解的是，這句話裡面至少有兩種情況。
其一：團隊裡只有一個企劃，所有事情都由一人主導
# 簡介
身為一位專注於 Vue.js 的前端開發者，這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧！
## 第一次嘗試
### 第一步：創建一個 Flutter 應用
首先，通過運行以下命令來創建一個新的 Flutter 項目：
```sh
flutter
在本文中，我們將介紹 TextField 文字輸入框元件及其基本用法。TextField 是一個關鍵的元件，使用者可以輕鬆地輸入文字，廣泛應用於各類應用程式中，如表單、搜尋框和聊天介面等。
本篇文章將深入探討如何在 Flutter 中使用 Image 圖片元件。我們將涵蓋從資源管理到顯示本地資料夾中的圖片，以及如何載入網路圖片的完整過程。透過這篇文章，您將學會如何有效地管理圖片資源，並在應用程式中正確顯示圖片，提升您的 Flutter 開發技能。
這篇文章深入探討了 Flutter 框架中的 ElevatedButton（漂浮按鈕）元件。文章介紹了其基本用法，包括必填參數 onPressed 和 child 的解析，並示範了如何使用匿名函數來處理按鈕點擊事件。此外，還說明了如何設定按鈕的顏色和形狀，並提供了完整的範例程式碼。
在本篇教學中，我們介紹了 Flutter 中的 Row 和 Column 佈局容器，並探討了它們的基本用法及進階技巧。此外，我們還提到如何使用快捷鍵來格式化程式碼，以提升可讀性。
本文深入探討 Flutter 中的 Container 元件，這是一個多功能的包裝 Widget，能夠有效管理和裝飾其他 Widget。文章將詳細說明如何調整 Container 的大小、設置外部間距（margin）以及使用 BoxDecoration 來自訂樣式。
一個獨立開發者，立志打造顛覆性的遊戲體驗，在開拓全新玩法的道路上，砥礪前行。
大家好，我正在開發一款獨立遊戲，以魔法戰鬥為主題，如果想要嘗試遊戲的demo，歡迎到下方連結處，加入我的Discord群組。
魔法與戰鬥的世界---開發中的遊戲
這款遊戲發生在一個飄浮於雲端之上的世界，
這篇內容，將教你如何開啟新的GameMaker專案，並調整畫面佈局。也會講解，為何建議用英文語系，來進行遊戲開發。
這篇內容，簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。
獨立遊戲開發，很多時是一個想法和熱情冒出來後，就叫人衝到電腦前想快點把成品弄完……就算做不了完整版，至少也想有個Demo。
既然想「快點」，那還要不要「花額外時間」去寫企劃書呢？
在處理這個問題之前，要先理解的是，這句話裡面至少有兩種情況。
其一：團隊裡只有一個企劃，所有事情都由一人主導
# 簡介
身為一位專注於 Vue.js 的前端開發者，這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧！
## 第一次嘗試
### 第一步：創建一個 Flutter 應用
首先，通過運行以下命令來創建一個新的 Flutter 項目：
```sh
flutter