基於方向來製作角色動畫

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

1,137 visits, 1,188 views

Tools

有兩種方法可以實現標題所說的效果(不使用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!