cocos creator动画编辑器学习

动画是一个渐变的过程,怎么样在cocos creator的动画编辑器中实现这个过程.

一、层级关系:

1节点、2动画(Animation)、3动画剪辑(Animation Clip)、4属性轨道、5动画帧

a.  动画(Animation)是节点上的一个组件.

b.  动画剪辑(Animation Clip)就是一份动画的声明数据,将它挂载到动画(Animation)上作为一个属性进行设置.

c.  动画剪辑(Animation Clip)上可添加多个属性轨道来控制不同属性.

d.  在一条属性轨道上创建多个动画帧(蓝色点),在这些动画帧上设置不同的属性值,实现从帧A渐变到帧B的过程(即动画).

二、一个简单的动画示例

实现一个“投掷筹码”的动画:

a.在筹码节点上添加投掷动画.

b.动画需求比较简单,只需一个筹码的投掷过程chip_toss. (注:一个动画可有多个过程组合实现更复杂的效果).

c.投掷过程就是位置的改变,增加一条用于控制位置移动的属性轨道:position.(注:一个过程可有多个属性改变,例如在移动的过程还可以增加透明度的改变)

d.在这条属性轨道上设置了4个关键帧,设置好每个关键帧的坐标值,将两帧之间的连线修改为自己想要的运动轨迹曲线.(第一帧:出手点坐标、第二帧:投掷点坐标、第三和第四帧为投掷点附近坐标(实现筹码碰撞停止过程))

三、其它

属性:

  包括基本属性和自定义的属性
    基本属性:节点自带的基本属性,包括位置position、旋转rotation、缩放scale、锚点anchor、大小size、颜色color、透明度opacity、倾斜skew、节点的分组group.
    自定义属性:根据动画所在节点上组件不同而增加不同的自定义属性,例如节点上有文字组件,则会增加自定义属性cc.Label.string、cc.Label.fontsize、    cc.Label.enabled.

序列帧动画:
  常用的序列帧动画就是在节点上添加了sprite组件,然后自定义属性里就会有cc.Sprite.spriteframe属性,然后在spriteframe属性轨道上添加帧图片,实现帧动画.

时间曲线:

  用于控制两帧之间变化的快慢过程,例如一个逐渐透明的过程,通过修改时间曲线可以实现先慢慢的透明,然后快速的透明的过程.(注:双击两帧之间的连线打开时间曲线界面)

脚本控制动画:
  1.简单函数控制,如播放、暂停、恢复、停止、设置动画的当前时间;
    anim.play(‘test‘);
    anim.pause(‘test‘);

  2.可视化函数控制
    在动画编辑器里支持可视化编辑帧事件,执行一些函数方法,例如可以在动画最后一帧插入切换到下一个界面的函数来实现动画播放完后自动切换的效果.
    事件编辑器中可以编辑需要触发的函数,还可以在后面传入函数参数(支持Boolean,String,Number三种类型的参数).

    通过点击如图两个按钮呼出事件编辑器.

    

  3.略复杂的函数控制,获取AnimationState,修改其中的参数.

 // 获取AnimationState的方法:
    var animState = anim.getAnimationState(‘test‘);
 // 修改播放速度参数使动画减速
    animState.speed = 0.5;

  4.动画系统支持动态注册回调事件.

    var animation = this.node.getComponent(cc.Animation);
    // 注册
    animation.on(‘play‘, this.onPlay, this);
    // 取消注册
    animation.off(‘play‘, this.onPlay, this);
    // 对单个 cc.AnimationState 注册回调
    var anim1 = animation.getAnimationState(‘anim1‘);
    anim1.on(‘lastframe‘, this.onLastFrame, this);

    // 动态创建 Animation Clip:
    var animation = this.node.getComponent(cc.Animation);
    // frames 这是一个 SpriteFrame 的数组.
    var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
    clip.name = "anim_run";
    clip.warpMode = cc.WarpMode.Loop;

    // 添加帧事件
    clip.events.push({
        frame: 1, // 准确的时间,以秒为单位。这里表示将在动画播放到 1s 时触发事件
        func: "frameEvent", // 回调函数名称
        params: [1, "hello"] // 回调参数
    });

    animation.addClip(clip);
    animation.play(‘anim_run‘);
时间: 2024-10-15 08:27:44

cocos creator动画编辑器学习的相关文章

cocos creator 入门理解点

简单解释, Cocos是触控科技推出的游戏开发一站式解决方案,包含了从新建立项.游戏制作.到打包上线的全套流程.开发者可以通过cocos快速生成代码.编辑资源和动画,最终输出适合于多个平台的游戏产品.Cocos的主要产品有Cocos Studio.Cocos2d-x(Cocos Framework).Cocos Code IDE. Q: Cocos Creator 是游戏引擎吗? A: 它是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现(不需要学习一个

初学Cocos Creator收集的视频教程

技术胖 Cocos Creator基础视频教程(共5集) 简介和HELLOWORLD 软件界面介绍和跳动的小球制作 SCENE介绍和基本操作 玩家输入事件监听操作 PREFAB和计时器 http://jspang.com/category/learn/jichu/ 技术胖 Cocos Creator实战-<橡皮怪勇闯地下室>视频教程(共10集) 游戏简介和项目分析 UI界面布局 主角的动作监听和左右跳动 随机生成地刺 点击生成地刺和地刺的移动 碰撞检测132 倒计时和分数增加 欢迎界面代码编写

cocos creator学习--骨骼动画入门教程

参考:Mark_Liu--cocos creator--DragonBones 骨骼动画入门 1.首先在网上下载dragonBones 的文件解压后有三个文件 2.将文件夹放入cocos creator, 3.新建一个空结点并添加渲染组件dragonBones,新建一个js文件,将js文件和节点绑定.将资源的两个json文件放入dragonBones对应的框中 4.查看SwordsMan的json文件,搜索  gotoAndPlay  ,该关键字对应的就是动作名称 5.打开js文件,写入代码 c

cocos creator基础-(二十九)动画编辑器编辑地图路径

思路 1.利用动画编辑器,设置一个路径,多个路径就编辑多个动画 2.用特定的代码对动画进行处理,获取到路径坐标,大佬已经写好代码,不用自己重复造轮子了(微元法求曲线长度) 获得动画路径的贝塞尔曲线方程 求得每一段贝塞尔曲线的长度 每隔一小段打一个点 最终生成一个路径 3.编写寻路脚本,挂载到物体上,让沿着路径移动 动画编辑 脚本挂载 // gen_map_path.js 动画路径转换坐标的代码 已经升级到2.x cc.Class({ extends: cc.Component, properti

新编辑器Cocos Creator发布:对不起我来晚了!

1月19日,由Cocos创始人王哲亲手撰写的一篇Cocos Creator新品发布稿件在朋友圈被行业人士疯狂转载,短短数小时阅读量突破五位数.Cocos Creator被誉为"注定将揭开Cocos开发世界中全新的一页",究竟它有什么魅力?下面让我们来细细阅读这篇文章. 以下为全文: 上周我在厦门的「哎哟,2016」酒会上,宣布了今年会发布一款新的编辑器.是的,今天我来了: Cocos Creator在经历了一年多的低调研发之后,今天终于发布了第一个正式对外的公测版,大家可以从 coco

关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy"); 2.用getComponent()方法找到相应骨骼动画节点的骨骼动画组件,并把这个对象赋值给一个var出来的新对象. 具体代码:var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton); 3.把第二点的新

Cocos Creator中的动画支持技术

Cocos Creator主要亮点 官方的权威描述是:Cocos Creator是以内容创作为核心的一体化游戏开发工具,这个引擎基于Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.本人使用一段时间后的感觉是,这个工具并不仅仅实现了开发语言由C++向Javascript的转移(当然Cocos Creator是从Cocos2d-js发展而来的),其真正的亮点在于它实现了全面型游戏开发思想的转变.程序员与美工都要熟悉这个工具的整体使用流程,并重点了解二者如何交互.本人感觉在设计之初,通过类似

cocos creator基础-(十六)自定义的帧动画播放组件(需要优化)

1: 掌握帧动画的原理; 2: 完成帧动画组件的编写; 3: 代码中使用帧动画组件; 通过拖拽图片进行播放,比引擎的制作方式方便,但动画不是很灵活 帧动画播放组件 1: creator播放帧动画需要通过动画编辑器去制作; 2: 为了方便控制和使用加入帧动画代码播放组件; 3: 属性设置: sprite_frames: 帧动画所用到的所有的帧; duration: 每帧的时间间隔; loop: 是否循环播放; play_onload: 是否加载组件的时候播放; 4: 接口设置: play_once

cocos creator学习01 关于cocos creator 通过get 和post连接node.js服务器的初步探索

一.node.js的安装注意事项 1.参考http://www.runoob.com/nodejs/nodejs-install-setup.html 2.node.js如果不配置package.json文件会出现警告  npm WARN saveError ENOENT : no such file or directory ......输入 npm init 进行配置该文件 3.如果npm文件丢失,在控制面板->程序 选择修复. 4.出现express错误,需要在运行的工程的文件夹里进行ex