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

Construct 2 教學-第2節

第2節-角色與場景

 

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

上一節我們成功安裝了C2,將平台遊戲的範例專案輸出為html5網頁,最後上傳至Dropbox並分享給朋友,完整體驗了從編程到發佈的流程。這 一節我們將帶您逐步修改上次的範例,讓自己設計的角色可以在平台上"動"起來。

 
 
 
 


 

2-1 佈局圖與事件表

打開上次的存檔L1.capx,看到頁面指示區,會發現有<Layout 1>以及<Event sheet 1>兩個頁籤(tab),底下我們稱之為佈局圖(Layout)以及事件表(Event sheet)。

頁面指示區

若您有軟體編程經驗,這兩者的對應關係應可理解。但如果您是新手,底下我們用一個比喻來解說:

佈局圖與事件表的運作有點像皮影戲。佈局圖是前台給觀眾看的影像,而事件表是躲在後台控制一切的師傅。

 

本節我們將會把L1.capx唯一的前台,也就是唯一的佈局圖<Layout 1>,改成自己喜歡的主角跟場景。

 



2-2 設定Sprite圖像

L1.capx裡,玩家控制的是一個叫做[Player]的藍色盒子,接下來我們會把他改成自製可愛型的主角形象。在C2中,我們會使用 Sprite物件來 製作角色,Sprite在佈局圖上會以圖像的形式來呈現;反過來說,若要在佈局圖上顯示一張圖片,那最好的選擇就是採用一個 Sprite物件。

看到右上角專案區,在<Object types>下可以找到[Player]這個物件。用滑鼠左鍵雙擊他,帶出[Player]的Sprite編輯畫面。

在專案區內找到[Player]物件

Sprite編輯畫面

該編輯畫面由四個區塊組成,如 下:

  1. 影像編輯區(Image editor)
  2. 動畫清單(Animation bar)
  3. 動畫幀表(Animation frames bar)
  4. 參數設定區(Properties bar)

 

在影像編輯區中,我們會看到[Player]的形像是一個藍色盒子。我們來試試看把他變成紅色的盒子吧!點選左方油漆按鈕,帶出顏色選取器,在< Red>右方填入255,接著將滑鼠移到藍色盒子上方,任選一個藍色的地方按下左鍵。可看到[Player]變成了紅色盒子了。

將盒子塗成紅色

成功後按下鍵盤上 <Esc>離開編輯器,可以看到<Layout 1>上的盒子真的變紅色了!再按下主功能區的<Run Layout>(或按鍵盤<F5>),實際遊玩一下確定是否真的變成紅色盒子。

真的變紅色盒子了

透過上面的步驟我們發現,在Sprite編輯畫面下,其影像編輯區很類似Windows自帶的小畫家。只要在這個區域修改影像,就會更動 Sprite物件的影像。那腦筋動的快的人會想到:那如果貼一個畫面到影像編輯區內,會發生什麼事情呢?很好~我們就來試試看吧。

Win7使用者請打開Windows搜尋欄,輸入"剪取工具",找到並開啟剪取工具,並隨便從畫面上剪取一些花樣。剪好之後按Ctrl+C,將剪取 的圖像存在Windows緩衝區內。

剪取帥氣的傅老師頭像

完成後再次雙擊專案區[Player],開啟Sprite編輯畫面。在影像編輯區左上角按下矩形選取鈕,按Ctrl+V貼上Windows緩衝區內 容。C2會提示我們要貼的影像比現在的影像尺寸大,選< Enlarge canvas>讓C2自動計算並加大圖形尺寸。

增大圖形尺寸

完成後我們看到剛剛剪下的圖蓋過了原本的紅色盒子,而且周圍有虛線在閃爍,表示我們可以拖曳這個虛線 區塊來調整位置,調好後按Enter讓圖型固定位置,按Esc退出編輯畫面,點選主功能區<Run layout>看看結果。

貼上傅老師頭像

傅老師變成主角

哇~原本的紅色盒子變成我們貼上去的圖了(範例中為帥氣的傅老師),這真是太神奇了。

但現在新問題來了,沒有人喜歡操縱一張"畫"跑來跑去,這樣的game不會受歡迎,大家都希望主角是會動的"動畫"(animation),怎麼辦 呢?接下來將教您如何加入可愛的動畫。

 



2-3 設定Sprite多幀動畫

本節我們的目標是製作一個主角在走路的動畫。

首先,於右上角專案區左鍵雙擊[Player]開啟編輯畫面,看到左方的動畫清單,目前應該只有一個叫做default的動畫,我們來修改他的名字。在 default上按滑鼠右鍵選取<rename>,填入"walk"。若未來再增加"jump"、"stand"、"duck",新的動畫 就會增加在"walk"後面。

修改動畫名稱

接著,看到左下角的動畫幀表。目前只有一幀(一幀就是一張的同義詞),其標號為0。原則上我們應該要一幀一幀用右方的影像編輯區來畫,而一個流暢的 動畫每秒至少要20幀,直接去畫會畫到累死...還好這次傅老師已經幫大家畫好了(免緊張~),請點選下面連結下載並且解壓縮。

http://www.memoryabc.com/c2_tutorial/egg_walk1.zip

蛋蛋老師動畫原檔

解壓縮後會看到14張分解動作,疑?這不是可愛的蛋蛋老師嗎~是滴,就是她。請您把這14張圖導入到動畫幀表裡,這樣就不用親手繪製14張了。於動 畫幀表空白處點擊滑鼠右鍵,選取<import frames>,開啟檔案瀏覽視窗。找到14張圖存放的位置,按下Ctrl+A,全選14張圖,點擊<開啟檔案>。接著我們會看到14 張圖被導入至動畫幀表中。第0幀不是我們要的,滑鼠左擊第0幀,按下鍵盤上<delete>鍵刪除。鏘鏘~可愛的蛋蛋老師出現了。

導入動畫

成功導入動畫

等一下~重點來了。蛋蛋老師的下方的狀態列出現了奇怪的訊息:"Approx. download: 580kb memory use: 27.3mb",剛才沒有的呀?這是什麼意思呢?是這樣的,C2遊戲在開始前,會透過網路預讀取所有的Sprite,而Sprite最耗資源的就是動畫 幀。所以我們剛才加的14幀,透過網路傳過來約為580kb資料量,這個大小還可以接受。再來,在圖像處理器晶片上,圖形的長寬只能是2的次方 (32,64,128,256...),所以將圖片讀進處理器時所占用的記憶體沒算好的話就會大膨脹,而我們剛剛導入的動畫已經膨脹到27.3mb(此為 C2粗估值)!這在PC上不成問題,但在手機上會是個大災難啊(手機上大概每個程式只配到60mb~100mb)!接下來有必要對圖形做些處理,我們就試 著把蛋蛋老師周圍的透明區塊縮小,看看能省多少吧。

Memory Size爆漲

按住鍵盤Shift鍵,點選影像編輯區上方切裁鈕,C2 會自動幫我們對每一幀都自動切掉不用的透明區。切完看一下狀態列,memory use下降到6.5mb了,開心~

Memory Size縮減

我們來預覽一下蛋蛋老師走路的曼妙姿勢。滑鼠移到動畫清單,在"walk"上點擊滑鼠右鍵,點選<preview>。跳出一個視窗看到 蛋蛋老師在走路了,不過...她怎麼走這麼慢呢?而且走一遍就停止不動了。原來,我們還有最後一塊參數設定區還沒設置。讓我們將左上角參數設定區修改為以 下數值:

walk動畫參數設置
檔 名 功 能
Speed 動 畫撥放 的速度,單位是fps(frame per second)。
Loop 是 否無限 循環撥放(預設為No,所以只會撥放一次)
Repeat count 循 環撥放 的次數,Loop設置為No時此項才生效。
Repeat to 循 環撥放 時倒帶至哪一幀。
Ping-pong 是 否要乒 乓撥放。若設為YES,則每次動畫放映時,放過最後一幀後均會逐格倒捲回第0幀。


設置完畢再至動畫清單區,滑鼠右擊"walk",選<preview>來預覽參數修正過的動畫。我們發現走路的速度變正常了,動畫也呈現無限 循環撥放的狀況。太好了,現在按鍵盤<Esc>跳出Sprite編輯畫面,再點選主功能區的<Run Layout>來預覽一下吧!

蛋蛋老師尺寸過大


哇!怎麼有個巨人出現在畫面上?這個尺吋有點不對吧... 這是因為Sprite實件(Instance)(*1)會自動把佈局圖上的大小設置為原始Sprite物件(Object)大小,而蛋蛋老師的 Sprite約為200x400,所以我們必須重設Sprite的位置與大小。回 到<Layout 1>,左鍵點擊編輯區上的蛋蛋老師,我們來修改左方參數設定區的內容。找到<Common>類別下的<position> 和<size>兩個參數,分別改成"608,704"與"48,96",我們把蛋蛋老師縮小,同時擺放到浮台上方的半空中。

重新調整蛋蛋老師尺寸與位置
參 數名稱 功 能
Layer 放 置圖 層。
Angle 旋 轉角 度。
Opacity 不 透明度 (100為不透明,0為透明)。
Position Sprite 的(x,y)初始位置,以逗號分隔。
Size Sprite 的初始寬度與高度,以逗號分隔。

點選主功能區的<Run Layout>預覽,現在尺寸適當了,也可以看到蛋蛋老師從空中落下,降落到浮台上。再左右走走看,疑?仔細看發現蛋蛋老師以很微小幅度上下振動 著,而且連帶整個螢幕都在振動。請注意,這是常見的動畫導入問題,原因是因為我們在導入並裁切後沒有去對齊每一幀影像的原點,這個問題通常會在使 用C2的自動裁切功能後發生。現在我們微調各幀的原點,請按下編輯區左列的原點設置鈕,在<origin> 上單擊滑鼠右鍵,選擇<quick assign> -> <bottom>,可以看到影像編輯區上有一個十字準星放在動畫幀的底部了。

調整原點

剛才的動作只完成了一幀的原點設置,現在我們把其他幀的原點也設到此位置。在<origin>上單擊滑鼠右鍵,選擇<apply to whole animation>。完成後到動畫幀表點看看其他幀,現在每幀的下方都出現了十字,代表原點都已經正確的設置在正下方。

複製原點
蛋蛋老師走路動畫的第6幀,由於動畫幀寬度變長,因此請手動將此幀之原點X座標設為91。

按<F5>預覽遊戲,Good~動畫很順喔。主角動畫至此調整完畢。接下來是場景的調整。 (*2)

 



2-4 場景設置

首先,讓我們縮小編輯區的可視範圍,請按住鍵盤<ctrL>鍵不放,同時向後滾動滑鼠滾輪。可以看到編輯區逐漸縮小,繼續滾動直到四個 角落出現灰色直角符號為止。

其次,右上角專案區滑鼠左鍵點擊專案名稱<New Project>。完成後畫面如下

縮小編輯區

要正確設置場景大小,我們要知道視窗大小(Window Size)與佈局大小(Layout Size)的不同,請看下面的圖例。視窗大小指的是我們手機螢幕、PC上遊戲視窗的大小,他限制了可視範圍,玩家看不見視窗外的物件。而隨著玩家向右移 動,視窗也會延著向右移動,這時右方會有物件進入視窗,而左方會有物件移出視窗。所以對平台遊戲來說,佈局大小就是整個關卡的大小,而視窗大小只是目前玩 家所在的一小塊區域。

視窗與佈局示意圖

看到左上角參數設定區,目前的視窗大小(Window size)是(640,480),這個大小可以接受,不修改(*3)。

接著點選專案區的<Layout 1>,我們來改關卡的大小。目前參數區的佈局大小(Layout size)是(1280,1024),讓我們把這個關改成狹長狀,將佈局大小改成(6400,1024),改好按<Enter>。

加長關卡

調整後場景的大小正確了,但背景並未跟著延伸,接著我們來延伸背景。在這個範例中背景是數不清的綠色格子,不過事實上原始背景圖只有一個綠色格子,其他的 格子是C2幫我們自動拼貼上去的。本範例中的背景物件是[BackgroundTile],請在專案區中以滑鼠左鍵單擊 [BackgroundTile]。看到[BackgroundTile]參數設置區,把大小(Size)改成(6400,1024),< Enter>。我們看到現在綠色背景填滿了整張佈局,背景的尺也正確了。

延伸背景


蛋蛋老師需要"腳踏實地"才能走到畫面右邊,讓我們將左下角的固定平台向右延長,讓她能夠走過去。滑鼠左鍵單擊左下角平台,其周圍上會出現8個可拖曳延伸 的白色方塊。將正右方的白色方塊向右拖曳,直至佈局圖的右端,如下圖。

延伸平台-1

延伸平台-2


現在尺寸對了,也可以腳踏實地到佈局圖右端了,但是綠色的背景實在很弱,傅老師實在想換成酷一點的背景圖。讓我們來張大放光明的... 嗯... 換張太陽如何? 點擊下方聯結在新視窗中開啟NASA提供的太陽觀測圖,於圖片上方單擊滑鼠右鍵,選擇<複製影像>(或是<複製>/<複製 圖片>)將圖片暫存至Windows緩衝區。

NASA 太陽觀測圖

暫存好後回到C2,在專案區中以滑鼠左鍵雙擊[BackgroundTile],開啟影像編輯區。按下鍵盤上Ctrl + V,將緩衝區內的影像貼入影像編輯區,C2發出的尺寸修改提示請以<Enlarge canvas>回應。貼好後按<Enter>放下圖片,再按<Esc>跳出。

貼上NASA太陽觀測圖

很酷的背景

哇~太酷了,蛋蛋老師在宇宙中行走,更逼真的是,背景的太陽會跟著反向倒退,這種自動倒退的效果稱為"景深"(Parallax)。走動一下發現,背景捲 動的速度過快了,走到佈局右方時都已經出來了四顆太陽,我們得讓景深在水平方向上的捲動速度慢一些。到右上角專案與圖層區,點選圖層頁籤 (Layers),列表會變成圖層。本範例中共有3個圖層,最底下是"Background"(背景圖在此層),中間是"Game"(主角與平台物件在此 層),上層是"UI"(使用者介面在此層)。我們的太陽背景是放在"Background"的唯一物件,但該層目前為鎖定狀態,鎖定狀態代表該層所有元件 既不可選、也不可改,所以請先以滑鼠左鍵點擊"Background"層左方的鎖頭圖示,將該層解鎖。解鎖後滑鼠左鍵點擊"Background"將其反 白,改動左上角參數區,將Background color為(0,0,0),Parallax為(8,8)。

解鎖圖層

設置圖層參數
參 數名稱 功 能
Name 此 圖層的 名稱。
Initial visibility 初 始可見 度(預設為Visible可見)。
Background color 此 圖層的 背景顏色。
Transparent 此 圖層的 穿透性,設為Yes時無物件處形同透明,設為No時無物件處會顯示背景色(新圖層的穿透性預設為Yes)。
Opacity 整 個圖層 的不透明度。
Force own texture 圖 層的渲 染(render)效果會獨立於其他層,預設為No(設為Yes時會需要不少的運算資源)。
Scale rate 縮 放比 率,預設為100,代表正常縮放比率。
Parallax 景 深的 (x,y)值,代表圖層景深效果的移動速度。(製作手機遊戲時,景深設為(0,0)的圖層將會置中擺放。由於各個輸出工具對景深的支援度不同,建 議手機遊 戲第一版開發時先將所有圖層景深設為(0,0),待熟悉輸出工具特性後再來調整。)

按鍵盤F5(<Run Layout>的快速鍵),預覽遊戲。嗯~現在速度正常了,蛋蛋老師可以橫跨太陽系的感覺囉!

 



2-5 加入第二組動畫


蛋蛋老師在畫面上一直跑步,實在是很辛苦耶~我們來幫她加個停下休息的動作吧!

在專案區以滑鼠左鍵雙擊Player開啟Sprite編輯畫面,再到動畫清單中,於空白處單擊滑鼠右鍵,選擇<Add animation>。

增加動畫

C2會生成一個新的動畫,並自動以"Animation"為前綴命名。請參照2-3節的步驟,將名稱修改為"stand",並將下列動畫包導入至 "stand"動畫內。(請記得裁切、設置參數、修改原點)

http://www.memoryabc.com/c2_tutorial/egg_stand.zip

導入完畢後按<Esc>跳出Sprite編輯畫面。現在[Player]物件有兩個動畫,我們必須告訴C2遊戲開始時先撥放哪一個動 畫。至右上角專案區左鍵單擊[Player],看到參數區最下方的<Property>,在<initial animation中>手動填入"stand",代表遊戲開始後[Player]的預設動畫是"stand"。

設置預設動畫

完成後按<F5>預覽,疑?蛋蛋老師現在從頭到尾都是站著的,如果按鍵盤移動她的話,她好像會縮地術一樣,雙腳不動就可以移來移去。這是因為 我們沒有跟C2說清楚什麼狀況要撥放"stand"動畫,而什麼狀況必須得換成"walk"動畫。底下我們就來使用事件表來設置變換動作的條件,這是本節 最難的部份。

在頁面指示區點擊<Event sheet 1>,跳到事件表。

事件表

在這張表上,左半部稱為事件區(event),右半部稱為行動區(action)。事件驅動(event driven)是C2便利於其他遊戲設計工具之處,即使是不會寫軟體程式語言的人,只要看的懂英文便能懂個七八分。不信的話我們來試試。

第1條,直接將裡面的英文翻成中文就是:

當(On)下方鍵(Down arrow)被按壓(pressed)時 => 蛋蛋老師掉下(fall down)跳穿平台(jump-through platform)。

這根本是逐字翻譯嘛~再來看2條

W鍵被按住(down)時 => 蛋蛋老師模擬(simulate)按壓跳躍行動(pressing jump)。

這不是很正常嗎?~WASD的就是對應到上下左右,那向上當然就是跳躍囉。再看第6條:

當(on)左鍵(left arrow)被按下(pressed) 或是 當(on)A鍵(A)被按下(pressed) 時 => 蛋蛋老師要鏡射翻轉(Mirrored)。

我們的動畫原本都是面向右方的,當然按下左鍵時要讓動畫鏡射翻轉(左右翻轉)囉~最後看第8條:

當蛋蛋老師的Y座標(Y)值大於佈局高度(> LayoutHeight) => 重頭再開一次(Restart)佈局(layout)。

這一條是偵測蛋蛋老師([Player])是否摔出到視窗下方外,摔出去就重來,真是簡單。


現在重點來了,我們要自行加入新的事件,用來切換[Player]的動畫。首先,點擊第8條event下方的<Add event>,再用滑鼠左鍵雙擊[Player],會跳出所有[Player]可被偵測到的事件。向下捲動,找到<on moved>事件,雙擊。完成後會看到事件表多了第9條事件---<on moved>。請以相同步驟將<on stopped>、<on jump>、<on fall>、<on landed>全部加進事件表。

5個與平台移動相關的事件

以上各事件的函意如下表:

件 名稱 涵 意
On moved Sprite 開始移動。
On stopped Sprite 停止移動。
On jump Sprite 開始跳躍。
On fall Sprite 開始掉落。
On landed Sprite 開始著陸。

以調整動畫來說,<on moved>事件出現時,我們應該要撥放的動畫是"walk",現在來讓我們把撥放"walk"這個動作加在<on moved>的後頭。點擊第9條事件右方的<add action>, 再以滑鼠左鍵雙擊[Player],找到<set animation>並以滑鼠左鍵雙擊。於彈出的對話框中,找到Animation欄位,填入"walk",OK。成功將<on moved>綁定至"walk"動畫。

新增事件

新增動作-1

新增動作-2

重複以上的步驟,將<on stop>綁定至"stand"動畫;將<on jump>、<on fall>綁定至"walk"動畫;<on landed>先留白,我們以後再來設置,完成後按<F5>預覽。

新增事件完成

大功告成!我們成功的換上了自己的遊戲主角和場景,也成功的讓蛋蛋老師動了起來!Bravo~將檔案儲存成L2.capx,休息一下吧。

 



2-6 結語

我們用導入檔案的方式,把蛋蛋老師換成了主角。其次正確的設置了關卡的長度與遊戲背景,並調整了背景的景深。最厲害的是,我們借用C2事件驅動的力 量,很快的加入了對2套動畫控制。你有感覺自己在寫程式,或是寫html5網頁嗎?沒有,我們充其量只有點選或是指派,除此之外我們都還沒有動手寫到程 式。C2真是便利又有趣的的遊戲開發工具啊!

 



2-7 傅老師鼓勵你...


 

  1. 使用動畫軟體(如Flash、Animate Studio、Spriter...),設計製作自己的主角動畫,將蛋蛋老師的動畫取代。
  2. 將既有的平台原素(浮台、穿透平台,斜向平台)複製並重排,提高關卡難度。
  3. 再靜止的狀況下,按W鍵讓蛋蛋老師起跳。待她降落後還是笑的合不攏嘴,代表降落後動畫停在"walk",為什麼?這問題可能得從哪一行修改? (只須說明修改概念)


附註

*1。 本教學中將Instance譯為"實件"(Object譯為"物件"),請留意一般坊間並無此翻譯,此為傅老師刻意指定之譯名。
*2。 本教學中將場景視為英文"Scene"的中譯,並將場景一詞定義為"關卡的視覺影像"。
*3。 如果我們希望遊戲在iPhone4上漂亮地顯示,可將視窗大小設為(960,640);在iPhone5上則是(1136,640)。