CocosCreator + Animation + 查看API 简易教程(更新至1.0)

转自：http://www.cocoachina.com/bbs/read.php?tid-458312.html

这篇教程希望大家能够在CocosCreator中快速上手帧动画制作和脚本控制  并分享一些 意外的收获 和API的查看有关

这次的教程需要的前提并不高  只要安装了CocosCreator就可以了

我们先制作帧动画的plist和png吧

我们使用texturepakcer来制作  texturePacker_for_win  texturePacker_for_mac

解压后目录是这样的  然后大家按照下面的某某说明一步一步做就可以了  很简单



都完成后 安装目录如下 



打开TexturePackerGUI.exe  对提示按叉关掉吧 我们不需要命令行工具



然后呢 我们先拿到帧图片吧  当然自己有帧图片的话也可以 但出于学习目的  先和我的保持一致吧  练习用帧图片解压失败备用

图片的命名我已经写好了 hero为类名 第一个数字为方向  0~7分别是左上方向顺时针到右方向的序号 后两个数字为动作编号 站着为00  最后一个数字为动画帧数目 一个朝向有4张图片

然后呢 我们全选32张图片  拖到TexturePackerGUI右侧的Sprites中  



然后看到左侧 layout栏下 将Trim mode 选为None  然后 Heuristic mask 勾上  这里一个去背景色 一个保持图片大小不变(默认会缩进背景色去除后透明的部分,这样会引来等会播放帧动画时候图片的偏移)



然后我们选file -> publish  文件取名为hero100吧   1表示第一种角色的形象 00表示站着



然后图片集的名字也是 hero100  (这里有点奇怪 我之前一次的时候不需要设置图片集的名字  总之记得 设置后 应该有两个文件 一个hero100.plist 一个hero100.png  同名)



到这里 做动画需要的资源已经整理好了 现在可以关掉 TexturePacker了  打开CocosCreator 创建一个空项目



然后呢 在资源管理器中 对asserts 鼠标右键 -> 新建 -> scene  然后重命名为GameScene  



然后呢 我们在asserts 目录下新建几个文件夹 方便管理  script放脚本  image放图片  animation 放动画



然后看到层级管理  对 canvas 鼠标右键 ->  创建节点 ->  创建渲染节点  ->Sprite  然后重命名为 "hero"



然后选中 hero  点击界面中间下方的动画编辑器 点击添加Animation组件->新建AnimationClip  ->  名字取为 heroStand_0  保存 



然后在资源管理器就能看到我们新建的动画了 在右侧的属性管理器里面也能看到新加的Animation组件  至于上面的是什么功能  等会就知道了  先将属性管理器里面的heroStand_0扔到Animation文件夹里面





然后呢 将我们之前的hero100.plist 和 hero100.png 扔到项目目录的image下  



点开hero100.plist  即为图标为红色方框的一项



然后呢 点开中间的动画编辑器  点击属性列表的 添加属性 add Property  -> cc.Sprite.spriteFrame 然后属性列表就出现对应的属性了 



后面呢 选中 资源管理器  image下 的hero0000~hero0003  (shift + 鼠标点击hero0000 + 鼠标点击hero0003)  拖动到动画编辑器里面下方帧列表(和属性列表同高的列表)的第一帧的位置



然后呢 选中image 下 hero0000 



拖动到离原本第四帧有点距离的第6 或7帧的位置



然后呢 选中刚拖进来的第5帧 往回拉到贴紧第4帧 



然后呢看到动画编辑器最下面一栏 将Sample 改为4 warpMode 改为 Loop  至于为什么Sample是4  这个我是试出来的 = = 



然后呢 选中层级管理器中的 hero  将资源管理器的 heroStand_0 拖动到 属性管理器的Default Clip 中 选中 下面的 Play On Load



然后就可以先预览一下效果啦  (动图我就截个图示意一下了 详细看电脑上显示吧)



我们继续吧  

选中资源管理器的animation文件夹  鼠标右键 -> 新建 -> animation Clip  重命名为heroStand_1



然后呢 选中 层级管理器中的hero  将属性管理器中Animation 组件的 clip 加一 (记住是上面的三角形箭头  没事按下面的箭头的话 后果自负吧)  然后将资源管理器中的heroStand_1拖到属性管理器中的Clips
[1] 中 



然后呢 我们看到动画编辑器最下面一栏 开头的 Clip 选为 heroStand_1  后面就如法炮制吧 动画编辑器 属性列表 点击  add Property cc.Sprite.spriteFrame
选择hero1000~hero1003 拖到 下方帧列表中 再单独拖动hero1000到6 或7帧的位置 往回拖到第4帧后面  动画编辑器最下面一栏 Sample 改为4  warpNode改为Loop  





然后呢 我们继续这个流程 将0~7  八个方向的动画头添加进来   (这时候我的电脑已经有点卡了 请大家在这时候稍安勿躁  添加不上的帧多尝试几次)









到这里我们的动画部分就已经整理好了  我们也具备了基本的帧动画添加能力  下面我们来写两个简单的脚本  将玩家的朝向转向鼠标点击的方向 

我们的思路是将整个屏幕分为9块 和9宫格一样 点中间的格子  动画不变 点其他位置的格子 就改变动画中玩家的朝向

首先写一个hero脚本 (资源管理器中对script文件夹 鼠标右键 创建 javascript 重命名为myHero) 它的功能是接受一个方向的标志 (0~7) 然后改变动画中人物的朝向 



脚本很简答 我们就敲了6行代码  首先在properties中添加了动画名 AnimName  供changeDirection函数调用 
而changeDirection函数 接受一个方向标识 (0~7)  然后通过和AnimName拼起来  就能够选择到不同的动画来播放了 

后面我们再写一个 app脚本 (资源管理器中对script文件夹 鼠标右键 创建 javascript 重命名为myApp)   它的功能是
将鼠标点击的位置 换算为 0~7  数字  对应屏幕的8个不同方向的方格子 



首先在properties中添加hero 对象  等会要通过它调用hero下的myHero.js的changeDirection来改变方向

然后在onload中呢 我们先 将this存起来吧 免得等会在回调的时候 this胡乱指

然后呢添加一个鼠标弹起监听事件  当我们鼠标按下弹起的时候  就会调用后面的函数  函数里的event可以获得鼠标点击的位置 通过event.getLocationX()
和event.getLocationY()可以获得

然后后面呢 就是一个换算的代码  visibleSize 获得了整个屏幕的尺寸 默认的话大家应该和我一样 都是 (960, 640) 

我们为了将整个点击的区域分为行3块竖3块 我们就用 鼠标点击的位置 除以 (屏幕的尺寸/3)  但是算出来的是小数 我们用javascript内置的Math.floor函数(javascript内置的对象就只有几个
大家感兴趣可以去看看 官网文档里面讲javascript的一节里面的链接就不错 )  将小数部分截掉  变成整数



然后呢我们的目标呢 是将这些点的坐标换算成这个样子



具体怎么算呢  我的思路就是 先将坐标的Y的值上下翻过来    通过 2 - Yindex 



然后就会发现  位置为 0 1 2 3 4 的都已经可以直接算出来了 通过直接将Xindex 和 Yindex 相加就可以了 

而 5 6 7 的位置  只要将 8 - (Xindex + Yindex) 也可以算出来了  
、
换算的问题解决之后  我们就调用 myHero.js中的changeDirection(dir)  将方向传进去就可以了 

后面还有一点点收尾工作  选中层级管理器中的canvas  将资源管理器中的myapp.js  层级管理器中的 hero 拖到canvas层级管理器中的Script 和hero
中 Script可以一下子就可以放上去 hero要在上面悬停  大概15~20秒



然后选中 层级管理器的hero 等待加载完成  将资源管理中的myHero.js拖到属性选择器的Script中 并在AnimName 中 填入 heroStand_  也就是动画统一的前缀



后面就可以看一下效果了 (这边我就只剪 换方向后的一帧 来演示一下)

















到这里 我们已经具备基本的通过脚本控制动画的能力了   后面讲一下查看API的内容

其实我本来的想法是将myApp.js  和 myHero.js  通过自定义事件的传输和监听  实现一个更好的解耦 但是 官方对于事件的传播只支持事件的冒泡  而事件之间的点对点的传输又和解耦的出发点相违背

我就想看看有没有什么办法 结果 解决方案没想出来  反而找到一个我觉得还不错的看API的方法

那时候我在研究 能不能通过自定义事件 将传播类型写成捕获来看看能不能行 但是api的资料有点少 突然灵光一闪 在onload写了下面的代码



本来只是想看看为什么一直报错 结果运行后看到了还不错的东西



大家可以通过这样的方式结合API  看一下实例之中都有什么属性和方法  

后面会推出 结合帧动画 和node.js 实现一个简易的角色扮演社区的教程 (当然在3月份之前里面的玩家都不能讲话就是了)  并在此基础上  继续收尾一些UI组件  和脚本之间交互设计的思想

由于教程的实验 图片整理 和文字整理和前两篇不同 是分开整理的 可能会有一些问题 请在下方回帖提问 

还有我再也不用这个截图工具了。

源码在这里 AnimationDemo

2016-03-31

0.7->1.0 动画编辑器变化











->前往教程司令部

下一篇:CocosCreator
+ 在线角色扮演社区(1) 简易教程

下一篇:
CocosCreator + AnimationCurve 简易教程