当前位置:网站首页>Cocoscreator operates spine for animation fusion
Cocoscreator operates spine for animation fusion
2022-07-07 14:42:00 【Snail games】
Animation fusion
When there are multiple animations on a bone , We can use sp.setAnimation() Play animation
however , Use it directly sp.setAnimation() When playing , There will be a problem of rigid animation switching , This kind of trace affects the experience of the game , So based on the spine stay Cocos Medium API We can fuse the two animations
What is animation fusion
As can be seen in the picture Idle and Walking There is overlap between , The red line is the switching action time , The action switching time is between the red and green lines , The animation between them is Idle And Walking Mixing , There will be a smooth transition between these two animations
Fusion code implementation ( Jane , No weight )
First use an animation playback pipeline to play an animation
this.spine_node.setAnimation(0, 'Idle', true);
Here I get Idle The animation time of
getAnimationTimeByName() I inherited it sp.Skeleton Custom methods , Mount in the project spine This inheritance class will be used everywhere
const time = this.spine_node.getAnimationTimeByName('Idle');
/**
* Get animation time
* @param name Animation name
* @returns Return to animation duration s
*/
public getAnimationTimeByName(name: string) {
const state = this.getState();
if (state == undefined) throw `[ERROR SPINE ANIMATION] Unable to get animation status >`;
const { animations } = state.data.skeletonData;
let result = 0;
for (const key in animations) {
if (Object.prototype.hasOwnProperty.call(animations, key)) {
const element = animations[key];
if (element.name == name) {
result = element.duration;
}
}
}
return result;
}
Still play Idle Animated pipeline , Add Walking Animation , And delay two Idle Play after animation time ( Time can be customized , His unit is seconds )
this.spine_node.addAnimation(0, 'Walking', true, time * 2);
The last thing to do is mix , This step is to generate the part between the red and green lines
time It refers to the time between the red and green lines , In this case, it means , stay Idle Mix after the first period of playback Walking Animation , Produce a smooth transition
this.spine_node.setMix('Idle', 'Walking', time);
Complete code
this.spine_node.clearTracks();
this.spine_node.setAnimation(0, 'Idle', true);
const time = this.spine_node.getAnimationTimeByName('Idle');
this.spine_node.addAnimation(0, 'Walking', true, time * 2);
this.spine_node.setMix('Idle', 'Walking', time);
边栏推荐
- 一文读懂数仓中的pg_stat
- Pert diagram (engineering network diagram)
- electron remote 报错
- 【愚公系列】2022年7月 Go教学课程 005-变量
- Applet directory structure
- Mmkv use and principle
- 【服务器数据恢复】某品牌StorageWorks服务器raid数据恢复案例
- JS get the current time, month, day, year, and the uniapp location applet opens the map to select the location
- AWS learning notes (III)
- LeetCode 648. 单词替换
猜你喜欢
Substance painter notes: settings for multi display and multi-resolution displays
【愚公系列】2022年7月 Go教学课程 005-变量
Pert diagram (engineering network diagram)
[Yugong series] go teaching course 005 variables in July 2022
Pytorch model trains practical skills and breaks through the bottleneck of speed
Infinite innovation in cloud "vision" | the 2022 Alibaba cloud live summit was officially launched
How bad can a programmer be? Nima, they are all talents
STM32CubeMX,68套组件,遵循10条开源协议
什么是云原生?这回终于能搞明白了!
多商戶商城系統功能拆解01講-產品架構
随机推荐
JS get the current time, month, day, year, and the uniapp location applet opens the map to select the location
Simple steps for modifying IP of sigang electronic scale
回归测试的分类
STM32CubeMX,68套组件,遵循10条开源协议
PD虚拟机教程:如何在ParallelsDesktop虚拟机中设置可使用的快捷键?
How bad can a programmer be? Nima, they are all talents
潘多拉 IOT 开发板学习(HAL 库)—— 实验12 RTC实时时钟实验(学习笔记)
Webrtc audio anti weak network technology (Part 1)
PD virtual machine tutorial: how to set the available shortcut keys in the parallelsdesktop virtual machine?
Nllb-200: meta open source new model, which can translate 200 languages
Find your own value
AWS学习笔记(三)
Bashrc and profile
The longest ascending subsequence model acwing 1014 Mountaineering
因员工将密码设为“123456”,AMD 被盗 450Gb 数据?
Shengteng experience officer Episode 5 notes I
激光雷达lidar知识点滴
Oracle Linux 9.0 officially released
Cascading update with Oracle trigger
LeetCode 648. Word replacement