三种方式,浅谈 Cocos Creator 的动画添加

前言

虽然 Cocos 的官方文档对动画系统做了较详细的介绍,但是对于刚接触的同学(比如我)来说还是不太友好。尽管如此,我就按文档加社区帖子一起实践了一下。为了方便忘记后能快速捡起,所以就用我的方式结合使用场景,简单介绍一下 Cocos Creator 动画添加的三种方式。

属性动画

这个是 Cocos Creator 动画系统自带的一种对节点进行标准位移、旋转、缩放动画操作。可以用来制作一些按钮加亮,引导之类的业务型动画。

创建节点并挂载 “Animation” 组件

添加组件 > 其他组件 > Animation,然后打开动画编辑器,再点击 “新建 Clip 文件”,保存后放在 "assets" 下 "animations",后缀为.anim 的文件。

动画编辑

进入编辑后,找到属性列表,点击 “Add Property”,选择列表的 “position,width,coclor” 等属性,点击右侧菜单按钮,可以插入关键帧,删除关键帧,清空关键帧等,添加一帧就可以在属性检查器对应节点的属性进行调节。

挂载动画剪辑

将已经编辑好的动画剪辑文件 (.anim 后缀),拖入到节点动画组件的 animation-clip 或 Default Clip 中。

脚本控制

创建 ts 文件,将以下代码的脚本挂载到与动画相同的节点上(当然也可以制作预设体)。

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    onLoad () {
		var anim = this.getComponent(cc.Animation);
		// start_btn_dance 动画剪辑名称
		anim.play('start_btn_dance');
	}

    start () {
		
    }

    // update (dt) {}
}

序列帧动画

帧动画也是 Cocos Creator 自带的编辑功能,就是在指定时间内循环各种动作或样式的图片,当然前期要准备好序列帧图片放到 assets 下。

创建 Animation 组件和动画剪辑

这部分和上面的属性动画操作一样

动画编辑

这里在属性列表 Add Property 要选择 “cc.Sprite.spriteFrame”,然后将资源里的序列图片一张一张放入关键帧里。

脚本控制

如果只是用于播放动画的和上面的也一样,但是动画事件需要分开说一下。

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    onLoad () {
		// 获取当前节点动画组件
		var anim = this.getComponent(cc.Animation);
		// 播放指定动画剪辑
		anim.play('monster');
		
		//this.node.on('onAnimCompleted', this.onAnimCompleted, this);
	}

	// 动画事件,接收两个参数
	onAnimCompleted(num, str) {
		console.log("start anim completed end~");
		console.log(num);
		console.log(str);
        //console.log('onAnimCompleted: param1[%s], param2[%s]', num, string);
        //console.log('onAnimCompleted: this is a test event12345' + num);
    }
}

动画事件

确切的说应该是动画帧事件,就是在指定帧上添加一个事件(可以预留参数),当播放到该帧时触发。当前触发是在脚本里控制,这种一般用来做比如一个角色击杀时,要触发一个大招特效动画等。

第三方工具动画

通过第三方的工具制作动画后导入到 Cocos Creator, 官方提供对 Spine 和 DragonBones 的支持。下面以 Spine 为例,从工具内导出,到 Cocos 脚本控制进行演示。

Spine 导出

可以直接用工具提供的示例,然后选择导出,注意是 json 格式文件。

Cocos Creator 导入

将上面从 Spine 导出的三个文件整成一文件夹放入 cocos 项目下 assets 的资源下,然后找到后缀 json 文件拖入层级管理器中。

脚本控制

因为在 Spine 已经做好了动画,皮肤和帧事件,所以脚本也就是对动画的播放,操作换肤和事件回调等。

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    onLoad () {
        var anim = this.getComponent(sp.Skeleton);

        // 清空动画管道
        //anim.clearTracks();

        // 添加动作
        anim.addAnimation(0, 'run', true, 0);
        /*anim.addAnimation(0, 'walk', false, 0);
        anim.addAnimation(0, 'jump', false, 0);
        anim.addAnimation(0, 'idle', false, 0);
        anim.addAnimation(0, 'head-turn', false, 0);
        anim.addAnimation(0, 'fall', false, 0);
        anim.addAnimation(0, 'crouch', false, 0);
        anim.addAnimation(0, 'attack', false, 0);*/

        // 停止动画
        /*let SpEnt: sp.spine.TrackEntry = anim.setAnimation(0, 'run', false);
        SpEnt.animationStart = SpEnt.animationEnd;*/

        // 换肤
        //anim.setSkin("default");

        // 监听动画开始
        anim.setStartListener(function () {
            console.log("animate start~");
        }.bind(this));

        // 监听动画结束
        anim.setCompleteListener(function () {
            console.log('animater end~');
        }.bind(this));

	}
	
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/475056.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大屏页面 电子数字 制作

字体包下载地址 链接: https://pan.baidu.com/s/1pjslpT5QQi7-oALDM-uX8g 提取码: zxcv 效果展示 使用前使用后 使用方式 1.解压后将文件夹放入public 2.在公用样式中加入 font-face {font-family: mFont;src: url(../../public/DS-Digital/DS-DIGI-1.ttf); } 3. 在项目…

【ONE·基础算法 || 位运算】

总言 主要内容:编程题举例,理解位运算的思想。 文章目录 总言1、常见位运算总结1.1、基础位运算1.2、位图思想1.2.1、给一个数n,确定它的二进制表示中的第x位是0还是11.2.2、将一个数n的二进制表示的第x位修改成 11.2.3、将一个数n的二进制表…

管理公司员工上网行为的软件都有哪些?

随着互联网的飞速发展,企业面临的网络安全威胁也日益加剧。为了保护企业数据安全、提高工作效率,上网行为管理系统及其相关管理软件应运而生。 未来,随着技术的不断进步和网络安全威胁的不断演变,上网行为管理系统及其管理软件将不…

【Unity】Plastic云同步总是password error

【背景】 Plastic是Unity的项目版本控制功能,可以方便在多个地点同步项目进度。原本用得挺爽的,结果今天遇到糟心事,明明Hub也正常登着,可Plastic的一个update的dll就是不停反复运行并报Password invalid。 【问题分析】 听说I…

CClinkie转Devicenet网关在现场的案例

CClinkie转Devicenet网关在现场的案例 随着工业自动化的不断发展,不同的通讯协议在工厂现场设备之间传输数据显得尤为重要。然而,不同的设备可能支持不同的通讯协议,这为设备之间的互操作性带来了挑战。在这种情况下,网关设备应运…

linux终端下vi文本编辑器的基础使用方法

一、linux终端下vi文本编辑器的基础使用方法: 下面将提供一些在Linux终端中使用vi或vim(vi的增强版)的基础操作方法: 1.打开文件: vi filename.txt 如果文件存在,则打开该文件;如果不存在&a…

力扣爆刷第101天之hot100五连刷91-95

力扣爆刷第101天之hot100五连刷91-95 文章目录 力扣爆刷第101天之hot100五连刷91-95一、62. 不同路径二、64. 最小路径和三、5. 最长回文子串四、1143. 最长公共子序列五、72. 编辑距离 一、62. 不同路径 题目链接:https://leetcode.cn/problems/unique-paths/desc…

机器人路径规划:基于冠豪猪优化算法(Crested Porcupine Optimizer,CPO)的机器人路径规划(提供MATLAB代码)

一、机器人路径规划介绍 移动机器人(Mobile robot,MR)的路径规划是 移动机器人研究的重要分支之,是对其进行控制的基础。根据环境信息的已知程度不同,路径规划分为基于环境信息已知的全局路径规划和基于环境信息未知或…

Python代码规范化

什么是代码规范化? 代码的规范化书写是指按照一定的规范和标准编写代码,使得代码结构清晰、易于阅读和理解。 代码规范化的意义 Python代码规范化的意义在于提高代码可读性、可维护性和可重用性,从而使代码更易于理解、调试和协作&#xff0c…

QKSMS:安卓开源短信应用的替代之选

QKSMS:安卓开源短信应用的替代之选 1. 引言 QKSMS是一个开源的安卓短信应用,旨在取代安卓系统自带的短信应用。它目前可以在Google Play商店和F-Droid上获取,并被誉为安卓平台上最美观的短信应用之一。本文将介绍QKSMS的特点、功能和优势&am…

一分钟了解自动化测试【建议收藏】

引子 写在最前面:目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论已经层出不穷,但是,能够明白自动化测试并很好落地实施的团队还不是非常多,我们接来下用通俗的方式来介绍自动化测试…… 本文共有2410…

TouchGFX之性能测量

TouchGFX Core开放了几个信号,可用于测量性能。 当这些信号在内部触发时,用户可在应用程序中同步触发单个GPIO,从而实现“渲染时间”和其他有用信号的可视化。 信号在GPIO.hpp中定义 /* 用于操作GPIO的接口类,以便在目标硬件上进…

中通快递邀您参观2024杭州快递物流供应链与技术装备展览会

2024.7.8-10 杭州国际博览中心 科技创新,数字赋能 同期举办:数字物流技术展 新能源商用车及物流车展 电商物流包装展 冷链物流展 展会介绍 深度布局产业集群,加速赋能科技创新2024长三角快递物流展是亚洲范围内超大规模的快递物流业展示平…

plasmo开发浏览器插件MAIN模式的content脚本和普通模式content脚本通讯方案

plasmo是一个很棒的开发浏览器插件的框架,可以使用react和vue等语言开发,也是目前github上star数量最多的开发浏览器插件的框架。 github仓库地址:GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework 官网地址&…

每秒批量插入10000条数据到MySQL中,资源消耗(带宽、IOPS)有多少?

文章目录 🔊博主介绍🥤本文内容起因代码资源情况改造 📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、…

使用Cpolar异地组网,在vscode上ssh远程开发ubuntu主机

目录 开发环境 操作流程 参考资料 在机器人被搬到另一个屋之后,通过局域网进行ssh开发就变成了个困难的问题。因此尝试了异地组网来解决这个问题,看了一些资料后发现基于cpolar进行异地组网也不困难,这里记录一下步骤。 开发环境 硬件&…

onlyoffice创建excel文档

前提 安装好onlyoffice然后尝试api开发入门 编写代码 <html> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0"&…

在Linux环境底下 用C语言执行Python程序

在Linux环境底下 用C语言执行Python程序 文章目录 在Linux环境底下 用C语言执行Python程序1、环境安装&检测2、C语言调用Python语句2.1 直接调用python语句2.2 调用无参python函数2.3 调用有参python函数 1、环境安装&检测 通过C语言调用Python代码&#xff0c;需要先安…

贝尔曼方程【Bellman Equation】

强化学习笔记 主要基于b站西湖大学赵世钰老师的【强化学习的数学原理】课程&#xff0c;个人觉得赵老师的课件深入浅出&#xff0c;很适合入门. 第一章 强化学习基本概念 第二章 贝尔曼方程 文章目录 强化学习笔记一、状态值函数贝尔曼方程二、贝尔曼方程的向量形式三、动作值…

鸿蒙开发之导航栏tabs(类似Android tablayout)

当页面信息较多时&#xff0c;为了让用户能够聚焦于当前显示的内容&#xff0c;需要对页面内容进行分类&#xff0c;提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换&#xff0c;一方面提升查找信息的效率&#xff0c;另一方面精简用户单次获取到的信息量…