使用Spine动画的渲染模式以及更改颜色的案例
关于Spine动画的渲染模式和颜色属性描述可参考:CocosCtreator知识点5:2D渲染组件Spine Skeleton详解
源码:
import { _decorator, Color, Component, Label, Node, sp } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Test')
export class Test extends Component {
@property({ type: Label })
runMode: Label = null!;
@property({ type: Label })
tip: Label = null!;
start() {
}
onChangeModel(){
const skelComp = this.node.getComponent(sp.Skeleton);
if (skelComp!.isAnimationCached()) {
skelComp!.setAnimationCacheMode(sp.AnimationCacheMode.REALTIME);
this.runMode.string = 'model:realtime';
try {
let ep = skelComp!.setAnimation(0,"walk",false);
skelComp!.setTrackCompleteListener(ep,()=>{
console.log('walk event complete');
this.tip.string = 'walk event complete';
})
} catch (error) {
console.log(error);
this.tip.string = error;
}
} else {
skelComp!.setAnimationCacheMode(sp.AnimationCacheMode.PRIVATE_CACHE);
this.runMode.string = 'model:cache';
try {
let ep = skelComp!.setAnimation(0,"walk",false);
skelComp!.setTrackCompleteListener(ep,()=>{
console.log('walk event complete');
this.tip.string = 'walk event complete';
})
} catch (error) {
console.log(error);
this.tip.string = error;
}
}
}
private colorCount = 0;
onChangeColor(){
const skelComp = this.node.getComponent(sp.Skeleton);
if (this.colorCount === 0) {
skelComp!.color = new Color(255, 255, 0, 255);
} else if (this.colorCount === 1) {
skelComp!.color = new Color(0, 0, 255, 150);
} else {
skelComp!.color = new Color(179, 245, 170, 255);
}
this.colorCount++;
this.colorCount = this.colorCount % 3;
}
update(deltaTime: number) {
}
}
效果: