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

サーバーからのレスポンスを受け、表示を更新する

結果表示用のUIを設置する

1. Cocos CreatorでMenuSceneを選択する
2. PopupPanelを右クリック→Create→2D Objenct→Labelを選択する
3. LoginUserLabelにリネームする
4. ポップアップの上部に位置を調整する
5. インスペクターパネルのstringを空にする
6. ヒエラルキーパネルでLoginUserLabelをコピーする
7. LoginStatusLabelにリネームする
   

LoginUIを書き換える

1. importに追記

LoginUI.ts

import { _decorator, Component, EditBox, Label, log, Color } from 'cc'; // LabelとColor追記

1. 追加したLabelノードを参照できるようにする

LoginUI.ts

@property(EditBox)
usernameEditBox: EditBox = null;

// 追記 -ここから-
@property(Label)
statusLabel: Label = null;

@property(Label)
loginUserLabel: Label = null;

start() {
    // NetworkManagerからの通知を受け取る設定
    NetworkManager.instance.node.on('on_login_finished', this.onLoginFinished, this);
}
private onLoginFinished(data: any) {
    if (data.success) {
        this.statusLabel.string = data.message;
        this.statusLabel.color = Color.GREEN;

        this.loginUserLabel.string = `ユーザー名: ${data.userData.username}`;

        this.usernameEditBox.string = "";
    } else {
        this.statusLabel.string = "ログイン失敗";
        this.statusLabel.color = Color.RED;
    }
}
// 追記 -ここまで-

1. ヒエラルキーパネルのAuthPopupを選択する
2. インスペクターのLoginUIのStatus LabelとLogin User Labelにそれぞれ追加したラベルをドラッグ&ドロップする
   

NetworkManagerを書き換える

1. 待ち受ける処理を追記

NetworkManager.ts

this.socket = io('http://localhost:3000');
this.socket.on('connect', () => {
    log('ID:', this.socket.id);
});
// 追記 -ここから-
this.socket.on('login_response', (data) => {
    log('サーバーからの返事:', data);
    // LoginUIに結果を伝える（イベント通知）
    this.node.emit('on_login_finished', data);
});
// 追記 -ここまで-

game-server/index.jsを書き換える

1. ログインしたユーザーの情報をmessageに代入し、レスポンスで返す

index.js

let message = "";
if (!user) {
    user = { username: username, level: 1, lastLogin: new Date() };
    dbData.users.push(user);

    fs.writeFileSync(dbFile, JSON.stringify(dbData, null, 2));
    message = "新しいユーザーを作成しました。";
    console.log(`新規ユーザー登録: ${username}`);
} else {
    message = "既存ユーザーでログインしました";
    console.log(`既存ユーザーログイン: ${username}`);
}

socket.emit('login_response', {
    success: true,
    userData: user,
    message: message
});

動作確認をする

1. ターミナルでサーバーのプロセスが起動中の場合、Ctrl + Cで停止させる
2. サイドプロセスを起動する
   node index.js
3. Cocos CreatorでMenuSceneを立ち上げユーザー情報を送信する
   

まとめ

これでクライアント⇔サーバー間の通信処理が完成しました。