《畢業(yè)設(shè)計（論文）-基于android的avg類型游戲《歸途》的設(shè)計與實(shí)現(xiàn)》由會員分享，可在線閱讀，更多相關(guān)《畢業(yè)設(shè)計（論文）-基于android的avg類型游戲《歸途》的設(shè)計與實(shí)現(xiàn)（56頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 太原理工大學(xué)畢業(yè)設(shè)計(論文)用紙 太　原　理　工　大　學(xué) 畢業(yè)設(shè)計（論文）任務(wù)書 第1頁 畢業(yè)設(shè)計（論文）題目： 基于android的avg類型游戲《歸途》的設(shè)計與實(shí)現(xiàn) 全套設(shè)計加扣 3012250582 畢業(yè)設(shè)計（論文）要求及原始數(shù)據(jù)（資料）： 1．綜述國內(nèi)外手機(jī)游戲開發(fā)技術(shù)研究現(xiàn)狀； 2．深入了解android系統(tǒng)及其圖形界面開發(fā)的相關(guān)技術(shù)； 3．熟練掌握android相關(guān)api的應(yīng)用，訓(xùn)練編寫程序的能力； 4．設(shè)計并

2、實(shí)現(xiàn)一款avg類型的android平臺游戲； 5．深入分析游戲中界面開發(fā)的關(guān)鍵技術(shù)與編寫語言； 6．訓(xùn)練實(shí)際內(nèi)容向程序轉(zhuǎn)換的編程思維及能力； 7．訓(xùn)練檢索文獻(xiàn)資料和利用文獻(xiàn)資料的能力； 8．訓(xùn)練撰寫技術(shù)文檔與學(xué)位論文的能力。 第2頁 畢業(yè)設(shè)計（論文）主要內(nèi)容： 1．綜述android相關(guān)技術(shù)在游戲開發(fā)中的應(yīng)用； 2．了解android圖形化編程的相關(guān)技術(shù)； 3．熟練運(yùn)用android開發(fā)涉及到的編程語言； 4．設(shè)計一組設(shè)計構(gòu)思向游戲程序

3、轉(zhuǎn)化的模板流程； 5. 深入了解手機(jī)游戲的設(shè)計流程； 6．熟練掌握基于android平臺軟件的編寫； 7．設(shè)計與實(shí)現(xiàn)完整的一款android平臺avg類型游戲。 學(xué)生應(yīng)交出的設(shè)計文件（論文）： 1．內(nèi)容完整、層次清晰、敘述流暢、排版規(guī)范的畢業(yè)設(shè)計論文； 2．包括畢業(yè)設(shè)計論文、源程序等內(nèi)容在內(nèi)的畢業(yè)設(shè)計電子文檔及其它相關(guān)材料。 第3頁 主要參考文獻(xiàn)（資料）： [1] 董昆. 手機(jī)游戲的發(fā)展現(xiàn)狀及特點(diǎn)[J]. 數(shù)字技術(shù)與應(yīng)用, 2011(0

4、1):120-120. [2] 陳林鋒, 張海翔, 陳純. 手機(jī)游戲的渲染引擎研究[J]. 計算機(jī)工程與設(shè)計, 2006(14):2606-2607. [3] 張鷹, 計時鳴, 張利等. 基于J2ME的手機(jī)游戲2D動畫的編程實(shí)現(xiàn)[J]. 計算機(jī)與數(shù)字工程, 2007, 35(2):134-137. [4] 楊帆. 基于J2ME的手機(jī)游戲設(shè)計[D]. 電子科技大學(xué), 2006. [5] 李艷麗. Android事件處理過程剖析[J]. 長春理工大學(xué)學(xué)報:自然科學(xué)版, 2010, 33(3):159-162. [6] 宋國柱. Android圖形圖像處理技術(shù)研究[J]. 電腦知識與技術(shù)

5、, 2014(8):1800-1801. [7] 趙亮, 張維. 基于Android技術(shù)的界面設(shè)計與研究[J]. 電腦知識與技術(shù), 2009(29). [8] Acosta K, Despain W. 100 Principles of Game Design[M]. NEW RIDERS PUBL, 2012. [9] Phillips B, Hardy B. Android Programming: The Big Nerd Ranch Guide[J]. Pearson Schweiz Ag, 2013. [10] Freeman E, Freeman E, Bates B, e

6、t al. Head First Design Patterns[J]. Oreilly Media, 2004. 專業(yè)班級 軟件1229班 學(xué)生 要求設(shè)計（論文）工作起止日期 2016年3月21日~2016年6月10日 指導(dǎo)教師簽字 日期 2016年3月21日 教研室主任審查簽字 日期 系主任批準(zhǔn)簽字 日期 基于android的avg類型游戲《歸途》的設(shè)計與實(shí)現(xiàn) 摘 要 由于目前移動平臺的普及和游戲行業(yè)的逐步完善，越來越多的開發(fā)者開始在手機(jī)平臺上進(jìn)行游戲開發(fā)，并且因?yàn)楣ぞ叩耐晟坪蛡鞑サ谋憬菪?，手機(jī)平臺也越來越受獨(dú)立游戲開發(fā)者的關(guān)

7、注，但獨(dú)立游戲開發(fā)作為游戲開發(fā)最早卻最落后的形式讓很多開發(fā)者陷入了永遠(yuǎn)無法完成作品的窘境，而軟件工程正是解決此類問題的良藥，這次畢業(yè)設(shè)計就是由此而生的。 獨(dú)立游戲開發(fā)的難點(diǎn)與一般軟件開發(fā)并不完全相同，所以本次畢業(yè)設(shè)計從實(shí)戰(zhàn)出發(fā)，結(jié)合學(xué)到的知識進(jìn)行一次基于標(biāo)題的游戲開發(fā)，模仿獨(dú)立游戲一般開始于某個突發(fā)奇想或想表達(dá)的某種觀點(diǎn)的現(xiàn)實(shí)情況，由標(biāo)題開始進(jìn)行設(shè)計，并根據(jù)設(shè)計先進(jìn)行技術(shù)積累，根據(jù)技術(shù)的掌握情況評估修正已有設(shè)計，再進(jìn)行開發(fā)并測試，在一般軟件開發(fā)流程上進(jìn)行了對獨(dú)立游戲開發(fā)的優(yōu)化。 本次畢設(shè)就是以上述開發(fā)流程思想為基礎(chǔ)，設(shè)計并完成一個完整可玩的游戲，并且在保證游戲本身的一些基本質(zhì)量要求的前提下

8、盡可能的表達(dá)了主題的內(nèi)容。 關(guān)鍵字：游戲開發(fā)；安卓；cocos2dx-js The Design And Implementation of “Homeward Journey” based on Android Abstract Gradually improve due to the current popularity of mobile platforms and gaming industry, more and more developers to begin game development on mobile platfo

9、rms, and because of the complete and convenient, the mobile platform tools are increasingly spread by the independent game developer those concerns, but independent game development as a development of the first game, but the most backward form of so many developers caught in a dilemma never complet

10、ed the work, and software engineering is to solve such problems of medicine, this graduation is thus raw. Independent game developers and the general difficulty of software development are not the same, so this graduate from the actual design, combined with the knowledge acquired to develop a game

11、based on the title, imitating independent game typically begins a whim, or would like to express a certain point of view the reality, from the title to begin design and prior accumulation of technology is designed according to the technical assessment of amendments to grasp the situation existing de

12、sign, then developed and tested in the software development process is generally carried out independent game optimization of development. The complete set is to the above-mentioned development process based on the idea to design and complete a full playable game, and in ensuring the quality of the

13、 game itself, some of the basic requirements of the premise as expressed content topics. Key words: Game development; android; cocos2d-js 目 錄 1 緒論 1 1.1 課題的來源及意義 1 1.2 與課題相關(guān)的行業(yè)發(fā)展現(xiàn)狀 2 1.2.1 html5游戲 2 1.2.2 獨(dú)立游戲 2 1.3 主要工作內(nèi)容 3 2 項目需求及關(guān)鍵技術(shù)分析 4 2.1 項目需求 4 2.2 cocos2d-js中的jav

14、ascript語言 4 2.3 cocos2d-js引擎 8 2.3.1 坐標(biāo)系統(tǒng)及對象管理 8 2.3.2 動作系統(tǒng) 10 2.3.3 聲音系統(tǒng) 11 2.3.4 鼠標(biāo)與觸摸事件 11 2.3.5 粒子系統(tǒng) 11 3 系統(tǒng)設(shè)計 14 3.1 場景列表 14 3.2 鴿子的設(shè)計 15 3.3 食物的設(shè)計 15 3.4 障礙物的設(shè)計 16 3.5 加速及收集圓環(huán)的設(shè)計 16 3.6 代碼架構(gòu) 16 4 系統(tǒng)實(shí)現(xiàn) 18 4.1 素材準(zhǔn)備 18 4.2 開始界面的實(shí)現(xiàn) 18 4.2.1 UI 18 4.2.2 動態(tài)效果 20 4.3 關(guān)于界面的實(shí)現(xiàn) 21

15、 4.3.1 UI 21 4.3.2 返回按鈕 22 4.4 游戲主界面的實(shí)現(xiàn) 23 4.4.1 UI 23 4.4.2 背景及結(jié)束畫面 25 4.5 游戲數(shù)據(jù)記錄及聲音統(tǒng)一管理 28 4.5.1 數(shù)據(jù)記錄 28 4.5.2 聲音管理 28 4.6 鴿子相關(guān)邏輯的實(shí)現(xiàn) 31 4.6.1 階段 31 4.6.2 操作 34 4.7 食物及光環(huán)相關(guān)邏輯的實(shí)現(xiàn) 35 4.7.1 四種食物分布類型的實(shí)現(xiàn)及光環(huán)作用的實(shí)現(xiàn) 35 4.7.2 碰撞檢測 37 4.8 障礙物的實(shí)現(xiàn) 38 4.9 特效 42 4.9.1 全屏抖動 42 4.9.2 粒子特效 43 5 游戲

16、發(fā)布及測試 44 5.1 測試及修正 44 5.1.1 測試記錄 44 5.1.2 解決問題 45 5.2 發(fā)布 45 5.2.1 屏幕適配 45 參考文獻(xiàn) 46 致 謝 47 外文文獻(xiàn) 48 中文翻譯 54 1 緒論 1.1 課題的來源及意義 電子游戲作為一個誕生于1952年的新興娛樂形式，經(jīng)過半個多世紀(jì)的發(fā)展已經(jīng)成為了年輕人的主要娛樂方式之一。并且隨著智能手機(jī)的普及，移動平臺的游戲更是將其影響力擴(kuò)展到了各個年齡段的人群，從長到幼，填充著現(xiàn)代社會越來越碎片化的時間，從PC端到移動端，滿足著人們形形色色的想象和需求。 而正是因?yàn)槠錈o所不包和無所不在的特性

17、，電子游戲從誕生以來就伴隨著無數(shù)的爭議，既創(chuàng)造著巨大的價值，同時也造成了很多不良的影響，因?yàn)槠鋸?qiáng)大的影響力足以影響人的價值觀，其強(qiáng)大的沉浸感足以影響人的正常作息。但電子游戲作為一種載體本身是沒有任何傾向性的，作為一種仍在發(fā)展中的媒介仍有很大的發(fā)展空間。近年來如《Shadow Of the Colossus》（旺達(dá)與巨像），《journey》（風(fēng)之旅人）幾乎已經(jīng)踏入了藝術(shù)的殿堂，以電子游戲獨(dú)特的交互屬性給人帶來比單純的畫面音樂甚至電影更強(qiáng)的情感體驗(yàn)與思考。但作為人類想象力的一種具現(xiàn)化，游戲開發(fā)的復(fù)雜度也是與日俱增，專業(yè)制作公司幾百人的團(tuán)隊數(shù)年的開發(fā)時間仍舊會制作出并不完善的作品，而獨(dú)立游戲開發(fā)就

18、更像是一場永不完結(jié)的馬拉松，最近的獨(dú)立游戲話題作品《Stardew Valley》（星露谷物語）就是作者Concerned Ape單人持續(xù)開發(fā)四年的成果。顯而易見，獨(dú)立游戲開發(fā)是一種需要投入大量精力而在完成前沒有任何收入且在完成后收益未知的，極大的冒險行為[1]。 而軟件工程正是削減冒險性和不確定性的科學(xué)手段，所以，本次課程設(shè)計將根據(jù)個人開發(fā)的獨(dú)特性綜合已有軟件工程方法和自我管理知識，在限期開發(fā)一個完整游戲作品的過程中嘗試搭建一套從快速學(xué)習(xí)再到進(jìn)度保證的高效工作流。 再到作品本身，Avg類型游戲是Adventure Game的縮寫，冒險游戲，作為幾乎在電子游戲誕生時就存在的游戲類型，因其扮

19、演和冒險這兩大特性它經(jīng)久不衰的持續(xù)到現(xiàn)在仍舊是一種重要的游戲類型，本次作品選擇這種游戲類型是因?yàn)樗陌菪?，可以?shí)踐游戲開發(fā)方方面面的技術(shù)盡快熟悉游戲開發(fā)流和所使用的游戲引擎的各種特性。 1.2 與課題相關(guān)的行業(yè)發(fā)展現(xiàn)狀 1.2.1 html5游戲 隨著html5技術(shù)規(guī)范的逐步推廣，現(xiàn)在大部分主流瀏覽器已經(jīng)開始支持html5技術(shù)標(biāo)準(zhǔn)，同時作為前一段時間業(yè)界認(rèn)為將顛覆native app存在的web app的主要技術(shù)來源，雖然現(xiàn)在native app仍舊占據(jù)著主要市場地位，但是混合開發(fā)技術(shù)已經(jīng)越來越受到重視，web下開發(fā)的跨平臺特性也是其不斷流行的關(guān)鍵之一。雖然各路瀏覽器難以統(tǒng)一一直是

20、web開發(fā)的一大難題，但在html5標(biāo)準(zhǔn)下瀏覽器的標(biāo)準(zhǔn)化已經(jīng)可以期待，同時很多廠家也在努力的構(gòu)建html5應(yīng)用開發(fā)的生態(tài)圈，如cocos2dx引擎的html5分支，白鷺時代的egret引擎等等[1]。 目前html5游戲的典型成功案例就是由上面提到的egret引擎開發(fā)的《圍住神經(jīng)貓》，由一名程序一名美術(shù)耗時一天半完成，但上線3天訪問量便過億，雖然熱度減退也十分迅速，但是從這個案例可以看出html5游戲目前幾個特點(diǎn)，那就是成本低，易推廣。而至于留存時間當(dāng)然是看游戲本身的耐玩程度，但在大廠廣告和ip封鎖下，html5游戲的道路顯然是獨(dú)立游戲開發(fā)者一條比較適合的選擇，尤其是目前很多廠商仍舊在用原生

21、應(yīng)用的那一套做html5應(yīng)用的情況下。 雖然是一種趨勢，但是目前為止html5游戲的現(xiàn)狀其實(shí)并沒有想象中那么美好，目前html5游戲的典型代表《古龍群俠傳》和《愚公移山》的用戶量和收入相對于原生應(yīng)用手游還是相去甚遠(yuǎn)，商業(yè)化的html5之路并不好走，甚至更加依賴渠道。但是對于獨(dú)立游戲開發(fā)卻不同，意在表達(dá)自我的獨(dú)立游戲相對于商業(yè)化的游戲更適合以html5作為載體，和急著變現(xiàn)的html5商業(yè)游戲不同，html5獨(dú)立游戲更像是一種微博或者博客的升級版，簡單的學(xué)習(xí)成本和低廉的發(fā)布成本將會成為創(chuàng)意與思想表達(dá)的優(yōu)秀載體。 1.2.2 獨(dú)立游戲 獨(dú)立游戲制作，即不以商業(yè)發(fā)行為目的，獨(dú)立制作完成的游戲。雖

22、然由于媒體的渲染，獨(dú)立游戲中的幾個獲得了巨大利益的例子似乎成為了獨(dú)立游戲的代表，但是本質(zhì)上來講，獨(dú)立游戲更多的還是一種對于自身見解或情感的基于游戲這種表達(dá)形式的非商業(yè)化創(chuàng)作。在一些游戲制作者眼中游戲承擔(dān)著部分媒體的屬性，如著名的游戲制作人陳星漢就直接把游戲稱為一種新媒體，同時貫穿陳星漢游戲設(shè)計的一個理念則是情感的表達(dá)，這和html5易于傳播的特性一拍即合，隨著制作工具的不斷完善，制作成本和流程的不斷完善，作為一種表達(dá)媒介擁有廣闊的前景。 1.3 主要工作內(nèi)容 基于html5技術(shù)開發(fā)獨(dú)立游戲是本次課題的主要工作內(nèi)容，同時也將探索混合開發(fā)的方式，即利用cocos2d-js的跨平臺特性完成web

23、端的內(nèi)容和向安卓原生的移植。所以主要工作內(nèi)容如下，學(xué)習(xí)cocos2d-js的基本工作流，設(shè)計并實(shí)現(xiàn)一個html5游戲，完成對游戲向原生安卓平臺的移植，最后的成果為一個安卓原生的完整游戲。 2 項目需求及關(guān)鍵技術(shù)分析 2.1 項目需求 獨(dú)立游戲開發(fā)與大型軟件項目和大型游戲項目均不相同，因?yàn)椴皇枪δ苄缘某绦颍孕枨蟛糠挚梢酝耆勺约和瓿?，及不斷的探尋自己想要表達(dá)的內(nèi)容與自己開發(fā)技能所能達(dá)到的一個重合點(diǎn)，同時快速的學(xué)習(xí)新的技術(shù)用來實(shí)現(xiàn)自己的想法。 本項目中準(zhǔn)備開發(fā)一個表現(xiàn)鴿子回家過程的游戲，玩家控制一個飛鴿躲避障礙物并收集食物

24、，最終到達(dá)終點(diǎn)。 具體需求如下： ·開始界面，提供聲音控制按鈕，開始游戲按鈕及關(guān)于即游戲介紹界面跳轉(zhuǎn)按鈕。 ·游戲過程界面，提供聲音控制按鈕及暫停按鈕，顯示鴿子，滾動的視差背景，隨機(jī)生成的食物，生命值，分?jǐn)?shù)及距離，同時提供游戲結(jié)束的提示彈出框及返回按鈕。 ·關(guān)于界面，游戲的內(nèi)容介紹及返回開始界面的按鈕。 ·勝利界面，勝利的動畫及最終分?jǐn)?shù)顯示。 ·食物相關(guān)，提供多種分布方式隨機(jī)選擇生成在游戲過程界面中。 ·障礙物相關(guān)，提供多種障礙物隨機(jī)類型隨機(jī)位置出現(xiàn)，同時實(shí)現(xiàn)提前提醒出現(xiàn)位置的功能。 ·兩種正面效果道具，一種提供加速功能，可以無視障礙物，一種提供吸收周圍食物的功能。 2.2

25、 cocos2d-js中的javascript語言 cocos2d-js使用的語言為javascript語言，掌握javascript的基本概念也是十分重要的一部分，下面來簡單介紹一下cocos2d-js中javascript語言的應(yīng)用。 首先javascript是一種基于原型的語言，最新的標(biāo)準(zhǔn)為ES6，javascript的應(yīng)用十分普遍，作為一種腳本語言廣泛應(yīng)用在web領(lǐng)域，而cocos2d-js由于作為游戲引擎，需要用到面向?qū)ο蟮囊恍┨匦詠斫M織代碼結(jié)構(gòu)，所以采用了jquery之父john resig的繼承方案，封裝了new，extend等方法來實(shí)現(xiàn)類與繼承。示例代碼如下: var o

26、bject = function(){}; var obj1 = new object(); obj1.name = “obj1”; var obj2 = new object(); obj2.name = “obj2”; Console.log(obj1.name,obj2.name); 上述代碼在瀏覽器控制臺會輸出obj1、obj2，這個例子利用了function的Prototype來實(shí)現(xiàn)了不同的對象。 并定義了Class作為基類。代碼清單如下： cc.Class = function(){}; cc.Class.extend = function(props){ va

27、r _super = this.prototype; ... //是本類可繼承 Class.extend = cc.Class.extend; //增加實(shí)現(xiàn)方法 Class.implement = function(prop){ For(var name in prop){ prototype[name] =prop[name]; } }; ... 如上，cocos2d-js引擎中的CCClass.js中封裝了extend和implements方法，實(shí)現(xiàn)了面向?qū)ο蟮墓δ?，可以讓開發(fā)者方面的在js中應(yīng)用面向?qū)ο蟮奶匦?。使用時的示例如下: var TestScene=

28、cc.Scene.extend{( ctor: function (color){ this._super(); var layer = new cc.Layer(color); this.addChild(layer); } )}; var scene = new TestScene(cc.color(0,0,0)); 上面代碼中的ctor為構(gòu)造函數(shù)，與c++的構(gòu)造函數(shù)類似，上面的TestScene類新建時傳入一個顏色參數(shù)即可創(chuàng)建出一個單色背景的scene。 最后需要深入理解一下js中的this關(guān)鍵字，在面向?qū)ο蟮娘L(fēng)格中this常見但js的this與java和c++中的th

29、is有一些不同之處。 this在函數(shù)中隨著使用場合的不同而代表著不同的值，即指向調(diào)用這個函數(shù)的對象。 首先是全局函數(shù)下的this所指向的對象，如下列代碼所示： var x = 0; function test(){ console.log(this.x); } test(); var x = 0; function test(){ this.x = 1; } test(); console.log(this.x); 上述代碼中第一次輸出的值為0，第二次輸出的值為1，證明了在全局函數(shù)中this指向的對象為全局對象。 然后是作為對象的方法,示例代碼如下: funct

30、ion test(){ console.log(this.x); } var x = 0; var arr = {}; arr.x = 1; arr.m = test; arr.m(); 上述代碼最后的輸出結(jié)果為1，證明此時this指向的是對象。 然后是在是用new關(guān)鍵字時，示例代碼如下: function test(){ console.log(this.x); } var obj = new test(); console.log(obj.x); 上述代碼輸出值為1，證明其中this指向的是新創(chuàng)建的對象。 最后一種情況是在apply/call調(diào)用時，示例

31、代碼如下: function test(){ console.log(this.x); } var obj = {}; obj1.x = 1; obj1.m = test; var obj2 = {}; obj2.x = 2; obj1.m.apply(obj2); obj1.m.call(obj2); 上述代碼兩次輸出值均為2，證明了this指向的是apply/call中的第一個參數(shù)。 所以綜上所述，在cocos2d-js中使用this時要注意全局函數(shù)下的情況，帶特定情況下需要使用bind()函數(shù)來手動綁定對象。 bind可以手動來改變function的上下文環(huán)

32、境，所以說雖然javascript是一門比較混亂的語言但是同時也是一門非常靈活和實(shí)用的語言。 2.3 cocos2d-js引擎 2.3.1 坐標(biāo)系統(tǒng)及對象管理 cocos2d-js是一個典型的2d游戲引擎，坐標(biāo)系為以左下角為(0,0)點(diǎn)x從左往右遞增，y從下往上遞增。那么要理解cocos2x-js中對象的管理機(jī)制首先要從兩個概念說起，首先是節(jié)點(diǎn)，在cocos2d-js中被封裝為Node類。 部分代碼如下 cc.Node = cc.Class.extend(/** @lends cc.Node# */{ _localZOrder: 0,

33、 _globalZOrder: 0, _vertexZ: 0.0, _rotationX: 0, _rotationY: 0.0, _scaleX: 1.0, _scaleY: 1.0, _position: null, _normalizedPosition:null, _usingNormalizedPosition: false, _normalized

34、PositionDirty: false, _skewX: 0.0, _skewY: 0.0, _children: null, ...... 可以從名字看出一些基本功能，如縮放，坐標(biāo)，透明度等等，其中對于對象管理很重要的屬性就是_children,在cocos2d-js中對象是通過樹結(jié)構(gòu)進(jìn)行管理的，這樣帶來的特性就是整體性，可是實(shí)現(xiàn)對父節(jié)點(diǎn)添加效果時影響全部子節(jié)點(diǎn)，如透明度坐標(biāo)等，理解了這個結(jié)構(gòu)，那么在坐標(biāo)系下錨點(diǎn)等概念就十分容易理解了。 首先cocos2d-js通過封裝的導(dǎo)演類Director來控制Scene場景載入與變換，再通過節(jié)點(diǎn)來管理與顯示每個場景

35、中的各個物體。 其中為了便于管理與組織顯示的物體，cocos2d-js的js庫中封裝了兩個類，一個為Layer一個為Sprite，Layer繼承了節(jié)點(diǎn)并增加了一些功能如背景顏色等等，作為一個輔助的類可以將同一場景中的各個節(jié)點(diǎn)分層管理，如簡單的分為背景層，人物層，敵人層等等。而精靈類cc.Sprite則是游戲中經(jīng)常出現(xiàn)的一個類，繼與Node，一般用于表示游戲內(nèi)的人物或者npc，但是由于封裝了很多常用功能如加載圖片播放動畫等等，時常也用作一些加載動態(tài)的背景內(nèi)容等等。 有了上述概念后通過一段示例代碼來具體展現(xiàn)上面概念在實(shí)際中的應(yīng)用，示例代碼如下: var bg = new LayerColor

36、(cc.color(255,0,0),200,200); bg.x = 100; bg.y = 100; this.addChild(bg,1); var ball1 = new cc.Sprite(“#ball”); ball1.x = 100; ball2.y = 300; this.addChild(ball1,2); var ball2 = new cc.Sprite(“#ball”); ball2.x = 100; ball2.y = 100; bg.addChild(ball2,1); 上面三個對象的錨點(diǎn)分別為bg左下角，ball1，ball2中

37、心點(diǎn)，全局坐標(biāo)分別為(100,100),(100,300),(200,200),可以看出，ball2成為bg的子節(jié)點(diǎn)后坐標(biāo)也是相對于bg產(chǎn)生的，即嵌套的子節(jié)點(diǎn)都已父節(jié)點(diǎn)左下角作為原點(diǎn)坐標(biāo)設(shè)置自己的位置。 最后談?wù)剬?dǎo)演類，導(dǎo)演類Director負(fù)責(zé)切換場景和提供一些信息，如窗口尺寸，全局定時器，暫停和恢復(fù)等等。 2.3.2 動作系統(tǒng) 這部分來簡單分析一下cocos2d-js中的動作系統(tǒng)，要了解游戲的動作系統(tǒng)先要了解一下幀這個概念，計算機(jī)播放的所謂動畫其實(shí)是由屏幕不斷重新繪制顯示內(nèi)容產(chǎn)生的，而幀就是動畫或影像最基本的單位，每一幀就是一個畫面，而連續(xù)的幀畫面播放就形成了動畫或者影像。而常見的f

38、ps(Frames Per Second)一般就是指一秒內(nèi)幀的數(shù)量。那么在這個基礎(chǔ)上，實(shí)現(xiàn)動作就是借助Node節(jié)點(diǎn)的scheduleUpdate借口和update接口，這兩個函數(shù)的功能為通知當(dāng)前節(jié)點(diǎn)在每次重繪之前調(diào)用update函數(shù)，那么結(jié)合上面節(jié)點(diǎn)的屬性，每幀改變位置及角度大小顯然就可以完成任何動畫的繪制。當(dāng)然這是基本的方法也是底層的實(shí)現(xiàn)，cocos2d-js引擎也提供了一些封裝好的動作方法供開發(fā)者使用，這里來終點(diǎn)了解一下封裝好的各個動作的用法。 cocos2d-js的節(jié)點(diǎn)Node中提供了一個接口runAction用于執(zhí)行已經(jīng)封裝好的動作類，使用方法也非常簡單，新建一個封裝好的action

39、類，作為參數(shù)傳入action方法即可。下面就來介紹一下常用的基本動作及執(zhí)行方式。 首先最基本的當(dāng)然就是位移，游戲引擎提供了兩個action類實(shí)現(xiàn)這一動作，分別是moveTo和moveBy，moveTo為移動到某個位置，moveBy為以當(dāng)前為(0,0)移動相應(yīng)距離，兩個都需要至少傳入兩個參數(shù)，移動的時間和一個cc.p對象，cc.p是封裝好的point對象。 然后就是放大與縮小，scaleTo與scaleBy方法，和前面的移動一樣，第一個為絕對的即以原始圖片大小按比例縮放，而scaleBy則根據(jù)已經(jīng)縮放的比例繼續(xù)縮放，雖然是縮放，但是也可以作為翻轉(zhuǎn)來使用，當(dāng)傳入值為負(fù)值時會實(shí)現(xiàn)為反轉(zhuǎn)。 再介

40、紹一下淡入淡出效果，fadeTo，fadeIn，fadeOut，fadeTo接受兩個參數(shù)，第一個和前面的動作一樣為時間，第二個為目標(biāo)透明值，從0到255,0為不可見，255位完全不透明，而fadeIn與fadeOut則只需傳入是時間值，顧名思義，一個為淡入，一個為淡出。 最后介紹兩個也很常用的動作，閃爍及變色，閃爍為blink，傳入兩個參數(shù)，第一個為總時間，第二個為閃爍次數(shù)，色調(diào)變化為tintTo，傳入4個參數(shù)，第一個為時間，后三個為RGB值。當(dāng)然還有很多動作，可以繼續(xù)觀看api或者直接查看CCActionInterval.js觀看源碼進(jìn)行學(xué)習(xí)。 2.3.3 聲音系統(tǒng) cocos2d-j

41、s的聲音系統(tǒng)是非常方便的，整個聲音引擎封裝在cc.audioEngine中，調(diào)用相應(yīng)的方法即可，背景音樂的播放使用playMusic并傳入音樂的url即可，停止使用stopMusic方法，不需要任何參數(shù)。音效則使用playEffect即可，和播放背景音樂一樣傳入url，播放背景音樂和音效的第二個參數(shù)為一個布爾變量，表示是否重復(fù)播放音效。音量的控制也非常簡單，直接使用setEffectsVolume()傳入數(shù)值即可，范圍為0到1,0為靜音。 2.3.4 鼠標(biāo)與觸摸事件 鼠標(biāo)與觸摸事件在cocos2d-js引擎中的處理基本相同，不同的是觸摸時間分為單點(diǎn)和多點(diǎn)，這里因?yàn)殚_發(fā)手機(jī)游戲，直接介紹觸摸

42、事件。 觸摸的處理cocos2d-js中一樣使用的是監(jiān)聽事件模型，監(jiān)聽單點(diǎn)觸摸事件通過cc.eventManager.addListener添加信息，示例代碼如下: cc.eventManager.addListener({ event : cc.EventListener.TOUCH_ONE_BY_ONE, // 單點(diǎn)觸摸事件 onTouchBegan: function(touch,event){}, onTouchMoved: function(touch,event){}, onTouchEnded: function(touch,event){}, onTo

43、uchCancelled: function(touch,event){}, },node); 其中event : cc.EventListener.TOUCH_ONE_BY_ONE聲明了事件的類型，后面的函數(shù)根據(jù)需求進(jìn)行實(shí)現(xiàn)即可。 多點(diǎn)觸摸的處理類似，其中touch參數(shù)變?yōu)閠ouches，傳入一個觸摸點(diǎn)數(shù)組，可以利用循環(huán)來分別處理。 2.3.5 粒子系統(tǒng) 粒子系統(tǒng)是計算機(jī)圖形學(xué)中用于模擬特定模糊現(xiàn)象的系統(tǒng)，如火焰，煙霧，煙花，雨雪等等。粒子系統(tǒng)通過設(shè)定生成由色塊或圖片表示的粒子的生成速度和生成周期，位置，速度，生命周期等等來模擬實(shí)際的物理規(guī)律[2]。 cocos2d-js中粒子系

44、統(tǒng)封裝為ParticleSystem，但因?yàn)榱Ｗ酉到y(tǒng)涉及的屬性過多，所以引擎提供了一些通用的效果，如煙花，火焰，太陽，雪，流星等等，通過替換其中的紋理即可完成大部分通用的建議效果。 例如煙花的示例代碼如下: var ParticleDemoLayer = cc.Layer.extand({ ctor:function(){ this._super(); var particleSystem = new cc.ParticleFireworks(); particleSystem.texture = cc.textureCache.addImage(“#fireworkDemo”

45、); this.addChild(particleSysyem); var winSize = cc.director.getWinSize(); particleSystem.x = winSize.width / 2; particleSystem.y = winSize.height / 2; } }) 如上ParticleFireworks類即為封裝好的煙花類型。 當(dāng)然，想要實(shí)現(xiàn)自己需要的粒子效果還是要經(jīng)過自己的調(diào)試，粒子效果的可視化工具也很多，如ParticleEditor和ParticleBuilder，通過可視化界面輸入?yún)?shù)調(diào)整需要的效果，導(dǎo)出plist參數(shù)文

46、件與png紋理文件即可在cocos2d-js引擎中加載使用，示例代碼如下: var ParticleDemoLayer = cc.Layer.extend({ ctor:function(){ this._super(); var particleSystem = new cc.ParticleSystem(“res/test.plist”); this.addChild(particleSystem); particleSystem.duration = 5; var winSize = cc.director.getWinSize(); particleSystem.x =

47、 size.width / 2; particleSystem.y = size.height / 2; } }) 其中duration表示播放次數(shù)，本示例代碼將會把粒子效果在屏幕正中間播放5次。停止方法也非常直觀，對于無限循環(huán)的粒子系統(tǒng)使用stopSystem方法，對于播放次數(shù)有限則使用setAutoRemoveOnFinish方法，設(shè)置自動銷毀。因?yàn)榱Ｗ酉到y(tǒng)將產(chǎn)生大量的節(jié)點(diǎn)占用資源，所以使用粒子系統(tǒng)時注意及時停止時十分必要的優(yōu)化工作。 3 系統(tǒng)設(shè)計 3.1 場景列表 首先是開始界面，眾所周知

48、第一印象十分重要，能否在一開始就抓住玩家的興趣對于一個游戲而言意味著它后續(xù)的內(nèi)容是否有機(jī)會向玩家展示，同時作為初始頁面也要提供相應(yīng)的基礎(chǔ)功能，所以在本游戲的設(shè)計中開始界面添加一段鴿子入場的簡單動畫，同時搭配漂亮的背景圖及歡快的背景音樂營造氛圍，同時提供開始按鍵與關(guān)于按鍵，實(shí)現(xiàn)最基本的開始游戲功能和介紹游戲的界面的跳轉(zhuǎn)。同時雖然音樂能夠更好的代入氛圍，但是有些特殊環(huán)境下音樂開關(guān)也是必要的，所以在本界面的左上角也添加一個音樂開關(guān)按鈕并添加動態(tài)效果使整個開始界面呈現(xiàn)方式為動態(tài)且立體的。 游戲過程界面，游戲過程界面是游戲的主要部分，大部分的邏輯處理都在這個場景中，首先將場景中的對象分為ui層和背景層

49、，背景來實(shí)現(xiàn)一個視差場景滾動，ui部分顯示得分生命值及飛行距離，同時還要控制顯示鴿子，食物，障礙物以及正面效果道具。 關(guān)于界面，比較簡單，字體足夠大描述清楚游戲的由來和玩法即可，然后提供一個返回主界面的按鈕。 勝利界面，顯示一張今天背景及最終得分還有一個返回按鈕。 圖3.1 場景切換狀態(tài)圖 3.2 鴿子的設(shè)計 鴿子的設(shè)計參考游戲設(shè)計中常用的狀態(tài)機(jī)，設(shè)計簡單的四種狀態(tài)來處理鴿子飛行，及正常狀態(tài)，加速狀態(tài)，被撞擊狀態(tài)及失敗狀態(tài)。 正常狀態(tài)：即鴿子處于正常飛行的狀態(tài)，沒有遇到障礙物也沒有得到加速的增益效果，此時鴿子會按照正常飛行的參數(shù)執(zhí)行幀動畫，同時跟隨操作在屏幕上下垂直移動，在遇到障礙

50、物時進(jìn)入被撞擊狀態(tài)，與加速增益圓圈接觸進(jìn)入加速狀態(tài)。 加速狀態(tài)：從正常狀態(tài)進(jìn)入加速狀態(tài)后，動畫的播放頻率加快，背景滾動速度加快，在畫面中增加風(fēng)的特效，同時鴿子在與障礙物接觸時將破壞障礙物，在固定時間后重新返回正常狀態(tài)。 被撞擊狀態(tài)：從正常狀態(tài)與障礙物接觸后進(jìn)入此狀態(tài)，此時鴿子執(zhí)行一段翻轉(zhuǎn)的動畫同時向屏幕中央移動，速度降低到最低速度，生命值減一，如果生命值為0則進(jìn)入失敗狀態(tài)。 失敗狀態(tài)：被撞擊后生命值為0執(zhí)行一段鴿子下落的動畫，同時執(zhí)行游戲失敗相關(guān)的邏輯。 圖3.2 鴿子狀態(tài)圖 3.3 食物的設(shè)計 食物使用五種圖標(biāo)來表示，都是谷物，隨機(jī)產(chǎn)生，在畫面中的排列則根據(jù)一定的規(guī)律生成，參考一

51、般游戲中的生成方式，本游戲中編寫四種食物的排列方式，水平排列，垂直排列，斜線排列，隨機(jī)分布。 圖3.3 食物分布的四種排布方式 通過這樣的設(shè)計可以引導(dǎo)玩家進(jìn)行更多的操作增加可玩性和難度。 3.4 障礙物的設(shè)計 障礙物用四種圖標(biāo)表示，飛機(jī)，飛碟等等，同時障礙物出現(xiàn)之前添加一個提醒的幀動畫在屏幕右側(cè)。 障礙物也提供在被加速狀態(tài)的鴿子接觸時被摧毀的動畫。 圖3.4 障礙物出現(xiàn)的提醒及被摧毀的動畫 3.5 加速及收集圓環(huán)的設(shè)計 在場景的隨機(jī)位置出現(xiàn)，一個藍(lán)色圓環(huán)一個綠色圓環(huán)，效果分別為讓鴿子進(jìn)入加速狀態(tài)和吸引周圍的

52、食物。 加速后鴿子會進(jìn)入無敵狀態(tài)。 而吸引狀態(tài)下周圍的食物都會在相同的時間內(nèi)向鴿子移動。 兩者添加不同的粒子效果，同時加速狀態(tài)添加背景的風(fēng)痕粒子效果。 3.6 代碼架構(gòu) 首先將代碼進(jìn)行組織，根據(jù)需求設(shè)計，首先建立elements文件夾并創(chuàng)建以下四個js類： GameBackground：游戲背景類，繼承自Layer，用于顯示游戲的背景。 Dove：鴿子類，繼承自Sprite，實(shí)現(xiàn)飛行動畫的播放及封裝一些屬性如鴿子當(dāng)前狀態(tài)等等。 Food：食物類，繼承自Sprite，用于顯示食物圖片，并封裝食物的類型等屬性。 Obstacle：障礙物類，繼承自Sprite，用于顯示障礙物圖片并

53、封裝障礙物的類型，間隔距離，是否被碰撞等屬性。 然后建立scene文件夾管理上面設(shè)計的四個場景： MenuScene：開始場景。 AboutScene：關(guān)于場景。 GameScene：游戲場景。 VictoryScene：勝利場景。 ui目錄建立UI類： GameOverUI：實(shí)現(xiàn)游戲結(jié)束時在游戲場景中彈出的游戲失敗對話框。 GameSceneUI：實(shí)現(xiàn)游戲過程中的暫停按鈕，聲音播放按鈕及生命值距離及得分的顯示。 SoundButton：因?yàn)樾枰獙?shí)現(xiàn)一個動態(tài)效果，且在開始場景和游戲場景中均存在，單獨(dú)封裝為一個類。 建立logic文件夾存放抽離出來的邏輯： FoodMana

54、ger：食物管理類，管理食物的生成邏輯。 ObstacleManager：障礙物管理類，管理障礙物的生成邏輯。 然后還有一些配置及數(shù)據(jù)文件 Game.js：存儲歸途游戲的全局?jǐn)?shù)據(jù)。 Sound.js：封裝一個聲音播放的類。 CameConstants：全局常量數(shù)據(jù)的存儲。 共16個類。 4 系統(tǒng)實(shí)現(xiàn) 4.1 素材準(zhǔn)備 作為一個軟件工程在獨(dú)立游戲開發(fā)上的實(shí)踐，主要關(guān)注點(diǎn)在程序，素材大部分來源于互聯(lián)網(wǎng)，但是作為基本的優(yōu)化，這里要簡單的提一下打包圖片的方式。 使用TexturePacker軟件可以將碎圖打包為一張大的SpriteSheet，減少初始化所用的時間提高運(yùn)行效率。

55、調(diào)用方法如下： cc.spriteFrameCache.addSpriteFrames("res/graphics/texture.plist"); 上面的代碼即將打包好的整張圖片添加入緩存中，在使用時加#即可調(diào)用。 如新建一個Sprite對象時直接傳參”#+圖片名”即可。 4.2 開始界面的實(shí)現(xiàn) 4.2.1 UI 開始界面中的UI主要為聲音控制按鈕和兩個場景跳轉(zhuǎn)按鈕開始游戲與關(guān)于按鈕，菜單按鈕使用cocos2d-js中封裝好的類MenuItemImage來實(shí)現(xiàn)，菜單核心實(shí)現(xiàn)代碼如下： var MenuScene = cc.Scene.extend({ _dove:

56、null, // 鴿子對象 _playBtn:null, // 啟動按鈕 _aboutBtn:null, // 關(guān)于按鈕 ctor:function () { this._super(); var layer = new cc.Layer(); this.addChild(layer); var winSize = cc.director.getWinSize();

57、 var bgWelcome = new cc.Sprite("res/graphics/bgWelcome.jpg"); // 依次添加對象 bgWelcome.x = winSize.width/2; bgWelcome.y = winSize.height/2; layer.addChild(bgWelcome); var title = new cc.Sprite("#welcome_title.png"); title.x = 1300; title.y = 600;

58、 layer.addChild(title); this._dove = new cc.Sprite("#welcome_dove.png"); this._dove.x = -this._dove.width/2; this._dove.y = 400; layer.addChild(this._dove); this._playBtn = new cc.MenuItemImage("#welcome_playButton.png", "#welcome_playButton.png"

59、, this._play); this._playBtn.x = 1500; this._playBtn.y = 350; this._aboutBtn = new cc.MenuItemImage("#welcome_aboutButton.png", "#welcome_aboutButton.png", this._about, this); this._aboutBtn.x = 1300; this._aboutBtn.y = 250; var soundButton = new

60、 SoundButton(); soundButton.x = 45; soundButton.y = winSize.height - 45; var menu = new cc.Menu(this._playBtn, this._aboutBtn, soundButton); layer.addChild(menu); menu.x = menu.y = 0; Sound.playMenuBgMusic(); // 播放背景音樂 this

61、.scheduleUpdate(); return true; }, _play:function() { // 切換游戲到主場景 Sound.playspeed(); cc.director.runScene(new GameScene()); }, _about:function() { // 切換游戲到關(guān)于場景 Sound.playgetFood(); cc.director

62、.runScene(new AboutScene()); }, }); 如上述代碼，_dove,_playBtn,_aboutBtn分別為鴿子精靈，開始游戲按鈕和進(jìn)入關(guān)于場景的按鈕，bgWelcome為背景圖片，MenuItemImage的第三個參數(shù)即為點(diǎn)擊按鈕后執(zhí)行的函數(shù)，使用director類的runScene方法來切換畫面，同時利用封裝好的sound類在切換場景前關(guān)閉當(dāng)前場景的聲音，_play和_about分別負(fù)責(zé)切換到這兩個場景。 4.2.2 動態(tài)效果 在開始界面時添加鴿子從左邊屏幕飛入的動作效果，核心代碼如下： var move = cc.moveTo(2, cc

63、.p(this._dove.width/2 + 100, this._dove.y)).easing(cc.easeOut(2)); this._dove.runAction(move); 其中easeOut是一個由快到慢的過渡效果，表現(xiàn)飛入比較真實(shí)。 然后給除聲音播放按鈕外的三個對象增加搖擺的效果增加整個畫面的動感，核心代碼如下： update:function(dt) { var currentDate = new Date(); this._dove.y = 400 + (Math.cos(currentDate.getTim

64、e() * 0.002)) * 25; this._playBtn.y = 350 + (Math.cos(currentDate.getTime() * 0.002)) * 10; this._aboutBtn.y = 250 + (Math.cos(currentDate.getTime() * 0.002)) * 10; } 其中Math類是js中的數(shù)學(xué)函數(shù)庫，cos是大家熟悉的余弦函數(shù)，currentDate是封裝好的當(dāng)前時間類，通過一個隨著時間變化的函數(shù)控制三個對象的y值實(shí)現(xiàn)上下的浮動。

65、 圖4.1 開始界面實(shí)現(xiàn)效果 4.3 關(guān)于界面的實(shí)現(xiàn) 4.3.1 UI 關(guān)于界面非常簡單，ui部分主要就是一段文字和返回按鈕，核心代碼如下： var aboutText = "歸途是一款表現(xiàn)鴿子回家的游戲。\n\n" + " 使用的引擎為cocos2d-js。\n\n" + " 游戲非常簡單，在回家的途中搜集盡可能多的食物。\n\n" + " 注意當(dāng) \"Look out!\"出現(xiàn)時規(guī)避障礙物。\n\n" + " 玩家有五點(diǎn)生命值，碰到一次障礙物減少一點(diǎn)，生命值為0游戲結(jié)束。 \n\n" + " 嘗試堅持到獲得10

66、000分使鴿子回家:-D"; var helloLabel = new cc.LabelTTF(aboutText, "Arial", 40); helloLabel.x = winSize.width/2; helloLabel.y = winSize.height/2 + 80; layer.addChild(helloLabel); 上出代碼中LabelTTF類為文字顯示類，是cocos2d-js的三種顯示文字的方法之一，其余兩種分別為LabelBMFont和LabelAtlas，其中l(wèi)ableTTF因?yàn)樾实膯栴}已經(jīng)在最新的引擎中不被推薦使用了，但由于本界面十分簡單不涉及效率問題所以使用了最簡單的LabelTTF。 4.3.2 返回按鈕 返回按鈕和前面的開始于關(guān)于按鈕一樣使用MenuItemImage類來實(shí)現(xiàn)，相關(guān)核心代碼如下： // 封裝一個back按鈕 var backButton = new cc.MenuItemImage("#about_backButton.png", "#about_backButton.png", this._bac