![]() |
![]() |
HJ Online Learning Center | |
APP開發線上教學 |
第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美金者所必須購買。
首先,請確定您的硬體支援符合下列標準:
確認滿足規格後,至Scirra官網下載最新版Construct 2。請至下列網址點選Download。
下載完請依指示安裝。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,下次將於第2節課程調出使用。
仔細看會發現,除了儲存成為單一檔案外(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 開通。