用uFrame寫Flappy Bird（二）遊戲結構

廢話

來到第二回，開始跟大家做遊戲了。首先申報一下，希望想用uFrame 1.5 寫 Flappy Bird 的朋友可以先跟上 youtube 的教學片，並視本文為輔助。因為本日誌的主要目的是幫助小弟自己記錄學習過程（有夠自私XD），不會一步步跟大家做，內容可能不完整，而且小弟也是 Unity 的新手，如果當中有甚麽不對請多多包涵及請告訴小弟，謝謝

前言

這回先不會提及代碼，但是會簡單講述我們在uFrame環境中看到的所有東東，就是它們告訴我們遊戲的結構，而且透過uFrame我們可以用圖像來表達一下。首先我就先介紹它們的名字：
－GameManager
－SceneManager
－SubSystem
－Element
－View
－State

那Flappy Bird我想大家都知道是怎樣玩吧？不知道的話可以看看 youtube 的教學片，基本上是一樣的。

uFrame寫Flappy Brid的教學片: https://www.youtube.com/watch?v=oo8sRgCa6hk&list=PLkyxC3Co3Q38r0ZWow9Jw1Xd7Wj0xbdnd&index=1

遊戲結構

首先在uFrame的環境是空空如也(那當然XD), 這裏我們先稱為Root, 在Root的環境我們先加入一個SceneManager，就叫AngryFlapperManager吧；然後再加入一個SubSystem，就叫Game吧，然後把Game連上AngryFlapperManager，如下圖：

那SceneManager和SubSystem是甚麽呢？

SceneManager 顧名思義就是管理(某一)場景，每一次你載入一個場景，uFrame會確保所有東西已經載入和可以正確地運作（當然首先要你代碼正確），另外SceneManager會提供場景轉換，AngryFlapperManager下的Transitions，我加了GoToMenu，這個之後我再作講解
（想了解多點SceneManager可以來這裏：https://github.com/InvertGames/uFrame/wiki/Scene-Managers）

SubSystem就是子系統，在設計遊戲時，你就可以透過子系統把不同代碼分類，例如：AimingSystem, AISystem, MovementSystem等（大家猜到是甚麽吧），這款遊戲比較簡單，我們建一個SubSystem就可以了。每個遊戲玩家都有一個屬於自己的instance，裏面儲存玩家各種數據和狀態，所以我們之後記得把AngryFlapperGame加入到SubSystem的instances裏(現在還未建立，不能加的不用擔心)
（想了解多點SubSystems可以來這裏：https://github.com/InvertGames/uFrame/wiki/Subsystems）



Element又是甚麽呢？

然後我們double-click Game，進了下一個uFrame環境又變回空空如也，我們首先加入就在這裏加入三個Elements，它們這是遊戲的三個重要元素。

每一個Element都會有Properties, Collections 和 Commands

Properties: 就是之前提及ViewModel，物件的數據，我們先要在這兒定義它們的類型和名稱，例如分數 -> int Score

Collections: 我先簡單說這是你遊戲中會複製(instantiate)來用的物件吧，這遊戲的話就是萬惡的管子

Commands: 這跟之前提及的Controller概念有關係的，你可以把它看成可以在下面建立不同Trigger而運行不同遊戲邏輯，例如AngryFlappersGame中在Gameover下會執行甚麽指命，Play下又執行甚麼等，下回可以會講解ufFrame環境下的實際操作

View & State

然後我們分別double-click 上面這三個Elements, 透過Add View和 Add Enum建立當中的View和State，如下圖(可按圖放大）

在View這個視框下，我們可以發現有一項叫Binding的東東，簡言之Binding負責遊戲中數據/狀態的改變對遊戲中物件視覺/聽覺的影響，我理解為負責Controller和View之間的交流

例如遊戲的狀態由Playing -> GameOver, 那就要顯示GameOver的各種UI和分數

State

我們可以用Add Enum建立State, State就是該元件的狀態，例如遊戲裏則是在選單畫面(Menu)，遊戲中(Playing)和結束(GameOver)，小小鳥則是生與死，這是方便在遊戲中更換狀態進行不同指令。

MVVM + Controller就這樣出現了！
不知大家還記得下面這圖嗎？大家可以跟上面建立的東東比較一下，猜猜AngryFlappersGame,  Bird跟Pipe它們在想幹甚麽。

好啦，我先簡單講一下：
AngryFlappersGame -
View: 遊戲的背景，顯示分數，選單的UI
ViewModel: 儲存遊戲需要的數據，例如分數，移動速度等
Controller: 遊戲的邏輯/規則和狀態

Bird（就是你，你是一隻小小鳥）-
View: 你的樣子
ViewModel: 你的數據，例如你死了沒，射飛得多高
Controller: 你的邏輯，這裏很簡單，就是你中柱沒有

Pipe（想避開的該死管子）-
View: 管子的樣子，做出來位置
ViewModel: 沒有
Controller管子的邏輯，就是你過了管子會加數和管子離開螢幕就Destroy它

連繫遊戲場景
然後我們就要把uFrame建立的東東和遊戲場景連繫起來

首先我們回來uFrame的Root，就是有AngryFlapperManager（SceneManager）和Game（SubSystem）的畫面，在右click AngryFlapperManager > Create Scene

登登登登！然後你就會發現Hierarchy中出現了_GameManager和_SceneManger出現了

GameManager是在uFrame裏最長生命週期(life-cycle)的類別(class)，它主要負責SceneManager的始初設定，而且它有用Unity裏的DontDestroyOnLoad(這個小弟有機會再講)，沒有它可不行喔

要注意把_SceneManager放在_GameManager的Start！（在inspector裏）

剛才Add View後，我們需要連結場景的物件上，我們回到uFrame裏有建立View視框的元件：右click視框 > Add to > Scene (作為新物件加入到場景) ／ Selection(已在Hierarchy選取相關物件) ，然後在Hierarchy裏有關物件右面出現了紫色的View(大家可以先猜猜甚麼代表甚麼XD)

小結

這回先這樣，下回開始會以AngryFlapperGame, Bird和Pipe 一共三章詳細講述它們的View, ViewModel和Controller（畢竟這是uFrame的重點）在幹甚麽。當中可能包括一些教學片沒有提及的功能和使用uFrame 1.5的修改部分。

uFrame Wifi: https://github.com/InvertGames/uFrame/wiki

uFrame 1.5的教學片系列: https://www.youtube.com/watch?v=KiTe5nyNXfQ&list=PLkyxC3Co3Q3_Y4Bne2XYxVlOlbnf29OLu

前作：用uFrame寫Flappy Bird（一）簡介