Cocos入门-使用Cocos编辑器编辑游戏资源
Cocos入门-使用Cocos编辑器编辑游戏资源
Cocos编辑器简介：
Cocos编辑器是Cocos2d-x引擎配套的跨平台游戏开发工具，帮助开发者快速构建游戏场景、编辑UI、编辑动画等游戏资源，支持第三方的资源导入。 支持多种类型游戏的编辑，满足不同开发者和公司的开发需求，并且上手容易，简单易懂，同时提供了丰富的技术支持和开发资源。
本教程将向您简单介绍如何使用Cocos编辑器进行游戏的资源管理、界面编辑、界面组织以及动画编辑，希望您能够通过本篇教程快速上手Cocos编辑器。
本篇教程使用Cocos v2.2.8进行讲解。
目录：
1、游戏资源管理
2、新建Cocos编辑器资源
3、生成和编辑界面对象
4、对象的组织
5、动画的编辑
一、游戏资源管理
Cocos编辑器的游戏资源管理主要使用资源面板来完成，我们可以将游戏中使用到的图片、音效、粒子等资源文件都导入到这里统一管理。资源面板通过引用的方式来管理资源，这意味着我们可以在使用资源的过程中任意调整资源的目录和名称，不必重新调整所有使用了该资源的控件，缺点是我们只能通过这个面板来管理编辑过程中使用到的游戏资源。
二、新建Cocos 编辑器资源
我们可通过右击资源面板-新建文件等方式创建Cocos编辑器资源来进行编辑。
总共可以创建五种类型的文件。
场景、图层和节点文件：
场景、图层和节点文件较为类似，均是用于编辑2D界面，区别是场景节点的大小即为游戏界面大小，只能通过界面左上角的下拉菜单进行统一编辑，场景节点不能嵌套到其他类型的文件中；
图层节点可以任意设定大小；图层节点无大小信息。
合图文件：
合图文件可以将我们使用到的零碎的图片资源合并到一张大的图片中，并以plist文件记录所合并的图片。将零碎的小图片合并到一起可以减少IO次数提高图片读取效率，也可以降低显卡的绘制次数，提高游戏性能、降低耗电量。
一般做法是将同一个界面用到的图片合并到一起，不同界面之间通用部分另做一张合图。
PS：导入合图的文件如果大小合适的话，会被框在一个深灰色的矩形中：
但是当使用的图片尺寸过大/图片太多时，存在合图文件最大尺寸不足以包含所有图片的情况，此时会导致游戏中超出深色矩形外的部分读取不出来。这是我们使用合图文件过程中需要留心的一个问题。
3D场景部分：
因笔者能力所限，此处暂缺。
3、生成和编辑界面对象：
下图红框框住的区域为文档面板，是Cocos提供的一个所见即所得的编辑区。我们可以将左侧对象面板中的对象拖放至此进行编辑。
如拖动一个精灵对象到文档面板，可以留意到属性面板发生了变化。属性面板会显示当前对象可编辑的属性：
对于属性面板中涉及资源的属性，可以直接从资源面板中拖放资源进行设置。
您也可以直接将图片资源拖动到文档面板，生成精灵对象。
使用过程中，您可能会发现，对象面板中除了精灵外还有“图片对象”可以显示图片。二者的区别是：对象面板分为基础对象和控件对象（容器也是控件对象，自定义控件这里不介绍）。
基础对象每个对象都有自己特殊的功能；控件类型除了用于显示外，还具有交互能力，能够接受和反馈用户的交互动作。
以上是基本区别，除此之外，精灵还能够显示序列帧，图片则可以进行九宫格缩放。
当然每个空间都有自己特殊的地方，我们可以将鼠标放在在对象，然后点击右上角出现的“i”符号，点击弹出的界面中的在线帮助查看这个对象的详细用法。
PS：
Windows下移动画布可以通过按住空格键拖动画布的方式进行。Mac下可以使用手势。
4、对象的组织：
对象的组织主要使用界面树面板。界面树面板在动画面板当中，下图框住的部分即为动画面板，界面树面板在动画面板左侧。
Cocos中对象间是以树的形式组织，即从一个对象开始找这个对象的父对象、父对象的父对象……一直找下去最终总能够找到最上方那个对象，如这里的Scene，同时一个对象只能有一个父对象。（看不懂请当废话）
对象的大部分基础属性能够影响到子对象，如坐标、缩放值、旋转和颜色。
在这样一种组织方式下，可以很容易地将对象还有他的子对象视为一个整体，方便快速地进行组织和编辑。
我们将一个对象拖动到另一个对象上，改变父子关系：
再将Sprite_1倾斜45。可以发现子对象img2_2也跟着受到影响，倾斜了45度：（为了方便演示，我隐藏了default对象）
PS：
界面树面板右侧有三个小控制钮，功能如下图所注：
需要注意的是，这里的隐藏和锁定对象仅在编辑器中有效，我们的程序同学在游戏当中是读取不到这两个属性的。
5、动画的编辑
动画编辑主要使用到第四点提到的动画面板的时间轴部分，我们所需要做的就是在时间轴上选择时间点，插入属性帧，然后修改对象的可以作为动画的属性。
插入帧的方式有许多种：
1.使用自动记录帧在时间轴上选择时间点，然后修改相关的属性。
2.右击添加帧
3.使用快捷键K
第1种方式是最常用也是最好用的方式。一般来说这种方式就能够满足我们大部分需求了。需要注意的是大部分的动画属性也只能通过这种方式来添加。
我们开启自动记录帧，选择第一帧，修改Sprite_1坐标到左上角，修改img_2_2到与Sprite_1重叠，然后选择40帧修改Sprite_1坐标到右上角，修改img_2_2到右下角。接着点击界面树上的播放按钮
，就可以看到两个小球的直线运动动画了。
注意，编辑动画后，如果关闭了自动记录帧，接下来要修改设置了动画的属性就只能在有帧的地方进行设置，否则是没有效果的。
镜像参考：镜像参考俗称洋葱皮，是Cocos 编辑器提供的一种一边编辑动画一边预览的技术。
开启镜像参考后设定预览前后20帧，如下图，其中红色部分即为动画前20帧的位置，蓝色则为动画后20帧的位置。
缓动函数：动画面板右侧是缓动函数设置面板，这个面板可以改变补间动画插值的计算方式。
设定方法：首先选择希望设定缓动函数的补间动画的起始帧，然后在缓动函数设置面板选择一个函数，此时可以看到时间轴上的补间动画示意线变成了箭头，自定义页签可以设定自己的缓动曲线，效果类似。
这里我将img_2_2的坐标属性动画设定为
，效果如下
嵌套动画：我们可以将图层和节点CSD文件嵌套到其他CSD文件中，并在时间轴上设定嵌套进来的文件的动画。将CSD文件拖动到文档面板即可生成嵌套节点，在动画面板中可以看到嵌套节点相比其他普通节点多了嵌套动画的动画属性。
属性面板可以对嵌套节点的动画进行设置，需要注意的是，这些设置只能被当成动画记录下来。
另外嵌套节点的动画的生命周期是与外部文件的生命周期一致的，即外部动画停止了，嵌套动画也将停止。所以目前如果希望在大动画里边嵌套无限循环动画就得程序控制了。
动画面板其他功能简介：
1.循环播放：可以设定预览动画时只播放一次还是循环播放。
2.每秒帧率：用于设定动画的播放速度，单位是FPS(Frames Per Second)，即每秒播放多少帧。
3.动画列表：用于给时间轴上特定范围配置一个动画名称，预览时可以设定只预览这一段，程序也可以根据这个名称来播放动画。
Cocos入门-使用Cocos编辑器编辑游戏资源
Cocos编辑器简介：
Cocos编辑器是Cocos2d-x引擎配套的跨平台游戏开发工具，帮助开发者快速构建游戏场景、编辑UI、编辑动画等游戏资源，支持第三方的资源导入。 支持多种类型游戏的编辑，满足不同开发者和公司的开发需求，并且上手容易，简单易懂，同时提供了丰富的技术支持和开发资源。
本教程将向您简单介绍如何使用Cocos编辑器进行游戏的资源管理、界面编辑、界面组织以及动画编辑，希望您能够通过本篇教程快速上手Cocos编辑器。
本篇教程使用Cocos v2.2.8进行讲解。
目录：
1、游戏资源管理
2、新建Cocos编辑器资源
3、生成和编辑界面对象
4、对象的组织
5、动画的编辑
一、游戏资源管理
Cocos编辑器的游戏资源管理主要使用资源面板来完成，我们可以将游戏中使用到的图片、音效、粒子等资源文件都导入到这里统一管理。资源面板通过引用的方式来管理资源，这意味着我们可以在使用资源的过程中任意调整资源的目录和名称，不必重新调整所有使用了该资源的控件，缺点是我们只能通过这个面板来管理编辑过程中使用到的游戏资源。
二、新建Cocos 编辑器资源
我们可通过右击资源面板-新建文件等方式创建Cocos编辑器资源来进行编辑。
总共可以创建五种类型的文件。
场景、图层和节点文件：
场景、图层和节点文件较为类似，均是用于编辑2D界面，区别是场景节点的大小即为游戏界面大小，只能通过界面左上角的下拉菜单进行统一编辑，场景节点不能嵌套到其他类型的文件中；
图层节点可以任意设定大小；图层节点无大小信息。
合图文件：
合图文件可以将我们使用到的零碎的图片资源合并到一张大的图片中，并以plist文件记录所合并的图片。将零碎的小图片合并到一起可以减少IO次数提高图片读取效率，也可以降低显卡的绘制次数，提高游戏性能、降低耗电量。
一般做法是将同一个界面用到的图片合并到一起，不同界面之间通用部分另做一张合图。
PS：导入合图的文件如果大小合适的话，会被框在一个深灰色的矩形中：
但是当使用的图片尺寸过大/图片太多时，存在合图文件最大尺寸不足以包含所有图片的情况，此时会导致游戏中超出深色矩形外的部分读取不出来。这是我们使用合图文件过程中需要留心的一个问题。
3D场景部分：
因笔者能力所限，此处暂缺。
3、生成和编辑界面对象：
下图红框框住的区域为文档面板，是Cocos提供的一个所见即所得的编辑区。我们可以将左侧对象面板中的对象拖放至此进行编辑。
如拖动一个精灵对象到文档面板，可以留意到属性面板发生了变化。属性面板会显示当前对象可编辑的属性：
对于属性面板中涉及资源的属性，可以直接从资源面板中拖放资源进行设置。
您也可以直接将图片资源拖动到文档面板，生成精灵对象。
使用过程中，您可能会发现，对象面板中除了精灵外还有“图片对象”可以显示图片。二者的区别是：对象面板分为基础对象和控件对象（容器也是控件对象，自定义控件这里不介绍）。
基础对象每个对象都有自己特殊的功能；控件类型除了用于显示外，还具有交互能力，能够接受和反馈用户的交互动作。
以上是基本区别，除此之外，精灵还能够显示序列帧，图片则可以进行九宫格缩放。
当然每个空间都有自己特殊的地方，我们可以将鼠标放在在对象，然后点击右上角出现的“i”符号，点击弹出的界面中的在线帮助查看这个对象的详细用法。
PS：
Windows下移动画布可以通过按住空格键拖动画布的方式进行。Mac下可以使用手势。
4、对象的组织：
对象的组织主要使用界面树面板。界面树面板在动画面板当中，下图框住的部分即为动画面板，界面树面板在动画面板左侧。
Cocos中对象间是以树的形式组织，即从一个对象开始找这个对象的父对象、父对象的父对象……一直找下去最终总能够找到最上方那个对象，如这里的Scene，同时一个对象只能有一个父对象。（看不懂请当废话）
对象的大部分基础属性能够影响到子对象，如坐标、缩放值、旋转和颜色。
在这样一种组织方式下，可以很容易地将对象还有他的子对象视为一个整体，方便快速地进行组织和编辑。
我们将一个对象拖动到另一个对象上，改变父子关系：
再将Sprite_1倾斜45。可以发现子对象img2_2也跟着受到影响，倾斜了45度：（为了方便演示，我隐藏了default对象）
PS：
界面树面板右侧有三个小控制钮，功能如下图所注：
需要注意的是，这里的隐藏和锁定对象仅在编辑器中有效，我们的程序同学在游戏当中是读取不到这两个属性的。
5、动画的编辑
动画编辑主要使用到第四点提到的动画面板的时间轴部分，我们所需要做的就是在时间轴上选择时间点，插入属性帧，然后修改对象的可以作为动画的属性。
插入帧的方式有许多种：
1.使用自动记录帧在时间轴上选择时间点，然后修改相关的属性。
2.右击添加帧
3.使用快捷键K
第1种方式是最常用也是最好用的方式。一般来说这种方式就能够满足我们大部分需求了。需要注意的是大部分的动画属性也只能通过这种方式来添加。
我们开启自动记录帧，选择第一帧，修改Sprite_1坐标到左上角，修改img_2_2到与Sprite_1重叠，然后选择40帧修改Sprite_1坐标到右上角，修改img_2_2到右下角。接着点击界面树上的播放按钮
，就可以看到两个小球的直线运动动画了。
注意，编辑动画后，如果关闭了自动记录帧，接下来要修改设置了动画的属性就只能在有帧的地方进行设置，否则是没有效果的。
镜像参考：镜像参考俗称洋葱皮，是Cocos 编辑器提供的一种一边编辑动画一边预览的技术。
开启镜像参考后设定预览前后20帧，如下图，其中红色部分即为动画前20帧的位置，蓝色则为动画后20帧的位置。
缓动函数：动画面板右侧是缓动函数设置面板，这个面板可以改变补间动画插值的计算方式。
设定方法：首先选择希望设定缓动函数的补间动画的起始帧，然后在缓动函数设置面板选择一个函数，此时可以看到时间轴上的补间动画示意线变成了箭头，自定义页签可以设定自己的缓动曲线，效果类似。
这里我将img_2_2的坐标属性动画设定为
，效果如下
嵌套动画：我们可以将图层和节点CSD文件嵌套到其他CSD文件中，并在时间轴上设定嵌套进来的文件的动画。将CSD文件拖动到文档面板即可生成嵌套节点，在动画面板中可以看到嵌套节点相比其他普通节点多了嵌套动画的动画属性。
属性面板可以对嵌套节点的动画进行设置，需要注意的是，这些设置只能被当成动画记录下来。
另外嵌套节点的动画的生命周期是与外部文件的生命周期一致的，即外部动画停止了，嵌套动画也将停止。所以目前如果希望在大动画里边嵌套无限循环动画就得程序控制了。
动画面板其他功能简介：
1.循环播放：可以设定预览动画时只播放一次还是循环播放。
2.每秒帧率：用于设定动画的播放速度，单位是FPS(Frames Per Second)，即每秒播放多少帧。
3.动画列表：用于给时间轴上特定范围配置一个动画名称，预览时可以设定只预览这一段，程序也可以根据这个名称来播放动画。