Day 41 - WebGL로 웹 새로고침 시 게임 상태 저장하기

• 주제

>>  WebGL 게임 상태 저장 메서드 작성

>>  Unity WebGL과 JavaScript의 상호작용 코드 추가

>>  게임 저장 클래스(GameState)와 데이터 저장 구현

---

• 공부내용

1. WebGL 게임 상태 저장 메서드 작성

Unity에서 WebGL 빌드를 사용할 경우, 웹 브라우저 새로고침이나 페이지 닫기 시 데이터가 손실되지 않도록 게임 상태를 저장해야 한다.
이를 위해 Unity의 SendMessage 메서드를 활용하여 JavaScript와 통신할 수 있다.

아래는 Unity에서 게임 상태를 저장하는 메서드의 예제이다.

GameManager.cs

// Web에서 호출
public void OnWebGLQuit()
{
    SaveGameState();
}

public void SaveGameState()
{
    GameState state = new GameState
    {
        Score = Score,  // 현재 점수 저장
        Money = Money   // 현재 소지금 저장
    };

    DataManager.Instance.SaveGame(state); // 데이터 저장
}

 

GameState.cs

// 게임 상태 클래스
public class GameState
{
    public int Score;  // 점수
    public int Money;  // 소지금
}

---

 

2. WebGL 빌드 파일의 JavaScript 코드 수정

Unity WebGL에서 JavaScript를 사용해 Unity 스크립트의 메서드를 호출할 수 있다.
빌드 후 생성된 index.html 파일의 <script> 내부에 관련 코드를 추가한다.

<기본>

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
            document.querySelector("#unity-progress-bar-full").style.width = 100 * progress + "%";
        }).then((unityInstance) => {
            document.querySelector("#unity-loading-bar").style.display = "none";
            document.querySelector("#unity-fullscreen-button").onclick = () => {
               unityInstance.SetFullscreen(1);
            };

        }).catch((message) => {
            alert(message);
        });
      };
      document.body.appendChild(script);

    </script>

 

<추가 후>

    var unityInstance; //추가
    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
            document.querySelector("#unity-progress-bar-full").style.width = 100 * progress + "%";
        }).then((instance) => { //변경(unityInstance -> instance)
            unityInstance = instance; //추가
            document.querySelector("#unity-loading-bar").style.display = "none";
            document.querySelector("#unity-fullscreen-button").onclick = () => {
                unityInstance.SetFullscreen(1);
            };
        }).catch((message) => {
            alert(message);
        });
    };
    document.body.appendChild(script);
	//아래 코드 추가
    window.onbeforeunload = function () {
        if (unityInstance) {
            unityInstance.SendMessage('GameManager', 'OnWebGLQuit');
        }
    }

</script>

 

위 코드는 브라우저의 새로고침이나 닫기 이벤트(onbeforeunload) 발생 시 Unity의 GameManager 객체에 정의된 OnWebGLQuit 메서드를 호출한다.

---

 

3. 데이터 저장 방식과 활용

Unity의 DataManager는 상태 데이터를 JSON 또는 PlayerPrefs로 저장하도록 설계할 수 있다.
게임 데이터를 안전하게 저장하고 불러오기 위해 JSON 파일로 변환하는 방식을 추천한다.
아래는 간단한 JSON 저장 예제이다.

public class DataManager : MonoBehaviour
{
    private static DataManager instance;
    public static DataManager Instance => instance ??= new DataManager();

    public void SaveGame(GameState state)
    {
        string json = JsonUtility.ToJson(state);  // 게임 상태를 JSON으로 변환
        PlayerPrefs.SetString("GameState", json); // JSON을 PlayerPrefs에 저장
        PlayerPrefs.Save();
    }

    public GameState LoadGame()
    {
        string json = PlayerPrefs.GetString("GameState", "{}");
        return JsonUtility.FromJson<GameState>(json);  // JSON을 GameState로 변환
    }
}

---

<결과>

• 브라우저 새로고침 시 게임 데이터를 자동 저장한다.
• 브라우저 닫기 전 Unity 메서드가 호출된다.
• PlayerPrefs 또는 JSON 파일로 저장된 데이터를 복원할 수 있다.

<주의사항>

• 출시 후 게임을 플레이하다가, itch.io에서 zip 파일을 업데이트 하면 기존에 저장되어있던 데이터는 지워진다.