iT邦幫忙

2023 iThome 鐵人賽

DAY 4
1
Modern Web

什麼!在網頁上也可以寫遊戲?系列 第 4

[Day 04] 事件表實作 - 動作篇

  • 分享至 

  • xImage
  •  

昨天我們介紹了 CG 事件表的運作原理,今天我們就要來正式實作啦~

不過在開始之前,還記得我們將要使用的遊戲核心為 光暈戰記 嗎?光暈戰記是一款俯視視角的多人連線射擊遊戲,而我們使用其模組製作出來的成品,在光暈中稱之為 任務,在事件表沒有任何事件的情況之下,遊戲僅會有場景,以及可操控的玩家角色,在我們正式開始之前,各位可以先去 官方版 遊玩一次,當中有新手教學的任務模式,以及練習用的單人模式,可以大概熟悉一下操作,以及玩法。

今天的目標,就是在事件表中建立新的事件,並設置動作,看看動作在事件表中是如何運行的。

前置設定

首先,一開始預設的範例事件表,應該僅會有一個名為 gameover 的事件,用白話文來解釋的話,意思就是當 角色走到定點 被觸發時,執行動作 任務完成,如果這時候試玩遊戲,點擊 開戰場/準備OK/開戰 之後,會發現場景中一片空,一點建築都沒有,且當玩家走到地圖的左上角時,便會任務完成,這就是這個事件的效果,但我們暫時不需要它,所以可以點擊事件尾端三個點的按鈕,裡面可以將整個事件刪除。

接著我們要來設定遊戲的陣營,在事件表頂端有一個 光暈戰記遊戲設定 的按鈕,點擊後往下可以找到如上圖的陣營選項,光暈戰記主要分為 天影十字軍、皇家騎士團、第三勢力 三大陣營,而我這次只需要天影就好,所以要把另外兩個預設有勾選的陣營取消。

再來還需要更換地圖,往下一行找到地圖欄位,並將裡面的地圖更換為如上圖所示的 elmar(艾爾瑪村),當然其實也能夠自製地圖,或是使用別人分享的地圖,只要點擊後方的編輯小幫手,就會顯示相關視窗,但我這次會以官方的艾爾瑪村為例子,自製地圖的部分會留到之後再介紹。

都設定好之後,記得要按下視窗左上角的 綠色勾勾,這樣才會正確的更新資料,這個在編輯動作、檢查、觸發時也都是一樣,萬一沒有更新就關閉視窗的話,就等於剛剛編輯的東西都不會被更新,另外如果要儲存專案,就要按下專案頂端工具列的 存檔 按鈕,或是直接使用快捷鍵 Ctrl + S,這樣專案才會真正的被儲存,這裡沒有自動存檔系統,只有在試玩遊戲之前,會自動儲存一次,所以養成隨時存檔的好習慣是很重要的,不然網頁突然掛掉就悲劇了。

經過上方的設置之後,現在試玩遊戲的話,就可以發現地圖場景改變了,接下來我們就要來建立新的事件,以及設置動作囉!

設置事件以及動作

首先,點擊預設事件匣左側的 +事件 按鈕,會開啟一個 新增事件 的視窗,直接按下綠色勾儲存,就會新增一個如上圖的 event_0001 事件。

我們要在這個事件當中新增一些敵人,點擊事件內動作旁的 + 按鈕,透過路徑 光暈戰記/角色 找到如上圖的 +角色,或是直接使用左側的搜尋功能輸入動作名稱也可以,找到後直接點擊該動作。

點擊後就會開啟該動作的設定視窗,我這裡調整了 角色代碼、角色、陣營、出現位置,其中角色跟出現位置其實都可以隨意調整,角色只是造型外觀,出現位置我設定在離玩家出生點比較近的地方,這樣測試時就能馬上看到了,然後由於我是要設置敵人,所以陣營選擇跟玩家不一樣。

接著關於角色代碼,這個部分可能需要開一天來仔細講解,但我在這裡稍微簡單介紹一樣,角色代碼是為了讓我們之後可以讀取到這個角色的本身,而存在的功能,一開始上面的預設值是 ai*,在這個動作中,角色代碼內填入 * 的意思是讓系統隨機生成亂碼,最後這個角色代碼可能就會是 aiL3RLAV、aiY5Y7FP 等,至於為什麼要這樣呢?試想一下,如果有兩個叫做小明的人站在你面前,而你有事情需要找其中一位,這時候你該怎麼辦呢?你可能會說「左邊的小明」、「比較高的小明」,或是加上一些肢體語言來表達等等,但是電腦可沒這麼聰明,所以為了避免這個尷尬的窘境,乾脆讓每個人都有個屬於自己獨一無二的代碼好了,這樣就不會搞混了,看到這裡有沒有覺得很熟悉呢,這不就是我們每個人都有的身分證字號嗎!

雖然說可以加上亂碼,但我們又不知道隨機生成的亂碼長怎樣,這樣之後就沒辦法讀取這個角色了,所以如上圖,我把角色代碼改成了 ai_1,因為我們待會就要發揮角色代碼的用途了。

不過在這之前,我們先來測試一下,如果是跟我一樣的設定的話,就會看到遊戲中大石頭旁出現了一個角色,而且走過去後他會攻擊我們,這說明我們剛剛設置的動作被成功運行了,完美,可以關掉測試視窗了。

接下來,我們再新增一個動作,在同樣的路徑裡找到 角色說話 這個動作,在 內容 裡寫上要讓角色說的話,並在下方的 角色代碼 內,填入我們剛剛新增的角色的代碼,這麼一來就可以知道角色代碼的用途了吧?就是用來讓其他動作可以針對該角色執行用的。

然後又是快樂的測試時間,進入遊戲之後,就會看到如上圖那樣,角色說出了我們剛剛所寫的內容,但老實說剛進入遊戲,角色都還沒生成完成,他就開始說話了,是不是有些奇怪,所以我要讓角色晚點說話。

在路徑 系統 裡面,有一個叫做 等待 的動作,顧名思義,就是當事件執行到該動作時,等待指定的時間,才繼續往下執行,另外在電腦的世界中,時間通常都是以毫秒(ms)為主,也就是 0.001 秒,由於角色生成的動畫時間是 1000 毫秒,所以我等待也是設置 1000 毫秒,也就是預設值,設置完成後,等待應該會在第三個,這樣不行,都講了才開始等待,這樣不就沒用了嗎,所以通過對該動作按住滑鼠左鍵,可以移動該動作到不同位置,藉此更改動作的執行順序,將其移動到第二個,就可以達成角色完全生成結束之後,才執行角色說話的效果啦~

最後一個小補充,在事件表中像這種積木型的動作、檢查、觸發,任何人都是可以自己創造的,如果是會寫 Typescript 的人,就可以根據自己的需求,寫出一個新的動作來使用,甚至還可以將其輸出成模組給別人使用,也就是說,CG 上可能會有各式各樣支援事件表的模組,而因為每個模組作者的習慣不同,所以使用起來的方法可能也會不太一樣,大多時候都需要使用者自行去理解,而為了這個部分,在設置動作時應該可以發現,除了動作標題下方有說明以外,某些欄位後面也會有個 ? 的符號,這正是動作的作者撰寫的說明,所以萬一看到一個新的動作,或不熟悉的欄位名稱時,不妨留意一下,是否有作者遺留的訊息,這樣即使遇到沒看過的動作時,也能馬上學會用法囉!

CG 範例事件表

總結

今天主要介紹了如何建立事件、設置動作,以及稍微提到了角色代碼的概念,並且介紹了其中我覺得最基本,也最為重要的動作「等待」,很多時候我們並不希望系統一次就執行完事件內的所有動作,這時候等待就可以派上很大的用場,而其實除了等待以外,有不少動作都有內建相同的功能,例如今天提到的角色說話,仔細看的話就可以發現裡面也有一個等待的功能。

為了讓第一次接觸的人也可以跟上,今天依舊有不少操作相關,和觀念的基本介紹,除了動作以外,檢查、觸發的新增方式也都一樣,不一樣的只是在於它們的運作方式而已,明天我們就要進入檢查篇了,檢查可不是只能單單判斷是不是這麼簡單而已,它可以做的事情可多了呢!


上一篇
[Day 03] CG 同人陣的運作原理
下一篇
[Day 05] 事件表實作 - 檢查篇(上)
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言