CocosCreator3.8研究笔记（二十五）CocosCreator 动画系统-2d骨骼动画spine


大家都知道，在游戏中 一般用帧动画或者骨骼动画，实现 人物的行走、奔跑、攻击等动作。


帧动画，在上一篇已经做了介绍，感兴趣的朋友可以前往阅读： CocosCreator3.8研究笔记（二十四）CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果。


今天，我们主要介绍什么是骨骼动画？Spine 是什么，骨骼动画怎么制作的？怎么使用骨骼动画？

一、什么是骨骼动画？


骨骼动画是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨骼”上，通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。


骨骼动画比帧动画要求更高的处理器性能，但它也有更多的优势：

  • 更少的美术资源： 骨骼动画的资源是一块块小的角色部件（比如：头、手、胳膊、腰等），美术再也不用提供每一帧完整的图片了，节省了资源大小。

  • 更小的体积： 帧动画需要提供每一帧图片。而骨骼动画只需要少量的图片资源，并把骨骼的动画数据保存在一个 json 文件里面（后文会提到），它所占用的空间非常小。

  • 更好的流畅性： 骨骼动画使用差值算法计算中间帧，这能让动画总是保持流畅的效果。

  • 装备附件： 图片绑定在骨骼上来实现动画。如果需要，可以方便的更换角色的装备满足不同的需求。甚至改变角色的样貌来达到动画重用的效果。

  • 不同动画可混合使用： 不同的骨骼动画可以被结合到一起。比如一个角色可以转动头部、射击并且同时也在走路。

  • 程序动画： 可以通过代码控制骨骼，比如可以实现跟随鼠标的射击，注视敌人，或者上坡时的身体前倾等效果。


二、Spine 是什么


Spine是一款针对游戏的2D骨骼动画编辑工具，它具有良好的UI设计和完整的功能，是一个比较成熟的骨骼动画编辑器。

Spine旨在提供更高效和简洁的工作流程，以创建游戏所需的动画。


使用Spine创建骨骼动画分为以下步骤：

（1）、在SETUP模式下，选中Images属性，导入所需图片资源所在文件夹。

​ 注意：路径名和资源名中不能出现中文，否则无法解析。

（2）、拖动Images下的图片到场景，对角色进行组装（把各个身体部位拼在一起），可通过Draw Order属性调整图片所在层的顺序。
（3）、创建骨骼，并绑定图片到骨骼上，要注意各骨骼的父子关系。
（4）、切换到ANIMATE模式，选中要“动”的骨骼，对其进行旋转、移动、缩放等操作，每次改动后要记得打关键帧。
（5）、在菜单栏找到Texture Packer项，对角色纹理进行打包，资源文件后缀为atlas（而非Cocos2d-x常用的plist）

​ 打包后将生成两个文件，即：png 和 atlas。

（6）、导出动画文件Json。


感兴趣的朋友，请查看官方网站教程：Spine快速入门教程。


三、Creator 编辑器中Spine 骨骼动画的使用


Creator 中的骨骼动画资源目前支持 JSON 和 二进制 两种数据格式。

Creator 中创建骨骼动画我们需要使用 Spine Skeleton 组件。

Spine Skeleton 组件支持 Spine 官方工具导出的数据格式，并对 Spine（骨骼动画）资源进行渲染和播放。


1、Spine Skeleton 组件属性说明

属性功能说明
CustomMaterial自定义材质，可用于实现溶解、外发光等渲染效果。
Color设置骨骼动画颜色
SkeletonData骨骼信息数据，拖拽 Spine 导出后的骨骼资源到该属性中
Default Skin选择默认的皮肤
Animation当前播放的动画名称
Animation Cache Mode渲染模式，包括 REALTIME（默认）、SHARED_CACHE 和 PRIVATE_CACHE 三种。 1. REALTIME 模式，实时运算，支持 Spine 所有的功能。 2. SHARED_CACHE 模式，将骨骼动画及贴图数据进行缓存并共享，相当于预烘焙骨骼动画。拥有较高性能，但不支持动作融合和动作叠加，只支持动作开始和结束事件。至于内存方面，当创建 N（N>=3）个相同骨骼、相同动作的动画时，会呈现内存优势。N 值越大，优势越明显。综上 SHARED_CACHE 模式适用于场景动画、特效、副本怪物、NPC 等，能极大提高帧率和降低内存。 3. PRIVATE_CACHE 模式，与 SHARED_CACHE 类似，但不共享动画及贴图数据，且会占用额外的内存，仅存在性能优势，如果大量使用该模式播放动画可能会造成卡顿。若想利用缓存模式的高性能，但又存在换装需求（不能共享贴图数据）时，那么 PRIVATE_CACHE 就适合你。
Loop是否循环播放当前动画
PremultipliedAlpha图片是否启用贴图预乘，默认为 True。 当图片的透明区域出现色块时需要关闭该项，当图片的半透明区域颜色变黑时需要启用该项。
TimeScale当前骨骼中所有动画的时间缩放率
DebugSlots是否显示 Slot 的 Debug 信息
DebugBones是否显示骨骼的 Debug 信息
DebugMesh是否显示 Mesh 的 Debug 信息
UseTint是否开启染色效果，默认关闭。
Sockets用于将某些外部节点挂到指定的骨骼关节上，属性的值表示挂点的数量。
Enable Bacth是否开启 Spine 合批

2、导入骨骼动画资源

骨骼动画所需资源有：

  • .json/.skel 骨骼数据
  • .png 图集纹理
  • .txt/.atlas 图集数据

如图，这是一个飞机的骨骼动画资源：

在这里插入图片描述


我们将其导入cocos creator 资源管理器中：

在这里插入图片描述


3、创建骨骼动画


骨骼动画创建步骤：

（1）、为节点添加 Spine Skeleton 组件

在 层级管理器 中选中需要添加 Spine Skeleton 组件的节点**，然后点击 **属性检查器下方的 添加组件 -> Spine -> Skeleton 按钮，即可添加 Skeleton 组件到节点上。


在这里插入图片描述


在这里插入图片描述


（2）、从 资源管理器 中将骨骼动画资源拖动到 属性检查器 Spine 组件的 SkeletonData 属性中。


注意：要拖动带动作的json文件，如图：

在这里插入图片描述


（3）、在属性检查器中，根据实际情况设置animation 、animation cache 以及 loop 等属性

在这里插入图片描述


注意：

（1）、当使用 Spine Skeleton 组件时，属性检查器 中 Node 组件上的 Anchor 与 Size 属性是无效的。

（2）、Spine Skeleton 组件属于 UI 渲染组件，而 Canvas 节点是 UI 渲染的 渲染根节点，所以带有该组件的节点必须是 Canvas 节点（或者是带有 RenderRoot2D 组件的节点）的子节点才能在场景中正常显示。

（3）、当使用 Spine Skeleton 组件时，由于拥有 UseTint 属性，所以其自定义材质需要有两个颜色信息，否则 Spine 的染色效果可能会出错。


四、代码中Spine 骨骼动画的使用


1、从服务器远程加载文本格式的 Spine 资源

let comp = this.getComponent('sp.Skeleton') as sp.Skeleton;let image = "http://localhost/download/spineres/test/test.png";
let ske = "http://localhost/download/spineres/test/test.json";
let atlas = "http://localhost/download/spineres/test/test.atlas";
assetManager.loadAny([{ url: atlas, ext: '.txt' }, { url: ske, ext: '.txt' }], (error, assets) => {assetManager.loadRemote(image, (error, texture: Texture2D) => {let asset = new sp.SkeletonData();asset.skeletonJson = assets[1];asset.atlasText = assets[0];asset.textures = [texture];asset.textureNames = ['test.png'];skeleton.skeletonData = asset;});
});

2、从服务器远程加载二进制格式的 Spine 资源

let comp = this.getComponent('sp.Skeleton') as sp.Skeleton;let image = "http://localhost/download/spineres/1/test.png";
let ske = "http://localhost/download/spineres/1/test.skel";
let atlas = "http://localhost/download/spineres/1/test.atlas";
assetManager.loadAny([{ url: atlas, ext: '.txt' }, { url: ske, ext: '.bin' }], (error, assets) => {assetManager.loadRemote(image, (error, texture: Texture2D) => {let asset = new sp.SkeletonData();asset._nativeAsset = assets[1];asset.atlasText = assets[0];asset.textures = [texture];asset.textureNames = ['test.png'];asset._uuid = ske; // 可以传入任意字符串，但不能为空asset._nativeURL = ske; // 传入一个二进制路径用作 initSkeleton 时的 filePath 参数使用comp.skeletonData = asset;let ani = comp.setAnimation(0, 'walk', true);});
});

3、加载本地 Spine 资源

import { _decorator, Component, Node, loader, sp, Label } from 'cc';
const { ccclass, property } = _decorator;@ccclass('LoadSpine')
export class LoadSpine extends Component {@property({type:Label})tips:Label| null = null;isLoadedRes = false;start () {// Your initialization goes here.loader.loadRes("spine/alien/alien-pro", sp.SkeletonData, (err, spineAsset)=> {if(err) {this.tips!.string = "Failed to load asset";this.isLoadedRes = true; // AutoTest: Consider loading complete even if loading failedreturn;}let comp = this.getComponent('sp.Skeleton') as sp.Skeleton;comp.skeletonData = spineAsset!;let ani = comp.setAnimation(0, 'run', true);this.tips!.string = 'Load Success';this.isLoadedRes = true;});}// update (deltaTime: number) {//     // Your update function goes here.// }
}

4、动作控制、属性设置、事件监听

import { _decorator, CCClass, Component, sp } from "cc";
const { ccclass, property } = _decorator;@ccclass('SpineCtrl')
export default class SpineCtrl extends Component{mixTime:number= 0.2;private spine?: sp.Skeleton;private _hasStop = true;onLoad () {var spine = this.spine = this.getComponent('sp.Skeleton') as sp.Skeleton;this._setMix('walk', 'run');this._setMix('run', 'jump');this._setMix('walk', 'jump');spine.setStartListener(trackEntry => {var animationName = trackEntry.animation ? trackEntry.animation.name : "";console.log("[track %s][animation %s] start.", trackEntry.trackIndex, animationName);});spine.setInterruptListener(trackEntry => {var animationName = trackEntry.animation ? trackEntry.animation.name : "";console.log("[track %s][animation %s] interrupt.", trackEntry.trackIndex, animationName);});spine.setEndListener(trackEntry => {var animationName = trackEntry.animation ? trackEntry.animation.name : "";console.log("[track %s][animation %s] end.", trackEntry.trackIndex, animationName);});spine.setDisposeListener(trackEntry => {var animationName = trackEntry.animation ? trackEntry.animation.name : "";console.log("[track %s][animation %s] will be disposed.", trackEntry.trackIndex, animationName);});spine.setCompleteListener((trackEntry) => {var animationName = trackEntry.animation ? trackEntry.animation.name : "";if (animationName === 'shoot') {this.spine!.clearTrack(1);}var loopCount = Math.floor(trackEntry.trackTime / trackEntry.animationEnd);console.log("[track %s][animation %s] complete: %s", trackEntry.trackIndex, animationName, loopCount);});spine.setEventListener(((trackEntry:any, event:any) => {var animationName = trackEntry.animation ? trackEntry.animation.name : "";console.log("[track %s][animation %s] event: %s, %s, %s, %s", trackEntry.trackIndex, animationName, event.data.name, event.intValue, event.floatValue, event.stringValue);}) as any);this._hasStop = false;}// OPTIONStoggleDebugSlots () {this.spine!.debugSlots = !this.spine?.debugSlots;}toggleDebugBones () {this.spine!.debugBones = !this.spine?.debugBones;}toggleDebugMesh () {this.spine!.debugMesh = !this.spine?.debugMesh;}toggleUseTint () {this.spine!.useTint = !this.spine?.useTint;}toggleTimeScale () {if (this.spine!.timeScale === 1.0) {this.spine!.timeScale = 0.3;}else {this.spine!.timeScale = 1.0;}}// ANIMATIONSstop () {this.spine?.clearTrack(0);this._hasStop = true;}walk () {if (this._hasStop) {this.spine?.setToSetupPose();}this.spine?.setAnimation(0, 'walk', true);this._hasStop = false;}run () {if (this._hasStop) {this.spine?.setToSetupPose();}this.spine?.setAnimation(0, 'run', true);this._hasStop = false;}jump () {if (this._hasStop) {this.spine?.setToSetupPose();}this.spine?.setAnimation(0, 'jump', true);this._hasStop = false;}shoot () {this.spine?.setAnimation(1, 'shoot', false);}idle () {this.spine?.setToSetupPose();this.spine?.setAnimation(0, 'idle', true);}portal () {this.spine?.setToSetupPose();this.spine?.setAnimation(0, 'portal', false);}//_setMix (anim1: string, anim2: string) {this.spine?.setMix(anim1, anim2, this.mixTime);this.spine?.setMix(anim2, anim1, this.mixTime);}
}

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入学习JUC，深入了解Java线程中死锁与活锁问题，并理解其解决方法，笔记开记！！！

深入学习JUC，深入了解Java线程中死锁与活锁问题，并理解其解决方法，笔记开记！！！

文章目录 死锁检查是否发生了死锁死锁的概念死锁产生的条件预防死锁解决死锁 活锁概念解决 ReentrantLock概念可重入可打断可超时可设置公平锁条件变量 死锁 检查是否发生了死锁 jstack通过 线程栈快照 定位线程中出现长时间停顿的原因, jconsole 图像界面 检查是否发生了死锁…
阅读更多...
【算法训练-二分查找 一】【基本二分】二分查找、在排序数组中查找元素的第一个和最后一个位置

【算法训练-二分查找 一】【基本二分】二分查找、在排序数组中查找元素的第一个和最后一个位置

废话不多说，喊一句号子鼓励自己：程序员永不失业，程序员走向架构！本篇Blog的主题是螺旋矩阵，使用【二维数组】这个基本的数据结构来实现 二分查找【EASY】 从最简单的二分查找入手，进而开始解决一系列其变体…
阅读更多...
c语言实现玫瑰花

c语言实现玫瑰花

浅浅跟波风 1.效果图 2.代码实现 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <math.h>const int max_iterations 128; const float stop_threshold 0.01f; const float grad_step 0.01f; const float clip_far 10.0f;const float PI 3.1…
阅读更多...
力扣第 365 场周赛虚拟参赛

力扣第 365 场周赛虚拟参赛

有序三元组中的最大值 I class Solution { public:long long maximumTripletValue(vector<int>& nums) {vector<long long> num;for (auto &item:nums) {num.push_back(item*1ll);}long long z 0,f 1000000;long long ans 0;long long maxx num[0],mi…
阅读更多...
pytest自动化框架运行全局配置文件pytest.ini

pytest自动化框架运行全局配置文件pytest.ini

还记得在之前的篇章中有讲到Pytest是目前主要流行的自动化框架之一&#xff0c;他有基础的脚本编码规则以及两种运行方式。 pytest的基础编码规则是可以进行修改&#xff0c;这就是今日文章重点。 看到这大家心中是否提出了两个问题&#xff1a;pytest的基础编码规则在哪可以…
阅读更多...
【题库】咸鱼之王答题挑战题库大全

【题库】咸鱼之王答题挑战题库大全

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] [{name: , value: 未匹配到内容},# 第一期{name: 《三国演义》中&#xff0c;「大意失街亭」的是马谩&#xff1f;, value: 对},{name: 《三国演义》中&#xff0c;「挥泪斩马谩」的是孙权&#xff1f;, value: 错…
阅读更多...
ElementUI之动态树+数据表格+分页

ElementUI之动态树+数据表格+分页

目录 一、动态树 1.1 定义 1.2 导航菜单绑定 1.3 面板内容 1.4 效果展示 二、动态表格 2.1 定义 2.2 搜索框 2.3 数据表格 2.4 分页条 2.5 功能实现 一、动态树 1.1 定义 动态树通常是指在网页或应用程序中创建可展开和折叠的树形结构&#xff0c;其中树的节点是动…
阅读更多...
蓝桥杯每日一题2023.10.4

蓝桥杯每日一题2023.10.4

双向排序 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 六十分解法如下&#xff1a;按照题意简单排序 #include<bits/stdc.h> using namespace std; const int N 2e5 10; int n, m, p, q, a[N]; bool cmp(int x, int y) {return x > y; } int main() {cin >&g…
阅读更多...
Ubuntu22.04 交叉编译gcc9.5 for arm

Ubuntu22.04 交叉编译gcc9.5 for arm

一、准备 环境&#xff1a;ubuntu22.04为刚刚安装&#xff0c;未安装gcc等包 vi ~/.bashrc输入 export PATH$PATH:/opt/gcc-arm-8.3-2019.03-x86_64-arm-linux-gnueabihf/bin 保存,reboot 安装&#xff1a; sudo apt install cmake sudo apt install gawk sudo apt instal…
阅读更多...
公众号突破2个限制技巧

公众号突破2个限制技巧

许多用户在注册公众号时可能会遇到“公众号显示主体已达上限”的问题。这是因为在2018年11月16日对公众号注册数量进行了调整&#xff0c;具体调整如下&#xff1a;1、个人主体注册公众号数量上限从2个调整为1个。2、企业主体注册公众号数量上限从5个调整为2个。这意味着&#…
阅读更多...
WebSocket实战之六心跳重连机制

WebSocket实战之六心跳重连机制

一、前言 WebSocket应用部署到生产环境&#xff0c;我们除了会碰到因为经过代理服务器无法连接的问题&#xff08;注&#xff1a;该问题可以通过搭建WSS来解决&#xff0c;具体配置请看 WebSocket实战之四WSS配置 &#xff09;&#xff0c;另外一个问题就是外网环境不稳定经常…
阅读更多...
Windows安装Docker并创建Ubuntu环境及运行神经网络模型

Windows安装Docker并创建Ubuntu环境及运行神经网络模型

目录 前言在Windows上安装Docker在Docker上创建Ubuntu镜像并运行容器创建Ubuntu镜像配置容器&#xff0c;使其可以在宿主机上显示GUI 创建容器并运行神经网络模型创建容器随便找一个神经网络模型试试 总结 前言 学生党一般用个人电脑玩神经网络&#xff0c;估计很少有自己的服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023