Construct 2教學-番外#4 超好用Menu選單
HJ Online Learning Center
APP開發線上教學
  • Register

Construct 2 教學-番外#4 超好用Menu選單

番外篇#4-超好用Menu選單

 

大家好,我是傅老師。歡迎來到我的Construct 2教學。

本節送大家個好用的禮物---RPG遊戲常用的功能選單,只要打開你的Construct 2照著以下簡單的步驟匯入,你的遊戲就可以立刻擁有選單喔~!
 
 
 


 

4-1 什麼是Menu

在實作回合制遊戲(turn-based)時,許多遊戲會讓玩家以點擊選單(menu)來發送指令,選單在RPG、文字型AVG、SLG遊戲中是必備的功 能。

PCE弁慶外傳,是一款經典的RPG遊戲。右上角是主角行走在地圖上時的功能選單。

PCE相聚的一刻,是一款文字AVG。右側是主角可以進行的動作選單

PCE桃太郎電鐵2,這是一款類似大富翁的SLG。右側是功能選單。

我們可以看到對於回合制遊戲來說,選單的設計是非常非常重要的。本節傅老師提供一個寫好的選單框架,各位同學可以透過下面的匯入步驟,讓自己的遊戲立刻擁有 選單功能。

 

完工範例在此:

http://www.memoryabc.com/c2_example/menu_widget/

 

超好用的選單框架

 


 

4-2 下載<menu_widget>範本

下載範本

首先請連至以下連結下載傅老師的<menu_widget>範本:

http://www.memoryabc.com/c2_example/menu_example.zip

下載後自行解壓縮,確認是否有一個.capx,以及一個.csv。

 

確 認第三方插件

本範例使用到了以下的第三方插件,請確認你已經安裝好了:

Plugins:<CSV><Canvas>

Behaviors:<FSM><LiteTween>

好,現在請準備好一個空白專案(底下簡稱專案A),我們來示範如何將這個選單系統手動匯入(底下稱為選單範本)。

 


 

4-3 匯入<menu_widget>範本

首先為專案A匯入資源,請依下列步驟進行:

1. 為專案A新增一個佈局與事件表,佈局稱為<menu_widget>,事件表稱為<e_menu_widget>。

2. 看到選單範本上的<menu_widget>佈局,按<ctrl>+<a>鍵將物件全選,再按下<ctrl>+<c>將其copy。跳回到專案A的 <menu_widget>佈局,按<ctrl>+<v>全部貼上。

3. 貼上後,在專案A的<menu_widget>佈局下,新增以下幾個全域物件:<AJAX>、<CSV>、<Funciton>、<Keyboard>。若以上有物件已於 其他佈局加過,則此處可跳過,不需再加第二次。

4.將範本包中的menu1.csv匯入到專案A中,放在專案區的<Files>目錄下。

好,現在專案內已經有選單可以使用了,開始編輯專案中的<Eventsheet1>:

 


 

4-4 編輯專案

編 輯佈局<Layout1>

1. 將<Layout1>新增一個圖層,命名為"menu"(一定要一模一樣),放到最上層,不透明度(opacity)設為0。

2. 由於我們的範本選單是白色的字體,最好是襯在深色背景上,請將專案最下一層的背景色設為黑色。

3. 於佈局上新增一個[Text]物件,顏色調為白色變於辨認。

編輯事件表 <Eventsheet1>

1. 匯入<e_menu_widget>事件表

2. 新增以下事件:

Eventsheet1
#1 Keyboard On key pressed Key: P
  Function Call function Name: "menu_start"
Parameter 0: 65
Parameter 1: 5
Parameter 2: menu
#2 Keyboard On key pressed Key: W
  menubox (FSM) Go to state name: "item_up"
#3 Keyboard On key pressed Key: S
  menubox (FSM) Go to state name: "item_down"
#4 Keyboard On key pressed Key: A
  menubox (FSM) Go to state name: "disable_item"
#5 Keyboard On key pressed Key: Esc
  menubox (FSM) Go to state name: "destroy"
#6 Keyboard On key pressed Key: Retrun
  Text Set text Text: menubox.current_select
  menubox (FSM) Go to state name: "destroy"

完工~按下<F4>預覽。

按<P>可叫出選單,<W>上移一格,<S>下移一格,<A>可以讓選項失效,<Esc>可跳出,<Enter>可將選到的項目編號顯示於螢幕。

好玩嗎?收工存檔!

 


 

4-5 傅老師鼓勵你...

 

    1. 選單中的選項是寫在menu1.csv中的,試試看打開這個專案檔,把選項的名字做些調整,觀察他的變化。