cocos creator学习（一）页面+动画

准备

下载+新建项目

软件下载链接：https://www.cocos.com/creator/
安装完软件后，打开，新建一个项目
下面的是空白项目，也可以新建范例项目，看着写完的动画学习

cocos creator页面介绍

如上图所示（序号与图片序号一一对应）：
1、层级管理器：包含当前打开场景（ctrl+S保存时可以定义当前场景的名字）的所有节点，就是你的场景编辑器（编号2）里面的东西，显示的隐藏的都能看到，节点越往下，显示的就越靠前
2、场景编辑器：可以很直观地看到当前场景的效果（位置，动画等），里面的元素可以用图中左上角的【移动、旋转、缩放、控制宽高】这四个工具去编辑，里面的元素（图片）都是由资源管理器（编号5）中拖拽进来的
3、控件库：里面有很多诸如按钮、文字、进度条等小组件，可以直接拖拽进场景编辑器（编号2）里，方便编辑
4、属性检查器：点击层级管理器（编号1）里面的节点，属性检查器里就会出现对应的属性，可更改
一般属性如下（由官网图片改变后的版本）：

5、资源管理器：这里放你的图片、音乐、js文件、场景文件、动画、预制节点等所有你能在项目中用到的东西。
一般我会在assets里新建6个文件夹，animations放动画、audio放音频、resources放预制节点、scenes放场景、scripts放js文件、textures放图片，文件夹名字可以自定义
6、控制台：主要就是用来看报错的
7、动画编辑器：这个很重要！所有的动画都是在这里制作后用js绑定给节点的

适配宽高

设置

层级管理器，点击canvas，看向属性检查器
我们将属性canvas宽高改成750*1206，勾选Fit Height，自适应高度，这样一般手机都可以了

注意

1、cocos做的时候，背景图片的边边不要正好装在canvas里，要超出一点，方便调整

2、canvas的属性中，fit Width 和 fit Height不要同时选中，会被等比缩放

动画

简单动画

先将准备好的图片放入textures文件夹里，直接拖拽背景图片到场景编辑器中，此时层级管理器里会自动出来这个背景图片的层级，因为没有铺满，让我们用左上角的四个工具（分别是移动 _{点击该层级的中心点移动}、旋转 、缩放_{点击中心点再拽是等比缩放}和矩形变换工具_{就是可以分别调整四个角}）编辑一下。然后开始放小人儿。

新建动画

小人儿的图片是找的一组帧，同样的，从资源管理器中拖住想用的图片到场景编辑器里，然后点击动画编辑器里面的“添加Animation组件”，按照提示再次点击“新建Clip组件”，双选择animations文件夹，因为是给任务动画，所以取名为ren，保存

保存后在你的资源管理器中就会看到保存后的动画，可以看到属性里面已经为当前层级添加了一个动画，名字就是刚刚创建的ren。那么下面我们开始点击动画编辑器左上角来编辑动画

编辑动画

点击“Add Property”可以看到这里有很多不同的属性可以添加，比如位移、放大缩小、旋转、改变宽高、透明度等等，这里就不一一介绍了。我们可以先用这一个小人儿做一个淡入后走路时上下动的效果，那么就需要用到属性里的opacity和y

如图所示，添加完动画后可以按保存，如果不保存，在关闭时也会提醒你保存的。
小拓展：
在动画编辑器的时间轴上，滚动鼠标滚轮可改变可见的时间间隔
动画编辑器的左上角小图标分别是
①打开/关闭编辑器
②回到第一帧
③回到上一帧
④播放动画（点击后效果在场景编辑器里可见）
⑤到下一帧
⑥插入帧事件（用来绑定动画执行到该时间点时执行的函数，该函数的脚本必须绑定在次层级上）
⑦为本层级添加新的动画（可在不同的时间段内运行）

效果

添加好透明度和y属性后大概就是这种效果（因为截图的时候位置有所偏差，所以昨晚gif看着像是背景也在动，但仔细看可以看出小人儿是淡入后上下动的）

这样，一个非常简单的小动画就结束了。

层级关系

设定上，小人是在背景里面的，所以我们要在层级管理器里改变5的层级，可以直接拖拽

帧动画

添加属性

帧动画是我们已经有一帧帧的动作图片，通过换图片来让动作变得连贯（也可以用在动物和风景上，比如云卷云舒，鹰击长空这些）
那首先还是创建动画，如果是在已创建的动画上面更改也可以
这次添加的属性是cc.Sprite.spriteFrame

效果

大概是这样
ps:用电脑录的屏，发给手机再把视频做成动图，我太难了
pps：也用视频在pr上导出，画质还没这个好…

这样一个帧动画就做好啦~

---

cocos笔记链接：
cocos creator学习（一）页面+动画
cocos creator学习（二）js绑定动画
cocos creator学习（三）预制节点
cocos creator学习（四）全局变量+类之间的函数调用
cocos creator学习（五）定时器
cocos creator学习（六）组件Mask（超出部分隐藏）
cocos creator学习（七）音乐
cocos creator学习（八）自动图集+构建发布h5
cocos creator学习（九）构建后更改图片和层级设置
cocos creator学习（十）cocos自带扩展插件-压缩