DamageNumberAni.ts 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import { _decorator, Component, Node, Label, Vec3, tween, Tween, UITransform, UIOpacity, instantiate, resources, Prefab, Color, find } from 'cc';
  2. import { EnemyController } from '../CombatSystem/EnemyController';
  3. const { ccclass, property } = _decorator;
  4. /**
  5. * 伤害数字动画组件
  6. * 实现伤害数字从小变大再缩小消失的动画效果
  7. * 可挂载到EnemyController节点上,通过装饰器获取EnemyController组件
  8. */
  9. @ccclass('DamageNumberAni')
  10. export class DamageNumberAni extends Component {
  11. @property({ type: EnemyController, tooltip: 'EnemyController组件引用' })
  12. private enemyController: EnemyController = null;
  13. @property({ type: Node, tooltip: 'GameArea节点引用' })
  14. private gameArea: Node = null;
  15. @property({ type: Prefab, tooltip: 'DamageNumber预制体引用' })
  16. private damageNumberPrefab: Prefab = null;
  17. onLoad() {
  18. // 自动获取同节点上的EnemyController组件
  19. if (!this.enemyController) {
  20. this.enemyController = this.getComponent(EnemyController);
  21. }
  22. // 只有在需要使用EnemyController功能时才报错
  23. // 动态创建的伤害数字节点不需要EnemyController组件
  24. if (!this.enemyController && this.damageNumberPrefab) {
  25. console.warn('[DamageNumberAni] 未找到EnemyController组件,某些功能可能不可用');
  26. }
  27. }
  28. /**
  29. * 创建并显示伤害数字
  30. * @param damage 伤害值
  31. * @param worldPosition 世界坐标位置(敌人头顶)
  32. * @param isCritical 是否暴击
  33. */
  34. public showDamageNumber(damage: number, worldPosition: Vec3, isCritical: boolean = false) {
  35. // 检查预制体引用
  36. if (!this.damageNumberPrefab) {
  37. console.error('[DamageNumberAni] DamageNumber预制体引用未设置');
  38. return;
  39. }
  40. // 实例化伤害数字节点
  41. const damageNode = instantiate(this.damageNumberPrefab);
  42. // 使用装饰器引用的GameArea节点
  43. if (!this.gameArea) {
  44. console.error('[DamageNumberAni] GameArea节点引用未设置');
  45. damageNode.destroy();
  46. return;
  47. }
  48. // 添加到GameArea
  49. this.gameArea.addChild(damageNode);
  50. // 转换世界坐标到GameArea的本地坐标
  51. const gameAreaTransform = this.gameArea.getComponent(UITransform);
  52. if (gameAreaTransform) {
  53. const localPos = gameAreaTransform.convertToNodeSpaceAR(worldPosition);
  54. // 稍微向上偏移,显示在敌人头顶
  55. localPos.y += 30;
  56. damageNode.position = localPos;
  57. }
  58. // 设置伤害数字文本
  59. const label = damageNode.getComponent(Label);
  60. if (label) {
  61. label.string = Math.floor(damage).toString();
  62. // 暴击时使用不同颜色
  63. if (isCritical) {
  64. label.color = Color.YELLOW; // 暴击显示黄色
  65. label.fontSize = 24; // 暴击字体更大
  66. } else {
  67. label.color = Color.WHITE; // 普通伤害白色
  68. label.fontSize = 20;
  69. }
  70. }
  71. // 将DamageNumberAni组件添加到伤害数字节点
  72. const aniComponent = damageNode.addComponent(DamageNumberAni);
  73. aniComponent.playAnimation(isCritical);
  74. }
  75. /**
  76. * 静态方法保持兼容性,但推荐使用实例方法
  77. * @param damage 伤害值
  78. * @param worldPosition 世界坐标位置(敌人头顶)
  79. * @param isCritical 是否暴击
  80. */
  81. public static showDamageNumber(damage: number, worldPosition: Vec3, isCritical: boolean = false) {
  82. // 尝试找到EnemyController节点上的DamageNumberAni组件
  83. const enemyControllerNode = find('Canvas/GameLevelUI/EnemyController');
  84. if (enemyControllerNode) {
  85. const damageAni = enemyControllerNode.getComponent(DamageNumberAni);
  86. if (damageAni) {
  87. damageAni.showDamageNumber(damage, worldPosition, isCritical);
  88. return;
  89. }
  90. }
  91. console.warn('[DamageNumberAni] 未找到挂载的DamageNumberAni组件,请确保组件已挂载到EnemyController节点');
  92. }
  93. /**
  94. * 播放伤害数字动画
  95. * @param isCritical 是否暴击
  96. */
  97. private playAnimation(isCritical: boolean = false) {
  98. // 初始状态:缩放为0,透明度为1
  99. this.node.setScale(0, 0, 1);
  100. const uiTransform = this.node.getComponent(UITransform);
  101. const uiOpacity = this.node.getComponent(UIOpacity);
  102. if (uiOpacity) {
  103. uiOpacity.opacity = 255;
  104. }
  105. // 动画参数
  106. const maxScale = isCritical ? 1.3 : 1.0; // 暴击时放大更多
  107. const growDuration = 0.2; // 放大阶段持续时间
  108. const stayDuration = 0.3; // 停留时间
  109. const shrinkDuration = 0.4; // 缩小消失时间
  110. const floatDistance = 50; // 向上漂浮距离
  111. // 第一阶段:从0放大到最大尺寸(从底部开始放大)
  112. tween(this.node)
  113. .to(growDuration, {
  114. scale: new Vec3(maxScale, maxScale, 1)
  115. }, {
  116. easing: 'backOut' // 弹性效果
  117. })
  118. .call(() => {
  119. // 第二阶段:保持大小,开始向上漂浮并逐渐缩小透明
  120. const startPos = this.node.position.clone();
  121. const endPos = startPos.clone();
  122. endPos.y += floatDistance;
  123. // 位置动画
  124. tween(this.node)
  125. .to(stayDuration + shrinkDuration, {
  126. position: endPos
  127. }, {
  128. easing: 'sineOut'
  129. })
  130. .start();
  131. // 延迟后开始缩小和淡出
  132. tween(this.node)
  133. .delay(stayDuration)
  134. .to(shrinkDuration, {
  135. scale: new Vec3(0.3, 0.3, 1)
  136. }, {
  137. easing: 'sineIn'
  138. })
  139. .start();
  140. // 透明度动画
  141. if (uiOpacity) {
  142. tween(uiOpacity)
  143. .delay(stayDuration)
  144. .to(shrinkDuration, {
  145. opacity: 0
  146. }, {
  147. easing: 'sineIn'
  148. })
  149. .call(() => {
  150. // 动画完成,销毁节点
  151. if (this.node && this.node.isValid) {
  152. this.node.destroy();
  153. }
  154. })
  155. .start();
  156. }
  157. })
  158. .start();
  159. }
  160. onDestroy() {
  161. // 清理所有tween动画
  162. Tween.stopAllByTarget(this.node);
  163. const uiTransform = this.node.getComponent(UITransform);
  164. const uiOpacity = this.node.getComponent(UIOpacity);
  165. if (uiTransform) {
  166. Tween.stopAllByTarget(uiTransform);
  167. }
  168. if (uiOpacity) {
  169. Tween.stopAllByTarget(uiOpacity);
  170. }
  171. }
  172. }