Construct 2教學-Flappy bird特別專輯
HJ Online Learning Center
APP開發線上教學
  • Register

Construct 2 教學-番外#1 [Flappy bird]設計

番外篇#1-<Flappy傅>遊戲設計

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

很多同學我們已經認真的做完了本篇的練習,傅老師在這裡要給大家鼓勵鼓勵。不過有些新同學是受到最近一款火熱的APP---<Flappy bird>的感召下,開始萌生了做遊戲的念頭。很棒!那接下來我們就特別為新同學來說明一次,使用5分鐘親手製作並且上傳自己做的< Flappy Fu>遊戲!(舊同學對本篇應該很熟悉囉~)

成品網址: 

https://dl.dropboxusercontent.com/u/209080340/construct2_example/flappy_fu/index.html

===

Construct 2(後稱C2),是一款可用於製作html5遊戲的工具軟體,由Scirra公司所開發。C2是專門用來製作2D遊戲的工具,學會後更可快速製作網頁 banner、網頁廣告,讓網頁具備等同遊戲的高互動性。最方便的是,C2支援將html5轉成iOS/Android手機APP、或是 PC/MAC/Linux上的可執行檔,讓你的作品可以在各種平台上流暢的執行(*1)。 

 


 

1-1 C2簡介與安裝

首先,請確定您的硬體支援符合下列標準:

  • Windows XP Service Pack 3以上
  • 512 MB RAM
  • 1 GHz CPU
  • 支援 HTML5的瀏覽器(建議使用GooglChrome)

確認滿足規格後,至Scirra官網下載最新版Construct 2。請至下列網址點選Download。

http://www.scirra.com/

Scirra官網

下載完請依指示安裝。Graphics card driver update可先跳過。

 

 



1-2 開啟新專案

安裝完畢後執行程式,將會看到如下的歡迎畫面。

Construct 2 歡迎畫面

選擇左上角主功能區的檔案鍵(File menu),新開一個專案(New)。

開啟新專案

接著C2會詢問我們是否要挑選合適的範本(template)。這次練習,我們要用最快的速度做出Flappy bird。請選擇 <Template: Flapping bird> -> <Open>,讓我們來體驗一下用C2的便利性。

選擇範本

Open之後將會看到底下的工作畫面,是不是很像Microsoft Office 2007的版型啊(Microsoft Ribbon UI)?相對於其他遊戲開發軟體,這個特色讓C2給人一種親切的感覺。

工作畫面

 



1-3 預覽

現在請至主功能區之<Home>下,直接點擊<Run layout>,您的遊戲將馬上於預設的瀏覽器中開始(*4),點擊<Play!>便可遊玩。

點擊Run Layout

遊戲歡迎畫面

於瀏覽器中執行

Bravo!真是太神奇了~您已經做了一個Flappy bird遊戲原型(Prototype)。現在我們可以用滑鼠左鍵來控制畫面上的藍鳥,每點擊畫面一次他就會跳躍一次。若藍鳥撞擊到畫面上的任何物體,整 個遊戲就會Gameover。

接下來我們要請藍鳥下場休息,換上成熟穩重的傅老師~請至下列網址下載並解壓縮傅老師的大頭照:

https://dl.dropboxusercontent.com/u/209080340/c2_tutorial/fu_head.zip

下載完畢回到C2編輯區,以滑鼠左鍵雙擊藍鳥。會打開下列的影像編輯畫面:

影像編輯畫面

請到①區塊上方工具列中,按下開啟檔案鈕,點選剛剛下載並解壓縮的 傅老師頭像<fu_head.png>。

讀取傅老師頭像

再到③區塊,以滑鼠右鍵點選編號1的動畫格,選取<delete>將之刪除

刪除不必要的動畫格

完成後按退出畫面。哇~現在藍鳥變成傅老師了,我們最後微調一下傅老師的尺寸。於編輯區上以滑鼠左鍵單擊傅老師,看到左方畫面有一個參數 為<Size>,將其改為"57,61",改好按<Enter>。

修改傅老師尺寸

OK! 大功告成,點擊主功能區<Home>下的<Run layout>,再來預覽一次。呦呼~~傅老師出現啦~~

主角換傅老師囉

最後,我們一不做二不休!乾脆連進場畫面也給他換掉吧!~看到頁面指示區,點選<Start>頁籤。滑鼠移到編輯區中央,用左鍵雙擊兩 下,開啟影像編輯畫面。再編輯區上方工具列點選開啟檔案鈕,選擇剛剛下載的檔案包中"menu.jpg"檔案,讀取完成後按<Esc>回到主 畫面。OK,大功告成,點擊主功能區<Home>下的<Run layout>,再來預覽一次。呦呼~~我們做完<Flappy Fu>啦~~

頁面指示區

讀入自製menu

Flappy Fu完成

 

由以上步驟,我們在短短的幾分鐘之內就做到了下面幾件事:

1. 在自己的電腦上,用localhost:50000這個網路位置架了一個站,放上了一個html5的平台遊戲,進站就玩。
2. 使用鍵盤控制遊戲
3. 實現了<Flappy Fu遊戲>。

對於一位首次接觸遊戲設計的人來說,這樣的速度是非常快的。但目前我們只能在自己的電腦上看到這個遊戲,無法與朋友分享。想要將這個遊戲上傳到網路上,還 得要將遊戲輸出。

 



1-4 html5輸出

點選主功能區中的<File> -> <Export project>

將專案輸出

點下後會彈出對話盒,內容琳琅滿目,全都是C2支援的輸出格式。各位是不是很想每一種都輸出一次呀? 這次我們先示範html5輸出,請雙擊左上角<HTML5 website>。接著彈出設定對話盒,填入對應設定。

輸出格式選擇

輸出設定

結束點選<Next>。接著跳出遊戲畫面於html5網頁中排版的方式,這次我們選<Normal style>。未來如果想將遊戲嵌入iframe中,再來使用<Embed style>。

 

輸出排版

完成! 我們來看看產生了些什麼檔案,點選<Open destination folder>。

開啟輸出資料夾

檢視輸出檔案

接下來將檔案上傳至公開網路,我們就可以邀請親朋好友來玩啦!

 

 



1-5 Dropbox發佈


若您還沒想通要不要花錢購買網路空間,則短時間內您可以先使用Dropbox來發佈您的遊戲。本節假設您已經有了Dropbox空間,並且開啟了 Dropbox的Public folder功能(*5)。

首先,將剛剛產生的New Project資料夾上傳至Dropbox\Public。

上傳至Dropbox


進入<New Project>資料夾,在<index.html>上點滑鼠右鍵,選擇<複製公開連結>。

獲取Dropbox連結

OK,現在您可以把這個連結貼給親朋好友來一起遊戲了!

 

連至Dropbox遊玩

 

 


 

1-6 結語

我們用飛快的速度完成了一個類似Flappy bird的遊戲,並且上傳到了Dropbox,希望這個範例能讓您燃起做遊戲了樂趣與熱情!

 



附註

*1。C2手機/PC輸出功能為付費版功能,其中手機輸出需經由C2的合作夥伴來服務,目前其合作夥伴服務為免費。若您熟悉Phonegap,則可 免費自行使用Phonegap產生各式APP。詳細步驟請見本站之APP快速開發篇。
*2。依規定,免費版C2只能發佈免費html5遊戲。若您的遊戲有營利則需購買個人版或企業版。
*3。為加速學習,本篇中文譯名並非逐字直譯,而是改採詞義相近之義譯準則。請讀者留意。
*4。若您使用Windows自帶的IE瀏覽器,請更新至IE11,會有較好的相容性。
*5。未開通Public folder請至 https://www.dropbox.com/enable_public_folder 開通。