Construct 2教學-第6節
HJ Online Learning Center
APP開發線上教學
  • Register

Construct 2 教學-第6節

第6節-進階主角設計(中)

 

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

上一節我們使用"狀態機"(FSM)來實作蛋蛋老師,同時我們也設計讓蛋蛋老師發射子彈。這一結我們要讓蛋蛋老師的子彈確實產生殺傷力,把畫面上的小史一一擊落!開戰~

本節重點在於敵人生命值(hit point)以及武器攻擊力(attack)之概念,以及<Fade>特效的應用。

 
 
 
 


 

6-1 Fade與Flash行為特性

傳統使用逐行編程的方式設計遊戲時,最令人頭大的就是特效的設計,比如像是大魔王被擊中後的閃爍,或是鬼魂從畫面消失的淡出,這些都是特效。倘若沒做特效,雖然不會 影響遊戲功能,但遊戲玩起來就欠缺實在感;倘若確定要做的話,又常會讓程式工程師一個頭兩個大,因為簡單的一段淡出程式要做到穩,得用個十幾二十行來做。有時後我們看到一個遊戲 擁有極佳的原創好主意,但遊玩的過程中處處欠缺控制性與回饋性(*1),甚至讓人想要砸搖桿,這種遊戲多半應當從特效方面來翻修。

C2在特效設計方面有著驚人的方便性,那些傳統編程要寫十幾二十行的特效,在C2下只需要幫一個行為特性(behavior)設幾個參數就完工了(*2)。本節我們示範兩種常用的行為特性: <Fade>與<Flash>,使用這兩者來加強子彈擊中敵人跟小史被擊中的特效。

子彈<Fade>特效

首先處理子彈擊中敵人的特效。打開上一節做的L5.capx,於物件區點擊[b1],再到參數區按下<Behaviors>叫出行為特性列表,為[b1]新增<Fade>。

新增Fade行為特性

加入後結束視窗,回到[b1]參數區,看到<Fade>行為動作的參數:

Fade行為特性的參數
參數名 功 能
Active at start 是否物件一出生就開始Fade?
Fade in time 漸入時間
Wait time 持平時間
Fade out time 淡出時間
Destroy 是否於淡出結束自動刪除物件?

我們淡出的時機是當子彈撞到敵人之時才開始<Fade>,所以不能在物件誕生時就打開<Fade>。其次,C2把漸入(Fade in)及淡出(Fade out)併成一個功能叫<Fade>, 我們這次只需要使用淡出,所以必須將漸入及持平時間都設為"0"。最後,子彈應該在淡出後自動從佈局上刪除掉,所以將對應參數設為淡出後自動刪除<Destroy after fade out>。

此外,為了防止連續擊中敵人,當一偵測到子彈撞到敵人時,我們就要把子彈的碰撞偵測(collision enabled)給關掉。

現在讓我們來加入對應的指令。

1. 跳到事件表<Event sheet 1>中,點選左下角<Add event>,選擇[b1] -> <On collision with another object> ->[E1] -> <Done>結束。成功加入第47條事件。
2. 點選47條事件右方<Add aciton>,選擇[b1] -> <Set collision enabled> -> <Disabled> -> <Done>結束。
3. 再次點擊<Add action>,選擇[b1] -> <Start fade>。

 

指令完成

編輯完後按<F5>預覽,現在子彈擊中敵人後會自動淡出消失了。

小史<Flash>特效

當小史被擊中時,應當要閃爍(Flash)幾下,表示目前被擊中了。我們來為小史添加閃爍<Flash>行為動作:於物件區點擊[E1],再到參數區按下<Behaviors>叫出行為特性列表, 為[E1]新增<Flash>。

增加Flash行為特性

加入後結束視窗,回到[E1]參數區,看到<Flash>行為動作不需設置參數。

Flash無參數

小史閃爍的時機應在子彈與他碰撞發生之時。現在讓我們來加入對應的指令:

1. 點選47條事件右方<Add aciton>,選擇[E1] -> <Flash> -> On time:0.1,Off time:0.1,Duration:1.0 -> <Done>結束。

參數名 功 能
On time 閃爍期物件正常顯示之時間
Off time 閃爍期物件消失之時間
Duration 閃爍總時間

編輯完後按<F5>預覽,嗯~現在敵人被擊中會閃爍了,可是...好像越閃越不清楚。因為理論上來說,閃爍是為了要利用交錯顯示讓玩家察覺到物件,結果交錯顯示途中物件竟然變為黑色, 反而更難察覺。底下我們來使用效果(Effect)來改做閃爍特效,將閃爍改為亮白色與正常色的交錯顯示。

 


 

6-2 改用效果(Effect)實現閃爍

將物件完全變成白色,可使用WebGL效果中的<brightness>效果。點擊物件區中之[E1],至參數區中點擊<Effects>,加入<brightness>效果。

Brightness效果

加入後結束視窗,回到[b1]參數區,看到<brightness>效果的參數:

Brightness效果參數

<brightness>只有一個參數,控制著物件的顯示亮度。正常值是100,加大會變亮,減小會變暗。我們把這個值改為255試試,在看到編輯區中的小史有無變化:

Brightness設為255

<Brightness>設為255後,小史變成全白色了~是的,這就是我們想要的效果。OK,把效果恢復原狀,<Brightness>改回100。現在重新組織一下邏輯想法,設計出讓小史閃爍的邏輯:

1. 新增"brightness_on"布林實件變數,紀錄小史目前是正常顯示或是高亮顯示。新增"flash_count"實件變數,紀錄目前顯示閃鑠次數。
2. 當子彈與小史碰撞時,在小史身上新增計時器,取名為"flash"(可參考如4.4節)。
3. 當"flash"時間到,反轉次數未達6次時,反轉次數加1。將"brightness_on"反轉並設置對應之效果。重設"flash"計時器。
4. 承上,當反轉次數到達6次,反轉次數歸0,刪除"flash"計時器。

OK,實作開始。

項目1

 

1. 新增"brightness_on"布林實件變數,紀錄小史目前是正常顯示或是高亮顯示。新增"flash_count"實件變數,紀錄目前顯示閃鑠次數。

 

於物件區點擊[E1],再到參數區按下<Instance variables>叫出實件變數列表,為[E1]新增"brightness_on"布林值(Boolean)與"flash_count"整數值。

新增變數

注意初始值C2已幫我們自動設置。項目1完工。

項目2

 

2. 當子彈與小史碰撞時,在小史身上新增計時器,取名為"flash"(可參考如4.4節)。

 

回到事件表,看到第47條事件右方。先刪除[E1] -> <Flash>的動作,再點選<Add action>,選擇[E1] -> <Start timer> -> Duration:0.1,Type:<Once>,Tag:"flash"。如下圖,項目2完工。

增加timer

項目3

 

3. 當"flash"時間到,反轉次數未達6次時,反轉次數加1。將"brightness_on"反轉並設置對應之效果。重設"flash"計時器。

 

回到事件表左下角,點擊<Add event>。選擇[E1] -> <On timer> -> <Tag>:"flash",完成<Done>,成功加入第48條事件。點選第48條事件,按下"s"快速鍵可增加子事件(subevent)。 選擇[E1] -> <Compare instance variable> -> "flash count" + "< Less than" + 6,完成<Done>,生成第49條事件。

點擊第49條事件,按下"x"快速鍵可在其下方產生<else>事件。完成後結構如下圖。

增加指令

點擊第49條事件,按"s"加入子事件。點選[E1] -> <Is boolean instance variable set> -> <brightness_on>,完成<Done>,產生第50條事件。

點擊第50條事件,按"x"加入子事件,按下"x"快速鍵在其下方產生<else>事件。完成後結構如下圖。

增加指令

開始填入動作。點選49條右方<Add action>,選擇[E1] -> <Add to> -> Instance variable:<flash_count>,Value: 1。

完成<Done>後再點一次49條右方<Add action>,選擇[E1] -> <Toggle boolean> -> <brightness_on>。

承上,再一次<Add action>,選擇[E1] -> <Start timer> -> Duration:0.1,Type:<Once>,Tag:"flash"。

點選50條右方<Add action>,選擇[E1] -> <Set effect parameter> -> Effect:<Brightness>,Parameter index:0,Value:255。

點選51條右方<Add action>,選擇[E1] -> <Set effect parameter> -> Effect:<Brightness>,Parameter index:0,Value:100。

項目3完工,如下圖所示。

增加指令

項目4

 

4. 承上,當反轉次數到達6次,反轉次數歸0,刪除"flash"計時器。

點選52條右方<Add action>,選擇[E1] -> <Set value> -> Instance variable:<flash_count>,Value:0。

承上,再一次<Add action>,選擇[E1] -> <Stop timer> -> Tag:"flash"。

項目4完工,如下圖所示。

增加指令

點擊<F5>預覽,OK實作完成!小史現在中彈會閃閃發亮囉~



 

6-3 為敵人加入HP

在平台遊戲中存在著各式各樣的敵人,每個敵人的生命值(Hit point,簡稱HP)是不同的。相對的,若主角更換武器,武器的攻擊力(Attack,簡稱ATT)應該要獲得提升。隨著關卡的演進, 這兩項數值都要逐步提升,並且微持著一個消長更迭的動態平衡。我們用以下的例子來說明:

武器攻擊力vs敵人血量

將上述的數值進行配對分析後會得到下表,其中要特別注意的是最右方一欄:所需攻擊次數。 在遊戲進行時,會與遊戲難度成正比關係的數值,不是敵人生命值,也不是武器攻擊力,而是所需攻擊次數。 當武器由彈珠升級到狗骨頭後,擊倒小史的所需次數降低了一次;同樣的將武器由狗骨頭升級到剪刀後,擊倒鬼魂的所需次數也降低了一次。使用者會從武器升級明顯感受到難度降低, 並產生主角能力增強的趣味性。(*3)

武器 敵人 所需攻擊次數
ATT=3

HP=3 1
HP=4 2
HP=10 3
ATT=4

HP=3 1
HP=4 1
HP=10 3
ATT=6

HP=3 1
HP=4 1
HP=10 2

底下來為小史與彈珠增加HP與ATT實件變數。

於物件區點擊[E1],到參數區按下<Instance variables>叫出實件變數列表,為[E1]新增"hp"數值(Number),初始值設為4。

於物件區點擊[b1],到參數區按下<Instance variables>叫出實件變數列表,為[b1]新增"att"數值(Number),初始值設為3。

添加完成,接下來為小史增加被擊倒的狀態。

插入dead判斷式

判斷小史是否被擊倒可用下面的邏輯:

1. 在武器與小史碰撞發生時,將小史的"hp"值扣掉武器的"att"值,代表生命值受到對應攻擊力的影響。
2. 倘若扣完後"hp"小於等於0,則將小史狀態設為"dead"。
3. 移除"E1_AI"計時器以免擊倒後狀態再次被改回。

項目1

1. 在武器與小史碰撞發生時,將小史的"hp"值扣掉武器的"att"值,代表生命值受到對應攻擊力的影響。

 

點選第47條事件右方<Add action>,選擇<E1> -> <Substract from> -> Instance variable:"hp";Value:b1.att。完成。

項目2

2. 倘若扣完後"hp"小於等於0,則將小史狀態設為"dead"。

 

點選第47條事件,按下鍵盤<s>加入子事件。選擇<E1> -> <Compare instance variable> -> Instance variable:"hp";Comparison: <Less or equal>;Value:0。生成第48條子事件。

點選第48條事件右方<Add action>,選擇<E1> -> <Set value> -> Instance variable:"AI_mode";Value:"dead"。完成。

項目3

3. 移除"E1_AI"計時器以免擊倒後狀態再次被改回。

 

點選第48條事件右方<Add action>,選擇<E1> -> <Stop timer> -> Tag:"E1_AI"。完成事件表如下圖。

 

狀態判斷式OK。接下來實作"dead"狀態。

實作dead狀態

"dead"狀態要完成的有:

1. 於[E1]<For each>迴圈中新增"dead"狀態,播放"dead"動畫。
2. 停止檢查小史的碰撞
3. 讓小史逐漸落下。
4. 讓小史淡出。

項目1

1. 於[E1]<For each>迴圈中新增"dead"狀態,播放"dead"動畫。

 

點選第9條事件,按下鍵盤<s>新增子事件。選擇[E1] -> <Compare instance variable> -> Instance variable:"AI_mode";Comparison: <Equal to>;Value:"dead", 新增第14條事件。

點選第14條事件,按下鍵盤<s>新增子事件。選擇[E1] -> <Is playing> -> Animation:"dead",新增第15條事件。

右擊第15條事件,選擇<Invert>將其反轉。

點擊第15條事件右方<Add action>,選擇<E1> -> <Set animation> -> Animation:"dead";From:<beginning>。完成。

 

項目2&3

2. 停止檢查小史的碰撞
3. 讓小史逐漸落下。

 

點擊第15條事件右方<Add action>,選擇<E1> -> <Set collisions enabled> -> Collisions:<Disabled>。

 

由於取消了碰撞,小史也無法檢查他自己是否站在平台上,只能任由地心引力將其扯向地面,並逐漸落下。完成。

項目4

4. 讓小史淡出。

 

套用6-1為子彈設置<Fade>的方式,為[E1]新增<Fade>行為特性。將參數設定如下:

 

點擊第15條事件右方<Add action>,選擇<E1> -> <Start fade>。完成事件表如下圖。

 

完成後按<F5>預覽,OK~現在小史被擊中兩發子彈就會死啦~本節完工,存檔為<L6.capx>,下課囉~

 



6-4 結語

在本節裡我們學會了敵人生命值(hp)與武器攻擊力(att)兩個數值的概念。未來我們可以延伸此概念,形成武器系統與怪物系統。

學會了嗎?我們下次見!

 



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

 

  1. 本節中唯一一套武器是子彈,攻擊時會呈拋物線丟出。可否設計第二套武器,使其滿足下列規格:
    a. 攻擊時水平直線射出。
    b. 小史被他打一下就會死。
    c. 擊中敵人後不會消失,會繼續衝向畫面外。
    d. 出畫面就武器自動destroy掉。

 



附註

 

*1。簡單的說,沒操控性就是"想打的不能打";沒回饋性就是"能打的沒反應"。
*2。之前浮台的<Sine>、主角的<Platform>也是行為動作。
*3。要記得讓武器升級與強敵登場兩件事交叉出現,才會有敵我消長更迭的趣味性。