作者：凌建风
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Cocos2d-JS游戏开发试读：
前言
近几年，手游行业的发展可谓是百家齐放、万紫千红。短短两年，便出现了多款月流水过亿，甚至是近十亿的产品，例如《刀塔传奇》《梦幻西游》《怪物弹珠》等，而这些游戏都是采用Cocos引擎开发的。
Cocos2d-JS作为Cocos引擎的下一个分支，从2014年3月份发布3.0 Beta版到现在已经经历两年的磨练了。这两年来，Cocos2d-JS取得的成绩不容置疑。再加上Cocos Creator编辑器的推出，Cocos引擎面向开发者脚本化已经成为趋势，而Cocos2d-JS正是官方现在主推的方案。
本书编写始于2015年4月，原计划6个月撰写完成，但直到2016年1月才最终完成，历经10个月。我常常调侃自己，这本书是我“十月怀胎”生出来的。在这10个月中，我过着机器般的生活，除了上班就是写书，偶尔有朋友约我周末一起出去玩，我只能问他们一句：“周末是什么，能吃吗？哪里有卖？多少钱一斤？”这样装疯卖傻，只是为了写出一本对得起自己、对得起读者的书。
在保证图书内容的同时，我更注重它阅读起来是否轻松愉快、通俗易懂、能够现学现用，所以，我对书中所有的内容都进行了精雕细磨，哪怕它只是一张图片、一行注释或者一小段代码，都精益求精。对我来说，这本书更像是一个产品，我尽可能地站在用户的角度去撰写和设计这本书，由衷地希望这本书能给广大开发者带来帮助，如此，我便心满意足了。本书结构
本书共4部分，17章。
第一部分为基础篇，共7章，各章简述如下。
第1章“Cocos2d-JS介绍”：这一章介绍了Cocos引擎的家族史以及引擎的相关创始人，说明了Cocos2d-x和Cocos2d-JS之间的关系，详细介绍了Cocos2d-x引擎包的目录结构。
第2章“Hello World”：这一章介绍了Cocos2d-JS项目的目录结构，演示了环境搭建，讲述了如何通过Cocos Console创建、编译、运行和打包Cocos2d-JS工程。此外，还介绍了如何使用Cocos DevTools工具提高学习效率。在这一章中，你还可以了解到Cocos2d-JS游戏的启动流程。
第3章“核心框架”：这一章介绍了Cocos2d-JS核心框架相关的类，如cc.Director、cc.Node、cc.Scene、cc.Layer、cc.Sprite、cc.Label等，还讲解了BMFont编辑器的用法。最后，我们开发了《保卫萝卜2》的主页面。
第4章“动作模块”：这一章介绍了cc.Action动作父类以及瞬时动作和持续动作，其中持续动作又包含属性变化动作、视觉效果动作以及复合动作。除此之外，还介绍了变速动作。最后，我们让《保卫萝卜2》主页面动了起来。
第5章“事件机制”：这一章介绍了事件管理器、触摸事件、加速计感应事件、键盘事件、鼠标事件、自定义事件等。最后，在这一章的实例中，封装了一个虚拟摇杆。
第6章“音频处理”：这一章介绍了cc.audioEngine的常用API，列出了Cocos2d-JS在各平台下支持的音频格式，并讨论了背景音乐应当在何时播放最为合适。最后，给《保卫萝卜2》添加了相关的音频。
第7章“屏幕适配”：这一章介绍了屏幕适配原理以及5种系统预设适配模式，分别是SHOW_ALL、NO_BORDER、EXACT_FIT、FIXED_HEIGHT、FIXED_WIDTH，并交代了官方目前推荐的适配方案。
第二部分为进阶篇，共5章，各章简述如下。
第8章“数据存储”：这一章介绍了cc.sys.localStorage的用法，以及JSON和plist文件的读取。最后，完成了解锁《保卫萝卜2》“天天向上”玩法的开发。
第9章“粒子系统”：这一章介绍了cc.ParticleSystem类，并将cc.ParticleSystem类的属性划分为粒子配置、发射器类型、重力配置、径向配置、发射器位置、粒子纹理、粒子颜色以及混合函数等，还介绍了ParticleDesigner和ParticleEditor粒子编辑器。
第10章“UI控件”：这一章介绍了Cocos2d-JS中的UI控件，例如文本、编辑框、按钮、复选框、滑块、加载条、布局、滚动视图、列表视图以及分页视图等。
第11章“性能优化”：这一章介绍了Cocos2d-JS游戏开发的一些优化技巧，例如对象缓冲池cc.pool的使用，OpenGL/WebGL下可以使用批处理SpriteBatchNode进行优化，在Canvas中可以将不活跃的Layer烘培起来。在资源管理方面，介绍了SpriteSheet，SpriteSheet可以通过TexturePacker工具制作，并在这一章的最后抛出了TinyPng在线图片压缩云应用。
第12章“游戏地图”：这一章介绍了Tiled Map编辑器的用法，还讲解了cc.TMXTiledMap、cc.TMXLayer以及cc.TMXObjectGroup类。
第三部分为高级篇，共4章，各章简述如下。
第13章“反射调用”：这一章介绍了如何在JavaScript中通过反射机制调用Objective-C和Java代码。
第14章“Chipmunk物理引擎”：这一章介绍了Chipmunk物理引擎中的基本物理概念，以及刚体、形状、约束、空间、碰撞检测、查询等。最后，做了一个拖动刚体的效果。
第15章“网络编程”：这一章介绍了OSI参考模型和TCP/IP参考模型，以及基于HTTP、WebSocket、SocketIO的通信。最后，完成了一个基于Node.js + Scoket.IO的在线聊天系统。
第16章“JavaScript Binding”：这一章介绍了Cocos引擎中的脚本绑定框架以及自动绑定，并深入探究绑定技术，一步一步演示如何绑定自己的C++类。最后，实现了SQLite3的绑定。
第四部分为实战篇，共1章，简述如下。
第17章“塔防游戏——保卫萝卜2”：这一章介绍了《保卫萝卜2》各个模块的开发，例如关卡设定、出怪逻辑、炮塔生成、路线生成、碰撞检测、游戏对象管理等。读者对象
本书适合有一定JavaScript语法基础的读者。因为本书并没有讲解JavaScript语法，如果读者不熟悉JavaScript语法，那么我建议你先去阅读《JavaScript高级程序设计》或者《JavaScript面向对象编程指南》等书。
除此之外，再无其他要求，你可以是完全不懂Cocos引擎的初学者，也可以是有Cocos引擎其他分支（例如Cocos2d-x和Cocos2d-Lua）开发经验的开发者，甚至是有一定Cocos2d-JS游戏开发经验的开发者。关于源代码
书中所有的源代码以及《保卫萝卜2》的实战代码均可在图灵社区本书主页（http://www.ituring.com.cn/book/1783）或我的Github仓库https://github.com/lingjianfeng中下载。本书说明● 为了方便读者，本书每一章的参考资源、相关工具的下载地
址等都放在随书源码中，你可以直接打开源码，将参考资源或下
载地址复制到浏览器中直接打开，而不用自己手动输入。● 为了使读者能更快、更好地阅读代码，本书中的所有代码保
持了代码高亮样式，并且采用表格的方式，明确标注出行号。其
中，JavaScript代码高亮样式与WebStorm保持一致，C++代码与
Xcode保持一致，Java代码和Eclipse保持一致。虽然本书不是彩
色印刷，但是在黑白印刷上，代码依旧可以通过粗细来达到“高
亮”效果，但愿我这样的坚持能给读者带来更好的体验。● 为了突出重点，不必要显示的代码我用//……替代，表示代
码省略。● 为了节省版面空间，书中部分图片经过Photoshop处理，大
部分裁剪掉了一些没用的空白区域等，这并不会影响读者理解相
关知识点。● 为了提高代码注释的可阅读性，我在代码注释中保留了我个
人的注释风格，采用中括号括起关键词，起到“高亮”效果，例
如：// 加载[主页面]。● 本书所有软件默认采用Mac版。● 本书基于Cocos2d-JS 3.9版本编写。● 随书项目《保卫萝卜2》中的所有素材为飞鱼国际科技有限
公司授权于本书作者，读者可以使用这些素材来学习Cocos2d-
JS引擎，但是不可将其用在商业途径上，若有违反，飞鱼国际
科技有限公司将追究相关人员的法律责任。勘误信息
我们尽最大的努力确保正文和代码没有错误，但是人无完人，金无足赤，错误在所难免。如果读者发现书中的任何错误，例如错别字或者是代码片段无法运行等问题，我们都希望你能及时给我们反馈，你提交的勘误不仅能够让其他读者受益，也能帮助我们进一步提高图书的质量。
读者可以在图灵社区本书主页（http://www.ituring.com.cn/book/1783）的“勘误”页面提交勘误，编辑将会第一时间处理。此外，你还可以给我发送邮件，我的邮箱是183720950@qq.com，邮件主题请注明“图书勘误”，我将在收到邮件后的第一时间回复。或者，也可以在新浪微博中联系我，我的微博：@凌建风。
另外，也可以加Cocos2d-JS技术交流群（群号：186828918），与其他读者一起交流。致谢
2014年6月22日，我从福建师范大学信息技术学院毕业后，便选择了Cocos游戏开发。作为游戏行业的新人，我很感谢在这一年多来一直帮助我、陪伴我的同事们，从他们身上我学到了很多知识，也成长了许多。另外，特别感谢我现在任职的飞鱼科技国际有限公司将《保卫萝卜》系列素材授权于我，也感谢触控科技将封面素材授权于我。
感谢Cocos2d-x引擎核心开发者屈光辉（子龙山人）对本书的写作风格给予的指导，并提供技术支持和部分章节技术校稿。
感谢Cocos2d-x引擎物理引擎集成作者余波提供技术支持并对部分章节进行技术校稿。另外，本书第14章大部分为余波编写，而我更多的则是负责语言组织、代码实现等工作。
感谢我的好友曾彬思对本书的写作提供了帮助以及校稿等工作。
感谢我的好友邱雷对本书的写作提供了帮助以及给予我精神上的鼓励。
感谢图灵的编辑王军花对本书进行文字校稿，并给予了我很多建议和写作技巧，而且在我一次一次拖稿的情况下，不但没有催稿，还一直鼓励我。
感谢我的室友们对我的理解和包容，因为我常常写到凌晨一两点，又或者是早上6点多爬起来写书，这无疑对他们的作息造成了一定的影响。
最后，感谢其他朋友们对我的支持和帮助，这些人中，有的给书提供技术支持，有的给予我精神上的鼓励，让我完成了本书，他们是（按照拼音排序）：
陈龙（cnsoft）、陈志敏、傅思杰（偶尔e网事）、郭玉海、黄靖权、黄毅霖、江龙（龙辰忆梦）、林文海、邱磊（NetFly）、任珊（renshan）、唐梓文、徐斌杰、叶湘楠、尤泽钦、郑为满、钟东、朱圣樑、卓文理。2016年1月于厦门第一部分基础篇第1章Cocos2d-JS介绍
当今世界，互联网风起云涌。移动设备的普及，更是让手游行业发展迅速，从《神庙逃亡》到Flappy Bird，再到《纪念碑谷》等，这些休闲游戏曾一时间风靡全球，可谓是赚得金箔满盆。而由《刀塔传奇》《全民奇迹MU》以及《梦幻西游手游》等组成的重度游戏明星队伍更是无比的辉煌。2014年，《刀塔传奇》创下了月流水2.8亿的传奇。2015年，《全民奇迹MU》也以首月2.42亿的流水造就了奇迹；同年，《梦幻西游手游》更是以近9亿的月流水打造出了其自身在手游行业的梦幻王国。可见，手游行业正是如火如荼。
抛开手游的市场情况不说，对于游戏开发者而言，选择一款优秀的游戏引擎是开发优质游戏最根本的前提。值得一提的是，前面提到的《刀塔传奇》和《梦幻西游手游》这两款2D明星产品皆是采用Cocos游戏引擎打造而成的。
近几年，各大游戏引擎可谓是白家争鸣，有的在历史长河中销声匿迹，有的历经万般考验仍屹立不倒。现如今，Cocos和Unity 3D分别在2D和3D引擎中脱颖而出，各领风骚，独具一格。而本书的主角Cocos2d-JS正是目前Cocos引擎全力推广的一个重要分支。
本章内容：● Cocos引擎家族● Cocos2d-JS介绍● 引擎目录结构1.1 Cocos2d引擎家族
正所谓“吃水不忘挖井人”。记得去年我大学毕业后在宝宝巴士（福建）网络科技有限公司工作时，公司技术总监指派给我一个任务，让我研究一下LiquidFun流体引擎，并用LiquidFun做出公司一款产品的Demo。在此过程中，我遇到一个比较棘手的问题，短时间内无法解决，无奈之下找到官方人员帮忙解答。而Cocos2d-x和LiquidFun整合是由Ricardo Quesada（Cocos2d之父，后面将介绍）完成的，所以官方人员便给了我Ricardo的联系方式，让我求助于他。可当初天真无邪的我问了一句，Ricardo是谁？这看上去似乎是一件很小的事情，但是却一直藏在我心里深处。虽然我在使用Cocos引擎，却不知道Ricardo是谁。因此，我认为在学习Cocos2d-JS引擎之前，非常有必要介绍一下Cocos引擎的先祖以及Cocos引擎的家族史。1.1.1 Cocos2d的诞生
2008年2月，在阿根廷Córdoba市附近一个名为Los Cocos的地方，Ricardo Quesada和他的几个朋友使用Python语言开发出了一款2D游戏引擎，并且根据这个游戏引擎的诞生地，将其取名为Los Cocos。一个月之后，他们便发布了引擎的release 0.1版本，并正式将该引擎更名为Cocos2d。
不久之后，苹果公司正式成立App Store，并且发布了SDK，大量的开发人员被App Store所吸引，各种各样的应用和游戏上了iOS平台。Ricardo Quesada团队把握住了时机，在2008年6月宣布将接入iPhone平台，并于当月就发布了以Objective-C为基础的Cocos2D for iPhone 0.1版本，此版本延续了Python版的框架和设计思路。随着iOS用户越来越多，iPhone游戏也成为了用户最爱的应用。
到2010年9月，Cocos2D引擎已经在游戏开发者中流行。许多开发者第一次接触Cocos2d for iPhone引擎，此版本是Cocos2D引擎当中的明星产品。由于Cocos2d for iPhone非常成熟且功能很完善，它在开发者中得到广泛传播并使用。随后StickWars成为第一款在美国区付费榜夺得冠军的Cocos2D游戏，这宣告了Cocos2D引擎时代的到来。同时，英国的设计大师Michael Heald为Cocos2D设计了新的logo，如图1-1所示（此前Cocos2D的logo是一个奔跑的椰子），图1-2和图1-3分别为Cocos2d-x早期logo和Cocos2d-x引擎现在的logo。图1-1 Cocos2D logo图1-2 Cocos2d-x早期logo图1-3 Cocos2d-x现在logo
也正是在那个时候，Cocos2D社区的开发者开发出了最早的周边工具——Zwoptex和Particle Designer。关于Particle Designer的更多信息，可参见第9章。说明 Zwoptex为早期的精灵表制作工具，现在更常用的精灵表制作工具为TexturePacker，详情可参见第11章。1.1.2 Cocos引擎家族大事记
2010年11月，来自中国厦门的开发者王哲以及他的团队基于Cocos2D制作出了Cocos2d-x引擎。Cocos2d-x引擎同样采用MIT开源协议，“x”意味着Cross，表示交叉的意思，使用Cocos2d-x开发出来的游戏被允许编译和运行在多平台上。开发者只需使用C++语言编写一次游戏逻辑，便可将游戏运行在iOS、Android、Mac OS X以及Windows等平台上。毫无疑问，Cocos2d-x开启了Cocos2D引擎跨平台开发的时代。
同一时期，美国人采用C#，基于Mono改写成CocosNet，新西兰人Ryan Williams用JavaScript改写了HTML5 Canvas的版本等，社区也出现了Texture Packer、Glyph Designer等丰富的工具和编辑器，Cocos2D家族进入了鼎盛时期。
2011年，Cocos2D家族有了新的发展，集成式的编辑器开始涌现，其中包括CocoShop、CocosBuilder、Sprite Helper、Level Helper等。
2011年5月，Zynga公司雇佣了Cocos2d-iPhone的两位核心作者Ricardo Quesada和Rolando Abarca，两位程序员分别从阿根廷和智利迁移到Zynga的旧金山总部工作。
2011年年底，谷歌赞助Cocos2d-x团队将Cocos2d-x移植到Cocos2d-HTML5版本，实现Web游戏类型的覆盖，特别是移动Web游戏的开发。
2012年1月，林顺负责维护的Cocos2d-HTML5项目正式启动，并于同年8月发布了第一个稳定版本v2.0。因为它是基于Cocos2d-x 2.0版本移植的，所以Cocos2d-HTML5第一版发布的就是2.0版本，并没有发布v1.0的相关版本。与此同时，Rolando Abarca也主导并开发了一套基于Cocos2d-x和SpiderMonkey的JavaScript自动绑定技术（详见第16章）。
2012年12月4日，Cocos2d-x团队发布了第一个Cocos2d-HTML5联合版本，从那时起，Cocos2d-HTML5的游戏便可同步发布到Web和原生游戏平台上。
2013年11月，Cocos2d之父Ricardo Quesada加入Cocos2d-x团队，并出任Cocos2d-x团队的首席架构师。
2014年3月，为了提供更加一致的开发体验，真正实现跨全平台，Cocos2d-x团队将Cocos2d-x JSB模块从Cocos2d-x中独立出来，并对Cocos2d-HTML5进行整合升级，将Cocos2d-HTML5改名为Cocos2d-JS，然后发布了Cocos2d-JS引擎。
2014年9月12日，Cocos2d-x团队发布了Cocos2d-JS的Cocos2d-JS v3.0 final稳定版本，Cocos2d-JS应用而生。
2015年7月21日，Cocos2d-x团队发布了Cocos2d-x 3.7版本，为了统一Cocos2d-x引擎，Cocos2d-JS被并入Cocos2d-x引擎中。1.2 Cocos2d-JS介绍
大千世界，奥妙无穷，我们穷一生仍不能学习其皮毛。因此，学习任何东西之前，都应该明确所学之物为何物，为何而学，学习Cocos2d-JS游戏引擎自然也不例外。官方对Cocos2d-JS的介绍是：Cocos2d-JS 是跨全平台的游戏引擎，采用原生JavaScript语言，可发布到Web平台、iOS、Android、Windows Phone 8、Mac、Windows等平台。该引擎基于MIT开源协议，完全开源、免费，易学易用，拥有活跃的社区支持。Cocos2d-JS让2D的游戏编程门槛更低，使用更加容易和高效。和其他类似游戏框架相比，它定义了更加清晰的2D游戏编程的基本组件，采用易学易用的API设计，并采用全球领先、具备原生性能的脚本绑定解决方案实现游戏的跨原生平台发布，开发效率更高，使用上最简单。
那么，Cocos2d-JS和Coco2d-x是什么关系呢？实际上，Cocos2d-JS是Cocos2d-x的JavaScript版本。Cocos2d-JS的前身为Cocos2d-HTML5，在3.0版本之后，官方对Web引擎Cocos2d-HTML5和Native引擎Cocos2d-x进行整合，并为Web和各原生平台开发提供了一套统一的工作流，开发者只需要关注自己游戏的JavaScript业务逻辑代码，然后使用Cocos Console工具管理开发以及发布等流程。图1-4为Cocos2d-JS引擎的架构图。图1-4 Cocos2d-JS引擎的架构图
如图1-4所示，可将Cocos2d-JS引擎的结构分为4层。最底层为支持的平台，包括Web、iOS、Android、Mac OS X以及Windows等。
中间层为Cocos2d-HTML5和Cocos2d-x JSB（JavaScript Binding的缩写）这两个引擎。其中，Cocos2d-HTML5为一个采用JavaScript语言编写的独立引擎，采用Canvas或者WebGL渲染，并且完全兼容HTML5规范，使用Cocos2d-HTML5编写的游戏可以运行在浏览器上。
Cocos2d-x JSB则是一个介于Cocos2d-x原生代码和JavaScript代码之间的桥接层。Cocos2d-x JSB实现了JavaScript代码和Cocos2d-x引擎之间的相互调用，而这一实现得益于SpiderMonkey。SpiderMonkey是一个JavaScript虚拟机，采用C/C++开发，由Mozilla维护。SpiderMonkey虚拟机不仅可以被嵌入在浏览器上，也可被嵌入到任何C++程序中。在Cocos2d-x JSB中，开发者编写的JavaScript游戏业务逻辑代码就是SpiderMonkey负责解析和运行的。值得一提的是，Cocos2d-JS中嵌入的SpiderMonkey是被Cocos2d-x团队改造过的，从而支持了Cocos2d-x的类型、数据结构以及对象等。
综上所述，使用Cocos2d-JS开发出来的游戏不仅可以运行在浏览器上，还可以通过Cocos2d-x JSB的支持将游戏打包到原生平台上，例如iOS、Android以及Mac OS X等。
再上面一层为Cocos2d-JS API层，它保证了Cocos2d-HTML5和Cocos2d-x JSB的API高度一致，从而让开发者开发出来的游戏不用修改代码或者只修改少量代码，就可以打包为原生平台游戏，从而实现一次编码、全平台运行的畅爽体验。最上层即为JavaScript编写的Cocos2d-JS游戏逻辑代码。1.3 引擎目录结构
从Cocos2d-x 3.7版本之后，官方将Cocos2d-JS引擎整合到Cocos2d-x中。Cocos2d-x引擎可在Cocos官网下载，其下载地址为：http://www.cocos.com/download/。当然，亦可从Cocos2d-x的GitHub仓库拉取，仓库地址：https://github.com/cocos2d/cocos2d-x。下载完成后，引擎包的主要内容如表1-1所示。表1-1 引擎包的主要内容
目录或文件名内容简介AUTHOR作者目录，包含所有给Cocos2d-x引擎贡献代码的开发者Sbuild包含测试例子、cocos2d_lib的Xcode以及Visual Studio工程CHANGE所有历史版本详细改动列表LOGCMakeListcmake配置文件s.txtcocosCocos2d-x引擎源代码CONTRIB贡献代码指南UTING.mddocs包含JavaScript代码风格规范、当前发布说明和当前版本升级指南downloaddeps.py-下载第三方库的脚本extensions第三方扩展external存放第三方库的文件夹licenses所有许可协议plugin插件README.针对cmake用法的说明文件cmakeREADME.Cocos2d-x引擎简介mdsetup.pyCocos Console的安装脚本templatesCocos Console创建项目时使用的模板tests各分支的测试项目tools工具文件夹—bindingsgenerator-脚本绑定工具—cocos2dconsole-Cocos Console工具—tojsJSB自动绑定配置文件以及生成脚本—toluaLua绑定配置文件以及生成脚本webCocos2d-JS游戏引擎1.4 小结
通过本章的学习，我们知道了Cocos引擎的家族史，了解了Ricardo Quesada为Cocos2D之父，王哲和林顺分别为Cocos2d-x和Cocos2d-HTML5引擎的创始人。除此之外，我们还了解了Cocos2d-x和Cocos2d-JS之间的关系，以及Cocos2d-JS的引擎架构。最后，我们还介绍了Cocos2d-x引擎包的目录结构。1.5 参考资源
本章的参考资源如下。● 维基百科Cocos2d：https://en.wikipedia.org/wiki/Cocos2d。● Cocos官网：http://www.cocos.com/。● LiquidFun流体引擎：http://google.github.io/liquidfun/。● 傅思杰（偶尔e网事）整理的Cocos资料大全：https://
github.com/fusijie/Cocos-Resoure。第2章Hello World
古语有云：“工欲善其事，必先利其器。”唯有配备好了装备，方可上阵杀敌。学习Cocos2d-JS游戏引擎，亦是如此。本章将讲解Cocos2d-JS在各平台下的环境搭建、Hello World解析以及Cocos DevTools工具等。
本章内容：● Cocos Console● 创建、编译和运行工程● HelloWorld的目录结构● 项目在Web和Native上的启动流程● 项目在各平台下的打包以及部署● js-tests测试工程● 为《保卫萝卜2》项目做准备● 实例——利用Cocos DevTools学习Cocos2d-JS2.1 Cocos Console
Cocos Console是Cocos2d-x引擎下的一个命令行工具，它用来管理Cocos工程，其中包含创建、运行、编译、调试以及打包项目等。
Cocos Console位于引擎包cocos2d-x/tools/cocos2d-console目录下，通过运行引擎包目录下的setup.py脚本即可安装。在安装的过程中，Cocos Console需要开发者提供Android NDK、Android SDK和Apache ANT的文件路径。另外，Cocos Console是一个采用Python语言编写的跨平台脚本工具，所以在安装Cocos Console之前，需要先安装好Python。2.1.1 安装Python
在Mac OS X中，操作系统本身自带了Python，而在Windows操作系统中，Python则需要我们自行下载并安装，其下载地址为：https://www.python.org/downloads/index.html。若你的Mac OS X系统中没有Python，也可通过此地址下载安装。下载至Mac OS X和Windows上的安装包分别是一个.pkg或者.msi文件，例如我下载的是python-2.7.10-macosx10.6.pkg和python-2.7.10.msi文件，如图2-1所示。图2-1 Python在Mac OS X（左）和Windows上的安装包（右）
1. 在Mac OS X 上安装Python
在Mac OS X上，Python的安装较为简单，双击打开python-2.7.10-macosx10.6.pkg文件，然后一直点击“继续”按钮，即可完成安装。
2. 在Windows上安装Python
在Windows操作系统中，Python的安装步骤可分如下两步。
(1) Python安装：双击python-2.7.10.msi文件将其打开，将Python安装在指定磁盘路径下，这里我将Python安装到C:\Python27。
(2) 环境变量配置：当Python安装成功后，还需要配置系统环境变量，具体步骤如下。
① 右击“我的电脑”，从打开的快捷菜单中选择“属性”菜单。
② 此时会打开“属性”对话框，从中选择“高级系统设置”选项卡。
③ 点击“环境变量(N)...”按钮，打开“环境变量”对话框。
④ 从“系统变量(S)”列表框中选择“ path”，然后点击 “编辑(I)...” 按钮。
⑤ 在变量值的最后输入Python的安装路径，并在路径前面加上一个分号，例如;C:\Python27，这是因为每个环境变量之间需要用分号隔开。
⑥ 点击“确定”按钮关闭窗口。至此，Windows上的Python安装成功。
3. Python验证
在Mac OS X下，可以打开终端（Windows中为命令行程序），输入python --version。注意，version之前为两个杠（-），若出现如图2-2或图2-3所示的界面，便说明Python安装成功。图2-2 Mac OS X下Python验证图2-3 Windows下Python验证说明 本书撰写时，setup.py脚本采用Python 2.7编写，并不支持Python 3，所以本书在Mac OS X上采用Python 2.7.10的64位版本。在Windows上，选用Python 2.7.10的32位版本。2.1.2 Android环境配置
当安装好Python之后，你便可以开始准备Android相关的软件包了。当然，若你不需要支持Android，除了Apache Ant之外，其余步骤可以跳过，不必配置。Android所需的相关软件包如下所示。● Apache Ant：将软件编译、测试、部署等步骤联系在一起加
以自动化的一个工具，大多用于Java环境中的软件开发。下载地
址：http://ant.apache.org/bindownload.cgi。● Android SDK：即Software Development Kit的简称，中文译
为软件开发工具包。在Android中，它为开发者提供了库文件以
及其他开发所用到的工具。下载地址：http://
developer.android.com/tools/sdk/ndk/index.html。● Android NDK：即Native Development Kit的简称，它是一系
列工具的集合，可以帮助开发者快速开发C/C++的动态库。另外，
它还能自动将.so文件和Java应用一起打包成.apk。下载地址：
https://developer.android.com/sdk/index.html?hl=sk。● JDK：Java的开发工具包，包括Java运行环境、Java工具和
Java基础类库。下载地址：https://www.oracle.com/downloads/
index.html 。
当下载好以上所需要的依赖后，便可以正式安装Cocos Console了。此时打开终端（Windows下为命令行程序），进入Cocos2d-x引擎目录下，然后再运行setup.py脚本，相关命令如下：
1 cd /Users/Jeff/Documents/Cocos/cocos2d-x2 python setup.py
其中，Jeff为笔者的用户名。在读者的电脑上，以读者的用户名为准。然后根据提示，将Cocos Console所需的文件路径拖曳进去，最后根据末尾行提示进行对应的操作。例如，在Mac OS X上应该再运行如下命令：
1 source /Users/Jeff/.bash_profile
而在Windows操作系统中，则重启命令行程序即可。但是实际上，在Mac OS X上，也需要重新启动终端程序。另外，值得注意的是，Apache Ant路径需要指定到bin文件夹下。Mac OS X和Windows操作系统上Cocos Console的安装过程分别如图2-4和图2-5所示。图2-4 Mac OS X下Cocos Console的安装过程注意 在Mac OS X上将文件夹拖曳进去时，路径的末尾会有一个空格，应将空格删除。图2-5 Windows下Cocos Console的安装过程
此时，Cocos Console安装成功。若要卸载Cocos Console，则Mac OS X用户可删除/Users/用户名/下.bash_profile文件中对应的值，而Windows用户只需删除对应的系统环境变量值即可。2.2 创建、编译和运行工程
当Cocos Console安装完毕后，便可通过Cocos Console创建Cocos2d-JS工程，具体有如下几种方式：
1 // 创建一个名为projectName，并同时包含Cocos2d-HTML5和Cocos2d-x JSB的项目2 cocos new projectName -l js3 // 创建一个名为projectName，且仅含Cocos2d-HTML5的项目， --no-native表示不需要支持Native平台（iOS、Android、Mac、Windows等），仅支持浏览器即可4 cocos new projectName -l js --no-native5 // 在桌面上创建一个名为projectName的项目6 cocos new projectName -l js -d ./Desktop7 // 在桌面上创建一个名为projectName的项目，并设置为竖屏8 cocos new projectName -l js -d ./Desktop --portrait
此外，亦可通过如下命令在桌面上创建一个名为HelloWorld的工程：
1 cd ./Desktop2 cocos new HelloWorld -l js
其中，-l表示采用的语言，可选值为cpp、lua以及js。运行命令之后，便可在桌面上看到HelloWorld文件夹。图2-6为HelloWorld工程的创建过程。图2-6 Cocos Console创建工程的过程图
当项目创建完毕后，可以通过下列命令将项目运行在浏览器中，效果如图2-7所示：
1 cd ./Desktop/HelloWorld2 cocos run -p web图2-7 运行在浏览器上的HelloWorld工程
除创建命令外，Cocos Console还为工程提供了运行、编译等命令，具体如下：
1 // 运行在指定的平台上2 cocos run -p web|ios|android|mac|win323 // 将项目工程打包到指定的平台上4 cocos compile -p web|ios|android|mac|win32 -m release
值得说明的是，若发布在Web平台上，可添加--advanced参数，它表示使用Closure编译器的高级模式编译JS文件，这将获得更高的压缩率，但是有出现bug的风险，请读者自行斟酌使用。若出现bug，可参考https://developers.google.com/closure/compiler/docs/api-tutorial3解决。另外，Cocos Console提供了相关的help指令，方便开发者查询Cocos Console相关的指令。下面举几个help指令的例子，其中help可用字母h替代：
1 cocos new --help2 cocos run --help3 cocos compile --help2.3 HelloWorld的目录结构
此时，虽然基于Cocos2d-JS的HelloWorld工程创建完毕，并且也成功地运行在浏览器上，但是读者对HelloWorld工程可能还比较陌生，并不知道每个文件夹和文件是做什么的，也不知道项目是如何启动的。接下来，我将带大家走进Cocos2d-JS的HelloWorld世界。
打开刚刚创建好的HelloWorld工程，可以看到其目录结构如图2-8所示。图2-8 HelloWorld目录结构
图2-8中有4个一级文件夹目录，一个.html文件、一个.json文件以及多个.js脚本等。表2-1为目录结构的详细介绍。表2-1 目录结构
目录或文件名内容简介CMakeListCocos Console编译时所依赖的文件s.txtframework包含Web引擎和Native引擎s—Cocos2d-HTML5游戏引擎cocos2d-html5—Cocos2d-x游戏引擎cocos2d-x—runtime-各平台的项目工程文件，包含iOS、Mac OS X、Android以及srcWindows等—index.Web工程的主页面，其主要内容和职责如下。html• 包含用于显示游戏场景的canvas元素。• 引入用于引擎初始化和加载的引擎脚本：CCBoot.js。• 引入游戏启动的入口脚本：main.js。• 包含一些适配移动端浏览器页面的meta元素—main.js游戏入口文件，其中包含游戏初始化代码以及启动代码—热更新配置文件manifest.webapp—project.工程配置文件jsonpublish该目录初始状态下不存在，当工程以发布模式打包后，会创建该文件夹并保存对应平台的发布包Runtime该目录初始状态下不存在，用来存储调试模式打包的工程执行文件res项目资源文件夹，用来存储所有图片、音频、字体以及动画等资源—默认资源图片HelloWorld.png—loading.浏览器上页面启动的loading效果jssrc项目脚本文件夹，用来存储游戏的所有JavaScript代码—app.js项目代码—资源的全局变量定义resource.js
其中，project.json为项目配置文件，其内容如下所示：
1 {2 "project_type": "javascript",3 "debugMode" : 1,4 "showFPS" : true,5 "frameRate" : 60, "noCache" : false,6 "id" : "gameCanvas",7 "renderMode" : 0,8 "engineDir":"frameworks/cocos2d-html5",9 "modules" : ["cocos2d"],10 "jsList" : [11 "src/resource.js",12 "src/app.js"13 ]14 }
这些属性影响着整个Cocos2d-JS项目，一些属性的背后更是深藏功与名。各属性的意义如下。● project_type：项目类型。● debugMode：表示程序的调试级别，默认值是1，可选值为
0到6。● 0：不显示任何调试信息。● 1：cc.error、cc.assert、cc.warn、 cc.log在调试终端中打印信息，这是默认值。● 2：cc.error、cc.assert、cc.warn在调试终端中打印信息。● 3：cc.error、cc.assert在调试终端中打印信息。● 4：cc.error、cc.assert、cc.warn、cc.log在canvas上显示信息，这是Cocos2dHTML5引擎独有的功能。这在微信开发上是一个非常有用的功能。● 5：cc.error、cc.assert、cc.warn在canvas上显示信息，这是Cocos2d-HTML5引擎独有的功能。● 6：cc.error、cc.assert在canvas上显示信息，这是Cocos2d-HTML5引擎独有的功能。● showFPS：若其值为true，则游戏窗口左下角会显示绘制函
数调用次数、渲染时间以及帧率。默认取值为true，项目打包上
线时，应将其设置为false。● frameRate：设置期望帧率。游戏中的实际帧率会取决于游
戏每帧消耗时间和运行平台等条件，期望帧率会保证游戏运行帧
率不会超过期望帧率，并尽力运行在期望帧率上。● noCache：设置是否让浏览器缓存html页面。● id：Web引擎页面中canvas元素的id，仅服务于Cocos2d-
HTML5引擎。● renderMode：引擎绘制模式，仅服务于Cocos2d-HTML5引
擎，在Native上无效，其值的可取范围为0~2，表示的意义如
下。● 0：由引擎自动选择绘制模式，遵循“择优选择”的理念，即若支持WebGL，则优先考虑使用WebGL绘制，否则采用canvas绘制。● 1：强制使用canvas绘制模式。● 2：强制使用WebGL绘制模式，但是实际上WebGL仍然可能会在一些移动浏览器上被忽略而自动使用canvas绘制模式。● engineDir：Cocos2d-HTML5引擎路径，仅在debug模式下有
效，保持默认值即可。如果采用Cocos2d-JS Lite版开发游戏，则
此字段可以忽略。● modules：模块配置。可将游戏中需要引入的模块添加到此
数组中，例如游戏中需要Chipmunk物理引擎支持，则应该在此
数组中添加chipmunk字符串。此配置仅服务于Cocos2d-HTML5
引擎，当Cocos Console在发布模式下编译生成项目时，会根据
modules中所包含的模块进行打包。所以，modules应当保持精
简，按需取值，避免打出的包中引入了没有用到的模块，增大了
游戏脚本的大小。关于存在哪些模块以及每个模块的定义，可以
参考frameworks/cocos2d-html5/modulesConfig.json文件。● jsList：开发者的JS脚本游戏逻辑代码列表，游戏中所依赖
的脚本都应该放入这个列表中。此外，应当注意这些JS文件的
相互依赖关系以及加入的先后顺序。2.4 项目在Web和Native上的启动流程
Cocos2d-JS是一个跨浏览器和原生平台的游戏引擎，在对应平台上的启动流程自然也有所不同。
1. Web
在Web上，index.html生成canvas，并加载CCBoot.js文件，然后CCBoot.js读取project.json文件，从而预加载resource.js以及jsList中所有的.js文件。到此，游戏中所有的代码文件被加载完毕。随后，index.html又引入main.js文件，最终main.js启动了游戏。整个过程的代码如下，启动流程图如图2-9所示：
1
2 3 4 5 图2-9 Cocos2d-JS游戏在浏览器上的启动流程2. Native
在Native中，Cocos2d-JS工程的启动流程相对简单一些。打开HelloWorld/frameworks/runtime-src/Classes/AppDelegate.cpp文件，可以在AppDelegate类的applicationDidFinishLaunching函数中看到如下代码：
1 bool AppDelegate::applicationDidFinishLaunching(){2 // 导演初始化3 auto director = Director::getInstance();4 auto glview = director->getOpenGLView();5 if(!glview) {6 #if(CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)7 glview = cocos2d::GLViewImpl::create("HelloWorld");8 #else9 glview = cocos2d::GLViewImpl::createWithRect("HelloWorld", Rect(0,0,900,640));10 #endif11 director->setOpenGLView(glview);12 }13 director->setAnimationInterval(1.0 / 60); // 帧率设置14 // 获取脚本引擎（SpiderMonkey）单例对象15 ScriptingCore* sc = ScriptingCore::getInstance();16 sc->addRegisterCallback(register_all_cocos2dx);17 sc->addRegisterCallback(register_cocos2dx_js_core);18 sc->addRegisterCallback(jsb_register_system);19 // ......20 sc->start();21 sc->runScript("script/jsb_boot.js"); // 运行jsb_boot.js脚本22 // ......23 ScriptEngineProtocol *engine = ScriptingCore::getInstance();24 ScriptEngineManager::getInstance()->setScriptEngine(engine);25 ScriptingCore::getInstance()->runScript("main.js");26 return true;27 }
试读结束[说明：试读内容隐藏了图片]