第2章搭建跨平台的开发环境_Cocos Creator游戏开发实战-QQ阅读男生武侠网

书名：Cocos Creator游戏开发实战
作者名：满硕泉
本章字数：5292字
更新时间：2023-07-19 18:13:34

第2章搭建跨平台的开发环境

工欲善其事，必先利其器。我们学习Cocos Creator的旅程就从搭建环境开始。

作为一款跨平台手机游戏引擎，Cocos Creator保留着Cocos系列产品一脉相承的传统，既跨平台的特性，Cocos Creator可以运行在macOS X和Windows系统上。这有利于工作流的建立，因为在日常开发中，工程师一般使用macOS X系统，而美术和策划人员一般使用Windows系统，所以跨平台对于一款编辑器来说十分重要，这点相较于Cocos之前的编辑器Cocos Studio和CocosBuilder来说，是很大的进步，因为早期的Cocos Studio只支持Windows系统，这对想使用这款编辑器的工程师们造成了很大困扰，而更早的CocosBuilder只支持macOS X更是让策划人员叫苦不迭。

之前使用Cocos2D-X时，开发流程一般是这样的：在UI编辑器中编辑场景或UI，然后使用sublime编辑脚本语言，或者使用Xcode开发C++代码，调试时一般更多会使用Xcode，少部分使用Windows的工程师会使用Visual Studio进行开发调试，最后根据各个平台的规则编译打包，这个过程十分烦琐，大部分工程师不能将主要精力集中在内容创作上，Cocos Creator的出现改变了这个情况，它几乎可以完成游戏开发的全部工作，从资源的导入到打包发布，都可以在Cocos Creator当中完成，所以相比Cocos2D-X,Cocos Creator的环境搭建要容易许多，也就是说Cocos Creator更容易上手。

本章首先介绍安装引擎需要配置的环境，然后介绍不同平台下的编译运行环境，下面我们就开始搭建跨平台的开发环境。

2.1 Cocos Creator的安装配置

在早期的Cocos2D-X时代，“如何安装Cocos2D-X”经常被讨论，但却是一个伪命题，那时来看，提出这种问题应该是还不了解Cocos2D-X是什么。Cocos2D-X是一套程序框架，本身就是代码，本质上是不需要任何安装过程的，但是配置各个平台的运行环境却需要我们付出很多精力，其实这个过程才是很多人所谓的“安装”过程。直到3.0版本，Cocos2D-X提供了很多方便我们操作的python脚本，这些脚本简化了我们的操作，但是我们需要配置一些东西来确保脚本的运行，所以讨论“如何安装Cocos2D-X”才真正成为一个题目。到了Cocos Creator时代，安装变成了真正的运行安装文件，本节在讲解安装过程的同时，也会讲解这个过程实际为你做了些什么。

2.1.1 Cocos Creator的运行编译环境

由于Cocos Creator可以同时运行在Windows和macOS X环境下，因此它需要的运行环境如下：

1）macOS X 10.9或者以上；

2）Windows 7 64位或者以上。

需要注意的是，从Cocos Creator 1.3版本开始，Cocos Creator就不再支持32位的Windows操作系统了。

2.1.2 Cocos Creator安装过程

首先需要下载安装文件，所有Cocos系列产品都可以通过http://www.cocos.com/download下载，本书成书之时的最新版本为2.0。

在Windows系统下，Cocos Creator的安装文件是一个可执行文件，双击安装文件就可以开始安装了。在安装过程中需要选择安装路径，Cocos Creator设置的默认安装路径是“C:\CocosCreator”，你可以单击修改它。对于部分Windows操作系统和显卡型号，安装过程中可能会提示“This browser does not support WebGL”的报错信息，这是由于你的显卡或者系统的显卡驱动对WebGL渲染模式不支持造成的，你可以用命令行运行安装文件并加上“-disable-gpu”来禁用GPU加速功能来完成安装。

macOS X版本的Cocos Creator安装文件是DMG镜像文件，双击该文件，然后将图标拖入应用程序文件夹或者其他位置就可完成安装过程。首次安装时，系统可能会提示你应用程序来自于不受信任的开发者，此时前往系统偏好设置，并在安全设置中单击“仍要打开”就可以正常使用Cocos Creator安装镜像了。

在Windows和macOS X下完成安装后，双击图标就可以启动Cocos Creator了，我们可以按照习惯设置快速启动方式，在macOS X下通过Dock方式，在Windows下可以使用设置快捷方式的办法。

单击运行后，首先是选择语言，然后就需要进行开发者的登录，如图2-1所示。

图2-1 开发者登录界面

登录后就可以创建项目了，至此即完成了安装工作，如图2-2所示。

图2-2 启动界面

2.2 原生平台的基本介绍和项目导出

目前市面上最常用到的原生的移动平台包括Android平台和iOS平台，其中Android平台由谷歌公司开发，而iOS平台由苹果公司开发，两个平台成为移动端最常见的原生系统的原因不尽相同，Android由于其开源的特点被全世界范围内的手机制造公司广泛使用，而iOS则因为iPhone系列手机的大卖而逐渐流行，本节就来简单介绍两个原生平台和使用Cocos Creator导出两个平台运行项目的方法。

2.2.1 Android平台的基本介绍

Android意思是“机器人”，它是Google公司推出的开源手机操作系统，Android基于Linux操作系统，由操作系统、中间件、用户界面和应用软件组成，号称首个为移动终端打造的真正开放和完整的移动软件。

在Android最早发布时，Google公司官方将Java语言作为第三方应用的开发语言，但是也没有完全拒绝C语言的开发人员使用自己的语言进行开发。因为在Android发布初期，Google就表明其虚拟机支持JNI（Java Native Interface,Java本地调用），也就是第三方可以通过JNI调用自己的C动态库，但是最早Google并未为这种方式提供相应的工具。直到2009年6月，Google Android方面发布了NDK（Native Develop Kit，原生态本地开发包），它支持开发者使用C/C++语言开发Android程序。

Android NDK作为Android SDK的一个附加组件提供给开发者，开发者如果想用NDK的功能就必须同时安装SDK和NDK。NDK作为SDK的一个补充，增加了代码的重用性，提高了程序的运行效率，并且使C/C++程序员也可以加入到Android的开发中。本书成书之时NDK更新到android-ndk-r16b版本，由于iOS也支持C++，所以为了同时支持两个平台，Cocos2D-X选择C++作为主要的开发语言，Cocos Creator就是以Cocos2D-X为基础开发的，因此配置Cocos Creator的Android导出环境需要如下开发工具。

1）JDK:Java开发工具（Java Development Kit），下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html，下载时注意选择和你的操作系统匹配的版本。

2）Android Studio:Android Studio是一个Android集成开发工具，基于IntelliJ IDEA，用于Android程序的开发和调试。

3）Android SDK:Android开发工具，包括模拟器等工具。

4）Android NDK:Android原生态本地开发包，辅助SDK进行编译开发，支持C/C++。

5）Ant工具：是为了自动构建Android程序用的，Ant是一种基于Java的build工具。理论上来说，它有些类似于UNIX里C中的make，但没有make的缺陷。它的下载地址是http://ant.apache.org/bindownload.cgi，由于是基于Java的，它也是跨平台的，下载后解压到你需要的目录就可以了。

2.2.2 iOS平台的基本介绍

iOS操作系统是由苹果公司开发的手持设备操作系统，最早发布于2007年1月9日的Macworld大会上，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad以及Apple TV等苹果移动操作设备上。

iOS与macOS以Darwin为基础，因此同样属于类UNIX的商业操作系统。原本这个系统取名为iPhone OS,2010年6月7日WWDC大会上苹果公司宣布改名为iOS。截至2011年11月，iOS已经占据了全球智能手机系统市场份额的30%。

Xcode是苹果公司向开发人员提供的集成开发环境，用于开发macOS的应用程序。iOS SDK是iOS系统的开发工具，Xcode允许用户开发可在基于iOS的iPad、iPhone、iPod touch等设备上运行的应用程序，只要有macOS X Snow Leopard 10.6.2以上版本macOS操作系统，便可安装iOS SDK，可以使用iPhone仿真器进行调试或者使用真机进行调试。

在Cocos Creator上开发iOS的应用也要使用Xcode,Xcode的安装文件通过如下地址下载：https://developer.apple.com/technologies/tools/。下载并完成安装后，可以在Xcode中调试iOS项目，并进行打包等工作。

2.2.3 原生平台的导出

使用Cocos Creator进行Android开发需要优先配置Android的相关开发包。当我们在使用Cocos2D-X的时候，配置Android的环境是一个烦琐且复杂的过程，在使用Cocos Creator配置Android开发环境的时候，一方面会觉得这些操作似曾相识，另一方面会觉得这个配置过程要简单许多。其实，是Cocos Creator帮我们简化了这个过程，也就是说我们只要输入各个需要配置的工具的地址，Cocos Creator就会帮助我们配置环境变量。

运行Cocos Creator后进入偏好设置，单击原生开发环境，就可以配置Android的导出环境了，如图2-3所示。

图2-3 原生开发环境配置界面

对于Android的开发环境，推荐的方式是通过Android Studio进行配置。Android Studio可以通过Android Studio中文网站进行下载，安装后进入偏好设置可以下载SDK和NDK，下载后就可以把地址配置到导出设置当中，如图2-4所示。

图2-4 安卓环境配置

点击构建发布就可以导出到支持的平台，目前可以选择的原生平台包括Android、iOS、macOS X和Windows，其中macOS X和Windows只是在相应的操作系统中才出现，构建发布的界面如图2-5所示。

图2-5 构建发布

选择一个原生平台后，可以在包名输入框设置包名，通常是产品网站域名的倒序，如com.yourcompany.game。注意包名中只含有字母、数字和下划线，最后一部分只能以字母开头，如果使用的Xcode版本低于7.2，则包名不能含有下划线。

可以选择合并图集中的SpriteFrame将全部的SpriteFrame合并到同一个包中，以减少文件数量，但是需要根据项目情况而定，合并资源时，将所有SpriteFrame与被依赖的资源合并到同一个包中，这样对于网页游戏而言，可以减少请求数量。

可以在模板中选择引擎的模板：default，使用默认的Cocos2D-X源码版引擎；binary，使用编译好的库；link，不会拷贝源码到构建目录下。

选择发布平台，设置好参数后，单击构建就可以构建项目了，进度条到100%后等待控制台显示构建结束，构建结束后得到一个标准的Cocos2D-X工程，之后就可以在各个平台的IDE中打开构建的工程，完成调试和打包工作了。

2.2.4 调用原生平台的代码

Android平台主要支持的开发语言是Java，而iOS平台主要支持的开发语言是Objective-C，一般我们开发跨Android和iOS平台的项目，都是使用C++，就像Cocos2D-X做的那样，然而有些系统的功能只能使用原生语言进行开发，所以需要提供调用原生平台的接口。

Cocos Creator提供了调用原生平台的接口，首先来看Android平台的调用：

        var o  =  jsb.reflection.callStaticMethod(className,  methodName,  methodSignature,
            parameters...)

Android平台通过callStaticMethod方法传入类名、方法名、方法签名和参数就可以调用Java层的静态方法，获得方法返回值。其中Java类名的范例如下：

        org/cocos2dx/javascript/Test

需要注意的是要用斜线分割。方法签名用来标示具体调用的方法的返回值和参数类型，在Java有方法重载的情况下方法签名如下：

        (I)V

括号内表示参数类型，括号后面的符号表示返回值的类型，参数类型见表2-1。

表2-1 参数类型

参数类型可以是任意数量，可以支持JavaScript的number、bool和string类型。

需要注意的是，在Android应用中，Cocos引擎的渲染和逻辑都是在OpenGL线程中进行的，而Android本身的UI更新是在App的UI线程中进行的，所以在脚本中进行的任何刷新UI的操作，都需要在UI线程中进行。

使用实例如下所示：

        var result  =  jsb.reflection.callStaticMethod("org/cocos2dx/javascript/Test",
            "sum", "(II)I", 1, 1);

在iOS和macOS平台上，通过callStaticMethod方法传入类名、方法名和参数就可以调用Objective-C层的静态方法：

        var o = jsb.reflection.callStaticMethod(className, methodNmae, arg1, arg2, .....)

与Java的反射调用不同，Objective-C层的调用，提供的类名不需要完整的路径，另外，调用Objective-C层的静态方法时需要传入完整的方法名，特别是当某个方法带有参数的时候，需要将冒号也带上。

        callNativeUIWithTitle:andContent:

如果没有参数，那么就不需要加上冒号。使用的实例如下所示。

        var ret = jsb.reflection.callStaticMethod("NativeOcClass",
                                          "callNativeUIWithTitle:andContent:",
                                            "cocos2d-js",
                                            "Example");

2.3 HTML5基本介绍和项目导出

Cocos Creator支持Web平台的游戏项目的导出，Android平台和iOS的打包和导出都是需要配置环境的，而Web，也就是HTML5平台与之前介绍的两个原生平台稍有不同，Cocos Creator直接支持Web项目的导出，所以本节的题目和前两节相比稍有不同，本节主要介绍HTML5平台，并介绍它的导出方式。

2.3.1 HTML5简介

HTML5是继1999年HTML 4.01发布以后的一个新标准，包括一些新的标签，如：canvas和video等，这些可以替代之前的第三方插件的实现。因为这些新的功能，HTML5受到广泛关注，直到2008年HTML5的第一份正式草案正式公布。

目前HTML5仍然处于不断完善阶段，但是已经得到很多主流浏览器的支持，包括Firefox、IE 9、Chrome、Safari等。HTML5的标志如图2-6所示。

图2-6 HTML5标志

究竟是什么原因使得HTML5如此受欢迎呢？这就要从HTML5的特点说起。总体来说，HTML5不仅提升了网页的表现性能，还将之前HTML需要添加第三方插件的多媒体功能通过标签添加到HTML5的功能中，对于游戏的开发，HTML5添加了canvas画布标签。

HTML5的具体特点如下。

（1）全新的结构内容元素

在HTML5之前，无论网页的内容多么复杂，都必须采用div和span这样的文档概念设计文档结构，HTML5提供了许多新的元素，解决结构内容元素单一的问题，新加入了页眉元素（header）、分组元素（hgroup）、页脚元素（footer）、导航菜单元素（nav）、文章元素（article）和引文元素（aside）等结构元素，图像代码元素（figure）、标题元素（figcaption）、引用元素（mark）和时间元素（time）等内容元素。这些全新的结构内容元素会使得网页开发更加便捷。

（2）全新的表单设计

在处理表单时，开发人员经常对表单验证和安全检察的复杂性深有感触，这是由于表单的空间较少，验证表单和实现智能必须采用JavaScript。HTML5改变了这种情况，不仅支持浏览器验证的验证方式，还可以通过input组件的type类型来控制组件的类型，同时，表单还有其他许多的输入类型、属性和特性。

（3）HTML5的媒体工程非常强大易用

在HTML5标准中，开发人员不需要依赖专用的技术就能够创建这些媒体内容，也不需要使用外部插件，这些元素都具有开放的JavaScript API，可以简化对媒体元素的控制，这也是HTML5的核心目标。

在媒体控制的元素中包括音频播放元素（audio）、视频播放元素（video）和对网页游戏开发有跨时代意义的图形绘制画布元素（canvas）。canvas元素不仅简单易用，而且通过JavaScript API和一些创新运用，canvas本身可以成为一个能够创建动态图形和交互体验的强大工具。

HTML5的优势如下。

1）提高可用性和改进用户的友好体验。

2）可以给网站带来更多的多媒体元素。

3）对网站的抓取和索引友好。

4）适用于移动应用程序和游戏。

5）对开发者来说更易用。

HTML5的性能让它的前景很美好，但是标准在定义的过程中也会出现这样那样的问题，也会出现对部分标准的分歧，尽管如此，未来HTML5无论在移动平台还是在网页开发中都会有自己的一席之地。

2.3.2 构建和发布

单击“项目-构建”就可以发布项目了，Cocos Creator提供了两种Web页面的模板：Web Desktop和Web Mobile，它们的区别是Web Mobile会默认将游戏时图撑满整个游戏窗口，而Web Desktop需要指定一个分辨率，发布后视图也不会随着浏览器的大小变化而变化，如图2-7所示。

图2-7 构建发布

2.4 本章小结

本章学习Cocos Creator项目在Android、iOS和HTML5开发环境中的安装与配置，简要介绍了各个平台的开发环境、对应项目结构以及环境搭建和配置，相比过去的Cocos 2D-X的环境配置和搭建，Cocos Creator的环境搭建要简单很多，但是需要知道的是，本质上，这些工作都是类似的，如果想更进一步了解各个平台，可以参考相关的教材和文章来学习。

学习本章内容，应该根据提示一步步完成跨平台系统的搭建，为今后的学习做准备。从第3章开始，将正式介绍Cocos Creator编辑器的使用和脚本编程等相关知识，首先介绍Cocos2D-X的核心类。