基於方向來製作角色動畫

1

Tagged

Attached Files

The following files have been attached to this tutorial:

.capx

moveanimexample.capx

Download now 39.05 KB
.capx

moveanimexamplekeyboard.capx

Download now 39.04 KB

Stats

3,157 visits, 4,035 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

有兩種方法可以實現標題所說的效果(不使用Sprite物件的旋轉,而使用不同的Animation區別角色的朝向)。

方法1:玩家與非玩家均可以使用。

方法2:只能用於玩家,但速度快,佔用少。

此教程使用的軟體版本:Construct 2 Release 108.2,64位版本。

準備工作

首先你需要一些行走圖素材,比如下面這張圖片。下面就以這張圖片為例(素材作者:Holder;來源: Holder's Animated Battlers)。

首先需要把這個素材導入到Construct 2中。按兩下畫布空白部分,插入一個Sprite物件。

(如果你不知道怎麼做,你應該去看看Construct 2新手教程

接著彈出一個空的圖像編輯器。我們先看下方的小的長條框(Animation Frames (1)),在它上面右擊,選擇Import sprite strip...,打開你的素材。

然後輸入圖像中的行、列數,這裡是3列4行。

於是我們就得到了一個有13幀的動畫——12幀是剛導入的,還有一幀是原來就有的空白幀——得把它給刪了。

這個動畫一定是會迴圈播放的。難道你看到某人在路上走著走著就抬起一隻腳滑行了嗎——哦,溜冰除外。所以我們得在左側的Properties裡把Loop參數改成Yes

現在的動畫裡有12幀:3幀朝向下,3幀朝向左,3幀朝向右,還有3幀朝向上。但是它們全都待在一個動畫裡,於是這個人就一會上一會下。

所以,我們必須把它分割成4個動畫——下,左,右,上。最簡單的方法,就是使用Duplicate功能製作4個同樣的動畫,再刪除每個動畫中不該有的幀:

(你最好把這些動畫的名稱改成WalkUpWalkLeftWalkDownWalkRight。那樣,就絕對不會混起來了——雖然用2、4、6和8也是不錯的選擇。)

最後,4個動畫應該是這樣的:

好了,行走的動畫已經準備完畢,現在需要製作停止的動畫——這個主角不該是一直踏步的。於是再一次使用Duplicate功能,並且把動畫的名字改成StandUpStandLeftStandDown還有StandRight。接著刪除這些動畫中的其他幀,只留下中間的站立幀。

然後把Default動畫也改成類似StandDown動畫的樣子。

動畫設置暫時告一段落,是時候使用它們了。關掉圖像編輯器,然後把這個Sprite物件重命名為PlayerAnimations

然後再添加一個Sprite,關掉彈出的圖像編輯器——此時的Sprite變為空的圖像,把它的名字改成Player

剛才的PlayerAnimations的大小是64×64圖元,所以把Player的大小也改成64×64。

接著把Player的位置改成和PlayerAnimations一樣的位置。比如這裡是(456, 324),就把PlayerAnimations的X和Y屬性改成456324。現在這兩個Sprite重疊起來了。

它們的位置在運行時是不變的——當Player移動時,PlayerAnimations照樣呆在原位。所以我們需要一個Pin行為來控制它們的位置(你也可以用其他的方法,比如直接控制X與Y參數,這也許更有挑戰性——可以在這裡找到這種方法的詳細說明)。首先找到PlayerAnimationsBehavior欄,添加一個行為。

添加一個Pin行為。

切換到Event sheet中,添加一個事件。

按兩下第一個System對象。

然後選擇列表底部的On start of layout事件。On start of layout意思是在某個Layout被載入時被執行,這裡就是指Layout 1

然後添加一個動作:點擊Add action連結。

按兩下PlayerAnimations

Pin to object

點擊<click to choose>按鈕,然後選擇Player

為了讓角色動起來,需要在Player物件上添加一個行為。

添加一個8 Direction行為。現在我們可以用鍵盤上的方向鍵讓角色動起來了。

如果現在就運行這個遊戲,你會覺得很怪異——行走圖還是會跟著一起轉,就跟沒有做任何事幾乎一樣。

一起修正這個問題吧。首先在8 Directions的參數中,把Set angle設置為No,然後把Directions參數改成4 directions

方法一

角色總算正常點了。但是還有些小問題,比如雖然角色會動但卻不會走路!

所以,回到事件頁中,添加一些事件。

第一個事件Player8 DirectionIs moving

Construct 2不知道角色應該朝向哪裡,所以你需要建立一個執行個體變數(Instance variable)。如果你不做這些,角色永遠朝向同一面——天哪!

下面來創建這個變數。在Player物件上右擊,選擇Instance variables...

點左上角的加號,添加一個名為Direction的執行個體變數,並且把它的類型改為Text

切換到事件頁,在之前創建的事件上右擊,選擇AddAdd sub-event (s)

第一個事件的子事件一SystemCompare two values

現在,如果角色在移動的話,這個子事件會不斷執行——一秒,甚至一毫秒中會執行好多次——為了判斷角色的朝向,然後保存到那個執行個體變數中。

8Direction行為的朝向是儲存在Obj.8Direction.MovingAngle中的。所以這裡的朝向運算式是Player.8Direction.MovingAngle。這就是First value參數。

方向是角度,單位是度。還記得之前我們把8Direction行為限制成了4方向嗎?所以現在只有4種可能的角度:-90(↑)、180(←)、90(↓)、0(→)。

在這個子事件中,我們是檢查角色是否朝向上。所以,Second value參數的值是-90

如果角色正在向上移動,那麼那個執行個體變數的值應該是"Up"。所以這個事件的動作是PlayerSet value

然後輸入"Up"(帶有半形引號)作為參數值。

製作與之類似的其餘3方向事件。

好了,執行個體變數準備完畢,只需要再調整角色的動畫即可。

又一個子事件PlayerCompare instance variable

這個事件的Value"Up"。這個事件是檢查角色是否向上。

如果是的話,就該播放WalkUp動畫。所以動作是PlayerAnimationsSet animation

輸入"WalkUp"作為Animation參數值。

製作與之類似的其他3方向事件。

測試遊戲後發現,角色終於能正常行走了。但是停下後,他還在原地踏步!我們得解決這個問題。

第三個事件PlayerIs moving

右擊這個條件,選擇Invert。這個事件就變成了當角色不在行走的時候才執行。

繼續添加子事件。

第三個事件的子事件一PlayerCompare instance variable

Value參數值是"Up"

動作是:PlayerAnimationsSet animation

參數是StandUp

繼續製作其他方向的事件。

這就是為什麼要新建一個執行個體變數的原因了。當角色停下時,Player.8Direction.MovingAngle永遠是0。我們就不能用這個運算式控制角色停下時的朝向。要是Scirra把這個問題改好了,這個教程也許就能變得很短了:)

(最好是添加個用動畫控制角色朝向的功能,那樣這篇教程都不用寫了XD)

現在的角色已經幾乎完美了,我們試試讓角色撞到其他東西。

在其他物件上添加一個Solid行為。

這個角色完全能自如的行走了!你可以試試看,往各個方向行走,在任何地方停下。

如果你創建了個HUD,看到角色的MovingAngle,你會發現當角色轉向的時候這個角度會有奇怪的跳動。希望Scirra能修復這個BUG。

方法二

(請直接跳到這裡的讀者先看方法一)

第二種方法就是玩家專用的方法,就是用鍵盤的按鍵來判斷朝向!這需要一個Keyboard物件。

接著把這些事件:

替換成這樣:

這方法也許佔用資源更少,也更方便,在遊戲中幾乎看不出與方法一的區別。推薦使用這個方法。

一點補充

有時候為了防止角色走出畫面,需要使用Bound to layout行為。但是當角色走到邊緣時,角色還在走——但角色卻不動。這個問題很容易修復,比如當角色走到邊緣時播放停止時的動畫等。

範例檔(方法一、二均有):傳送門

這個檔包含了一個HUD用於顯示Player.8Direction.MovingAnglePlayer.Direction用於DEBUG。

如果有誰知道那個運算式的跳動問題的解決方案,歡迎在下面評論,讓大家都知道吧!

.CAPX

moveanimexample.capx

Download now 39.05 KB
.CAPX

moveanimexamplekeyboard.capx

Download now 39.04 KB
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!