Construct 2 教學－第１節

• 
• 

第１節－軟體簡介與安裝

 

大家好，我是傅老師。歡迎來到我的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美金者所必須購買。

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

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

http://www.scirra.com/

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

 

 

---

1-2 開啟新專案

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

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

接著C2會詢問我們是否要挑選合適的範本(template)。這次練習，我們先來體驗一下C2範本的實用性。請選擇　<Template: Platformer> -> <Open>，讓我們來體驗一下用C2做平台捲軸遊戲的便利性。

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

 

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

 

---

1-3 預覽

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

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。

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

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

 

 

 

---

1-6 儲存檔案

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

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

 

---

1-7 結語

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

 

---

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

 

 

---

附註

*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 開通。