狐仙的遊戲茶會: 小狐仙Unity教室五、Fungus事件觸發

這次教學要學習蘑菇(Fungus)的事件，蘑菇的流程圖基本上是以特定事件來觸發後，才會去執行流程圖的指令，請各位小貓咪們先開一個新場景來實驗此次教學吧！

蘑菇流程視窗

使用Fungus的流程需要開啟專屬於他的視窗，在上方Tools裡面的Fungus內Flowchart Window。

各位小貓咪們點出來以後，依照自己喜好放在畫面上吧。

蘑菇常用工具介紹

紅框是最常用到的Flowchart流程圖，有流程圖才能使用指令互動。

金色框是能客製化自己的樣式工具，裡面有立繪人物、舞台製作、對話框製作等等，客製化以後可以取代蘑菇本身內建預設樣式。

藍色框是與流程圖互動的工具，裡面有能被點擊的圖片、也有能被拖移的圖片、還有當作目標的圖片等等。

創建流程圖

首先我們創建一個流程圖，紅框就是我們創建的流程圖，藍線是此流程圖觸發條件，黃框是如果此流程圖觸發後，會執行的指令。

事件Game Started

此事件即是遊戲一開始又會運行此流程，適合初始化數值與配置場景等，接下來我們寫個指令感受一下Game Started。

指令Say

請按照上圖所示步驟。

並且在Narrative(敘述)->Say，新增此指令。

新增以後會看到Say所在指令是綠色，表示目前我們檢視的指令是Say，下方是此行指令的參數。

紅框是能選擇自訂腳色，各位小貓咪們可以自訂腳色圖來Say。

藍框是說了那些內容，金框可以點開來看到他支援那些對話的指令。

金框Tag Help點開來裡面內容：
　{b} Bold Text {/b}
    {i} Italic Text {/i}
    {color=red} Color Text (color){/color}
    {size=30} Text size {/size}

    {s}, {s=60} Writing speed (chars per sec){/s}
    {w}, {w=0.5} Wait (seconds)
    {wi} Wait for input
    {wc} Wait for input and clear
    {wp}, {wp=0.5} Wait on punctuation (seconds){/wp}
    {c} Clear
    {x} Exit, advance to the next command without waiting for input

    {vpunch=10,0.5} Vertically punch screen (intensity,time)
    {hpunch=10,0.5} Horizontally punch screen (intensity,time)
    {punch=10,0.5} Punch screen (intensity,time)
    {flash=0.5} Flash screen (duration)

    {audio=AudioObjectName} Play Audio Once
    {audioloop=AudioObjectName} Play Audio Loop
    {audiopause=AudioObjectName} Pause Audio
    {audiostop=AudioObjectName} Stop Audio

    {m=MessageName} Broadcast message
    {$VarName} Substitute variable

粉紅框裡面分別是Voice Over Clip對話框配音、Show Always總是顯示、Fade When Done對話框按了以後是否隱藏、Wait For Click等待點擊、Stop Voiceiver當文字顯示完成的話就不在撥放配音、Set Say Dialog自訂對話框樣式。

接著我們試著運行看看吧！

沒錯一執行遊戲他就自動撥放了，因為是Game Started事件觸發！

事件Button Click

接著在同個流程圖換個觸發事件看看，這次換成按鈕點擊來觸發事件。

選擇以後會發現，多了一個參數，需要我們放入使哪個按鈕會觸發，目前我們沒有按鈕，所以要在階層圖按右鍵新增。

新增好按鈕以後，請把按鈕拖移到該參數上～

接著我們執行看看！

會發現並未顯示對話框，這時候小貓咪們點擊看看按紐！

點擊以後就會出現對話框囉！

事件End Edit

即是與輸入框再輸入結束以後觸發～一樣他需要知道是哪一個輸入框來觸發！

新增好輸入框並且拖移上去～

取得輸入框文字ｘ流程圖變數ｘ對話內容使用變數

在上一個步驟我們有了輸入框，並且觸發事件是使用當輸入框文字完成時執行，但是直接這樣執行其實是沒有意義的，因為我們需要取得輸入框內容來去做處理，接下來我們來做輸入名字，並且在對話框顯示"Hi, 玩家輸入的名字"吧！

當使用者輸入完成後，事件觸發流程～

第一步我們需要取得輸入框的文字！所以指令那邊尋找UI->GETTEXT。

但是新增以後他會在Say之後，我們把此指令拖移到Say上面吧！

點選已經新增好的GetTEXT會發現，他後面有驚嘆號！那是因為此指令並未完成，我們可以選取他，讓他變成綠色狀態，下面會出現詳細內容。

他需要兩個參數(金框)，一個是從哪一個地方獲取文字，我們需要再從輸入框裡面子物件TEXT裡面獲得，所以把他拖移過去(紅線條)，第二個參數是取得輸入框文字時候要儲存在哪，所以我們現在點選粉紅框來新增變數String(字串儲存文字用)。

取得輸入框文字ｘ流程圖變數ｘ對話內容使用變數

紅框是變數名稱，小貓咪們可以自行命名，但是要記好變數名字等等需要使用，金框是預設內容，目前是空白，粉紅框是決定要不要公開給其他流程圖看到，預設是Private不公開，如果有需要可以切換成Public，最後我們點選藍框，選擇新增的變數吧！

GetText最後完成圖

取得輸入框文字ｘ流程圖變數ｘ對話內容使用變數

在上面步驟已經取得了變數，並且儲存起來，現在來試著在對話內容裡使用吧！

還記得最上面Say裡面的Tag Help嗎？我們需要使用裡面的 {$VarName}。

我們只要照著他的格式打，把VarName換成我們的變數就好囉！

最後我們執行看看吧！

如果覺得顯示太小可以在左上角調整，最後結果是輸入Jack以後，對話內容也顯示我們輸入結果囉！

事件圖片點擊

這次我們新增一個新的Flowchart吧，並把原本舊的Flowchart改別的名稱。

每個New Block在未決定事件時候都是金黃色，並且流程圖內可以再新增許多New Block(用紅線)。

接著選擇圖片點擊事件吧！

並且我們新增需要被點擊的圖片工具，請在上方Tools新增，記得拖移過去，一樣我們使用Say指令來檢視成果。

如果小貓咪們想替換掉圖片可以，先選擇紅框，然後階層圖的金框點兩下該物件會看到蘑菇在中心被我們檢視，右邊檢視列表的藍色框就是我們可以替換圖片位置，粉紅框則是圖層顯示順序，當兩張圖片重疊時候，該數值會決定繪圖順序，數字越大越靠近攝影機！
(圖片從電腦匯入Unity請參考小狐仙Unity小教室裡的額外補充文章-圖片匯入與設定)