cocos creator 动画编辑器以及骨骼动画的使用

转载地址:https://www.cnblogs.com/rickyctbu/p/10086597.html

一、普通动画的设置

1、添加动画组件

  a、添加空节点=>添加动画组件

  b、新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与相对应的Clips文件里)

cocos creator 动画编辑器以及骨骼动画的使用_第1张图片

Default Clip => 在勾选Play On Load时或者调用play()默认播放的动画

  Clips => 通过脚本访问可以播放的AnimationClip列表

  Play On Loat => 是否在加载的时候播放

2、设置动画

cocos creator 动画编辑器以及骨骼动画的使用_第2张图片

 WrapMode => 动画模式(default:默认,normal:正常,loop:循环...)

  Sample => 定义当前动画数据每秒的帧率,默认为 60,这个参数会影响时间轴上每两个整数秒刻度之间的帧数量(也就是两秒之内有多少格)

  Speed => 当前动画的播放速度,默认为 1

  设置动画的步骤:选定节点后,点击+号选择需要设置的属性,如position,opacity等,点击添加关键帧,拉动线色线条到指定的时间点,再添加关键帧,设置所对应的值保存即可(如果是位置值,可直接拖动即可)如果是设置图片的动画选择cc.Sprite.spriteFrame,把指定的图片拖动到关键帧即可,概括如下:

  (1)添加动画属性
  (2)添加关键帧/删除关键帧,选到关键帧,在属性编辑器上编辑和修改;
  (3)编辑补间动画曲线路径;

3、代码控制动画

  a: Animation组件主要的方法:

        play([name], [start_time]), 播放指定的动画,如果没有制定就播放默认的动画;

        playAdditive: 与play一样,但是不会停止当前播放的动画;

        stop([name]): 停止指定的动画,如果没有指定名字就停止当前播放的动画;

        pause/resume: 暂停唤醒动画;

        getClips: 返回组件里面带的AnimationClip数组

   b: Animation重要的属性:

        defaultClip: 默认的动画剪辑;

        currentClip: 当前播放的动画剪辑;

   c: Animation播放事件:  动画组件对象来监听on,不是节点,取消注册的事件用off

       play : 开始播放时  stop : 停止播放时 pause : 暂停播放时 resume : 恢复播放时

       lastframe : 假如动画循环次数大于 1,当动画播放到最后一帧时 finished : 动画播放完成时

cc.Class({
    extends: cc.Component,
    properties: {
        animate: {
            type: cc.Animation,
            default: null
        }
    },
    onLoad() {
        //方法一
        // this.anim_con = this.animate;
        //方法二
        this.anim_con = this.node.getChildByName('anim').getComponent(cc.Animation);
        //获取铵钮组件
        let btn = this.node.getChildByName('btn').getComponent(cc.Button);
        //绑定事件
        let click_event = new cc.Component.EventHandler();
        click_event.target = this.node;
        click_event.component = 'test_scene';
        click_event.handler = 'col_anim';
        btn.clickEvents.push(click_event);

        //绑定监听事件
        //监听开始播放
        this.anim_con.on('play', function () {
            console.log('已经开始播放了哈!!!');
        }.bind(this), this);
        //监听暂停
        this.anim_con.on('pause', function () {
            console.log('已经暂停了哈!!!');
        }.bind(this), this);
        //监听继续
        this.anim_con.on('resume', function () {
            console.log('现在继续哈!!!');
        }.bind(this), this);
        //完成播放时调用
        this.anim_con.on('finished', function () {
            console.log('完成了!');
        }.bind(this), this);
    },
    start() {
        this.anim_con.play();
        this.isPlayAnim = true;
    },
    col_anim() {
        if (this.isPlayAnim) {
            //暂停
            this.anim_con.pause();
        } else {
            //继续
            this.anim_con.resume();
        }
        this.isPlayAnim = !this.isPlayAnim;
    }
});

4、在动画上绑定事件

步骤:点击红色圆圈处绑定事件,双击蓝色处弹出对话框绑定事件

遍历当前动画组件所挂节点上面所有的脚本或组件,根据这个名字来触发函数;注意:要把脚本绑定在动画组件所挂的节点上
要慎用,代码和动画之间不易太多的调用;

 

二、Skeleton骨骼动画的设置

  1、骨骼动画的基本配置及生成

    a: 骨骼动画: 把动画打散, 通过工具,调骨骼的运动等来形成动画
    b: spine是一个非常流行的2D骨骼动画制作工具
    c: spine 动画美术人员导出3个文件:
      (1) .png文件:动画的”骨骼”的图片集;
      (2).atlas文件: 每个骨骼在图片集里面位置,大小;
      (3).json文件: 骨骼动画的anim控制文件,以及骨骼位置等信息;
    d: 骨骼动画导入: 直接把三个文件拷贝到项目的资源目录下即可;
    e: 使用骨骼动画: 
      (1) 直接拖动到场景;
      (2) 创建一个节点来添加sp.Skeleton组件,注意:在脚本里面定义资源要用sp.Skeleton来指定

    2、骨骼动画的js属性及接口

cocos creator 动画编辑器以及骨骼动画的使用_第3张图片

 sp.Skeleton: 控制面板属性:

    Skeleton Data =>骨骼的控制文件.json文件;
    Default Skin => 默认皮肤;
    Animation => 正在播放的动画;
    Loop => 是否循环播放;
    Premuliplied Alpha => 是否使用贴图预乘;
    TimeScale => 播放动画的时间比例系数;
    Debug Slots => 是否显示 Slots的调试信息;
    Debug Bone => 是否显示Bone的调试信息;
  3、sp.Skeleton重要的方法: Skeleton是以管道的模式来播放动画,管道用整数编号,管道可以独立播放动画,Track;
    (1)clearTrack(trackIndex): 清理对应Track的动画
    (2)clearTracks(); 清楚所有Track动画
    (3)setAnimation(trackIndex, “anim_name”, is_loop)清楚管道所有动画后,再从新播放
    (4)addAnimation(trackIndex, “anim_name”, is_loop);往管道里面添加一个动画;

  4、sp.Skeleton的监听方法

    1: setStartListener: 设置动画开始播放的事件;
    2: setEndListener : 设置动画播放完成后的事件;
    3: setCompleteListener: 设置动画一次播放完成后的事件;

cc.Class({
    extends: cc.Component,
    properties: {
        spine: {
            //配置动画资源 注意:这里是sp.SkeletonData
            type: sp.SkeletonData,
            default: null
        }
    },
    onLoad() {
        //调用函数创建节点以及动画组件
        this.create_elem();
        let btn1 = this.node.getChildByName('btn1').getComponent(cc.Button);
        let btn2 = this.node.getChildByName('btn2').getComponent(cc.Button);
        let btn3 = this.node.getChildByName('btn3').getComponent(cc.Button);
        this.bind_click(btn1, 'btn1_click');
        this.bind_click(btn2, 'btn2_click');
        this.bind_click(btn3, 'btn3_click');
        //动画监听
        this.sket.setStartListener(function () {
            console.log('动画开始了');
        });
        this.sket.setEndListener(function () {
            console.log('动画全部完成了');
        });
        this.sket.setCompleteListener(function () {
            console.log('一部份动画完成了');
        })

    },
    start() {
    },
    //创建一下绑定点击事件的方法
    bind_click(con, fn, param) {
        let click_events = new cc.Component.EventHandler();
        click_events.target = this.node;
        click_events.component = 'test_scene';
        click_events.handler = fn;
        param ? click_event.customEventData = param : void 0;
        con.clickEvents.push(click_events);
    },
    btn1_click() {
        this.item.active = true;
        this.sket.clearTrack(0);
        this.sket.setAnimation(0, 'in', false);
        this.sket.addAnimation(0, 'clk_1', false);
    },
    btn2_click() {
        this.item.active = true;
        this.sket.clearTrack(0);
        this.sket.setAnimation(0, 'clk_1', false);
        this.sket.addAnimation(0, 'clk_2', false);
    },
    btn3_click() {
        this.item.active = true;
        this.sket.clearTrack(0);
        this.sket.setAnimation(0, 'clk_3', false);
        this.sket.addAnimation(0, 'out', false);
    },
    //创建节点以及动画组件
    create_elem() {
        this.node.addChild(new cc.Node(), 0, 'ske');
        this.item = this.node.getChildByName('ske');
        this.item.x = -100;
        this.item.y = -300;
        //设置隐藏
        this.item.active = false;
        let sket = this.item.addComponent(sp.Skeleton);
        sket.skeletonData = this.spine;
        sket.premultipliedAlpha = false;
        this.sket = sket;
    }
});

 三、DragonBones 骨骼动画的设置和使用

1、添加DragonBones骨骼动画

  添加空节点 => 在空节点里面添加渲染组件 => DragonBones

cocos creator 动画编辑器以及骨骼动画的使用_第4张图片

 Dragon Asset 表示骨骼信息数据,是一个JSON文件

  Dragon AtlasAsset 表示texture的信息数据

  Armature 表示当前的Armature名称

  Animation 表示当前播放的动画

  Time Scale 表示所有动画的时间缩放率

  Play Times 表示动画的播放次数,默认是-1

  Debug Bones 表示是否显示骨骼的信息

2、通过代码获取骨骼组件

cc.Class({
    extends: cc.Component,
    properties: {
        person: {
            type: dragonBones.ArmatureDisplay,
            default: null
        }
    },
    start() {
        //获取骨骼动画的方式一
        console.log(this.person);
        //获取骨骼动画的方式二
        let node = this.node.getChildByName('person');
        let bones = node.getComponent(dragonBones.ArmatureDisplay);
        console.log(bones);
    }
});

 重要API展示

以下dragonBone表示实例化后的dragonBone对象

let Armature=dragonBone.armature();

播放动画 => Armature.animation.play(name, playtimes) name 表示动画的名称,playtimes表示动画次数如果为0就表示循环播放动画

获取所有动画名称 =>  Armature.animation.animationList  ||  Armature.animation.animationNames

停止指定动画的播放 =>  Armature.animation.stop('stand');

cc.Class({
    extends: cc.Component,
    properties: {
        person: {
            type: dragonBones.ArmatureDisplay,
            default: null
        }
    },
    start() {
        let Armature = this.person.armature();
        let body = Armature.getBone('body');
        //指定对象的翻转
        // body.offset.rotation = 0;
        //获取所有的骨骼
        // console.log(Armature.getBones());
        //获取所有的插槽
        // console.log(Armature.getSlots());
        //图片X轴方向翻转
        // Armature.flipX = true;
        let leg = Armature.getBone('legLeftUp');
        //隐藏指定的骨骼
        // leg.slot.displayIndex = -1;
        //移除骨骼,注意,这里的参数必需是对应的骨骼对象,这里会同时隐藏其子组件的骨骼对象
        // Armature.removeBone(leg);
    }
});

 

 

你可能感兴趣的:(Cocos,Creator学习,动画,骨骼动画,CocosCreator)