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

更新於 發佈於 閱讀時間約 4 分鐘
raw-image

前言

前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板,在這一篇文章中,會開始進行遊戲的設計與製作,目標是上架到 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

wireframe

遊戲模板架構

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

Landing Page

Landing Page

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

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

依賴的套件

依賴的套件

app 圖片、字體

app 圖片、字體

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

關卡選擇頁

關卡選擇頁

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

遊戲頁

遊戲頁

遊戲結束

遊戲結束

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

設定頁

設定頁

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

結語

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

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




留言
avatar-img
留言分享你的想法!
avatar-img
Johnson Huang的沙龍
7會員
10內容數
Johnson Huang的沙龍的其他內容
2025/01/09
這是一款休閒的記憶配對翻牌遊戲,遊戲總共超過 1000 個關卡等你來挑戰,玩家可以選擇各種不同的主題,例如可愛的動物、繽紛的顏色、超鬧的古人、路邊的樹木與草叢,不只是挑戰你的記憶力還要多一點觀察力才能闖關成功...
Thumbnail
2025/01/09
這是一款休閒的記憶配對翻牌遊戲,遊戲總共超過 1000 個關卡等你來挑戰,玩家可以選擇各種不同的主題,例如可愛的動物、繽紛的顏色、超鬧的古人、路邊的樹木與草叢,不只是挑戰你的記憶力還要多一點觀察力才能闖關成功...
Thumbnail
2024/08/28
大家好,要來介紹一款新開發的翻牌遊戲,可以訓練玩家的反應與記憶力。簡單易懂的遊戲規則以及有趣的題組設計。目前遊戲已經上線,歡迎玩家一起來挑戰!遊戲包含無限接關和排行榜機制,讓玩家能與朋友一較高下。下篇文章將探討遊戲開發技術及購買網域的流程。
Thumbnail
2024/08/28
大家好,要來介紹一款新開發的翻牌遊戲,可以訓練玩家的反應與記憶力。簡單易懂的遊戲規則以及有趣的題組設計。目前遊戲已經上線,歡迎玩家一起來挑戰!遊戲包含無限接關和排行榜機制,讓玩家能與朋友一較高下。下篇文章將探討遊戲開發技術及購買網域的流程。
Thumbnail
2024/08/18
文章介紹了遊戲的核心事件,包括選牌、出牌和計算分數的邏輯與實作。首先介紹遊戲開始時的選牌事件,接著解析出牌事件及算式計算的過程,最後詳述分數計算的邏輯。
Thumbnail
2024/08/18
文章介紹了遊戲的核心事件,包括選牌、出牌和計算分數的邏輯與實作。首先介紹遊戲開始時的選牌事件,接著解析出牌事件及算式計算的過程,最後詳述分數計算的邏輯。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
這篇文章將會延續(上)、(中)的內容,談談遊戲開發測試原型的製作與驗證。
Thumbnail
這篇文章將會延續(上)、(中)的內容,談談遊戲開發測試原型的製作與驗證。
Thumbnail
在數創整合與作品集結束以後加速完工的專題作品,這篇文章將會講述遊戲類型概述與技術層面的成長。
Thumbnail
在數創整合與作品集結束以後加速完工的專題作品,這篇文章將會講述遊戲類型概述與技術層面的成長。
Thumbnail
#遊戲的定義 符合下面這幾項就可以稱為遊戲。 1.玩家遵守相同的規則 2.有條件限制,用費力的方式完成條件 3.有勝負,且有結束方式 4.玩家主動參與
Thumbnail
#遊戲的定義 符合下面這幾項就可以稱為遊戲。 1.玩家遵守相同的規則 2.有條件限制,用費力的方式完成條件 3.有勝負,且有結束方式 4.玩家主動參與
Thumbnail
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
Thumbnail
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
Thumbnail
這篇文章將會講述遊戲內與遊戲外的規則是如何誕生,並且如何應用進遊戲設計的領域。
Thumbnail
這篇文章將會講述遊戲內與遊戲外的規則是如何誕生,並且如何應用進遊戲設計的領域。
Thumbnail
這篇文章將會講述遊戲企劃中,如何開始設計一款遊戲的第一步——一頁企劃文檔。
Thumbnail
這篇文章將會講述遊戲企劃中,如何開始設計一款遊戲的第一步——一頁企劃文檔。
Thumbnail
有些風景需要親自經歷後才能了解箇中滋味,這初衷,也可能讓您在20幾年後的今天,被現實打擊到身心疲憊時為了鼓舞自己大聲吶喊莫忘初衷後可以立即回憶起的經歷。 以上故事純屬虛構,如有雷同實屬巧合,以下開始本次教學。 依照慣例我們一樣先來看看完成後的的遊玩影片: A、提案企劃 一句話形容這個遊戲 遊戲類型
Thumbnail
有些風景需要親自經歷後才能了解箇中滋味,這初衷,也可能讓您在20幾年後的今天,被現實打擊到身心疲憊時為了鼓舞自己大聲吶喊莫忘初衷後可以立即回憶起的經歷。 以上故事純屬虛構,如有雷同實屬巧合,以下開始本次教學。 依照慣例我們一樣先來看看完成後的的遊玩影片: A、提案企劃 一句話形容這個遊戲 遊戲類型
Thumbnail
這款Minecraft桌遊在年前發售沒多久,便偶然和朋朋在三創桌遊展閒逛的時候由朋朋購入。 鑒於自己不是Minecraft的粉絲,所以那時候也沒有入手。
Thumbnail
這款Minecraft桌遊在年前發售沒多久,便偶然和朋朋在三創桌遊展閒逛的時候由朋朋購入。 鑒於自己不是Minecraft的粉絲,所以那時候也沒有入手。
Thumbnail
這一篇要介紹的是,從啟動遊戲,到Tutorial新手村的攻略。
Thumbnail
這一篇要介紹的是,從啟動遊戲,到Tutorial新手村的攻略。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News