Flutter 遊戲開發，不只是程式：如何從有想法到實現一款遊戲(一)
閱讀時間約 4 分鐘
前言
當今時代，遊戲已經不再只是單純的娛樂，更成為人們生活中不可或缺的一部分。隨著技術的發展，遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架，正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題，從最基礎的開始，帶領讀者一步步學習如何使用 Flutter 開發遊戲。不需要太多的程式基礎，只需要一份對遊戲的熱愛，就可以在本系列文章中學習到足夠的知識，讓自己打造出自己的第一款遊戲。讓我們一起開始這段有趣的學習之旅吧！
我的背景
我是一個熱愛玩遊戲想一些鬼點子的人，目前擔任前端工程師，負責網頁的製作與設計，在上班的閒暇時間時不時會腦動大開，把想到的遊戲點子寫在手機記事本上，遊戲發想來源都來自於生活上，例如，走在路上看到路上的車子呼嘯而過時，我就在想要不要來寫個動態視力大挑戰的遊戲XD，看到新聞說台灣是一個行人地獄時，就來寫個扮演台灣行人並走在路上去指定地點的遊戲等等，雖然想了一堆但都還沒去實現，在決定寫 flutter 之前，我開發了一個線上桌遊多人連線網站，寫完並上線後，推薦給我的同事或朋友們玩玩，他們都有一致的想法「怎麼手機版體驗這麼差，畫面這麼醜XD，bug 一堆」，這時候我才領悟到現在大家比較少會去玩網頁遊戲了，以前的 Flash 和 Facebook 小遊戲的時代已經過了QQ。
之後我開始想要寫手機遊戲，買了 Unity 課程看了一遍又一遍，本身的技能樹都點在了前端，跳去寫 C#(Unity 用的開發語言) 真的是不習慣，開發成本太高了，在某天偶然聽到同事的朋友在用 flutter 寫專題，看了他的語法覺得很新鮮，又是 google 爸爸開發維護，又是跨平台，寫一套上架到兩個平台，又跟 React 有點像(排除 React Native 想學學新東西XD) 就決定是你了，之後就開啟了學習 flutter 之旅。
啟航準備
進入正題，工欲善其事，必先利其器，首先需要準備開發工具以及開發環境：
- 下載 flutter
- 下載 VScode / Android Studio 也可以，看個人喜好
- 測試你的模擬器跑不跑得起來
- 開啟一個專案改改看字，看有沒有 hot reload
- 詳細環境設定流程可以看官方教學
遊戲模板
這是官方提供的遊戲開發模板，他提供了基礎的功能：
- sound - 音效模組
- music - 音樂模組
- main menu screen - 主畫面有先寫好
- settings - 遊戲設定的頁面
- ads (AdMob) - 遊戲廣告模組
- in-app purchases - 在 app 裡購買商品的模組
- games services - Game Center & Google Play Games Services
- crash reporting - Firebase Crashlytics
這個範例可以載下來後跑起來試試看，他是一個簡單的遊戲，提供一個完整的專案架構及功能，包含轉場動畫、Landing Page、關卡設計，讓你專心在遊戲開發邏輯上，是個很方便的腳手架。
結語
開發遊戲是一個需要極大的熱誠的事情，你會常常刪了又改，改了又刪，怎麼樣都不滿意，非常容易會放棄，不過我很享受開發中了樂趣，有時候一個小邏輯 bug 就可以卡了我一個晚上，當你到了該睡覺的時間卻還沒解出來，那一晚絕對是難以入眠，又或是你躺在床上正要睡著的那一刻，突然想到了新點子，又爬起來拿著筆記本記下來，有太多太多好玩的事可以分享。
謝謝你看到最後，未來會慢慢地更新我開發遊戲的辛酸血淚過程並把它紀錄下來，對了這是我上架的桌遊網站(不是可疑網站哈哈)，非常的陽春XD 目前電腦版的體驗會最好，這可是歷時兩年的開發呢，可以到上面玩玩 ^^
以下為專案連結：
7會員
9內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
Flutter is a powerful, open-source UI software development kit created by Google.
解析成List
List items=json.decode(jsonStr);
print(items[0]["your_key"]);
解析成Map
Map<String, dynamic> user = json.decode(json);
print('${user['your_k
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。
連線
final channel = IOWebSocketChannel.connect('wss://echo.websocket.events');
接收
StreamBui
Dio是一個Dart Http請求庫，支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。
加入
dependencies:
dio: ^x.x.x #请使用pub上的最新版本
使用
GET
Response response;
配置
idleTimeout：在httpClient請求結束後，會繼續保持連線，直到超過idleTimeout值才會關閉連接。
connectionTimeout：和伺服器建立連線逾時，如果超過connectionTimeout值則會拋出SocketException異常。
maxConnec
Introduction
Flutter is a powerful framework for developing the app for different platforms without redevelopment.
main.dart
route
routing map
msix
After comparing different methods, I think the most stable way is using msix to package the windows desktop app.
Installation
download
因為自己最近迷上了釣魚，但卻常常苦於不知道該去哪裡釣魚才能安全又有魚，因此想做個讓大家可以分享自己釣點以及釣況的App，讓大家都能找到適合自己的地方釣魚！
此篇是在介紹專案基本架構以及獲取使用者的地理位置。
如果你是剛入門Flutter的工程師，可以參考這篇文章，我會告訴大家自己常用的套件以及如何規劃檔案的分類！
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
Flutter is a powerful, open-source UI software development kit created by Google.
解析成List
List items=json.decode(jsonStr);
print(items[0]["your_key"]);
解析成Map
Map<String, dynamic> user = json.decode(json);
print('${user['your_k
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。
連線
final channel = IOWebSocketChannel.connect('wss://echo.websocket.events');
接收
StreamBui
Dio是一個Dart Http請求庫，支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。
加入
dependencies:
dio: ^x.x.x #请使用pub上的最新版本
使用
GET
Response response;
配置
idleTimeout：在httpClient請求結束後，會繼續保持連線，直到超過idleTimeout值才會關閉連接。
connectionTimeout：和伺服器建立連線逾時，如果超過connectionTimeout值則會拋出SocketException異常。
maxConnec
Introduction
Flutter is a powerful framework for developing the app for different platforms without redevelopment.
main.dart
route
routing map
msix
After comparing different methods, I think the most stable way is using msix to package the windows desktop app.
Installation
download
因為自己最近迷上了釣魚，但卻常常苦於不知道該去哪裡釣魚才能安全又有魚，因此想做個讓大家可以分享自己釣點以及釣況的App，讓大家都能找到適合自己的地方釣魚！
此篇是在介紹專案基本架構以及獲取使用者的地理位置。
如果你是剛入門Flutter的工程師，可以參考這篇文章，我會告訴大家自己常用的套件以及如何規劃檔案的分類！