【20日目】25日間でCocos Creatorでゲームを作る

シーンをまたいでデータを保持する

各スクリプトを修正する

1. assets/scriptsにPlayerData.tsを作る
   PlayerData.ts

   export class PlayerData {
       public static username: string = "";
       public static highScore: number = 0;
       public static level: number = 1;
   
       public static setPlayerData(data: any) {
           this.username = data.username;
           this.highScore = data.highScore || 0;
           this.level = data.level || 0;
           console.log(`PlayerDataに保存: ${this.username} (Best: ${this.highScore})`);
       }
   }
   

2. LoginUI.tsを修正する
   LoginUI.ts

   import { PlayerData } from './PlayerData'; // 追記
   
   // ...
   
   PlayerData.setPlayerData(data.userData); // 追記
   if (this.menuManager) {
       this.menuManager.setLoggedIn(true);
       this.menuManager.updateLoginStatus(data.userData.username);
   }
   

3. GameManager.tsを修正する
   GameManager.ts

   import { PlayerData } from './PlayerData'; // 追記
   
   // ...
   NetworkManager.instance.saveScore(PlayerData.username, this.score); // PlayerDataを参照二変更 
   

4. NetworkManager.tsを修正する
   NetworkManager.ts

   import { PlayerData } from './PlayerData'; // 追記
   
   // ...
   if (data.success) {
       PlayerData.highScore = data.highScore; // 追記
       log(`サーバーにスコア保存完了！現在のハイスコア: ${data.highScore}`);
   }
   

5. MenuManager.tsを修正する
   MenuManager.ts

   import { PlayerData } from './PlayerData'; // 追記
   
   // ...
   if (data.success) {
       PlayerData.highScore = data.highScore; // 追記
       log(`サーバーにスコア保存完了！現在のハイスコア: ${data.highScore}`);
   }
   

PlayerDataを参照して各UIに表示する

1. MenuSceneのLoginUserLabelを右クリック→Duplicateを選択
2. HighScoreLabelにリネームしGAME STARTボタンの下に配置する
3. MenuManager.tsを修正する
   MenuManager.ts

   @property(Label)
   loginUserLabel: Label = null;
   
   // 追記 -ここから-
   @property(Label)
   highScoreLabel: Label = null;
   // 追記 -ここまで-
   start() {
       if (this.loginUserLabel) {
         this.loginUserLabel.string = PlayerData.username !== "" ? PlayerData.username : "未ログイン";
       }
       // 追記 -ここから-
       if (this.highScoreLabel) {
         this.highScoreLabel.string = PlayerData.highScore != null ? `ハイスコア: ${PlayerData.highScore}` : "";
       }
       // 追記 -ここまで-
     }
   
   // ...
   
   
   // 修正 -ここから-
   public updateLoginStatus(username: string, highScore: string) {
       if (this.loginUserLabel) {
         this.loginUserLabel.string = `ユーザー名: ${username}`;
       }
       if (this.highScoreLabel) {
         this.highScoreLabel.string = highScore ? `ハイスコア: ${highScore}` : `スコアデータ無し`;
       }
   }
   // 修正 -ここまで-
   

4. MenuSceneのCanvasにアタッチしたMenuManagerへHighScoreLabelをドラッグ＆ドロップする
   
5. NetworkManager.tsを修正する
   NetworkManager.ts

   this.menuManager.updateLoginStatus(data.userData.username, data.userData.highScore); // 修正
   

まとめ

これでログイン後はプレイヤー名やスコアが各シーンで保持されるようになりました。