マルチプレイの環境構築【前編】
ゲームと言ったらマルチプレイですよね。
今回は、マルチプレイに必要な環境を整えていきます。
前回公開した下記の手順は済ませておく必要があります。
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」を選択
下図画面が表示される為、インスペクターの下部等に画面を固定します。
以降は下図赤枠のアイコンから更新をかけることが出来ます。
3.「Play with MultiPlay Server」を有効化
「Publish」横の▼マークから「Play with MultiPlay Server」にチェックを入れます。
4.Clientを作成
ヒエラルキーの「+」から「空のオブジェクトを作成」を選択。
名称を「WorldMultiPlay」に変更
インスペクターにて「Zepeto World MultiPlay」を追加します。
ここまでの手順を終えると、実行時に下記Clientの接続Logが出力されます。
続きは次回纏めます!