--- title: 멀티플레이 제작하기 slug: world-sdk-guide-kr/szlH1fZjkfZaapEmTve3t docTags: createdAt: 2024-09-02T08:34:13.138Z --- ## 샘플 프로젝트 :::hint{type="info"} **📘 멀티플레이 샘플** [https://github.com/naverz/zepeto-multiplay-example](https://github.com/naverz/zepeto-multiplay-example) ::: ## 요약 | 요약 | 멀티플레이 서버 생성부터 클라이언트 생성까지, 멀티플레이 월드 개발을 위한 환경 설정을 진행합니다. | | ----- | ------------------------------------------------------- | | 난이도 | 중급 | | 소요 시간 | 1시간 | ## Part 1. 멀티플레이 설정하기 - 멀티플레이 서버 생성부터 클라이언트 생성까지, 멀티플레이 월드 개발을 위한 환경 설정을 진행합니다. ::embed[[https://www.youtube.com/watch?v=S68B1TMa-A8](https://www.youtube.com/watch?v=S68B1TMa-A8)]{url="https://www.youtube.com/watch?v=S68B1TMa-A8"} Part 2. 월드 로직 작성하기 ------------------ - 서버, 클라이언트 간 통신을 위해 필요한 Schema에 대해 알아보고, Schema Types와 Room State를 정의합니다. ::embed[[https://www.youtube.com/watch?v=tfkY_raboV0](https://www.youtube.com/watch?v=tfkY_raboV0)]{url="https://www.youtube.com/watch?v=tfkY_raboV0"} :::hint{type="danger"} - 영상에 사용된 서버 스크립트 중에서 hashCode 관련된 내용은 더이상 지원하지 않습니다. - 따라서 아래 코드는 제외하고 작성하여 주세요. ```typescript if (client.hashCode) { player.zepetoHash = client.hashCode; } ``` ::: ## Part 3. 월드 로직 작성하기 2 - 플레이어의 위치 동기화부터 플레이어의 퇴장까지를 진행합니다. ::embed[[https://www.youtube.com/watch?v=H92Gd2G9DhM](https://www.youtube.com/watch?v=H92Gd2G9DhM)]{url="https://www.youtube.com/watch?v=H92Gd2G9DhM"} ## Part 4. 서버 구동 및 멀티플레이 접속하기 - 서버를 실행하고 멀티플레이에 연결합니다. ::embed[[https://www.youtube.com/watch?v=FmK6JNlSjJA](https://www.youtube.com/watch?v=FmK6JNlSjJA)]{url="https://www.youtube.com/watch?v=FmK6JNlSjJA"} ## Part 5. Scripts ### Schemas.json :::CodeblockTabs schemas.json ```json { "State" : {"players" : {"map" : "Player"}}, "Player" : {"sessionId" : "문자열","zepetoUserId" : "문자열","transform" : "변환","state" : "숫자","subState" : "숫자"}, "Transform" : {"position" : "벡터3","rotation" : "벡터3"}, "Vector3" : {"x" : "숫자","y" : "숫자","z" : "숫자"} } ``` ::: ### 서버 코드 :::CodeblockTabs index.ts ```typescript 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 = new Map(); constructor() { super(); } onCreate(options: SandboxOptions) { // 방 객체가 생성될 때 호출됩니다. // 방 객체의 상태 또는 데이터 초기화를 처리합니다. 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; // 캐릭터 컨트롤러 V2 } }); } async onJoin(client: SandboxPlayer) { // schemas.json에 정의된 플레이어 객체를 생성하고 초기 값을 설정합니다. 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 로드 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}의 방문 횟수 : ${visit_cnt}`) // [DataStorage] 플레이어의 방문 횟수를 업데이트하고 저장합니다. await storage.set("VisitCount", ++visit_cnt); // 클라이언트 객체의 고유 키 값인 sessionId를 사용하여 플레이어 객체를 관리합니다. // 클라이언트는 players 객체에 add_OnAdd 이벤트를 추가하여 추가된 플레이어 객체에 대한 정보를 확인할 수 있습니다. this.state.players.set(client.sessionId, player); } onTick(deltaTime: number): void { // 서버에서 설정된 시간마다 반복적으로 호출되며, deltaTime을 사용하여 특정 간격 이벤트를 관리할 수 있습니다. } async onLeave(client: SandboxPlayer, consented?: boolean) { // allowReconnection을 설정하면 회로를 위해 연결을 유지할 수 있지만, 기본 가이드에서 즉시 정리합니다. // 클라이언트는 players 객체에 add_OnRemove 이벤트를 추가하여 삭제된 플레이어 객체에 대한 정보를 확인할 수 있습니다. this.state.players.delete(client.sessionId); } } ``` ::: ### 클라이언트 코드 :::CodeblockTabs ClientStarter.ts ```typescript import {ZepetoScriptBehaviour} from 'ZEPETO.Script' import {ZepetoWorldMultiplay} from 'ZEPETO.World' import {Room, RoomData} from 'ZEPETO.Multiplay' import {Player, State, Vector3} from 'ZEPETO.Multiplay.Schema' import {CharacterState, SpawnInfo, ZepetoPlayers, ZepetoPlayer, CharacterJumpState} from 'ZEPETO.Character.Controller' import * as UnityEngine from "UnityEngine"; export default class ClientStarterV2 extends ZepetoScriptBehaviour { public multiplay: ZepetoWorldMultiplay; private room: Room; private currentPlayers: Map = new Map(); private zepetoPlayer: ZepetoPlayer; private Start() { this.multiplay.RoomCreated += (room: Room) => { this.room = room; }; this.multiplay.RoomJoined += (room: Room) => { room.OnStateChange += this.OnStateChange; }; this.StartCoroutine(this.SendMessageLoop(0.04)); } // Send the local character transform to the server at the scheduled Interval Time. private* SendMessageLoop(tick: number) { while (true) { yield new UnityEngine.WaitForSeconds(tick); if (this.room != null && this.room.IsConnected) { const hasPlayer = ZepetoPlayers.instance.HasPlayer(this.room.SessionId); if (hasPlayer) { const character = ZepetoPlayers.instance.GetPlayer(this.room.SessionId).character; this.SendTransform(character.transform); this.SendState(character.CurrentState); } } } } private OnStateChange(state: State, isFirst: boolean) { // When the first OnStateChange event is received, a full state snapshot is recorded. if (isFirst) { // [CharacterController] (Local) Called when the Player instance is fully loaded in Scene ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { const myPlayer = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer; this.zepetoPlayer = myPlayer; }); // [CharacterController] (Local) Called when the Player instance is fully loaded in Scene ZepetoPlayers.instance.OnAddedPlayer.AddListener((sessionId: string) => { const isLocal = this.room.SessionId === sessionId; if (!isLocal) { const player: Player = this.currentPlayers.get(sessionId); // [RoomState] Called whenever the state of the player instance is updated. player.OnChange += (changeValues) => this.OnUpdatePlayer(sessionId, player); } }); } let join = new Map(); let leave = new Map(this.currentPlayers); state.players.ForEach((sessionId: string, player: Player) => { if (!this.currentPlayers.has(sessionId)) { join.set(sessionId, player); } leave.delete(sessionId); }); // [RoomState] Create a player instance for players that enter the Room join.forEach((player: Player, sessionId: string) => this.OnJoinPlayer(sessionId, player)); // [RoomState] Remove the player instance for players that exit the room leave.forEach((player: Player, sessionId: string) => this.OnLeavePlayer(sessionId, player)); } private OnJoinPlayer(sessionId: string, player: Player) { console.log(`[OnJoinPlayer] players - sessionId : ${sessionId}`); this.currentPlayers.set(sessionId, player); const spawnInfo = new SpawnInfo(); const position = this.ParseVector3(player.transform.position); const rotation = this.ParseVector3(player.transform.rotation); spawnInfo.position = position; spawnInfo.rotation = UnityEngine.Quaternion.Euler(rotation); const isLocal = this.room.SessionId === player.sessionId; ZepetoPlayers.instance.CreatePlayerWithUserId(sessionId, player.zepetoUserId, spawnInfo, isLocal); } private OnLeavePlayer(sessionId: string, player: Player) { console.log(`[OnRemove] players - sessionId : ${sessionId}`); this.currentPlayers.delete(sessionId); ZepetoPlayers.instance.RemovePlayer(sessionId); } private OnUpdatePlayer(sessionId: string, player: Player) { const position = this.ParseVector3(player.transform.position); const zepetoPlayer = ZepetoPlayers.instance.GetPlayer(sessionId); var moveDir = UnityEngine.Vector3.op_Subtraction(position, zepetoPlayer.character.transform.position); moveDir = new UnityEngine.Vector3(moveDir.x, 0, moveDir.z); if (moveDir.magnitude < 0.05) { if (player.state === CharacterState.MoveTurn) return; zepetoPlayer.character.StopMoving(); } else { zepetoPlayer.character.MoveContinuously(moveDir); } if (player.state === CharacterState.Jump) { if (zepetoPlayer.character.CurrentState !== CharacterState.Jump) { zepetoPlayer.character.Jump(); } if (player.subState === CharacterJumpState.JumpDouble) { zepetoPlayer.character.DoubleJump(); } } } private SendTransform(transform: UnityEngine.Transform) { const data = new RoomData(); const pos = new RoomData(); pos.Add("x", transform.localPosition.x); pos.Add("y", transform.localPosition.y); pos.Add("z", transform.localPosition.z); data.Add("position", pos.GetObject()); const rot = new RoomData(); rot.Add("x", transform.localEulerAngles.x); rot.Add("y", transform.localEulerAngles.y); rot.Add("z", transform.localEulerAngles.z); data.Add("rotation", rot.GetObject()); this.room.Send("onChangedTransform", data.GetObject()); } private SendState(state: CharacterState) { const data = new RoomData(); data.Add("state", state); if(state === CharacterState.Jump) { data.Add("subState", this.zepetoPlayer.character.MotionV2.CurrentJumpState); } this.room.Send("onChangedState", data.GetObject()); } private ParseVector3(vector3: Vector3): UnityEngine.Vector3 { return new UnityEngine.Vector3 ( vector3.x, vector3.y, vector3.z ); } } ``` :::