Construct2—How to make a Platform game

什麼是construct2

construct2是一款html5遊戲引擎。通過construct2,你無需編寫代碼,通過圖形化界面操作,你可以設計出屬於你的小遊戲。
今天 我們通過一款幽靈射擊的小遊戲,初步認識一下construct2.
如果你未安裝construct2,請這裏

Ghost Shooter

遊戲架構

  • 玩家
    技能:發射子彈
  • 怪物
    子彈命中則消失

遊戲素材

  • 玩家
    這裏寫圖片描述
  • 怪物
    這裏寫圖片描述
  • 子彈
    這裏寫圖片描述
  • 爆炸效果
    這裏寫圖片描述
  • 背景
    這裏寫圖片描述

遊戲設計

  • 新建工程
    這一步驟不用多說,點擊左上角,新建一個New File即可
    當我們新建了一個工程後,可以看見一片空白的layout,這就是我們的工作區域了,你可以在左邊設置layout的屬性。
  • 插入元素
    插入壁紙
    首先我們來爲遊戲添加背景。在layout畫布裏雙擊,彈出插入對象對話框。在該對話框中雙擊Tiled Background對象。
    這裏寫圖片描述
    這時候,我們鼠標變成+,隨便點一個空白區域,會彈出一個新窗口,然後往裏面添加我們剛剛的背景圖片就好啦。添加好後,我們需在在左邊的Properties Bar屬性面板裏設置它的position位置爲0,0(左上角),以及它的size大小爲1280,1024(畫布的大小)。
    這裏寫圖片描述這裏寫圖片描述
    最終結果就如下面這樣子啦:
    這裏寫圖片描述
    添加層
    所謂層,就是和你想象的一樣。一個遊戲中,有不同的層,背景在最底層,然後玩家怪物等在背景層上面。所以,我們首先要鎖定背景層,防止我們不小心改動了背景層的屬性。其次我們要新建一個層,這個層用來放我們的玩家怪物子彈等等。
    這裏寫圖片描述
    在層面板中,我們可以看到背景層的序號爲0,Construct2是從0開始計算,和編程類似,選中背景圖層,點擊pencil圖標將背景層名字更改爲Background。並點擊Background圖層的鎖圖標將鎖定本圖層。接着點擊綠色的+號按鈕添加一個新圖層“Main”。
    這裏寫圖片描述
    接下來請保持圖層Main處於選中狀態,接着我們將把對象置於該圖層。
    添加輸入控制對象
    雙擊畫布,然後插入Mouse對象和Keyboard對象。這兩個對象是爲了單擊鼠標射擊和控制方向。
    添加遊戲對象
    可以把我們上面給的4幅遊戲素材拖入畫布中,移動子彈和爆炸對象到畫布外,這樣遊戲一開始,我們看不到這些對象。
  • 爲對象添加行爲
    我們用到的行爲如下
    8 Direction movement: 這個行爲可以讓你實現給角色添加方向移動(方向鍵)的功能。
    Bullet movement:這個行爲讓對象朝着它當前的角度移動,比如,本例中玩家射出的子彈的移動行爲,不要被這名字迷惑了,它不只適用於子彈,也可以應用於怪物等移動。在Contruct2裏所有的移動行爲都是通過添加速度向前行進。
    Scroll to:這個行爲可以讓運行時畫布隨着對象移來移去(滾動)。這個行爲很適合於角色。
    Bound to layout:這個行爲可以防止對象離開畫布區域。這個行爲對於角色來說也很重要。
    Destroy outside layout:當對象離開畫布區域時,就將其銷燬。比如本例中的子彈,如果不銷燬的話,雖然子彈離開畫布區域了,但是依然暫用內存。所以我們需要及時銷燬不再需要的對象。
    Fade:這個行爲可以給對象添加淡出效果,用於爆炸等特效的消失。
    爲player添加行爲
    我們給角色player添加8 direction movement行爲:選中player,在properties bar屬性面板裏,找到Behaviors分類,點擊Add/Edit彈出Behaviors行爲對話框。
    這裏寫圖片描述
    在對話框中,點擊綠色+號-添加行爲圖標,在彈出的“Add behavior”對話框中雙擊8 direction movement。
    這裏寫圖片描述
    接着以同樣的方法給player添加Scroll To和Bound to layout行爲,此時”player:Behaviors”對話框如下:
    這裏寫圖片描述
    關閉行爲對話框。點擊運行查看遊戲!此時我們已經可以移動角色,屏幕也跟隨角色移動,而且通過設置Bound to layout行爲後,角色也不能移出畫布區域。
    這裏寫圖片描述
    添加其他行爲
    給Bullet對象添加Bullet movement和Destroy outside layout行爲。
    給Monster對象添加Bullet movement行爲。
    給Explosion對象添加Fade行爲。Fade行爲默認會銷燬對象,所以不用擔心對象有沒有銷燬。
    此時,運行遊戲,你會發現子彈和怪物一下子飛了出去,這時候你就要設置他們的移動速度了:怪物speed速度爲80(單位:像素/秒),Bullet子彈對象的速度更改爲400,Explosion對象的Fade行爲的Fade out time淡出時間爲0.5秒。
    這裏寫圖片描述
    現在我們的怪物有點少,我們可以安裝ctrl拖動怪物,來增加怪物的個數。
  • 添加事件
    所謂事件,就是各個對象的行爲,例如玩家發射子彈等等。在畫布區域上方的選項卡上切換到Event sheet1事件編輯器面板,一個列表的事件被成爲Event sheet事件表。
    添加第一個事件
    我們添加的第一個事件將使player(發射口)一直看向鼠標,這樣我們點擊發射子彈的時候,子彈將發往鼠標方向。如下:
    這裏寫圖片描述
    在event sheet的空白位置雙擊,將打開添加事件對話框。不同的對象根據他們要做的行爲擁有不同的條件和動作,在對話框中雙擊System對象,雙擊Every tick條件插入到事件表中。對話框將關閉,Every tick事件被創建,但沒有actions(動作)。接着我們添加一個動作來使角色看向鼠標。點擊event右邊的Add action鏈接。選取Set angle towards position動作。該動作會自動計算角色到給定的X,Y座標的角度。
    接下來要指定X,Y座標值(動作的參數,條件同樣可以帶有參數)。我們輸入Mouse.X和Mouse.Y。
    讓角色可以射擊
    條件:Mouse->On click->Left clicked(the default)
    動作:Player->Spawn another object->For Object,choose the Bullet
    這裏寫圖片描述
    這時候我們發現,子彈是從頭部射出,因爲默認射出位置是(imagine point 0), 我們可以在對象面板中右擊player對象選擇Edit animations,在彈出的圖片編輯器中,選擇Set origin and image points工具,看到image points對話框,對象的原點以紅點顯示,這是對象的原點(如果你旋轉對象,將繞着這個點),點擊綠色的+號按鈕添加一個點,該點以藍點顯示。我們在角色圖片槍口位置處左擊,將該點放置於槍口位置。關閉圖片編輯器,雙擊事件表中早前添加的Spawn an object動作,更改Image point爲1.在面板中可以看到序號的,默認的原點爲0,其他添加的一次1,2。。。等。如下:
    這裏寫圖片描述
    運行遊戲。此時子彈已經修改爲從槍口發射。此時,子彈沒有做其他任何事。接下來我們來添加碰撞事件,用來消滅敵人。
    添加事件如下:
    條件:Bullet->On collision with another object->pick Monster。
    動作:Monster->Destroy
    動作:Bullet->Spawn another object->Explosion,layer 1
    動作:Bullet->Destroy
    讓怪物聰明點
    當下怪物只會向右移動。我們來讓他們更有趣些。首先讓他們產生在隨機的位置。
    Condition: System -> On start of Layout
    Action: Monster -> Set angle -> random(360)
    這裏寫圖片描述
    此時,怪物依然移出畫布,再也看不到,接着我們再來修改,讓怪物移動邊緣處的時候,自動往回移動,並且添加智能,讓怪物朝着玩家角色移動
    Condition: Monster->Is outside layout
    Action:Monster->Set angle toward position->For X,Player.X - for Y,Player.Y
  • 到這裏,大概的遊戲框架就建立完畢了。當然,如果你感興趣,可以通過學習,增加更多的功能,在此,就不做過多的說明。。。我能力有限。。

感想

作爲軟件工程專業大一新生,對這一領域認識較少。之前也很渴望能做一款屬於自己的遊戲。想不到construct2竟然如此簡單。但是在做的過程中也感受到了它的侷限性。總之,好好學習吧。還有很多東西等着我們去學習。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章