基于引擎開發(fā)HTML 5游戲?qū)崙?zhàn)
最近從一個(gè)技術(shù)沙龍活動(dòng)中了解到一個(gè)游戲引擎(construct2)， 這款引擎徹底地改變了游戲開發(fā)在我心目中的印象。以前看過(guò)一些游戲開發(fā)的書籍，基本上都是從canvas，從坐標(biāo)系講起，再加上復(fù)雜地繪圖編程，使得我不 敢對(duì)游戲開發(fā)有所奢望，更別提那些大制作。但基于這款引擎讓我在2個(gè)小時(shí)之內(nèi)根據(jù)官方tutorial就能搞出一個(gè)看上去還不錯(cuò)的web游戲，并且不需要 一行代碼，有點(diǎn)當(dāng)年第一次接觸ruby on rails時(shí)的震撼。今天把這兩個(gè)小時(shí)的奇妙之旅記錄下來(lái)，也希望其他朋友也有此感受。
STEP1 選擇游戲引擎
游戲引擎很多，基本上每個(gè)成功的游戲背后都有一個(gè)強(qiáng)大的引擎，下面是摘錄的一些比較殺手級(jí)地游戲引擎：
大型游戲引擎：http://diy.pconline.com.cn/graphics/study_gra/1202/2672414_all.html
HTML5游戲引擎：html5gameengines.com/game-engine-overview/
而今天實(shí)戰(zhàn)基于的是construct2，這也是一款基本上最容易上手，也最傻瓜型的一款引擎，下載地址是：
http://www.scirra.com/construct2/releases
我下載的是r79.4，最新的r80有問(wèn)題，會(huì)死機(jī)，我的系統(tǒng)是win7 64，不知其他朋友是否也有這個(gè)問(wèn)題。
constructs雖然要收費(fèi)，但價(jià)格還算厚道，并且它的免費(fèi)版如果是學(xué)習(xí)的話完全夠用。
STEP2 設(shè)計(jì)游戲情節(jié)
體驗(yàn)基于引擎開發(fā)游戲之后，讓我深切感受到，游戲=情節(jié)+美工+引擎，編程技術(shù)在里面不是決定性因素。一個(gè)游戲成功與否很關(guān)鍵的一點(diǎn)是導(dǎo)演和編劇，這和電影電視很類似。當(dāng)然，兩個(gè)小時(shí)之內(nèi)不可能做出很復(fù)雜的東西，就做一個(gè)游戲界的helloworld: 英雄打怪獸。
英雄可以發(fā)子彈打怪獸
每個(gè)怪獸有五滴血
怪獸追著英雄跑
贏：英雄打光怪獸
輸：英雄碰到怪獸
下面是最后成品的截圖：
STEP3 設(shè)計(jì)游戲UI
這也是游戲制作的重中之重，當(dāng)然這也是很多草根團(tuán)隊(duì)最犯難的，大家大多都是程序員出生，沒(méi)幾個(gè)能徒手設(shè)計(jì)出游戲級(jí)別的素材。這一個(gè)只能去找專業(yè)的UED，再個(gè)得靠平時(shí)的收集。下面是本次實(shí)戰(zhàn)要用到的素材：
背景：
英雄：
怪獸：
子彈：
爆炸：
下載這些圖片用于后面制作
STEP4 制作背景和添加游戲元素
這個(gè)部分是招演員和布置場(chǎng)景
1)新建一個(gè)project
2)設(shè)置游戲背景：insert new object -> Tiled Background -> Load a image from a file -> 選擇背景圖片bg.png -> 編輯position: 0,0 -> 編輯size: 1280, 1024
3)添加游戲元素
添加鼠標(biāo)和鍵盤對(duì)象，用于游戲控制：insert new object -> mouse/keyboard
添加圖層，并在新圖層上高亮，有別于背景：
添加英雄：insert new object -> Sprite -> Load a image from a file -> 選擇player.png
或者直接把圖片拖進(jìn)來(lái)
添加怪獸：類似于添加英雄，只不過(guò)最后復(fù)制多個(gè)，而復(fù)制出來(lái)的就是instance，這個(gè)和class與instance關(guān)系類似，不多解釋
添加子彈和爆炸：和前面一樣
#p#
STEP5 添加行為和事件
這個(gè)部分是導(dǎo)演游戲故事情節(jié)，也是最復(fù)雜的一部分，construct2通過(guò)behavior和event sheet來(lái)設(shè)計(jì)游戲邏輯。
添加行為
1)首先是添加英雄的行為：
各個(gè)方向的移動(dòng)
屏幕隨著英雄的移動(dòng)而移動(dòng)
英雄不能越過(guò)屏幕背景的邊境
單擊英雄-> 在properties面板上edit behavior->添加以上三個(gè)行為：
2)然后添加怪物的行為：
怪物可以直線移動(dòng)
點(diǎn)擊Objects面板里的怪物，這時(shí)所有的怪物都是選中狀態(tài)->在properties面板上edit behavior->添加行為：
并設(shè)置speed為80
3)添加子彈的直線移動(dòng)，并設(shè)置speed為600
4)添加爆炸的Fade行為，使其可以漸變消失，并設(shè)置其Effect為Addtive
添加事件
所有事件都是在Event sheet里編輯：
它的模式是：
Conditions, actions and sub-events
也就是在什么條件下采取什么行動(dòng)，并會(huì)伴隨什么樣的事件
那么我們先考慮一下到底有哪些邏輯和效果：
鍵盤控制英雄移動(dòng)，鼠標(biāo)控制英雄的方向
英雄開槍射出子彈
怪物朝各個(gè)方向移動(dòng)，碰到背景邊境返回，并向英雄方向追進(jìn)
子彈射到怪物，怪物減血，子彈消失，怪物的血減后爆炸并消失
怪物碰到英雄后，英雄消失，游戲結(jié)束
下面就是在Event sheet上來(lái)編輯以上邏輯
1)鍵盤控制英雄移動(dòng)，鼠標(biāo)控制英雄的方向
2)英雄開槍射出子彈
首先設(shè)置子彈的起點(diǎn)：槍口
然后添加發(fā)子彈事件：
3)怪物朝各個(gè)方向移動(dòng)，碰到背景邊境返回，并向英雄方向追進(jìn)
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, Sprite.X - for Y, Sprite.Y.
4)子彈射到怪物，怪物減血，子彈消失，怪物的血減后爆炸并消失
首先設(shè)置一個(gè)variable，來(lái)初始化每個(gè)怪物5滴血
Edit variables->
然后添加一個(gè)global variable，來(lái)記分?jǐn)?shù)：
然后添加子彈事件：
子彈碰到怪物后，怪物減血
最后添加怪物事件：
怪物的血減為0時(shí)爆炸，增加分?jǐn)?shù)
5) 怪物碰到英雄后，英雄消失，游戲結(jié)束
首先添加一個(gè)text來(lái)顯示游戲已結(jié)束，添加一個(gè)圖層，設(shè)置這個(gè)圖層Parallax為0,0，表示這個(gè)圖層總是定位當(dāng)前背景，并在上面添加一個(gè)text：Game Over!
然后，添加事件來(lái)控制其是否顯示
游戲開始時(shí)不顯示：
怪物碰到英雄時(shí)顯示：
最后，把分?jǐn)?shù)顯示在屏幕上方：
到此為止，這款看上去還不錯(cuò)的小游戲就制作完了，可以直接在屏幕上方點(diǎn)擊
來(lái)進(jìn)行運(yùn)行和調(diào)試，不過(guò)它會(huì)默認(rèn)打開系統(tǒng)默認(rèn)瀏覽器，如果不是HTML5支持的瀏覽器就會(huì)有問(wèn)題，所以最好是把系統(tǒng)的默認(rèn)瀏覽器設(shè)置為支持HTML5的
#p#
STEP6 部署
web
以web的方式就需要有個(gè)服務(wù)端來(lái)存放打包出來(lái)的html，可以考慮dropbox或者像amazon ec2，google appengine這樣的云服務(wù)。
1)construct2里export項(xiàng)目，export for: HTML5 web site
2)把export的目錄里的文件上傳到dropbox或amazon ec2的web服務(wù)器里
由于dropbox和gae在中國(guó)被屏，只好在amazon ec2里裝一個(gè)apache，ec2在中國(guó)還是可以訪問(wèn)的。
部署之后，就可以在支持HTML5的瀏覽器里訪問(wèn)，這樣一來(lái)就可以通過(guò)facebook或人人網(wǎng)這樣的社交平臺(tái)來(lái)傳播你的游戲
移動(dòng)終端
移動(dòng)終端也可以通過(guò)瀏覽器來(lái)訪問(wèn)剛才部署的游戲，但由于有很多元素需要下載，體驗(yàn)不好，因此可以基于phonegap這樣的native&web組合的方案來(lái)部署到移動(dòng)端。construct2也支持以phonegap的方式來(lái)export項(xiàng)目
1)construct2里export項(xiàng)目，export for: phonegap。
2)在eclipse里生成一個(gè)phonegap的空項(xiàng)目
3)把export出來(lái)的文件拷入到asert/www下
4)在emulator或真機(jī)上進(jìn)行調(diào)試
appmobi
appmobi是一個(gè)能模擬多種終端的HTML5開發(fā)工具，能在ipad, iphon3/4, moto等多個(gè)主流機(jī)型模擬器上運(yùn)行你的程序，正好construct2也支持以appmobi的方式來(lái)export項(xiàng)目
1)construct2里export項(xiàng)目，export for: appmobi。
2)在appmobi里生成一個(gè)空項(xiàng)目
3)把export出來(lái)的文件拷入到項(xiàng)目根目錄下
4)刷新appmobi sdk，即可在選擇的模擬器上運(yùn)行游戲
先看看在ipad下的效果：
再看看在iphone4上的效果：
感覺還是不錯(cuò)的。不過(guò)在手機(jī)端還得增加對(duì)touch的支持，這個(gè)construct2也是支持的，可以繼續(xù)深究一下。
總結(jié)：
通過(guò)一個(gè)上午的嘗試，讓我驚喜的發(fā)現(xiàn)，開發(fā)游戲也不是一件常人無(wú)法碰及的事情，當(dāng)然，這個(gè)例子足夠簡(jiǎn)單，要真想做出一款值得一玩的游戲還有很多事情需要做，還是開始說(shuō)的那三件事：
一個(gè)好的劇本
一個(gè)能抓人眼球的UI
一個(gè)足夠強(qiáng)大引擎
希望這次嘗試也能給其他朋友也能產(chǎn)生同樣的共鳴，跨入游戲開發(fā)的行列。
這個(gè)例子是construct2官方推薦的tutorial，在它的examples里還有很多很多不錯(cuò)的例子，大家可以繼續(xù)深究一下，從這些例子里看看一些常用的效果是如何做出來(lái)的。
原文：http://blog.csdn.net/cutesource/article/details/7316234
【編輯推薦】
