PreloadProgressUI.ts 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import { _decorator, Component, Node, Label, ProgressBar } from 'cc';
  2. import EventBus, { GameEvents } from '../Core/EventBus';
  3. const { ccclass, property } = _decorator;
  4. /**
  5. * 资源预加载进度显示UI组件
  6. * 用于在游戏启动时显示资源加载进度
  7. */
  8. @ccclass('PreloadProgressUI')
  9. export class PreloadProgressUI extends Component {
  10. @property({ type: Node, tooltip: '预加载进度UI根节点' })
  11. public progressUINode: Node = null;
  12. @property({ type: ProgressBar, tooltip: '进度条组件' })
  13. public progressBar: ProgressBar = null;
  14. @property({ type: Label, tooltip: '进度文本标签' })
  15. public progressLabel: Label = null;
  16. @property({ type: Label, tooltip: '状态文本标签' })
  17. public statusLabel: Label = null;
  18. private eventBus: EventBus = null;
  19. onLoad() {
  20. this.eventBus = EventBus.getInstance();
  21. // 监听预加载事件
  22. this.eventBus.on(GameEvents.RESOURCE_PRELOAD_START, this.onPreloadStart, this);
  23. this.eventBus.on(GameEvents.RESOURCE_PRELOAD_PROGRESS, this.onPreloadProgress, this);
  24. this.eventBus.on(GameEvents.RESOURCE_PRELOAD_COMPLETE, this.onPreloadComplete, this);
  25. this.eventBus.on(GameEvents.RESOURCE_PRELOAD_ERROR, this.onPreloadError, this);
  26. // 初始状态隐藏UI
  27. this.hideProgressUI();
  28. }
  29. onDestroy() {
  30. if (this.eventBus) {
  31. this.eventBus.off(GameEvents.RESOURCE_PRELOAD_START, this.onPreloadStart, this);
  32. this.eventBus.off(GameEvents.RESOURCE_PRELOAD_PROGRESS, this.onPreloadProgress, this);
  33. this.eventBus.off(GameEvents.RESOURCE_PRELOAD_COMPLETE, this.onPreloadComplete, this);
  34. this.eventBus.off(GameEvents.RESOURCE_PRELOAD_ERROR, this.onPreloadError, this);
  35. }
  36. }
  37. /**
  38. * 预加载开始事件处理
  39. */
  40. private onPreloadStart() {
  41. console.log('[PreloadProgressUI] 预加载开始');
  42. this.showProgressUI();
  43. this.updateProgress(0, '开始加载资源...');
  44. this.updateStatus('正在预加载关卡资源');
  45. }
  46. /**
  47. * 预加载进度更新事件处理
  48. */
  49. private onPreloadProgress(data: { progress: number; message: string }) {
  50. console.log(`[PreloadProgressUI] 预加载进度: ${data.progress}% - ${data.message}`);
  51. this.updateProgress(data.progress, data.message);
  52. }
  53. /**
  54. * 预加载完成事件处理
  55. */
  56. private onPreloadComplete() {
  57. console.log('[PreloadProgressUI] 预加载完成');
  58. this.updateProgress(100, '资源加载完成');
  59. this.updateStatus('预加载完成,准备开始游戏');
  60. // 延迟隐藏UI,让用户看到完成状态
  61. this.scheduleOnce(() => {
  62. this.hideProgressUI();
  63. }, 0.5);
  64. }
  65. /**
  66. * 预加载错误事件处理
  67. */
  68. private onPreloadError(data: { error: string }) {
  69. console.warn(`[PreloadProgressUI] 预加载错误: ${data.error}`);
  70. this.updateStatus(`预加载失败: ${data.error}`);
  71. // 延迟隐藏UI
  72. this.scheduleOnce(() => {
  73. this.hideProgressUI();
  74. }, 2.0);
  75. }
  76. /**
  77. * 显示进度UI
  78. */
  79. private showProgressUI() {
  80. if (this.progressUINode) {
  81. this.progressUINode.active = true;
  82. }
  83. }
  84. /**
  85. * 隐藏进度UI
  86. */
  87. private hideProgressUI() {
  88. if (this.progressUINode) {
  89. this.progressUINode.active = false;
  90. }
  91. }
  92. /**
  93. * 更新进度条和进度文本
  94. */
  95. private updateProgress(progress: number, message: string) {
  96. if (this.progressBar) {
  97. this.progressBar.progress = progress / 100;
  98. }
  99. if (this.progressLabel) {
  100. this.progressLabel.string = `${Math.round(progress)}%`;
  101. }
  102. if (message && this.statusLabel) {
  103. this.updateStatus(message);
  104. }
  105. }
  106. /**
  107. * 更新状态文本
  108. */
  109. private updateStatus(status: string) {
  110. if (this.statusLabel) {
  111. this.statusLabel.string = status;
  112. }
  113. }
  114. /**
  115. * 手动显示预加载进度(用于测试)
  116. */
  117. public showPreloadProgress() {
  118. this.showProgressUI();
  119. this.updateProgress(0, '手动测试预加载进度');
  120. this.updateStatus('测试模式');
  121. }
  122. /**
  123. * 手动隐藏预加载进度(用于测试)
  124. */
  125. public hidePreloadProgress() {
  126. this.hideProgressUI();
  127. }
  128. }