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

Construct 2 教學-第3節

第3節-地圖設計

 

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

上一節我們成功修改了L2.cap,將主角改為蛋蛋老師,背景換成明亮的太陽觀測圖,同時也 加長了關卡長度。這一節我們教您如何設計地圖,換上自己設計的平台材質(texture),並擺設各式平台障礙物。

 
 
 
 


 

本篇為了讓同學清楚學習圖層概念,使用了7層圖層。 考量到免費版C2只支援4層圖層,使用免費版的同學建議可 先把<UI>層砍掉、<inferno>層跳過不實現,將<float>層與< jump_through>層合 併,以壓縮在4層限制內。

 

3-1 方格地圖概念(Tilemap)

在設計平台遊戲時,地圖的製作方法不只一種,本節介紹的是多用途的方格地圖設計,掌握之後亦可用來開發RPG遊戲、棋盤式遊戲。方格地圖顧名思義, 是將 整個關卡切成大小相等的方格(tile),再將設計好的貼圖格(tile texture)逐格貼入。貼入貼圖格時不可跨格、亦不可縮放,只能依方格的限制位置以1:1的方式將地圖格貼入。C2中提供此功能的物件叫做 Tilemap,他可讓使用者將自定義圖檔切割成小塊的方格,再依使用者的操作將小塊方格貼至佈局中。

方格地圖設計示意圖,本軟體為Tiled

 


 

3-2 專案預處理

在開始之前我們要對專案做一些特別的設置,請打開L2.capx,於右上角專案區點擊專案名稱(目前應為New Project),點擊後看到左方參數區,依下圖內容逐格填入。

點選專案區New Project

專案參數設置
參 數名稱 功 能
First layout 進入遊戲 後第一個佈局,使用default即可。
Use loader layout 是否使用 客製化的載入畫面,本專案未使用,請設為No。
Pixel rounding 是否將像 素四捨五入至整數。將畫面延展時(stretch),像素位置會出現小數點後位數,此項設為Yes可將其四捨五入。(*1)
Window Size 可視範圍 的大小。
Preview browser 預覽時呼 叫的瀏覽器。
Fullscreen in browser 設定全螢 幕的模式。設為off不對畫面延展;延展至全螢幕則通常選Letterbox scale。(*2)
Fullscreen scaling 延展後的 畫面解析度。若無特別設計上的用意,請設為high quality。
Use high-DPI display 是否支援 高DPI的手機螢幕。若無特別設計上的用意,請設為YES。
Orientations 畫面橫直 向擺放設定。若無特別指定方向,請設為Any。
Enable WebGL 是否使用 WebGL。(*3)
Sampling 畫面延伸 或物件延伸時補點的方法。Point較快速,Linear較平順。
Physics engine 物理引 擎。C2中如自由落體、碰撞反彈之物理運算由物理引擎負責。視喜好選取。
Loader style 設置公版 的載入畫面。建議設為Process bar & logo。
Pause on focus 在預覽 時,若視窗失去焦點時,是否遊戲暫停。(本項只會作用於預覽)
Clear background 是否清除 background,在有放置背景圖像的狀況下,將此項設為No可加速遊戲效能。


做完以上的設置,將會把專案視窗設為800x600,獲得更大的視野。另外底下有幾個部份讓我們先預處理一下:

1. 調整蛋蛋老師尺寸位置,將[Player]大小設為(64,128),位置為(128,816)。
2. 調整太陽尺寸位置,將[BackgroundTile]大小設為(1088,1024),位置為(0,-576)。
3. 砍掉原來所有的平台。右上角專案區,滑鼠右鍵單擊[JumpThruTile],點選Delete刪除。重覆上述步驟,將 [MovingSolidTile]、[SolidTile]一併刪除
4. 打開格線,於主功能區點擊<View>頁籤,勾選<show grid>,grid width/height均設為16。

重新調整佈局


右上角打開佈局列表,按下新增鈕,新增一圖層(C2自動命名為Layout 0),按下更新名稱鈕 將 其命名為<tilemap>。未來我們會把方格地圖都放在這一 層,以免跟其他物件混淆。C2的圖層有z軸高低之分,圖層右方的數字越大,代表圖層較高,會蓋掉數字低的圖層。以此觀念來看,< Background>層是用來墊在底下的,當然要放在數字最低的第0層;<UI>層是用來提供資訊不能被蓋住的,當然要放在數字最大 的層。請將<tilemap>層拖曳到<UI>與<Game>兩層之間,正確的調整層次。完成後確定< tilemap>層維持反白,稍後我們將放置地圖於此層。

加入新圖層

調整圖層位置

OK,將專案存檔為L3.capx。現在我們有了一個陽春的場景,等著我們把平台地圖放上去。

 



3-3 加入Tilemap物件

首先,確認目前選取的圖層為<tilemap>,該層於佈局列表區應為反白狀態。確認後請在編輯區任選淺藍色的背景,雙擊滑鼠左鍵,打 開物件/插件選擇器。在General種類下,會看到<Tilemap>這個物件,滑鼠左 鍵雙擊點選。點擊後會回到編輯區,並看到滑鼠標變為定位用之十字型,請任選一處按滑鼠左鍵將物件放下。這時C2會提示我們目前專案的設置與建議值有出入, 請選擇<Keep current settings>,因為我們在3-1已經做了更適合的設定。

 

請注意:下面您所看到的物件列表會比您自己畫面上的多出許多,這是因為傅老師添增了大量的第三方插件 (Plugin),其中以rexrainbow所開發的百餘組插件最為實用。 請按此至rexrainbow的介紹頁面下載插件 安裝器。 我們將於第二章開始大量套用第三方插件。

加入Tilemap物件

選擇Keep current settings

畫面上彈出了一個新的影像編輯畫面,中央的影像是<Tilemap>物件自帶的預設貼圖格,有可愛RPG的風格。

C2預設的圖格

不過蛋蛋老師是步行在 宇宙間耶~應該要再酷一點~讓我們換一套有宇宙風格的貼圖吧!請至下列網址下載宇宙風格的貼圖。

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

下載完畢請記得解壓縮。OK後回到影像編輯區,點選開啟檔案鈕,選擇解壓出的< tilelib2.png>。太好了~這是一組更 適合宇宙風格的貼圖,每一格圖大小是64x64的正方形,上面有7格不同紋理的星球表面貼圖,中間有個大箱子是由4格組成的大圖,下面有不同角度的星球貼 圖,真是豐富。欣賞完之後按<Esc>退出編輯畫面。

自行繪製的圖格

我們可以看到C2自動幫我們新了一個叫[Tilemap]的物件,而且這個物件大小與整個佈局一樣大,這塊區域就是可供貼圖的方格區。在開始貼之前 有個參數要修改,看到左側參數區,目前的格寬(tile width)與格高(tile height)與我們的貼圖不吻合,請將這兩個值都改為64,其餘參數均設為0。

Tilemap參數設置

OK,[Tilemap]的設置擺放完畢,稍後我們正式來貼圖。

 



3-4 貼上固定式平台

在主功能區下,選擇<View頁籤>,勾選<Tilemap bar>,會跳出貼圖選擇盤。我們先來貼一塊固定式平台讓蛋蛋老師站穩。以滑鼠左鍵按住貼圖選擇盤左上角第一格,左鍵不放,向右拉至最右方一格再放 開滑鼠 左鍵。可以看到我們圈選了從標號0至標號6共7個貼圖格。

打開貼圖選擇盤

選取第一列貼圖

按下上方的畫筆按鈕,回到編輯區,這時畫筆變成了剛才圈選的7格貼圖了。上下左右移動一下發現,並不是每個位置都可 以貼,只有位置剛好切齊貼圖格的位置才可貼上。請在蛋蛋老師下方貼上此塊貼圖。

貼上一層地表

OK! 他看起來是個固定平台了~讓我們來預覽一下看看會發生什麼事情。主功能區切回<Home>,點選<Run Layout>。天啊~~蛋蛋老師怎麼一直摔下去?不是有固定平台了嗎?喔嗚...原來我們貼了圖,但是沒跟C2說這個塊圖得設成物理上"硬梆梆" 的材質。接下來傅老師教您如何將物件"硬梆梆"化。

 



3-5 增加物件行為特性

於專案區點選[Tilemap],看到左方參數區,點選行為特性(Behavior,以下開始簡稱"行為"),跳出行為列表。點擊新增行為 ,以滑鼠 左鍵雙擊 固態化<Solid>,完成。

Behavior

Solid

主功能區切回<Home>,點選<Run Layout>。不錯!這次蛋蛋老師可以腳踏實地囉~

Solid

 

蛋蛋老師的一小步,是本遊戲的一大步(^^)

 



3-6 添加固定式平台起伏

重覆3-3的步驟,將固定平台持續向畫面右方添加貼圖格。若覺得使用畫筆工具速度太 慢,亦可換成矩形工具,點選後 直接在編輯區拖曳矩形區域,即可貼入選取之貼圖格。先在整個關卡的底部鋪一層月球表面,如下圖。

鋪一層地面

地面鋪設好後將畫面拉近至蛋蛋老師,從<View>中再次叫出<Tilemap bar>,單擊左上角的貼圖格,使得選取範圍為單一個貼圖格。OK後點選擦除工具,回到編輯 畫面擦掉蛋蛋老師前方3格貼圖格。哇~我們把地表挖出了一個洞。如果蛋蛋老師沒踩好,掉進去是會gameover的。

挖洞

接著回到貼圖選擇盤,看到第四列第二個貼圖格(編號:22),這格是一個向右上方延伸的斜坡;同樣看到第四列第七個貼圖格(編號:27),這格是個 向右下延伸的斜坡。請使用這兩格以及前面使用過的貼圖格,貼出一個2層高的小山丘。

造小山丘

貼好後按<Run layout>試試看,會發現,疑?斜坡走不上去?得用跳的才行。這是因為我們沒有修改斜坡的碰撞區域(collision polygon),而在C2裡貼圖格預設的碰撞區域是正四方形,所以剛剛走到斜坡邊緣會被擋下來。現在點開貼圖選擇盤來修改。滑鼠左鍵雙擊編號22格,會 看到貼圖格單格編輯畫面,其四周出現藍色線條與紅色頂點構成的多邊形,這就是第22格的碰撞區域。我們要讓碰撞區域與圖形的邊緣一致,這樣才能讓C2正確 檢測到碰撞的發生。滑鼠左鍵單擊左上角頂點,可看到改頂點變成黃色,按下鍵盤<Delete>鍵將此頂點刪除。完成後再對23、26、27格 做同樣的處理,使其碰撞區域與圖形邊緣吻合。

調整碰撞區域

好~現在一切調整完畢!主功能區點選<Home> -> <Run Layout>來預覽一下,呦呼~一切正常。嗯?我們還欠缺什麼東西嗎?是的,下面要教您親手製作浮台與跳穿平台。



3-7 添加浮台

為了方便辨識,我們新增一個圖層專門放置浮台。請比照3-2中新增圖層的步驟,在<UI>層及<tilemap>層間新增 一個<float>層。新增完畢後以滑鼠左鍵點擊<float>,選取此層。

新增float層

接著比照3-2的步驟,在<float>層上新增一個<Tilemap>物件,這次的貼圖請讀取< platform.png>檔案。讀取完畢後至左邊參數區,上方<Name>改為"float_platform"以方便識別,輸入完 畢按<Enter>。底下<Tile width>以及<Tile height>均維持32不變。按<Esc>跳出。

新增float_platform

跳出後,點選主功能區<View> -> <Tilemap bar>,叫出貼圖選擇盤。在佈局的左上角邊緣增加一個浮台,如下圖。

貼上float_platform

增加完畢後看到佈局四個角落有四個白色小方框,這四個小方框代表浮台物件的尺寸,很明顯空白的部份太多了。請佈局右下角的的小方框至浮台圖像的右下 角頂點。

修改float_platform尺寸

現在我們要將[float_platform]擺至正確的位置。這裡有個小問題,由於[float_platform]跟<UI>層的 [Text]物件重疊,所以怎麼選也選不到他。這裡教一個選取的小技巧,請至右上角圖層清單中點選UI旁的鎖頭符號,點下去UI層的所有物件就會被鎖死不 能選取。鎖上<UI>後再回頭把[float_platform]搬到小山丘的旁邊,如下圖;

圖層上鎖

擺置float_platform

最後讓我們來設置[float_platform]的物件行為特性(Behavior),請比照3-4的步驟,為[float_platform]加入 <Solid>以及<Sine>這兩個行為。<Sine>就是正弦函數的意思,這個行為可以將物件的水平位置、垂直 位置、大小、透明度、角度...等等參數以固定週期的正弦函數運動(簡諧運動)來呈現。

加入Solid、Sine兩個行為特性

將<Sine>的參數設置如下:

Sine的設置

 

參 數名稱 功 能
Active on start 是否遊戲 開始就打開此行為。
Movement 將正弦運 動指派給哪一個種參數。
Wave 選擇運動 種類。Sine是正弦函數運動,Triangle是三角波函數運動,Sawtooth是鋸齒波函數運動,Square是方波函數運動。
Period 運動的週 期,也是來回一趟的時間。單位為秒。
Period random 額外為週 期添減亂數,此處設的是亂數最大值。
Period offset 遊戲開始 的週期偏差值。
Period offset random 額外為週 期偏差值添減亂數,此處設的是亂數最大值。
Magnitude 正弦運動 的振幅。
Magnitude random 額外為振 幅添減亂數,此處設的是亂數最大值。

 

請注意,<Sine>參數的亂數(random),是避免佈局中該物件之所有實件以相同的週期 及振幅運動,一般來說若未連續擺放浮台,亂數值均可設為0。(*5)


主功能區點選<Home> -> <Run Layout>來預覽一下,確定浮台可以正確運作。



3-8 添加跳穿平台

為了方便辨識,我們新增一個圖層專門放置跳穿平台。請比照3-2中新增圖層的步驟,在<UI>層及<float>層間新增 一個<jump_through>層。新增完畢後以滑鼠左鍵點擊<jump_through>,選取此層。

新增jump_through圖層

接著比照3-6的部份,在<jump_through>層新增一個<Tilemap>物件,命名為 "jump_platform",圖檔部份讀入"platform2.png"。於畫面左上角貼上一組貼圖格,再比照3-6的步驟將其物件尺寸對齊圖像尺 寸。調整好之後將之擺置於浮台右邊。

放置jump_platform

最後讓我們來設置[jump_platform]的物件行為特性(Behavior),請為[float_platform]加入<Jump - thru>這個行為(<Jump-thru>就是跳穿的縮寫)。

 

請注意:此處不可加入<Solid>行為,若加入則<Solid>行為會蓋過 <Jump-thru>行為。

 

主功能區點選<Home> -> <Run Layout>來預覽一下,確定跳穿平台可以正確運作。

 



3-9 添加火海

在遊戲中如果不慎落入坑洞中會gameover,可是坑洞實在是太弱了~傅老師這裡提供一個更酷的場景:我們把坑洞換成火海如何?

OK,請比照3-2中新增圖層的步驟,在<tilemap>層與<Game>層間新增 一個<inferno>層。新增完畢後以滑鼠左鍵點擊<inferno>,選取此層。

新增inferno圖層

 

接著比照3-6的部份,在<inferno>層新增一個<Tilemap>物件,命名為 "inferno_fire",圖檔部份讀入"tilelib3.png"。底下<Tile width>以及<Tile height>改為64。按<Esc>跳出。接著叫出貼圖選擇盤,在原本地圖上的洞穴貼上火燄貼圖格。

 

請注意:火燄部份要比洞穴左右各多一格,我們等下補特效時需要這兩格。

 

放置inferno_fire


再稍微修改一下地圖,讓關卡開始有操縱上的難度:

增加物件提高操縱難度

主功能區點選<Home> -> <Run Layout>來預覽一下。現在跳上浮台也要注意時機了,不小心的話就會......喔~好燙~會gameover!走到最底會被跳穿平台擋住,按 下鍵盤<s>就可突破。

不錯不錯,終於有個基本的操控難度了。最後我們來添加幾個令人驚豔的特效,當做這節課畫龍點睛的精采結尾。

 



3-10 WebGL特效

在3-2的專案設定裡,您應該已經將<Enable WebGL>設為ON(若不確定請再次檢查)。C2提供我們許多令人驚豔的特效,但是唯一的要求是,使用者的瀏覽器必須支援WebGL,亦需把瀏覽 器的相對設置打開(*5)。接下來有三個特效要教給大家。

首先於專案區選取[BackgroundTile],也就是我們的背景太陽。選好後至左邊參數區,點選<Effect>,打開效果清單。點擊 新增按鈕, 選取<Warp>特效。完成後按<Esc>跳出。疑?太 陽怎麼軟掉了?

增加Warp特效


主功能區點選<Home> -> <Run Layout>來預覽一下。哇~太陽開始冒火燄了!!!

那...火海也可以嗎?當然可以~火海更簡單。至右上圖層清單以滑鼠左鍵單擊<inferno>,再到左側參數區點選< Effect>,這次改為加上<WarpRipple>特效。完成後按<Esc>跳出,<Home> -> <Run Layout>預覽。哇~火燄開使動了,太過癮了。

再來,我們對邊緣視野的亮度也做個調整。

一般來說,畫面中間應當較亮,邊緣應當較暗。其實這個效果很簡單就能做到喔~首先於圖層清單選取<tilemap>,也就是我們的固定平台 層,再到左側參數區點選< Effect>,加上<Vignette>特效。完成後按<Esc>跳出,<Home> -> <Run Layout>預覽。哇~畫面角落變陰暗了,這樣看起來比較順耶。

最後我們對蛋蛋老師的顏色做些調整。由於場景偏橘,蛋蛋老師身上的聖誕裝顏色變得不夠顯眼,我們讓她色調變得暖一點。 首先於專案區選取[Player],選好後至左邊參數區,點選<Effect>,新增<Vibrance>特效。看到左方參數設 定區,將<Vibrance>參數設為10,改好按<Enter>。完成後按<Esc>跳出,< Home> -> <Run Layout>預覽。

本節完成圖


嗯~現在蛋蛋老師變得更像主角了,整個關卡更有臨場感,C2的效果真是好用呀!辛苦了,將檔案儲存成L3.capx,休息一下吧~



3-11 結語

在本節裡我們學會了使用Tilemap從外部導入貼圖格,學會了使用行為特性來設計固定平台、浮台、跳穿平台,學會了分圖層的方法,最後學會了三個 好用的特效,為我們的小遊戲大大加分。下一節開始我們會逐漸開始修改程式碼,敬請期待!

 



3-11 傅老師鼓勵你...

 

  1. 使用繪圖軟體(如Gimp,Photoshop...),修改範例貼圖,製作自己風格的平台物件。
  2. 自己嘗試套用其他特效,有沒有什麼新發現呢?

 



附註

 

*1。 Pixel rounding設為YES時,動畫容易出現抖動的狀況,尤其是動作類遊戲。
*2。手機輸出必須設置為全螢幕模式,並且最好在視窗四周預留加色邊框,以防止在特寬或過窄手機上出現破版。
*3。本範例為了展示WebGL的強大特效(Effect)功能,故設為ON。實際發佈遊戲時需考量玩家瀏覽器是否支援WebGL,可在遊戲簡介中以提示 玩家。
*4。舉個例子來說,如果在佈局中連續擺3個浮台,而3個浮台以同樣的初始週期跟振幅擺動,不但畫面詭異,難度也低。
*5。想確認瀏覽器的WebGL有開啟,可連至以下網址測試 https://dl.dropboxusercontent.com/u/209080340/construct2_example/webgl_test/index.html