マルチプレイの環境構築【前編】

ゲームと言ったらマルチプレイですよね。

今回は、マルチプレイに必要な環境を整えていきます。
前回公開した下記の手順は済ませておく必要があります。
komekokokusan.hatenadiary.jp


後編はこちら
komekokokusan.hatenadiary.jp


1.Multiplay Serverを作成
Assetsフォルダ内で 「作成」>「ZEPETO」 >「 Multiplay Server」 を選択。
「World.MultiPlay」というフォルダが追加されます。


次にindex.tsとschemas.jsonを編集します。
各Fileのインスペクター、ソースコードの補足についてはこちら


・index.ts
サーバーのメインロジックコードを担当するファイル。

import {Sandbox, SandboxOptions, SandboxPlayer} from "ZEPETO.Multiplay";
import {DataStorage} from "ZEPETO.Multiplay.DataStorage";
import {Player, Transform, Vector3} from "ZEPETO.Multiplay.Schema";

export default class extends Sandbox {

    storageMap:Map<string,DataStorage> = new Map<string, DataStorage>();
    
    constructor() {super();}

    onCreate(options: SandboxOptions) {
        // Called when the Room object is created.
        // Handle the state or data initialization of the Room object.

        this.onMessage("onChangedTransform", (client, message) => {
            const player = this.state.players.get(client.sessionId);
            const transform = new Transform();
            transform.position = new Vector3();
            transform.position.x = message.position.x;
            transform.position.y = message.position.y;
            transform.position.z = message.position.z;

            transform.rotation = new Vector3();
            transform.rotation.x = message.rotation.x;
            transform.rotation.y = message.rotation.y;
            transform.rotation.z = message.rotation.z;

            if (player) {player.transform = transform;}
        });

        this.onMessage("onChangedState", (client, message) => {
            const player = this.state.players.get(client.sessionId);
            if (player) {
                player.state = message.state;
                player.subState = message.subState; // Character Controller V2
            }
        });
    }
       
    async onJoin(client: SandboxPlayer) {

        // Create the player object defined in schemas.json and set the initial value.
        console.log(`[OnJoin] sessionId : ${client.sessionId}, userId : ${client.userId}`)

        const player = new Player();
        player.sessionId = client.sessionId;

        if (client.userId) { player.zepetoUserId = client.userId;}

        // [DataStorage] DataStorage Load of the entered Player
        const storage: DataStorage = client.loadDataStorage();

        this.storageMap.set(client.sessionId,storage);

        let visit_cnt = await storage.get("VisitCount") as number;
        if (visit_cnt == null) visit_cnt = 0;

        console.log(`[OnJoin] ${client.sessionId}'s visiting count : ${visit_cnt}`)

        // [DataStorage] Update Player's visit count and then Storage Save
        await storage.set("VisitCount", ++visit_cnt);

        // Manage the Player object using sessionId, a unique key value of the client object.
        // The client can check the information about the player object added by set by adding the add_OnAdd event to the players object.
        this.state.players.set(client.sessionId, player);
    }

    onTick(deltaTime: number): void {
        //  It is repeatedly called at each set time in the server, and a certain interval event can be managed using deltaTime.
    }

    async onLeave(client: SandboxPlayer, consented?: boolean) {
        // By setting allowReconnection, it is possible to maintain connection for the circuit, but clean up immediately in the basic guide.
        // The client can check the information about the deleted player object by adding the add_OnRemove event to the players object.
        this.state.players.delete(client.sessionId);
    }
}


・schemas.json
サーバーとクライアント間の通信用のファイル。

{
"State" : {"players" : {"map" : "Player"}},
"Player" : {"sessionId" : "string","zepetoUserId" : "string","transform" : "Transform","state" : "number","subState" : "number"},
"Transform" : {"position" : "Vector3","rotation" : "Vector3"},
"Vector3" : {"x" : "number","y" : "number","z" : "number"}
}


インスペクターが下図のように自動で変更されます。


2.Logを表示
「ウィンドウ」>「ZEPETO」>「Multi Server」を選択

下図画面が表示される為、インスペクターの下部等に画面を固定します。

Log画面

以降は下図赤枠のアイコンから更新をかけることが出来ます。


3.「Play with MultiPlay Server」を有効化
「Publish」横の▼マークから「Play with MultiPlay Server」にチェックを入れます。


4.Clientを作成
ヒエラルキーの「+」から「空のオブジェクトを作成」を選択。
名称を「WorldMultiPlay」に変更

インスペクターにて「Zepeto World MultiPlay」を追加します。


ここまでの手順を終えると、実行時に下記Clientの接続Logが出力されます。


続きは次回纏めます!