CocosCreator初体验

机缘巧合，最近接到关于游戏的需求，前后调研了一下Unity3D和CocosCreator，但是考虑到是作为项目的一部分而使用，并且局限于Unity3D的使用条款，为了避免法律问题，最后选择的是使用CocosCreator来实现。第一次接触Unity3D和CocosCreator这类的游戏引擎，大约用了一个月的时间，从学习到项目大部分完成，之后要打包成静态库供其他客户端的同事们使用。学习途径主要是CocosCreator官网文档和官方Demo（看中文的文档就是爽！！！）。本片文章的目的主要是记录一下过程中遇到的问题及解决方案，并不是完整的教程。

本次要做的是一个最简单的跑酷类游戏，无需使用Tiled（地图编辑器），spine（骨骼动画编辑器）。也是做了这个小游戏才发现游戏其实已经发展的很成熟了。

我们可以看到，元素很简单，背景主要有远景、中景，通过设置不同的速度来实现现实中跑动的效果。主要的逻辑实现部分是在前景的任务和障碍物。由于没有使用物理引擎，所以是直接使用CocosCreator的碰撞检测实现的。主人公可以跳跃越过障碍物，撞开障碍物，收集金币。按住屏幕，hero跳起，按的时间长一些，主人公的跳跃也会高一些，自然一些的话还是需要简单的物理公式的。正常情况下hero是在x轴上是没有速度的，一种情况是当障碍物挡住hero时会有一个和障碍物同样的速度模拟阻挡的效果，还有一种情况是阻挡产生之后hero产生了位置上的移动，需要一个速度回到原位置。由于CocosCreator提供了碰撞检测之后的回调函数，所以我们可以很轻松的在回调中做一些相关 *** 作，比如让碰到的金币消失之类的。

有位同事做过cocos2d-x的开发，使用的c++，向他请教了一些基础了知识，但是细节上跟cocosCreator相差恨远，因为cocosCreator是用cocos2d-js框架并配合可视化的编辑器来实现的。由于是先调研的Unity3D，对这种脚本的方式还是比较能够接受的。其核心思想是在组件，在编辑器中制作精灵和动画，然后通过脚本组件来控制其逻辑实现，各种功能都组件化，当我们需要给精灵添加一个功能的时候，就是向其添加一个组件。在这个小游戏的制作过程中用的组件的数量也是有限的，主要是使用了：

编辑器给我们提供了方便的拖拽界面，直接将我们需要使用的导入，就会自动生成精灵文件（但是用过Unity3D之后，还是感觉Unity3D的功能集成度更高一些，而且还可以做3D）。

在编写脚本的时候也是不能脱离编辑器的，在编写脚本的时候着实是让我这个ios程序员有点摸不到头脑了，JS的使用方式有点让我不太适应，没有了xcode的提示功能，写起来还是有些费劲的。JS也是边学边写，不过得益于官方的Demo几乎把所有组件都写了一遍，所以就照着葫芦画瓢。写的时候就发现，其实引擎并没有帮我们做很多的工作（Unity3D可以直接在编辑器里设置物理属性，不过听说下个版本的CocosCreator也会有）。在编写脚本的过程中，最复杂的就是hero脚本的编写，需要检测碰撞和处理hero跳跃过程中的不同状态。碰撞检测的话需要自己计算碰撞发生的位置，当做矩形碰撞器来处理的，只计算x轴和y轴的碰撞。x轴发生碰撞的话，hero有一个和障碍物一样的速度，y轴碰撞一直持续的话就是调整hero的y轴的位置，让其在障碍物的顶部。跳跃的过程中完成动画的切换。

与CocosCreator编辑器不同的是，这个编辑器是我写的一个生成障碍物的一个app，可以方便让产品配置障碍物的位置。主要的实现思路是使用UICollectionView，界面非常的简单,主要是配合CocosCreator脚本的实现，需要将颗粒状的障碍物连成一个长的条状，所以需要将界上的障碍物颗粒结构化一下，取到障碍物的最底部的颗粒的位置，然后连接在一起的高度，这样的话就是对每一列的统一种类的障碍物进行深度优先搜索，记录最低点和搜索过的深度，这样的生成的JSON文件在CoCosCreator脚本里就可以直接使用了。

在Android环境中，可以使用 androidcontentClipboardManager 来复制和粘贴数据

在iOS环境中，可以使用 UIPasteboard 来复制和粘贴数据

在网上中复制粘贴是最麻烦的，要考虑到不同系统不同浏览器的情况，复制（设置剪切版）稍微还好一点，但是要获取剪切版的内容就太麻烦了，暂时还未找到兼容性很好的方法。

Cocos Creator 内置了一个简单易用的碰撞检测系统，支持 圆形，矩形 以及 多边形 相互间的碰撞检测。

获取碰撞检测系统

默认碰撞检测系统是禁用的，使用时需要以下方法开启碰撞检测系统

默认碰撞检测系统的 debug 绘制是禁用的，如果需要可使用以下方法开启 debug 绘制：

如果还希望显示碰撞组件的包围盒，可以通过以下接口来进行设置：

如果节点添加了BoxCollider组件，则可在节点运行时随时获取到碰撞盒的位置

CocosCreator还有一些检测相关的方法主要在Rect结构里，如下:

1、图集（Atlas）是游戏开发中常见的一种资源，是通过工具将多张组合成一张大图，通过plist格式文件索引资源。

2、由于它有以下优势，所以在游戏中我们

（1）合成图集时会去除每张周围的空白区域，加上可以在整体上实施各种优化算法，合成图集后可以大大减少游戏包体和内存占用

（2）多个 Sprite 如果渲染的是来自同一张图集的时，这些 Sprite 可以使用同一个渲染批次来处理，大大减少 CPU 的运算时间，提高运行效率。

3、下边是图集资源的创建过程

帧动画，就是通过一系列定义动画表现的动画形式，首先我们需要动画运行所需的所有帧。

这些帧通常以一张大图的形式(如下)给出，并不附带任何位置信息。

所以我们首先要将处理成带位置信息的大图形式，以便能够被cocos creator所用。

其次要创建一个承载动画的节点，并绑定Animation组件。

编辑动画，包括运行速度，帧事件，运行模式（顺序、循环）。

预览。

动画资源就对应于之前animation组件的 ccAnimationClip 类型的属性。在资源管理器中新建Animation资源。定义好动画资源后，就可以直接把这个资源拖到对应的属性 Default clip 上去。(如上图)

在层级管理器中选中动画节点，在动画编辑器中就可以对动画进行编辑了。

在动画编辑器中点击 编辑 按钮。在下面的属性列表中新建动画需要改变的属性。因为我们是帧动画，所以自然要改变的就是 ccSpriteSpriteFrame 属性了。

选中动画所需的帧拖到该属性的右边去。点击播放按钮，即可看到动画效果。

可以在动画编辑器的右下角修改动画的采样率和速度，以改变动画的帧变化速度。

保存动画。

选中选中节点，Animation组件下的 Play on Load 属性，即可在浏览器或者模拟器中查看动画效果。

以上就是关于CocosCreator初体验全部的内容，包括:CocosCreator初体验、CocosCreator获取和设置剪切版、CocosCreator-碰撞检测系统的常用接口等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！