Day 49 - 멀티플레이 WebGL 게임 개발의 핵심 요소 (2부)

• 주제

>>  플레이어 간 상호작용(플레이어 위치 갱신/ 충돌 처리/ 채팅 시스템)

>>  서버 설계 팁

---

• 공부내용

이전 글에서는 WebSocket을 활용한 실시간 데이터 동기화와 서버 통신 최적화를 다뤘다.

이번 글에서는 플레이어 간 상호작용과 이를 위한 서버 설계 팁에 대해 알아보자.

 

1. 플레이어 간 상호작용

멀티플레이 게임에서 핵심은 플레이어 간 상호작용이다.

WebGL 환경에서는 아래와 같은 방식으로 이를 구현할 수 있다.

 

1-1. 플레이어 위치 갱신

다수의 클라이언트가 동일한 맵에서 동기화되려면 서버가 모든 플레이어의 위치를 관리해야 한다.

public class PlayerController : MonoBehaviour
{
    public string playerId;
    public Vector3 position;

    public void UpdatePosition(Vector3 newPosition)
    {
        position = newPosition;
        transform.position = position;
    }
}

// 서버에서 받은 데이터를 모든 플레이어에게 업데이트
void UpdateAllPlayers(string jsonData)
{
    var players = JsonUtility.FromJson<PlayerData[]>(jsonData); // 서버에서 전체 플레이어 데이터 수신
    foreach (var player in players)
    {
        GameObject existingPlayer = GameObject.Find(player.id);
        if (existingPlayer != null)
        {
            existingPlayer.GetComponent<PlayerController>().UpdatePosition(player.position);
        }
    }
}

 

이 구조는 서버에서 받은 모든 플레이어 데이터를 각 클라이언트에서 적용하는 방식이다.

 

 

1-2. 충돌 처리

플레이어 간 충돌이 게임에 영향을 미치는 경우 서버에서 충돌 여부를 확인하고 클라이언트에 결과를 전송해야 한다.

public void CheckCollision(Player player1, Player player2)
{
    float distance = Vector3.Distance(player1.Position, player2.Position);
    if (distance < collisionThreshold)
    {
        // 충돌 처리 로직 (예: 점수 감소, 푸시백)
        HandleCollision(player1, player2);
    }
}

void HandleCollision(Player p1, Player p2)
{
    // 충돌 후 처리 로직
    p1.TakeDamage(10);
    p2.TakeDamage(10);
}

서버에서 충돌을 계산하면 클라이언트 간 데이터 불일치 문제를 줄일 수 있다.

 

 

1-3. 채팅 시스템

멀티플레이 게임의 소셜 요소는 유저 경험에 중요한 영향을 준다.

WebSocket을 활용해 간단한 채팅 시스템을 구현할 수 있다.

public void SendChatMessage(string message)
{
    string chatData = JsonUtility.ToJson(new { type = "chat", content = message });
    SendMessage(chatData); // 서버로 전송
}

void DisplayChatMessage(string jsonData)
{
    var chat = JsonUtility.FromJson<ChatData>(jsonData);
    chatUI.AddMessage($"{chat.sender}: {chat.content}"); // UI에 채팅 메시지 추가
}

---

2. 서버 설계 팁

2-1. 방 구조 설계

멀티플레이 게임에서는 모든 플레이어가 하나의 맵에 있지 않을 수 있다.

 

• 로비 시스템: 방을 만들거나 참가할 수 있는 시스템을 제공한다.
• 인스턴스 분리: 각 방은 별도의 데이터와 플레이어 상태를 관리한다.

json

{
    "roomId": "abc123",
    "players": [
        { "id": "player1", "position": { "x": 0, "y": 0 } },
        { "id": "player2", "position": { "x": 1, "y": 1 } }
    ]
}

 

 

 

2-2. 데이터 압축

멀티플레이 환경에서는 전송되는 데이터가 많기 때문에, 데이터를 압축하거나 최소화하는 것이 중요하다.
예를 들어, 좌표 데이터를 축약된 형식으로 전송한다.

json

{ "id": "p1", "pos": "0,0" }

클라이언트는 이를 해석해 사용한다.

---

<요약>

 

• WebGL에서 WebSocket을 활용한 실시간 동기화
• 플레이어 위치 갱신 및 충돌 처리
• 서버 설계에서 데이터 효율화와 방 구조 구현