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

タイトルからログインまでの遷移を整える

ポップアップを初回は非表示にする

1. MenuSceneを選択する
2. ヒエラルキーパネルのAuthPopupを選択する
3. インスペクターの上部のAuthPopupと書かれたチェックボックスを外す
   

MenuSceneにログインボタンを配置する

1. MenuSceneを選択する
2. ヒエラルキーパネルのStartButtonを右クリック→Duplicateで複製する
3. LoginButtonにリネームする
4. 子ノードのLabelを選択
5. インスペクターのstringをLOGINに置き換える
6. 位置をGAME STARTの上に調整する
   

MenuSceneにログイン中のユーザー名を表示する

1. MenuSceneを選択する
2. Canvasを右クリック→Create→Labelを選択する
3. LoginUserLabelにリネームする
4. 文字色を黒に変更する
5. LoginButtonの上に位置を調整する
   
6. stringを空に置き換える

ログインボタンでポップアップを開く

1. assets/scriptにMenuManager.tsを作成する
2. コードを記載する
   MenuManager.ts

   import { _decorator, Component, Node } from 'cc';
   const { ccclass, property } = _decorator;
   
   @ccclass('MenuManager')
   export class MenuManager extends Component {
       @property(Node)
       authPopup: Node = null; 
   
       public openAuthPopup() {
           if (this.authPopup) {
               this.authPopup.active = true;
           }
       }
   
       public closeAuthPopup() {
           if (this.authPopup) {
               this.authPopup.active = false;
           }
       }
   }
   

3. CanvasにMenuManager.tsをアタッチする
4. インスペクタのAuth PopupとLogin User Labelにヒエラルキーパネルからドラッグ&ドロップする
   
5. LoiginButtonを選択する
6. Click Eventsを1にする
7. Canvasをドラッグ&ドロップし、各項目を画像のように指定する
   

ログインが完了したポップアップを閉じるようにする

1. LoginUI.tsに追記する
   LoginUI.ts

   import { _decorator, Component, EditBox, Label, log, Color } from 'cc';
   import { NetworkManager } from './NetworkManager';
   import { MenuManager } from './MenuManager'; // 追記
   
   // ...
       @property(Label)
       loginUserLabel: Label = null;
   
       // 追記 -ここから-
       @property(MenuManager)
       menuManager: MenuManager = null;
       // 追記 -ここまで-
   
       // ...
          if (data.success) {
               this.statusLabel.string = data.message;
               this.statusLabel.color = Color.GREEN;
   
               this.loginUserLabel.string = `ユーザー名: ${data.userData.username}`;
   
               this.usernameEditBox.string = "";
               // 追記 -ここから-
               if (this.menuManager) {
                   this.menuManager.updateLoginStatus(data.userData.username);
               }
   
               this.scheduleOnce(() => {
                   this.node.active = false;
               }, 0.5);
               // 追記 -ここまで-
   

2. AuthPopupを選択する
3. インスペクターのMenu ManagerにCanvasをドラッグ&ドロップする

まとめ

TitleSceneから実行して、ログインを試してみてポップアップが閉じた後にユーザー名が表示されていたら完了です。