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

Construct 2 教學-第1節

第1節-軟體簡介與安裝

 

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

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

本節教您如何安裝C2、輸出範例遊戲,讓您對C2能有基本的認識。

  
 


 

1-1 簡介與安裝

Construct 2目前有免費版、個人版、企業版,免費版已具備製作及發佈html5遊戲的應有功能,適合一般學習中的學生(*2);個人版適合獨立工作室,以及需要多平 台輸出者;企業版為遊戲收益到達$5000美金者所必須購買。

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

  • 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)。這次練習,我們先來體驗一下C2範本的實用性。請選擇 <Template: Platformer> -> <Open>,讓我們來體驗一下用C2做平台捲軸遊戲的便利性。

選擇範本

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

工作畫面
  1. 主功能區(原名: File menu & ribbon tabs)
  2. 編輯區(Layout view)
  3. 頁面指示區(View tabs)
  4. 參數設定區(Properties bar)
  5. 專案與佈局區(Project bar and layers bar)
  6. 物件列表區(Object bar)
  7. 狀態列區(Status bar)

 

我們會在爾後的教學中,邊做邊學各個區塊的用途,目前您只需要熟悉各區塊的中文譯名即可(*3)。

 



1-3 預覽

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

點擊Run Layout

於瀏覽器中執行

Bravo!真是太神奇了~您已經做出一個具體而微的簡易平台遊戲原型(Prototype)。現在我們可以用WASD鍵或是上下左右鍵來控制畫面 中的 藍色盒子,試著在地圖四周探索看看。首先,您應該會看到右邊有一個橫向擺盪的浮台,這是平台遊戲中常見的元素,請您小心的跳上去並向右方前進。安全抵達右 方後,會看到藍色半透明的平台,您可以從他下方直接往上跳穿過去而不會被撞回,成功跳穿後便可穩當地站立在其上面,這是常見的跳穿平台(jump- through)。站在跳穿平台上時按下S鍵(或是下鍵),就會從跳穿平台落下(fall through)。您可能已經發現,若藍色盒子沒踩到平台地板 (platform floor)而落出畫面外,整個遊戲就會重來,這個是典型的Gameover條件。

跳穿平台

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

1. 在自己的電腦上,用localhost:50000這個網路位置架了一個站,放上了一個html5的平台遊戲,進站就玩。
2. 使用鍵盤控制遊戲
3. 實現了數個基本的平台遊戲元素,包括地板,浮台,跳穿平台,Gameover判斷式。

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

 



1-4 html5輸出

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

將專案輸出

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

輸出格式選擇

輸出設定
欄位 功能
Export file to 設定輸出的資料夾位置。
Subfolder for images 設定圖片 的資料夾名。(用預設即可)
Subfolder for project files 設定音效 音樂資料夾名稱。(用預設即可)
Minify script 將輸出的 程式最小化。此項建議正式發佈時再打勾,他可以將程式壓縮,讓使用者較難反編譯你的源代碼(source code)。開發期間不用勾,這樣輸出會比較快。請注意使用本項需安裝Java。

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

 

輸出排版

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

開啟輸出資料夾

檢視輸出檔案

我們來看一下這些檔案的簡介:

檔 名 功 能
images folder 此資料夾 存放遊戲中用到的所有圖片。
c2runtime.js 遊戲程式 的主程式,是一個C2產生的javascript。
icon/logo 遊戲的各 種預設圖示。
index.html 進站網 頁,剛剛我們以<Normal style>設置此頁的排版。他會自動去呼叫c2runtime.js內的程式碼。
jquery-2.0.0.min.js 這就是鼎 鼎大名的jQuery。由於C2的主程式中大量使用到 jQuery,所以輸出時已經貼心的幫我們導入進來了。
offline.appcache 這個檔是 告訴瀏覽器哪些檔案要留在cache中,不可隨意刪除,以方便 離線(offline)時也能玩遊戲。

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

 

 



1-5 Dropbox發佈


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

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

上傳至Dropbox


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

獲取Dropbox連結

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

 

連至Dropbox遊玩

 

 



1-6 儲存檔案

點選主功能區中的<File> -> <Save As Single File >,可將整個專案裡的所有檔案包成一個C2專案檔,副檔名為.capx。請將檔案名稱命名為L1.capx,下次將於第2節課程調出使用。

儲存為.capx檔

仔細看會發現,除了儲存成為單一檔案外(Save As Single File),還有另外一個選項也可儲存專案(Save Project As),若點選此項將會把專案以資料夾的方式儲存。事實上.capx檔只是將專案資料夾以.zip格式壓縮,所以兩者實際內容沒差別。我個人喜歡儲存為. capx檔,並且用日期來區分各個備份檔案,如下圖所示。

按時備份是良好習慣

 



1-7 結語

我們用飛快的速度完成了一個平台遊戲的簡易原型,並且上傳到了Dropbox。本節的重點在於讓讀者親手從開啟專案到上傳HTML5整套跑一遍,讓 您對整套流程的複雜度有個體認。後續的課程我們將會再繼續深入各個細節,同時保持邊做邊學的流暢感。

 



1-8 傅老師鼓勵你...


 

  1. 自行嘗試輸出成Windows執行檔。(需購買個人版C2)
  2. 於主功能區另開新檔,體驗其他種類的template。
  3. 嘗試使用手機瀏覽器連上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 開通。