DamageNumberAni.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  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. @property({ type: Prefab, tooltip: 'EnemyLabel预制体引用' })
  18. private enemyLabelPrefab: Prefab = null;
  19. onLoad() {
  20. // 自动获取同节点上的EnemyController组件
  21. if (!this.enemyController) {
  22. this.enemyController = this.getComponent(EnemyController);
  23. }
  24. // 只有在需要使用EnemyController功能时才报错
  25. // 动态创建的伤害数字节点不需要EnemyController组件
  26. if (!this.enemyController && this.damageNumberPrefab) {
  27. console.warn('[DamageNumberAni] 未找到EnemyController组件,某些功能可能不可用');
  28. }
  29. }
  30. /**
  31. * 创建并显示伤害数字
  32. * @param damage 伤害值
  33. * @param worldPosition 世界坐标位置(敌人头顶)
  34. * @param isCritical 是否暴击
  35. */
  36. public showDamageNumber(damage: number, worldPosition: Vec3, isCritical: boolean = false) {
  37. // 检查预制体引用
  38. if (!this.damageNumberPrefab) {
  39. console.error('[DamageNumberAni] DamageNumber预制体引用未设置');
  40. return;
  41. }
  42. // 实例化伤害数字节点
  43. const damageNode = instantiate(this.damageNumberPrefab);
  44. // 使用装饰器引用的GameArea节点
  45. if (!this.gameArea) {
  46. console.error('[DamageNumberAni] GameArea节点引用未设置');
  47. damageNode.destroy();
  48. return;
  49. }
  50. // 添加到GameArea
  51. this.gameArea.addChild(damageNode);
  52. // 转换世界坐标到GameArea的本地坐标
  53. const gameAreaTransform = this.gameArea.getComponent(UITransform);
  54. if (gameAreaTransform) {
  55. const localPos = gameAreaTransform.convertToNodeSpaceAR(worldPosition);
  56. // 稍微向上偏移,显示在敌人头顶
  57. localPos.y += 30;
  58. damageNode.position = localPos;
  59. }
  60. // 设置伤害数字文本
  61. const label = damageNode.getComponent(Label);
  62. if (label) {
  63. // 显示精确的伤害值,保留一位小数(如果有小数部分)
  64. const damageText = damage % 1 === 0 ? damage.toString() : damage.toFixed(1);
  65. label.string = damageText;
  66. // 暴击时使用不同颜色
  67. if (isCritical) {
  68. label.color = Color.YELLOW; // 暴击显示黄色
  69. label.fontSize = 24; // 暴击字体更大
  70. } else {
  71. label.color = Color.WHITE; // 普通伤害白色
  72. label.fontSize = 20;
  73. }
  74. }
  75. // 将DamageNumberAni组件添加到伤害数字节点
  76. const aniComponent = damageNode.addComponent(DamageNumberAni);
  77. aniComponent.playAnimation(isCritical);
  78. }
  79. /**
  80. * 静态方法保持兼容性,但推荐使用实例方法
  81. * @param damage 伤害值
  82. * @param worldPosition 世界坐标位置(敌人头顶)
  83. * @param isCritical 是否暴击
  84. */
  85. public static showDamageNumber(damage: number, worldPosition: Vec3, isCritical: boolean = false) {
  86. // 尝试找到EnemyController节点上的DamageNumberAni组件
  87. const enemyControllerNode = find('Canvas/GameLevelUI/EnemyController');
  88. if (enemyControllerNode) {
  89. const damageAni = enemyControllerNode.getComponent(DamageNumberAni);
  90. if (damageAni) {
  91. damageAni.showDamageNumber(damage, worldPosition, isCritical);
  92. return;
  93. }
  94. }
  95. console.warn('[DamageNumberAni] 未找到挂载的DamageNumberAni组件,请确保组件已挂载到EnemyController节点');
  96. }
  97. /**
  98. * 播放伤害数字动画
  99. * @param isCritical 是否暴击
  100. */
  101. private playAnimation(isCritical: boolean = false) {
  102. // 初始状态:缩放为0,透明度为1
  103. this.node.setScale(0, 0, 1);
  104. const uiTransform = this.node.getComponent(UITransform);
  105. const uiOpacity = this.node.getComponent(UIOpacity);
  106. if (uiOpacity) {
  107. uiOpacity.opacity = 255;
  108. }
  109. // 动画参数
  110. const maxScale = isCritical ? 1.3 : 1.0; // 暴击时放大更多
  111. const growDuration = 0.2; // 放大阶段持续时间
  112. const stayDuration = 0.3; // 停留时间
  113. const shrinkDuration = 0.4; // 缩小消失时间
  114. const floatDistance = 50; // 向上漂浮距离
  115. // 第一阶段:从0放大到最大尺寸(从底部开始放大)
  116. tween(this.node)
  117. .to(growDuration, {
  118. scale: new Vec3(maxScale, maxScale, 1)
  119. }, {
  120. easing: 'backOut' // 弹性效果
  121. })
  122. .call(() => {
  123. // 第二阶段:保持大小,开始向上漂浮并逐渐缩小透明
  124. const startPos = this.node.position.clone();
  125. const endPos = startPos.clone();
  126. endPos.y += floatDistance;
  127. // 位置动画
  128. tween(this.node)
  129. .to(stayDuration + shrinkDuration, {
  130. position: endPos
  131. }, {
  132. easing: 'sineOut'
  133. })
  134. .start();
  135. // 延迟后开始缩小和淡出
  136. tween(this.node)
  137. .delay(stayDuration)
  138. .to(shrinkDuration, {
  139. scale: new Vec3(0.3, 0.3, 1)
  140. }, {
  141. easing: 'sineIn'
  142. })
  143. .start();
  144. // 透明度动画
  145. if (uiOpacity) {
  146. tween(uiOpacity)
  147. .delay(stayDuration)
  148. .to(shrinkDuration, {
  149. opacity: 0
  150. }, {
  151. easing: 'sineIn'
  152. })
  153. .call(() => {
  154. // 动画完成,销毁节点
  155. if (this.node && this.node.isValid) {
  156. this.node.destroy();
  157. }
  158. })
  159. .start();
  160. }
  161. })
  162. .start();
  163. }
  164. /**
  165. * 显示格挡文字
  166. * @param worldPosition 世界坐标位置(敌人头顶)
  167. */
  168. public showBlockText(worldPosition: Vec3) {
  169. // 检查预制体引用
  170. if (!this.enemyLabelPrefab) {
  171. console.error('[DamageNumberAni] EnemyLabel预制体引用未设置');
  172. return;
  173. }
  174. // 实例化格挡文字节点
  175. const blockTextNode = instantiate(this.enemyLabelPrefab);
  176. // 使用装饰器引用的GameArea节点
  177. if (!this.gameArea) {
  178. console.error('[DamageNumberAni] GameArea节点引用未设置');
  179. blockTextNode.destroy();
  180. return;
  181. }
  182. // 添加到GameArea
  183. this.gameArea.addChild(blockTextNode);
  184. // 转换世界坐标到GameArea的本地坐标
  185. const gameAreaTransform = this.gameArea.getComponent(UITransform);
  186. if (gameAreaTransform) {
  187. const localPos = gameAreaTransform.convertToNodeSpaceAR(worldPosition);
  188. // 稍微向上偏移,显示在敌人头顶
  189. localPos.y += 30;
  190. blockTextNode.position = localPos;
  191. }
  192. // 设置文字内容
  193. const label = blockTextNode.getComponent(Label);
  194. if (label) {
  195. label.string = "格挡";
  196. label.color = Color.CYAN; // 使用青色显示格挡文字
  197. label.fontSize = 22;
  198. }
  199. // 将DamageNumberAni组件添加到格挡文字节点
  200. const aniComponent = blockTextNode.addComponent(DamageNumberAni);
  201. console.log("格挡",aniComponent);
  202. aniComponent.playBlockAnimation();
  203. }
  204. /**
  205. * 播放格挡文字动画
  206. */
  207. private playBlockAnimation(): void {
  208. // 初始状态:缩放为0,透明度为1
  209. this.node.setScale(0, 0, 1);
  210. const uiOpacity = this.node.getComponent(UIOpacity);
  211. if (uiOpacity) {
  212. uiOpacity.opacity = 255;
  213. }
  214. // 创建动画序列
  215. tween(this.node)
  216. .to(0.2, { scale: new Vec3(1.2, 1.2, 1) }) // 放大
  217. .to(0.1, { scale: new Vec3(1, 1, 1) }) // 回到正常大小
  218. .delay(0.5) // 停留0.5秒
  219. .parallel( // 同时执行淡出和向上移动
  220. tween().to(0.3, { scale: new Vec3(0.8, 0.8, 1) }),
  221. tween().by(0.3, { position: new Vec3(0, 20, 0) }),
  222. uiOpacity ? tween(uiOpacity).to(0.3, { opacity: 0 }) : tween()
  223. )
  224. .call(() => {
  225. if (this.node && this.node.isValid) {
  226. this.node.destroy(); // 动画结束后销毁节点
  227. }
  228. })
  229. .start();
  230. }
  231. onDestroy() {
  232. // 清理所有tween动画
  233. Tween.stopAllByTarget(this.node);
  234. const uiTransform = this.node.getComponent(UITransform);
  235. const uiOpacity = this.node.getComponent(UIOpacity);
  236. if (uiTransform) {
  237. Tween.stopAllByTarget(uiTransform);
  238. }
  239. if (uiOpacity) {
  240. Tween.stopAllByTarget(uiOpacity);
  241. }
  242. }
  243. }