第 1 章 Cocos2d-JS介绍

第 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 引擎包的主要内容

目录或文件名

内容简介

AUTHORS

作者目录,包含所有给Cocos2d-x引擎贡献代码的开发者

build

包含测试例子、cocos2d_lib的Xcode以及Visual Studio工程

CHANGELOG

所有历史版本详细改动列表

CMakeLists.txt

cmake配置文件

cocos

Cocos2d-x引擎源代码

CONTRIBUTING.md

贡献代码指南

docs

包含JavaScript代码风格规范、当前发布说明和当前版本升级指南

download

deps.py-下载第三方库的脚本

extensions

第三方扩展

external

存放第三方库的文件夹

licenses

所有许可协议

plugin

插件

README.cmake

针对cmake用法的说明文件

README.md

Cocos2d-x引擎简介

setup.py

Cocos Console的安装脚本

templates

Cocos Console创建项目时使用的模板

tests

各分支的测试项目

tools

工具文件夹

—bindings

generator-脚本绑定工具

—cocos2d

console-Cocos Console工具

—tojs

JSB自动绑定配置文件以及生成脚本

—tolua

Lua绑定配置文件以及生成脚本

web

Cocos2d-JS游戏引擎

1.4 小结

通过本章的学习,我们知道了Cocos引擎的家族史,了解了Ricardo Quesada为Cocos2D之父,王哲和林顺分别为Cocos2d-x和Cocos2d-HTML5引擎的创始人。除此之外,我们还了解了Cocos2d-x和Cocos2d-JS之间的关系,以及Cocos2d-JS的引擎架构。最后,我们还介绍了Cocos2d-x引擎包的目录结构。

1.5 参考资源

本章的参考资源如下。

目录

  • 献词
  • 序一
  • 序二
  • 序三
  • 前言
  • 第一部分 基础篇
  • 第 1 章 Cocos2d-JS介绍
  • 第 2 章 Hello World
  • 第 3 章 核心框架
  • 第 4 章 动作模块
  • 第 5 章 事件机制
  • 第 6 章 音频处理
  • 第 7 章 屏幕适配
  • 第二部分 进阶篇
  • 第 8 章 数据存储
  • 第 9 章 粒子系统
  • 第 10 章 UI控件
  • 第 11 章 性能优化
  • 第 12 章 游戏地图
  • 第三部分 高级篇
  • 第 13 章 反射调用
  • 第 14 章 Chipmunk物理引擎
  • 第 15 章 网络编程
  • 第 16 章 JavaScript Binding
  • 第四部分 实战篇
  • 第 17 章 《保卫萝卜2》实战