SpineView.ts 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import { Color, Component, sp, sys, _decorator } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. /**
  4. * spine动画表现管理
  5. * @author
  6. *
  7. */
  8. @ccclass('SpineView')
  9. export default class SpineView extends Component {
  10. skin:string="default";
  11. @property({ displayName: '待机' })
  12. idle:string = "";
  13. @property({type: sp.Skeleton, tooltip: '角色动画' })
  14. spine:sp.Skeleton = null!;
  15. cur:string =null!;
  16. public OnComp:Function;
  17. private resetColor:Color=Color.WHITE;
  18. onLoad() {
  19. //console.log("111111111111");
  20. //this.spine.enableBatch=false;
  21. if(sys.isNative){//原生共享模式有bug
  22. this.spine.setAnimationCacheMode(sp.AnimationCacheMode.REALTIME);
  23. this.spine.clearTracks();//清理所有播放队列的动画
  24. }
  25. //this.SetSkin(this.skin);
  26. }
  27. start(){
  28. this.DoAnimation(this.idle,true);
  29. this.spine.setCompleteListener(function(){
  30. if(this.OnComp)this.OnComp();
  31. }.bind(this));
  32. }
  33. onBeforeRemove(){
  34. this.spine.setCompleteListener(null);
  35. }
  36. public Dispos():void{
  37. this.ResetColor();
  38. this.OnComp=null;
  39. //this.spine.setCompleteListener(null);
  40. }
  41. public SetSkin(skin:string):void{
  42. this.spine.setSkin(skin);
  43. }
  44. public DoAnimation(animation:string,loop:boolean=true,track:number=0,force:boolean=false){
  45. if(force){
  46. this.spine.setAnimation(track,animation,loop);
  47. return;
  48. }
  49. if(this.cur==animation)return;
  50. this.spine.setAnimation(track,animation,loop);
  51. }
  52. /**设置是否暂停 */
  53. public SetPaused(paused:boolean):void{
  54. this.spine.paused=paused;
  55. }
  56. /**获取是否暂停 */
  57. public GetPaused():boolean{
  58. return this.spine.paused;
  59. }
  60. public CheckPaused(paused:boolean):void{
  61. if(this.spine.paused!=paused)this.spine.paused=paused;
  62. }
  63. /** 闪色表现 Color.RED 0.1*/
  64. public Flash(color:Color,time:number):void{
  65. if(this.spine.color!=color){
  66. this.spine.color=color;
  67. this.unscheduleAllCallbacks();
  68. this.scheduleOnce(()=>{
  69. this.spine.color = this.resetColor;
  70. },time);
  71. }
  72. }
  73. public ChangeMagenta(){
  74. this.ChangeColor(Color.MAGENTA);
  75. }
  76. public ChangeGreen(){
  77. this.ChangeColor(Color.GREEN);
  78. }
  79. public ChangeGray(){
  80. this.ChangeColor(Color.GRAY);
  81. }
  82. public ChangeRed(){
  83. this.ChangeColor(Color.RED);
  84. }
  85. public ChangeCyan(){
  86. this.ChangeColor(Color.CYAN);
  87. }
  88. public ChangeBlack(){
  89. this.ChangeColor(Color.BLACK);
  90. }
  91. public ChangeBule(){
  92. this.ChangeColor(Color.BLUE);
  93. }
  94. public ChangeYellow(){
  95. this.ChangeColor(Color.YELLOW);
  96. }
  97. //
  98. /** 变色表现 Color.RED 0.1*/
  99. public ChangeColor(color:Color):void{
  100. this.resetColor=color;
  101. if(this.spine.color != this.resetColor){
  102. this.spine.color = this.resetColor;
  103. }
  104. }
  105. public ResetColor():void{
  106. this.resetColor = Color.WHITE;
  107. if(this.spine.color != this.resetColor){
  108. this.spine.color = this.resetColor;
  109. }
  110. }
  111. /**
  112. * 缩放动画播放速率
  113. * @override
  114. * @param scale 缩放倍率
  115. */
  116. public scaleTime(scale: number) {
  117. if (scale > 0)
  118. this.spine.timeScale = scale;
  119. }
  120. public getBone(name: string): any {
  121. var bone = this.spine.findBone(name);
  122. return bone
  123. }
  124. /**
  125. * 换装
  126. * @param slotName 插槽名字
  127. * @param attachmentName 元素名字
  128. */
  129. public changeEquipment(slotName:string, attachmentName:string|null=null) {
  130. const slot = this.spine.findSlot(slotName);
  131. if (slot) {
  132. if(attachmentName){
  133. const attachment = this.spine.getAttachment(slotName, attachmentName);
  134. slot.setAttachment(attachment);
  135. }else{
  136. slot.setAttachment(null);
  137. }
  138. }
  139. }
  140. /**换装
  141. * @param skinName 要替换的部件皮肤名称
  142. * @param slotName 要替换的部件的插槽名称
  143. * @param targetAttaName Spine中皮肤占位符的名字
  144. */
  145. public changeSlot(skinName: string, slotName: string, targetAttaName: string):void{
  146. //查找局部皮肤
  147. let skeletonData = this.spine.skeletonData.getRuntimeData();
  148. let targetSkin: sp.spine.Skin = skeletonData.findSkin(skinName);
  149. //查找局部皮肤下的插槽与附件
  150. let targetSkinSlotIndex = skeletonData.findSlotIndex(slotName);
  151. let atta = targetSkin.getAttachment(targetSkinSlotIndex, targetAttaName);
  152. //查找全身皮肤下的插槽
  153. let curSlot = this.spine.findSlot(slotName);
  154. //替换全身皮肤插槽的附件
  155. curSlot && curSlot.setAttachment(atta);
  156. }
  157. }