Loading.ts 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import { _decorator, Component, director, Node, SceneAsset, Sprite, Tween, tween } from 'cc';
  2. import { InitData } from './InitData';
  3. const { ccclass, property } = _decorator;
  4. @ccclass('Loading')
  5. export class Loading extends Component {
  6. @property(Sprite)
  7. private progressBar: Sprite = null;
  8. @property(Node)
  9. private startBtn: Node = null;
  10. @property(Node)
  11. private progress: Node = null;
  12. fakeProgress: number;
  13. // 将 fakeProgress 存储在一个对象中,便于 Tween 动画操作
  14. private progressData = { fakeProgress: 0 };
  15. // 用于标记场景是否加载完成
  16. private sceneLoaded: boolean = false;
  17. start() {
  18. this.preloadScene('main')
  19. }
  20. update(deltaTime: number) {
  21. }
  22. async startGame() {
  23. this.startBtn.active = false;
  24. this.progress.active = true;
  25. InitData.ins.initUserData();
  26. }
  27. preloadScene(sceneName: string): void {
  28. // 初始化假的进度条为0
  29. this.progressData.fakeProgress = 0;
  30. this.sceneLoaded = false; // 重置场景加载标志
  31. // 预加载场景
  32. director.preloadScene(sceneName, this.onProgress.bind(this), (err, sceneAsset: SceneAsset) => {
  33. if (err) {
  34. console.error(`Failed to load scene: ${sceneName}`, err);
  35. return;
  36. }
  37. // 场景加载完成,标记为已加载
  38. this.sceneLoaded = true;
  39. });
  40. }
  41. private onProgress(completedCount: number, totalCount: number): void {
  42. }
  43. private updateProgressBar(): void {
  44. // 更新进度条显示
  45. if (this.progressBar && this.progressBar.fillRange < 1) {
  46. this.progressBar.fillRange = this.progressData.fakeProgress;
  47. }
  48. }
  49. private completeLoading(sceneName): void {
  50. // 当Tween动画完成并且场景加载完毕后,将进度条快速填充到100%
  51. Tween.stopAllByTarget(this.progressData);
  52. tween(this.progressData)
  53. .to(1, { fakeProgress: 1 }, {
  54. onUpdate: () => {
  55. this.updateProgressBar(); // 更新进度条显示
  56. },
  57. onComplete: () => {
  58. // 最终完成,切换场景
  59. this.scheduleOnce(() => {
  60. director.loadScene(sceneName, (err) => {
  61. if (err) {
  62. console.error(`Failed to switch to scene: main`, err);
  63. } else {
  64. console.log(`Scene main loaded successfully!`);
  65. }
  66. });
  67. }, 0.1); // 延迟切换场景
  68. }
  69. })
  70. .start();
  71. }
  72. public updateProgress(targetProgress: number) {
  73. console.log('更新loading进度条');
  74. Tween.stopAllByTarget(this.progressData);
  75. tween(this.progressData)
  76. .to(3, { fakeProgress: targetProgress }, {
  77. onUpdate: () => {
  78. this.updateProgressBar();
  79. }
  80. })
  81. .start();
  82. }
  83. public enterGame(sceneName: string) {
  84. this.completeLoading(sceneName);
  85. }
  86. }