how to make a platform game - my.stust.edu.tw ·...
TRANSCRIPT
How to make a Platform game
使用 Construct2可以各種 2D遊戲，在這個教學中要教導的是在 Construct2裡面
做出一個 2D平台遊戲的基礎知識。
本次教學會使用到一些已經畫好的 Sprites，如果你有買 Construct2的話，你應該
可以在 Construct2的專案資料夾中找到”Jungle Platformer”。
Getting started
一開始我們從左上角的 File>New建置一個新的專案。
在跳出的選項視窗中不用改變任何東西，直接選擇 New empty project按下 Create
Project就好，Construct2會直接幫你建好一個.capx 的新專案。
Size the layout
在最開始的時候，我們需要先設定場景的大小，在右邊 Project視窗中，按一下
Layout 1。
然後在視窗左邊的屬性欄中找到 Layout Size的選項，將大小設定成 4000 X 2048。
再來設定背景，連點兩下場景的空白處，這時會跳出 Insert New Object的視窗選
擇 Tiled Background。
你的滑鼠會變成十字的樣子，這時點擊場景的任何一個地方就會跳出 Image
editor 視窗，這時你可以匯入背景圖片，點及左上角的資料夾 icon就可以選擇圖
片匯入。
接著選擇素材包裡面的「bg.png」背景圖片。
選好圖片後就可以關掉視窗了。
這時你應該會看到一部分的背景圖片在場景上，點一下背景圖確定選取到了之
後，在左邊的屬性欄中改變背景圖的 Size 為 4000 X 2048，Position 設定為 0,0。
圖片背景是很大的，這時你可以縮放整個場景來檢視一下你剛剛放入的背景，按
住 Ctrl然使用滑鼠滾輪就可以放大縮小整個場景。
Adding a layer
現在我們要來添加其他物件，可是我們要小心不要動到我們的背景，所以我們要
將他鎖起來，這時可以利用 Layer系統。
一個場景可以包含好幾個 Layer，這就像是 Photoshop 的圖層概念一樣，Layer可
以鎖定或者隱藏，使用者可以用這個系統做出視差的效果。
找一下在右邊的 Project欄中，找到 Layer的分頁。
切換到 Layers分頁後你應該會看到列表中的第 0層。
將它重新命名成「Background」當作我們的背景圖層，然後點擊加號的 icon增加
一個新的圖層並且將它麼名稱改成「Main」，這個圖層我們會用來放置其他物件。
最後選擇背景圖層，然後按一下小掛鎖的 icon這樣我們就能將背景圖層鎖起來。
最後你的畫面應該會變成像這樣：
在確認好選擇了Main圖層後，我們開始增加其他物件。
Adding tiles
一樣的我們連點場景兩下來匯入新的物件，這次我們選擇 Sprite，在滑鼠變成十
字時點一下場景。
接著他會跳出 Editor Image視窗，在下方的 Animation Frames裡面案右鍵選擇
Import sprite strip
然後匯入素材包中的「TILES.png」：
接著會跳出 Import sprite strip視窗，將數值設定成 12和 12然後按下 OK。
然後稍微等一下 Construct2處理圖片。
處理完成後，因為我們不需要第一個空白 frame 所以在它上面案右鍵將它刪除。
之後你應該會看到 144 個檔案在 Animation frames裡面。
在預設情況下，Animation的播放速度是 5，不過現在我們不要播放連續圖片，
所以要把速度設定成 0。
首先我們點選右邊 Animation的 Default
然後在左邊的屬性欄裡面將 Speed設定成 0。
設定好後關掉 Image editor，在場景上的 sprite 應該會長這個樣子：
接著我們選取這個 Sprite 物件後，在屬性欄中將名字改成「Tile」。
Creating scenery from tiles
Sprite物件有個 Initial frame屬性可以設定不同的 frame上的貼圖，我們先將 Initial
frame 設定成 1。
現在我們按住 Ctrl然後又滑鼠拖曳剛剛的 Sprite 物件就可以複製一個出來。用這
方法複製出 3個物件出來排好。
中間物件的 Initial frame 設定成 10，右邊的則設定成 13。
設定好後你的畫面應該會像這樣：
Enabling snap to grid
我們將上方 View打開，然後將 Snap to grid選項勾選起來，這樣會讓你的圖片比
較容易排好對齊。
最後我們將剛剛的圖片排成下面這樣：
Adding the Player sprite
現在我們來增加我們的 player。
一樣的在場景上連點兩下，選擇 Spite，跳出 ImageEditor視窗後再下面的
Animation frames按右鍵選擇 Import sprite strip。
這一次我們匯入素材包中的「Idle.PNG」：
由於我們的圖片是這樣一排狀的，所以確認他有 4張 frames就好。
圖片匯入後，一樣將最前面的空白 frame 給刪除掉，接著你的畫面應該會像這樣：
Cropping
這時你可能會看到圖片上會有一些多餘的透明空間，對於記憶體來說，這種多餘
的空間會浪費電腦資源，所以我們必須把它裁減掉。
按住 Shift然後點選視窗上面的 Crop transparent edges按鈕，系統就會自動幫你
把多出來的空白區域給裁切掉了。
Setting the origin
接下來要設定圖片的原始點，在點擊視窗裡面的 Set origin and image points。
這時你應該會看到圖片上會跑出一個十字點並且跳出 Image points視窗。
現在我們要將這個十字原點設定在底部。
這時可以按一下數字鍵的 2來快速設定，或者在 Image points視窗點選 Origin按
右鍵>Quick assign>button，現在你的圓點應該會在圖片的正下方。
這時注意，我們要讓每一個 frames都將原點設定在圖片正下方，所以要在 Origin
按右鍵，然後按下 Origin and click Apply to whole animation，然後按下 Yes。
這樣就沒問題了。
Loop the animation
接著點選一下 Animation視窗裡面的 Default將它名稱改成 Idle。
然後在屬性欄的地方將 Speed設定成 6，Loop 設定成 Yes。
然後再 Animation視窗中，右鍵點選 Idle>Preview，你應該會看到整個動畫的播
放時的樣子。
最後在屬性欄把物件名稱改成 Player。
Adding behaviors
Construct2有許多的 behaviors可以幫助使用者快速建立物件的互動事件，在以
往遊戲開發中你可能需要撰寫大量的程式碼才能達到相同的效果，在 Construct2
裡面就不需要這麼麻煩。
首先我們要先增加一個方形的 Sprite 物件，先點兩下場景的空白處，然後新增
Sprite，然後設定他的起始點在正下方：
設定好後將這個物件的大小重新設定成和 Player差不多的大小。
請設定成 115 x 225的大小，大概像這樣就可以了：
然後改變它的名稱叫做”PlayerBox”，這個 Sprite 物件將會成為 Player的碰撞元
件，我們不希望在場景上看到它，所以請將屬性欄的 Initial visibility設定成
Invisible。
接下來我們要在這個 PlayerBox裡面增加碰撞的 behaviors。
在屬性欄中的 Behaviors欄位按一下「Add/edit」，然後在 Behaviors視窗裡面按一
下左上角「Add new」的十字 icon。
然後選擇「Platform」這個 behavior。
這時你應該會看到一個新的屬性欄位”Platform”在你的屬性欄中，你可以在這個
Behaviors裡面設定速度或選轉角度等等屬性，首先我們先讓物件跳起比較活潑
一點，設定 Jump Strength為 1400，Gravity 設定成 2500。
我們同時要讓整個畫面跟著 Player，所以請再按一次 Behavior 視窗裡面的加號
icon，然後加入「Scroll To」 behavior。
我們同時得設定平台好讓 Player可以站在上面移動，所以這次我們先選擇前面做
好的 Tile Sprite 物件，然後幫它增加一個「Solid」 Behaviors。
現在我們將場景切換到 Event Sheet 1，這是 Construct2用來編輯各種互動控制的
頁面。
在這個範例中，我們希望 Player可以一直跟著 PlayerBox，好讓他們可以做連動。
請按下「Add event」或者在空白處連點兩下左鍵，這時會出現一個 Add event視
窗。
這可以讓你增加新的 Event。
連點兩下 System，然後選擇 Every tick。
現在我們有一行新的 Event條件了，像這樣：
接著點一下後面的 Add action 會跳出 Add action 視窗，接著選擇 Player。
我們希望它的位置能跟著 PlayerBox，所以我們選擇「Set position to another
object」。
接著按一下 click to choose 選擇 PlayerBox，Image point設定為 0，然後按下 Done。
完成後的畫面應該像這樣：
最後點一下右邊的 Project資料夾，然後將左邊的屬性欄裡的 windows size 設定
為 1024 x 768這樣運行時的遊戲畫面就會比較大了。
現在你可以試著運行一下你的遊戲，用方向鍵來移動和跳躍。
Problems
在你運行過了之後你應該會發現幾個問題。
1. 你的 Player不會看向左邊。
2. Player無法再做其他動作。
首先我們先解決第一個問題。
首先換回場景頁面，在空白的地方連點兩下，這次我們要新增 Keyboard物件，
他會直接加入到場景裡面，你不需要設定它的位置，只要有新增進去就好，這可
以偵測你按下了鍵盤的哪個按鍵。
要讓 Player向左看，你不需要再做一系列向左邊的動畫圖片。
你可以使用 Construct2的「Set mirrored」來完成這個部分。
將頁面切換回去 Event Sheet在空白的地方連點兩下，然後選擇 Keyboard。
然後選擇「On key pressed」。
你必須設定按下哪個按鍵才會觸發 action，所以按一下 click to choose，然後按一
下左方向鍵，在按下 OK就可以了。
編輯好後會向這個樣子：
再來我們要增加「Set mirrored」，按一下 Add action，接著點選 Player。
點選 Set mirrored，讓設定維持在「Mirrored」之後按下 Done 就行了。
你的畫面最後應該會像這樣：
用一樣的方法再新增一個 event，不過這次按鍵設定成右按鍵，然後Mirrored內
的設定改成「No mirrored」。
試著運行你的遊戲，他現在應該可以向左或向右看了。
Adding more animations
首先我們先做一點平台出來好讓我們的 Player可以在上面移動和跳躍。
依樣的利用 ctrl+滑鼠拖曳就能輕鬆複製平台，然後稍微排列組合一下就可以了，
畫面大概會長得像這樣。
接下來讓我們增加點動作給 Player。
連按兩下 Player叫出 animation editor 視窗。
我們一共有 4個圖片要會進去製作成動畫。
1. Idle_to_run.PNG
2. run.png
3. jump_from_run.PNG
4. jump_from_stand.PNG
每個動畫的添加過程如：
1. 在 Animation視窗中按右鍵選擇 Add animaiton。
2. 打入動畫名稱。
3. 選擇動畫。
4. 在 animation fram 視窗中按一下右鍵，然後選擇 Import sprite strip。
5. 找到你的連續動圖，並且匯入。
6. 檢查動畫的圖片數量是否正確，好了就按 OK。
7. 刪掉最開頭的 empty frame。
8. 在最開頭的 frame 設定起始點。
9. 按住 shift然後點一下 Crop讓所有 frame的起始點統一，並且刪除掉空白區
域。
10. 在屬性欄中設定好屬性：
Speed：15，JumpFromStand和 JumpFromRun要設成 20。
Loop：No，Run的動畫設定成 Yes。
依序完成所有動畫後，你的 Animation視窗應該像這樣：
設定好後我們要知道在甚麼時候要播放哪個動畫，判斷的條件設在 PlayerBox身
上，因為是由 PlayerBox來操作，播動畫則由 Player來執行。
比較要注意的是我們有一個 IdleToRun，這代表動畫播放的順序應該是：
1.站立不動：Idle
2.開始移動：IdleToRun
3.移動：Run
看起來有點複雜，但是這很容易可以完成。
Setting up the animation events
希望你已經習慣建置 Event
1. 選擇物件並且設定 Event條件。
2. 選擇 Condition 或 Action。
3. Optional：如果有要輸入任何參數值的話。
將頁面切回 Event Sheet，首先我們要設定的是 IdleToRun 動畫的播放時機。
Event物件選擇 PlayerBox，然後條件設定成「On moved」。
Action物件選擇 Player，接著選擇 Set animation，在 Animation欄位的雙引號中
間打入 IdleToRun，下面則選擇 beginning。
當 IdleToRun 動畫播完後，我們要讓他播放 Run動畫。
這次 Event物件選擇 Plyer，條件選擇 Animation欄的「On finished」並且打入
IdleToRun。
Action物件一樣選擇 Player，接著選擇 Set animation，打入 IdleToRun，下面選擇
beginning。
當 Player停下來的時候，我們要讓動畫切換回 Idle。
Event物件選擇 PlayerBox，條件選擇「On Stopped」。
Action物件選擇 Player，接著選擇 Set animation，打入 Idle，下面選擇 beginning。
試著運行遊戲看看，你的角色應該可以正常的播放跑到停止之間的動畫，不過還
沒結束，我們還需要做跳躍的部分。
當角色在跳躍時，我們必須偵測他跳躍時是停止的還是正在行走的。
所以我們的 Event必須設定成這樣：
請注意這邊設定的方式叫做「Sub‐event」，就是在 Event 下面再設定一個 Event。
最開始的 On jump條件通過後，它會在往下判斷是不是正在行走的，這樣可以根
據狀況的不同播放不同的動畫。
在這邊 Sub‐event的設定方式只要在整條 Event的最前面按下右鍵 > Add > Add
sub‐event就可以了。
另外你可以看到最下面的 Event有個紅色的 X號，那代表相反的判斷。
只要在 event中按右鍵 > Invert就可以設定完成，或者在選擇 Event了之後按下
i鍵也可以。
我們還有一些另外的 Event要設定。
當跳躍落地之後要讓動畫播回 Idle 或者 run，所以我們的 Event要設定成這樣：
當你全部設定好後你可以試著運行遊戲，你的角色應該已經可以正常的跑跳了。
現在，是時候來增加敵人了。
Adding an enemy
希望你已經熟悉物件的建置，接下來我們會簡化物件建立的說明過程，直接告訴
你該做些什麼。
1. 在場景上新增一個 Sprite 物件。
2. 匯入 Enemies / monste.PNG的動畫圖片。
3. 刪除最開始的 empty frame。
4. 設定動畫為 Loop，速度為 10。
5. 設定起始點。
6. 統一所有動畫圖片的設定(Shift + Crop)。
7. 關掉 Animation視窗，更改物件名稱為「Monster」。
8. 把它放到一個平台上，像這樣：
這是Monster的動畫條：
現在我們要做下面的判斷邏輯：
1. 如果玩家從側面撞到蝸牛會閃爍並且受到傷害。
2. 如果玩家從正上方踩蝸牛，蝸牛會死亡。
我們切換道 Event頁面，然後新增一個 Event。
PlayerBox ‐> On collision with another object ‐> Monster。
這個條件代表玩家觸碰到蝸牛就會觸發，接下來要加入 sub‐event來增加接下來
的判斷。
PlayerBox ‐> Is falling
因為我們同時要判斷角色是否有正確的踩在敵人的正上方，這可以防止意外的殺
死敵人，所以我們要再增加一個 Condition 來判斷。
在 Is falling 的前面按下右鍵 > add > add another condition。
記住，所有的條件滿足了 Event才會執行後面的 Action。
Contition 的設定：
PlayerBox ‐> Compare Y ‐> Less than , Monster.Y
在 Construct2裡面，Y 座標是越往下數值越大，所以當 PlayerBox的 Y座標小於
Monster的 Y座標時就代表 Player在Monster之上。
接下來開始加入 Action。
Monster ‐> Destroy。
我們也可以設定當 Player踩到Monster之後可以稍微向上反彈一下，所以要再加
入一個 Action。
PlayerBox ‐> Set vector Y ‐> ‐700。
「Set vector Y」基本上是從 Platform movement給予一個垂直的速度值，這邊數
值設定為負值，代表一個向上的速度值(因為 Y軸座標越往下數值越大)，而設定
為 700會比 Player本身的跳躍 1400還來的小，這樣等於做出了一個反彈的小跳
躍。
接著，將整條 Is falling 給選起來，按下右鍵選擇 Add ‐> Add Else。
「Else」是一個特別的 Event條件，它代表當前面的 Event條件不通過時就會執
行。
以這個範例來說，這裡的 Else 代表當 Player直接撞到Monster而不是跳起來踩它
的時候，就會觸發這個 Event。
而現在我們要讓 Player在撞到Monster時有受傷的感覺，首先先幫 Player加一個
Flash的 Behavior。
接著到剛剛的 Else 後面的 Action加入：
Player ‐> Flash ‐> 維持預設值。
好了，現在你可以試著運行遊戲來試試看！
你可以跳到Monster上面將Monster踩死，或者直接走過去撞Monster會出現閃
爍的效果，不過因為你只有設定 Player閃爍而已，所以 Player並不會死。
本範例不會教太過於華麗且複雜的技術，不過可以利用之前學到的技術，試著幫
Player增加血量、死亡等等狀態。
Moving the enemy
讓Monster移動最大的問題在於要如何讓Monster走到平台邊緣之後會轉回來繼
續移動。
要做到這點可以用一個很簡單的方法，就是利用兩個透明的偵測方塊放在平台邊
緣，當Monster碰到偵測方塊時就讓Monster進行轉向的動作。
我們同時也可以增加 Platform behavior 到Monster身上，因為：
1. 這樣可以讓Monster左右行走。
2. 可以讓Monster在往上和往下的斜坡上行走。
3. 如果你想要讓Monster在不同平台移動的話。
4. 如果你想要做一個會不斷跳躍的Monster的話，你可以在Action使用「simulate
control」。
現在，增加一個 Platform behavior 到Monster身上。
因為Monster不像 Player有好幾個動畫要切換撥放，所以我們不用像 Player那樣
還需要做一個 PlayerBox來偵測碰撞。
不過，如過當你自己做的怪物有許多動畫要切換時，記得要做出一個偵測碰撞的
Box 會是比較好的方式。
現在，我們不希望玩家可以控制Monster，我們希望Monster會自己移動，所以
我們要先設定Monster的 Platform裡面的 Default controls設定成 No。
接著我們不希望Monster跑太快，所以將Max Speed設定成 80，Acceleration 和
Deceleration 都設定成 100。
接著我們需要做一個可以讓Monster在邊緣迴轉的偵測方塊，這邊直接做一個
Sprite 物件，將名稱改成「EdgeMarker」，然後 Size 設定成 40 x 40，Initial visibility
設定成 Invisible。
做好後將 EdgeMarker利用複製的方式擺到Monster所在的平台兩側，像這樣：
現在我們需要有個可以用來記錄Monster是向左移動還是向右移動的值，以便我
們可以利用這值來改變Monster的移動狀態。
這時我們可以利用屬性欄中的「Instance variables」來記錄。
「Instance variables」簡單來說就是一個變數，它會個別獨立的儲存在你所設定
的物件上面。
假設如果你設定了一個叫「HP」的變數在Monster物件上，這個變數的值是 5，
那在場景上的所有Monster物件都會個別有一個名叫「HP」的變數，並且數值為
5。
在遊戲運行時Monster的 HP變數都是各自獨立在每個Monster物件上。
我們可以利用這種變數來記錄各種數值或者狀態。
首先選擇Monster物件後，按下在屬性欄中的 Instance variables就會跳出 Instance
variables視窗。
接著按下視窗中左上角的加號 Icon就可以增加我們想要的變數了。
在 Name的地方打入 action，Type 選擇 Text，Initial value 打入 right，然後按下
OK就設定好變數了。
接著我們切換到 Event Sheet。
接著我們要完成下面幾個邏輯：
1. 當 action 變數值是 right的時候讓Monster持續向右移動。
2. 當 action 變數值是 left的時候讓Monster持續向左移動。
3. 當Monster撞到 EdgeMarker時改變 action 的變數值，如果變數值是 right就
改變成 left，如果是 left就改變成 right。
接下來要開始設定Monster的移動。
Event：Monster ‐> Compare instance variable ‐> action equal , "right" (最後的 value
要使用雙引號，代表打入的是字串)。
Action：Monster ‐> Simulate control ‐> Right。
我們希望Monster可以像 Player那樣左右翻轉，所以 Action的部分還要加上一個
Set not mirrored。
之後用同樣的方法在設定一個向左邊的 Event。
接下來要設定Monster碰到 EdgeMarker之後改變 action 變數的值。
Event：Monster ‐> On collision with another object ‐> EdgeMarker。
Sub‐event：SnailEnemy ‐> Compare instance variable ‐> action equal to "right"。
Action：SnailEnemy ‐> Set value ‐> action to "left"。
Subevent：Else。
Action: SnailEnemy ‐> Set value ‐> action to "right"。
由於 action 的值只會是 right或者 left，所以在最下面的 Event我們使用 Else來判
斷就可以了。
接著運行你的遊戲吧！
你應該可以看到Monster可以在平台上左右移動了，這是一個相當簡單的 IA。
你可以試著在場景上放置多一點的平台和Monster來設置自己的關卡或者自己
將Monster的 AI變得更聰明點！
像是利用 EdgeMarker的方法，讓Monster跳到另外一個平台上移動，再讓它跳
回來。
Jump-thru objects
試著直接跳上一個在Player正上方平台，你會發現你的Player會撞到上面的平台。
要怎麼做才可以直接從正下方跳上平台呢？你可以使用「Jump‐thru objects」，這
可以讓 Player從下方的平台直接跳上上方的平而不會撞到頭。
首先我們要另外做一個 Tile 的物件出來，在 Project欄中對著 Tile物件按下右鍵，
選擇 Clone，你會看到你的 Project欄裡面多出了一個「Tile2」物件，將 Tile2拉
進場景裡面。
之後打開 Tile2的 Behaviors視窗，將原本的 Solid刪除掉，然後新增 Jump‐thru
Behavior。
然後 Initial frame 使用 134和 135 號做出一個新的平台，像這樣：
接著新這個新的平台擺到你想要的位置，運行你的遊戲，這時你會發現你已經可
以從正下方跳上這個新的平台！
利用這些前面已經做好的平台與Monster試著自己拼出一個關卡吧！
希望你現在已經有了足夠的知識與技術可以自行設計自己的遊戲與關卡了，本範
例示範了一些平台遊戲中的基礎概念與技術，希望你可以在往上延伸出更多有趣
的東西。
最後來教你一個可以使你的場景看上去像是 3D的方法！
Parallax
「Parallax」指的就是所謂的視差效果，它可以使你的背景與人物移動的速度出
現差距，這樣可以使你的背景產生出一種具有深度立體的效果。
首先到 Layer視窗頁選擇 Background layer。
然後在右邊的屬性欄中，將 Parallax 的數值改變成 50 x 50，這代表背景的捲動速
度會減為一半。
試著運行遊戲吧！你會注意到背景移動的速度變得比較慢了，這樣會你的遊戲會
感覺有種空間的立體感了！