毕业设计（论文）-基于android的avg类型游戏《归途》的设计与实现.docx

太原理工大学毕业设计(论文)用纸太原理工大学毕业设计（论文）任务书 第1页毕业设计（论文）题目：基于android的avg类型游戏归途的设计与实现全套设计加扣 3012250582毕业设计（论文）要求及原始数据（资料）：1综述国内外手机游戏开发技术研究现状；2深入了解android系统及其图形界面开发的相关技术；3熟练掌握android相关api的应用，训练编写程序的能力；4设计并实现一款avg类型的android平台游戏；5深入分析游戏中界面开发的关键技术与编写语言；6训练实际内容向程序转换的编程思维及能力；7训练检索文献资料和利用文献资料的能力；8训练撰写技术文档与学位论文的能力。 第2页毕业设计（论文）主要内容：1综述android相关技术在游戏开发中的应用；2了解android图形化编程的相关技术；3熟练运用android开发涉及到的编程语言； 4设计一组设计构思向游戏程序转化的模板流程；5. 深入了解手机游戏的设计流程；6熟练掌握基于android平台软件的编写；7设计与实现完整的一款android平台avg类型游戏。学生应交出的设计文件（论文）：1内容完整、层次清晰、叙述流畅、排版规范的毕业设计论文；2包括毕业设计论文、源程序等内容在内的毕业设计电子文档及其它相关材料。 第3页主要参考文献（资料）：1 董昆. 手机游戏的发展现状及特点J. 数字技术与应用, 2011(01):120-120.2 陈林锋, 张海翔, 陈纯. 手机游戏的渲染引擎研究J. 计算机工程与设计, 2006(14):2606-2607. 3 张鹰, 计时鸣, 张利等. 基于J2ME的手机游戏2D动画的编程实现J. 计算机与数字工程, 2007, 35(2):134-137.4 杨帆. 基于J2ME的手机游戏设计D. 电子科技大学, 2006.5 李艳丽. Android事件处理过程剖析J. 长春理工大学学报:自然科学版, 2010, 33(3):159-162.6 宋国柱. Android图形图像处理技术研究J. 电脑知识与技术, 2014(8):1800-1801.7 赵亮, 张维. 基于Android技术的界面设计与研究J. 电脑知识与技术, 2009(29).8 Acosta K, Despain W. 100 Principles of Game DesignM. NEW RIDERS PUBL, 2012.9 Phillips B, Hardy B. Android Programming: The Big Nerd Ranch GuideJ. Pearson Schweiz Ag, 2013.10 Freeman E, Freeman E, Bates B, et al. Head First Design PatternsJ. Oreilly Media, 2004.专业班级软件1229班学生要求设计（论文）工作起止日期2016年3月21日2016年6月10日指导教师签字日期2016年3月21日教研室主任审查签字日期系主任批准签字日期基于android的avg类型游戏归途的设计与实现摘 要由于目前移动平台的普及和游戏行业的逐步完善，越来越多的开发者开始在手机平台上进行游戏开发，并且因为工具的完善和传播的便捷性，手机平台也越来越受独立游戏开发者的关注，但独立游戏开发作为游戏开发最早却最落后的形式让很多开发者陷入了永远无法完成作品的窘境，而软件工程正是解决此类问题的良药，这次毕业设计就是由此而生的。独立游戏开发的难点与一般软件开发并不完全相同，所以本次毕业设计从实战出发，结合学到的知识进行一次基于标题的游戏开发，模仿独立游戏一般开始于某个突发奇想或想表达的某种观点的现实情况，由标题开始进行设计，并根据设计先进行技术积累，根据技术的掌握情况评估修正已有设计，再进行开发并测试，在一般软件开发流程上进行了对独立游戏开发的优化。本次毕设就是以上述开发流程思想为基础，设计并完成一个完整可玩的游戏，并且在保证游戏本身的一些基本质量要求的前提下尽可能的表达了主题的内容。关键字：游戏开发；安卓；cocos2dx-jsThe Design And Implementation of “Homeward Journey” based on AndroidAbstractGradually improve due to the current popularity of mobile platforms and gaming industry, more and more developers to begin game development on mobile platforms, 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 completed 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 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 design, 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 game itself, some of the basic requirements of the premise as expressed content topics.Key words: Game development; android; cocos2d-js目 录1 绪论11.1 课题的来源及意义11.2 与课题相关的行业发展现状21.2.1 html5游戏21.2.2 独立游戏21.3 主要工作内容32 项目需求及关键技术分析42.1 项目需求42.2 cocos2d-js中的javascript语言42.3 cocos2d-js引擎82.3.1 坐标系统及对象管理82.3.2 动作系统102.3.3 声音系统112.3.4 鼠标与触摸事件112.3.5 粒子系统113 系统设计143.1 场景列表143.2 鸽子的设计153.3 食物的设计153.4 障碍物的设计163.5 加速及收集圆环的设计163.6 代码架构164 系统实现184.1 素材准备184.2 开始界面的实现184.2.1 UI184.2.2 动态效果204.3 关于界面的实现214.3.1 UI214.3.2 返回按钮224.4 游戏主界面的实现234.4.1 UI234.4.2 背景及结束画面254.5 游戏数据记录及声音统一管理284.5.1 数据记录284.5.2 声音管理284.6 鸽子相关逻辑的实现314.6.1 阶段314.6.2 操作344.7 食物及光环相关逻辑的实现354.7.1 四种食物分布类型的实现及光环作用的实现354.7.2 碰撞检测374.8 障碍物的实现384.9 特效424.9.1 全屏抖动424.9.2 粒子特效435 游戏发布及测试445.1 测试及修正445.1.1 测试记录445.1.2 解决问题455.2 发布455.2.1 屏幕适配45参考文献46致 谢47外文文献48中文翻译541 绪论1.1 课题的来源及意义电子游戏作为一个诞生于1952年的新兴娱乐形式，经过半个多世纪的发展已经成为了年轻人的主要娱乐方式之一。并且随着智能手机的普及，移动平台的游戏更是将其影响力扩展到了各个年龄段的人群，从长到幼，填充着现代社会越来越碎片化的时间，从PC端到移动端，满足着人们形形色色的想象和需求。而正是因为其无所不包和无所不在的特性，电子游戏从诞生以来就伴随着无数的争议，既创造着巨大的价值，同时也造成了很多不良的影响，因为其强大的影响力足以影响人的价值观，其强大的沉浸感足以影响人的正常作息。但电子游戏作为一种载体本身是没有任何倾向性的，作为一种仍在发展中的媒介仍有很大的发展空间。近年来如Shadow Of the Colossus（旺达与巨像），journey（风之旅人）几乎已经踏入了艺术的殿堂，以电子游戏独特的交互属性给人带来比单纯的画面音乐甚至电影更强的情感体验与思考。但作为人类想象力的一种具现化，游戏开发的复杂度也是与日俱增，专业制作公司几百人的团队数年的开发时间仍旧会制作出并不完善的作品，而独立游戏开发就更像是一场永不完结的马拉松，最近的独立游戏话题作品Stardew Valley（星露谷物语）就是作者Concerned Ape单人持续开发四年的成果。显而易见，独立游戏开发是一种需要投入大量精力而在完成前没有任何收入且在完成后收益未知的，极大的冒险行为1。而软件工程正是削减冒险性和不确定性的科学手段，所以，本次课程设计将根据个人开发的独特性综合已有软件工程方法和自我管理知识，在限期开发一个完整游戏作品的过程中尝试搭建一套从快速学习再到进度保证的高效工作流。再到作品本身，Avg类型游戏是Adventure Game的缩写，冒险游戏，作为几乎在电子游戏诞生时就存在的游戏类型，因其扮演和冒险这两大特性它经久不衰的持续到现在仍旧是一种重要的游戏类型，本次作品选择这种游戏类型是因为它的包容性，可以实践游戏开发方方面面的技术尽快熟悉游戏开发流和所使用的游戏引擎的各种特性。1.2 与课题相关的行业发展现状1.2.1 html5游戏随着html5技术规范的逐步推广，现在大部分主流浏览器已经开始支持html5技术标准，同时作为前一段时间业界认为将颠覆native app存在的web app的主要技术来源，虽然现在native app仍旧占据着主要市场地位，但是混合开发技术已经越来越受到重视，web下开发的跨平台特性也是其不断流行的关键之一。虽然各路浏览器难以统一一直是web开发的一大难题，但在html5标准下浏览器的标准化已经可以期待，同时很多厂家也在努力的构建html5应用开发的生态圈，如cocos2dx引擎的html5分支，白鹭时代的egret引擎等等1。目前html5游戏的典型成功案例就是由上面提到的egret引擎开发的围住神经猫，由一名程序一名美术耗时一天半完成，但上线3天访问量便过亿，虽然热度减退也十分迅速，但是从这个案例可以看出html5游戏目前几个特点，那就是成本低，易推广。而至于留存时间当然是看游戏本身的耐玩程度，但在大厂广告和ip封锁下，html5游戏的道路显然是独立游戏开发者一条比较适合的选择，尤其是目前很多厂商仍旧在用原生应用的那一套做html5应用的情况下。虽然是一种趋势，但是目前为止html5游戏的现状其实并没有想象中那么美好，目前html5游戏的典型代表古龙群侠传和愚公移山的用户量和收入相对于原生应用手游还是相去甚远，商业化的html5之路并不好走，甚至更加依赖渠道。但是对于独立游戏开发却不同，意在表达自我的独立游戏相对于商业化的游戏更适合以html5作为载体，和急着变现的html5商业游戏不同，html5独立游戏更像是一种微博或者博客的升级版，简单的学习成本和低廉的发布成本将会成为创意与思想表达的优秀载体。1.2.2 独立游戏独立游戏制作，即不以商业发行为目的，独立制作完成的游戏。虽然由于媒体的渲染，独立游戏中的几个获得了巨大利益的例子似乎成为了独立游戏的代表，但是本质上来讲，独立游戏更多的还是一种对于自身见解或情感的基于游戏这种表达形式的非商业化创作。在一些游戏制作者眼中游戏承担着部分媒体的属性，如著名的游戏制作人陈星汉就直接把游戏称为一种新媒体，同时贯穿陈星汉游戏设计的一个理念则是情感的表达，这和html5易于传播的特性一拍即合，随着制作工具的不断完善，制作成本和流程的不断完善，作为一种表达媒介拥有广阔的前景。1.3 主要工作内容基于html5技术开发独立游戏是本次课题的主要工作内容，同时也将探索混合开发的方式，即利用cocos2d-js的跨平台特性完成web端的内容和向安卓原生的移植。所以主要工作内容如下，学习cocos2d-js的基本工作流，设计并实现一个html5游戏，完成对游戏向原生安卓平台的移植，最后的成果为一个安卓原生的完整游戏。2 项目需求及关键技术分析2.1 项目需求独立游戏开发与大型软件项目和大型游戏项目均不相同，因为不是功能性的程序，所以需求部分可以完全由自己完成，及不断的探寻自己想要表达的内容与自己开发技能所能达到的一个重合点，同时快速的学习新的技术用来实现自己的想法。本项目中准备开发一个表现鸽子回家过程的游戏，玩家控制一个飞鸽躲避障碍物并收集食物，最终到达终点。具体需求如下：开始界面，提供声音控制按钮，开始游戏按钮及关于即游戏介绍界面跳转按钮。游戏过程界面，提供声音控制按钮及暂停按钮，显示鸽子，滚动的视差背景，随机生成的食物，生命值，分数及距离，同时提供游戏结束的提示弹出框及返回按钮。关于界面，游戏的内容介绍及返回开始界面的按钮。胜利界面，胜利的动画及最终分数显示。食物相关，提供多种分布方式随机选择生成在游戏过程界面中。障碍物相关，提供多种障碍物随机类型随机位置出现，同时实现提前提醒出现位置的功能。两种正面效果道具，一种提供加速功能，可以无视障碍物，一种提供吸收周围食物的功能。2.2 cocos2d-js中的javascript语言cocos2d-js使用的语言为javascript语言，掌握javascript的基本概念也是十分重要的一部分，下面来简单介绍一下cocos2d-js中javascript语言的应用。首先javascript是一种基于原型的语言，最新的标准为ES6，javascript的应用十分普遍，作为一种脚本语言广泛应用在web领域，而cocos2d-js由于作为游戏引擎，需要用到面向对象的一些特性来组织代码结构，所以采用了jquery之父john resig的继承方案，封装了new，extend等方法来实现类与继承。示例代码如下:var object = function();var obj1 = new object(); = “obj1”;var obj2 = new object(); = “obj2”;Console.log(,);上述代码在浏览器控制台会输出obj1、obj2，这个例子利用了function的Prototype来实现了不同的对象。并定义了Class作为基类。代码清单如下：cc.Class = function();cc.Class.extend = function(props)var _super = totype;./是本类可继承Class.extend = cc.Class.extend;/增加实现方法Class.implement = function(prop)For(var name in prop)prototypename =propname;.如上，cocos2d-js引擎中的CCClass.js中封装了extend和implements方法，实现了面向对象的功能，可以让开发者方面的在js中应用面向对象的特性。使用时的示例如下:var TestScene= 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为构造函数，与c+的构造函数类似，上面的TestScene类新建时传入一个颜色参数即可创建出一个单色背景的scene。最后需要深入理解一下js中的this关键字，在面向对象的风格中this常见但js的this与java和c+中的this有一些不同之处。this在函数中随着使用场合的不同而代表着不同的值，即指向调用这个函数的对象。首先是全局函数下的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，证明了在全局函数中this指向的对象为全局对象。然后是作为对象的方法,示例代码如下:function test()console.log(this.x);var x = 0;var arr = ;arr.x = 1;arr.m = test;arr.m();上述代码最后的输出结果为1，证明此时this指向的是对象。然后是在是用new关键字时，示例代码如下:function test()console.log(this.x);var obj = new test();console.log(obj.x);上述代码输出值为1，证明其中this指向的是新创建的对象。最后一种情况是在apply/call调用时，示例代码如下: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中的第一个参数。所以综上所述，在cocos2d-js中使用this时要注意全局函数下的情况，带特定情况下需要使用bind()函数来手动绑定对象。bind可以手动来改变function的上下文环境，所以说虽然javascript是一门比较混乱的语言但是同时也是一门非常灵活和实用的语言。2.3 cocos2d-js引擎2.3.1 坐标系统及对象管理 cocos2d-js是一个典型的2d游戏引擎，坐标系为以左下角为(0,0)点x从左往右递增，y从下往上递增。那么要理解cocos2x-js中对象的管理机制首先要从两个概念说起，首先是节点，在cocos2d-js中被封装为Node类。 部分代码如下cc.Node = cc.Class.extend(/* lends cc.Node# */ _localZOrder: 0, _globalZOrder: 0, _vertexZ: 0.0, _rotationX: 0, _rotationY: 0.0, _scaleX: 1.0, _scaleY: 1.0, _position: null, _normalizedPosition:null, _usingNormalizedPosition: false, _normalizedPositionDirty: false, _skewX: 0.0, _skewY: 0.0, _children: null,.可以从名字看出一些基本功能，如缩放，坐标，透明度等等，其中对于对象管理很重要的属性就是_children,在cocos2d-js中对象是通过树结构进行管理的，这样带来的特性就是整体性，可是实现对父节点添加效果时影响全部子节点，如透明度坐标等，理解了这个结构，那么在坐标系下锚点等概念就十分容易理解了。首先cocos2d-js通过封装的导演类Director来控制Scene场景载入与变换，再通过节点来管理与显示每个场景中的各个物体。其中为了便于管理与组织显示的物体，cocos2d-js的js库中封装了两个类，一个为Layer一个为Sprite，Layer继承了节点并增加了一些功能如背景颜色等等，作为一个辅助的类可以将同一场景中的各个节点分层管理，如简单的分为背景层，人物层，敌人层等等。而精灵类cc.Sprite则是游戏中经常出现的一个类，继与Node，一般用于表示游戏内的人物或者npc，但是由于封装了很多常用功能如加载图片播放动画等等，时常也用作一些加载动态的背景内容等等。有了上述概念后通过一段示例代码来具体展现上面概念在实际中的应用，示例代码如下:var bg = new LayerColor(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);上面三个对象的锚点分别为bg左下角，ball1，ball2中心点，全局坐标分别为(100,100),(100,300),(200,200),可以看出，ball2成为bg的子节点后坐标也是相对于bg产生的，即嵌套的子节点都已父节点左下角作为原点坐标设置自己的位置。最后谈谈导演类，导演类Director负责切换场景和提供一些信息，如窗口尺寸，全局定时器，暂停和恢复等等。2.3.2 动作系统这部分来简单分析一下cocos2d-js中的动作系统，要了解游戏的动作系统先要了解一下帧这个概念，计算机播放的所谓动画其实是由屏幕不断重新绘制显示内容产生的，而帧就是动画或影像最基本的单位，每一帧就是一个画面，而连续的帧画面播放就形成了动画或者影像。而常见的fps(Frames Per Second)一般就是指一秒内帧的数量。那么在这个基础上，实现动作就是借助Node节点的scheduleUpdate借口和update接口，这两个函数的功能为通知当前节点在每次重绘之前调用update函数，那么结合上面节点的属性，每帧改变位置及角度大小显然就可以完成任何动画的绘制。当然这是基本的方法也是底层的实现，cocos2d-js引擎也提供了一些封装好的动作方法供开发者使用，这里来终点了解一下封装好的各个动作的用法。cocos2d-js的节点Node中提供了一个接口runAction用于执行已经封装好的动作类，使用方法也非常简单，新建一个封装好的action类，作为参数传入action方法即可。下面就来介绍一下常用的基本动作及执行方式。首先最基本的当然就是位移，游戏引擎提供了两个action类实现这一动作，分别是moveTo和moveBy，moveTo为移动到某个位置，moveBy为以当前为(0,0)移动相应距离，两个都需要至少传入两个参数，移动的时间和一个cc.p对象，cc.p是封装好的point对象。然后就是放大与缩小，scaleTo与scaleBy方法，和前面的移动一样，第一个为绝对的即以原始图片大小按比例缩放，而scaleBy则根据已经缩放的比例继续缩放，虽然是缩放，但是也可以作为翻转来使用，当传入值为负值时会实现为反转。再介绍一下淡入淡出效果，fadeTo，fadeIn，fadeOut，fadeTo接受两个参数，第一个和前面的动作一样为时间，第二个为目标透明值，从0到255,0为不可见，255位完全不透明，而fadeIn与fadeOut则只需传入是时间值，顾名思义，一个为淡入，一个为淡出。最后介绍两个也很常用的动作，闪烁及变色，闪烁为blink，传入两个参数，第一个为总时间，第二个为闪烁次数，色调变化为tintTo，传入4个参数，第一个为时间，后三个为RGB值。当然还有很多动作，可以继续观看api或者直接查看CCActionInterval.js观看源码进行学习。2.3.3 声音系统cocos2d-js的声音系统是非常方便的，整个声音引擎封装在cc.audioEngine中，调用相应的方法即可，背景音乐的播放使用playMusic并传入音乐的url即可，停止使用stopMusic方法，不需要任何参数。音效则使用playEffect即可，和播放背景音乐一样传入url，播放背景音乐和音效的第二个参数为一个布尔变量，表示是否重复播放音效。音量的控制也非常简单，直接使用setEffectsVolume()传入数值即可，范围为0到1,0为静音。2.3.4 鼠标与触摸事件鼠标与触摸事件在cocos2d-js引擎中的处理基本相同，不同的是触摸时间分为单点和多点，这里因为开发手机游戏，直接介绍触摸事件。触摸的处理cocos2d-js中一样使用的是监听事件模型，监听单点触摸事件通过cc.eventManager.addListener添加信息，示例代码如下:cc.eventManager.addListener(event : cc.EventListener.TOUCH_ONE_BY_ONE, / 单点触摸事件onTouchBegan: function(touch,event),onTouchMoved: function(touch,event),onTouchEnded: function(touch,event),onTouchCancelled: function(touch,event),node);其中event : cc.EventListener.TOUCH_ONE_BY_ONE声明了事件的类型，后面的函数根据需求进行实现即可。多点触摸的处理类似，其中touch参数变为touches，传入一个触摸点数组，可以利用循环来分别处理。2.3.5 粒子系统粒子系统是计算机图形学中用于模拟特定模糊现象的系统，如火焰，烟雾，烟花，雨雪等等。粒子系统通过设定生成由色块或图片表示的粒子的生成速度和生成周期，位置，速度，生命周期等等来模拟实际的物理规律2。cocos2d-js中粒子系统封装为ParticleSystem，但因为粒子系统涉及的属性过多，所以引擎提供了一些通用的效果，如烟花，火焰，太阳，雪，流星等等，通过替换其中的纹理即可完成大部分通用的建议效果。例如烟花的示例代码如下:var ParticleDemoLayer = cc.Layer.extand(ctor:function()this._super();var particleSystem = new cc.ParticleFireworks();particleSystem.texture = cc.textureCache.addImage(“#fireworkDemo”);this.addChild(particleSysyem);var winSize = cc.director.getWinSize();particleSystem.x = winSize.width / 2;particleSystem.y = winSize.height / 2;)如上ParticleFireworks类即为封装好的烟花类型。当然，想要实现自己需要的粒子效果还是要经过自己的调试，粒子效果的可视化工具也很多，如ParticleEditor和ParticleBuilder，通过可视化界面输入参数调整需要的效果，导出plist参数文件与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 = size.width / 2;particleSystem.y = size.height / 2;)其中duration表示播放次数，本示例代码将会把粒子效果在屏幕正中间播放5次。停止方法也非常直观，对于无限循环的粒子系统使用stopSystem方法，对于播放次数有限则使用setAutoRemoveOnFinish方法，设置自动销毁。因为粒子系统将产生大量的节点占用资源，所以使用粒子系统时注意及时停止时十分必要的优化工作。3 系统设计3.1 场景列表首先是开始界面，众所周知第一印象十分重要，能否在一开始就抓住玩家的兴趣对于一个游戏而言意味着它后续的内容是否有机会向玩家展示，同时作为初始页面也要提供相应的基础功能，所以在本游戏的设计中开始界面添加一段鸽子入场的简单动画，同时搭配漂亮的背景图及欢快的背景音乐营造氛围，同时提供开始按键与关于按键，实现最基本的开始游戏功能和介绍游戏的界面的跳转。同时虽然音乐能够更好的代入氛围，但是有些特殊环境下音乐开关也是必要的，所以在本界面的左上角也添加一个音乐开关按钮并添加动态效果使整个开始界面呈现方式为动态且立体的。游戏过程界面，游戏过程界面是游戏的主要部分，大部分的逻辑处理都在这个场景中，首先将场景中的对象分为ui层和背景层，背景来实现一个视差场景滚动，ui部分显示得分生命值及飞行距离，同时还要控制显示鸽子，食物，障碍物以及正面效果道具。关于界面，比较简单，字体足够大描述清楚游戏的由来和玩法即可，然后提供一个返回主界面的按钮。胜利界面，显示一张今天背景及最终得分还有一个返回按钮。图3.1 场景切换状态图3.2 鸽子的设计鸽子的设计参考游戏设计中常用的状态机，设计简单的四种状态来处理鸽子飞行，及正常状态，加速状态，被撞击状态及失败状态。正常状态：即鸽子处于正常飞行的状态，没有遇到障碍物也没有得到加速的增益效果，此时鸽子会按照正常飞行的参数执行帧动画，同时跟随操作在屏幕上下垂直移动，在遇到障碍物时进入被撞击状态，与加速增益圆圈接触进入加速状态。加速状态：从正常状态进入加速状态后，动画的播放频率加快，背景滚动速度加快，在画面中增加风的特效，同时鸽子在与障碍物接触时将破坏障碍物，在固定时间后重新返回正常状态。被撞击状态：从正常状态与障碍物接触后进入此状态，此时鸽子执行一段翻转的动画同时向屏幕中央移动，速度降低到最低速度，生命值减一，如果生命值为0则进入失败状态。失败状态：被撞击后生命值为0执行一段鸽子下落的动画，同时执行游戏失败相关的逻辑。图3.2 鸽子状态图3.3 食物的设计食物使用五种图标来表示，都是谷物，随机产生，在画面中的排列则根据一定的规律生成，参考一般游戏中的生成方式，本游戏中编写四种食物的排列方式，水平排列，垂直排列，斜线排列，随机分布。图3.3 食物分布的四种排布方式通过这样的设计可以引导玩家进行更多的操作增加可玩性和难度。3.4 障碍物的设计障碍物用四种图标表示，飞机，飞碟等等，同时障碍物出现之前添加一个提醒的帧动画在屏幕右侧。障碍物也提供在被加速状态的鸽子接触时被摧毁的动画。 图3.4 障碍物出现的提醒及被摧毁的动画3.5 加速及收集圆环的设计在场景的随机位置出现，一个蓝色圆环一个绿色圆环，效果分别为让鸽子进入加速状态和吸引周围的食物。加速后鸽子会进入无敌状态。而吸引状态下周围的食物都会在相同的时间内向鸽子移动。两者添加不同的粒子效果，同时加速状态添加背景的风痕粒子效果。3.6 代码架构首先将代码进行组织，根据需求设计，首先建立elements文件夹并创建以下四个js类：GameBackground：游戏背景类，继承自Layer，用于显示游戏的背景。Dove：鸽子类，继承自Sprite，实现飞行动画的播放及封装一些属性如鸽子当前状态等等。Food：食物类，继承自Sprite，用于显示食物图片，并封装食物的类型等属性。Obstacle：障碍物类，继承自Sprite，用于显示障碍物图片并封装障碍物的类型，间隔距离，是否被碰撞等属性。然后建立scene文件夹管理上面设计的四个场景：MenuScene：开始场景。AboutScene：关于场景。GameScene：游戏场景。VictoryScene：胜利场景。ui目录建立UI类：GameOverUI：实现游戏结束时在游戏场景中弹出的游戏失败对话框。GameSceneUI：实现游戏过程中的暂停按钮，声音播放按钮及生命值距离及得分的显示。SoundButton：因为需要实现一个动态效果，且在开始场景和游戏场景中均存在，单独封装为一个类。建立logic文件夹存放抽离出来的逻辑：FoodManager：食物管理类，管理食物的生成逻辑。ObstacleManager：障碍物管理类，管理障碍物的生成逻辑。然后还有一些配置及数据文件Game.js：存储归途游戏的全局数据。Sound.js：封装一个声音播放的类。CameConstants：全局常量数据的存储。共16个类。4 系统实现4.1 素材准备作为一个软件工程在独立游戏开发上的实践，主要关注点在程序，素材大部分来源于互联网，但是作为基本的优化，这里要简单的提一下打包图片的方式。使用TexturePacker软件可以将碎图打包为一张大的SpriteSheet，减少初始化所用的时间提高运行效率。调用方法如下：cc.spriteFrameCache.addSpriteFrames(res/graphics/texture.plist);上面的代码即将打包好的整张图片添加入缓存中，在使用时加#即可调用。如新建一个Sprite对象时直接传参”#+图片名”即可。4.2 开始界面的实现4.2.1 UI开始界面中的UI主要为声音控制按钮和两个场景跳转按钮开始游戏与关于按钮，菜单按钮使用cocos2d-js中封装好的类MenuItemImage来实现，菜单核心实现代码如下：var MenuScene = cc.Scene.extend( _dove:null, / 鸽子对象 _playBtn:null, / 启动按钮 _aboutBtn:null, / 关于按钮 ctor:function () this._super(); var layer = new cc.Layer(); this.addChild(layer); var winSize = cc.director.getWinSize(); 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; 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, 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 SoundButton(); soundButton.x = 45; soundButton.y = winSize.height - 45; var menu = new cc.Menu(this._playBtn, th