remix-save-game

ゲームのセーブ状態を統合するワークフロー

概要

このスキルでは、Remix プラットフォーム上の HTML ゲームにセーブ状態を統合する方法を説明します。セーブ状態を使うと、RemixSDK を通じて、スコア、アンロックしたレベル、インベントリなど、プレイヤーの進行状況をセッションをまたいで保存できます。

前提条件

• ゲームに RemixSDK のスクリプトタグが含まれている必要があります。

  <script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>
  

• ゲームがすでにプレイ可能である必要があります（ゼロから作成する場合は、まず game-creation ワークフローに従ってください）。

手順

1. SDK を初期化する

ゲームループの開始前に、await window.RemixSDK.ready() を呼び出します。これにより、SDK が読み込まれ、既存のセーブ状態を利用できるようになります。

await window.RemixSDK.ready();

2. 既存の状態を読み込む

window.RemixSDK.gameState を読み取り、以前に保存したデータを取得します。戻り値は Record<string, unknown> | null | undefined です。使用する前に、必ず null かどうかを確認してください。

const savedState = window.RemixSDK.gameState;

保存状態を使ってゲームの進行状況を復元するか、プレイヤーが新しくゲームを始める場合はデフォルト値を使用します。

const state = savedState ?? { score: 0, level: 1 };

3. ゲームプレイ中に状態を保存する

プレイヤーが重要なチェックポイントに到達したら、saveGameState を呼び出します。gameState の値は JSON にシリアライズ可能なオブジェクトである必要があります。

window.RemixSDK.singlePlayer.actions.saveGameState({
  gameState: { score: player.score, level: player.level },
});

例

シンプルなクリッカーゲーム

<script>
  let clicks = 0;

  async function init() {
    await window.RemixSDK.ready();

    // Load
    const gameState = window.RemixSDK.gameState;
    if (gameState && typeof gameState.clicks === "number") {
      clicks = gameState.clicks;
    }

    document.getElementById("count").textContent = clicks;
    document.getElementById("btn").addEventListener("click", () => {
      clicks++;
      document.getElementById("count").textContent = clicks;

      // Save after every click
      window.RemixSDK.singlePlayer.actions.saveGameState({
        gameState: { clicks },
      });
    });
  }

  init();
</script>

レベル進行があるプラットフォーマー

<script>
  let level = 1;
  let coins = 0;

  async function init() {
    await window.RemixSDK.ready();

    // Load
    const saved = window.RemixSDK.gameState;
    if (saved) {
      level = saved.level ?? 1;
      coins = saved.coins ?? 0;
    }

    startLevel(level);
  }

  function onLevelComplete() {
    level++;
    coins += 10;

    // Save at level transitions
    window.RemixSDK.singlePlayer.actions.saveGameState({
      gameState: { level, coins },
    });

    startLevel(level);
  }

  init();
</script>

ヒント

• 状態を小さく保ちます。 セッションの復元に必要なものだけを保存し、大きな配列や一時的な UI 状態の保存は避けてください。
• 重要なタイミングで保存します。レベルクリア、チェックポイント、購入時などが該当します。毎フレーム保存しないでください。
• 状態は JSON にシリアライズ可能である必要があります。 関数、クラスのインスタンス、循環参照は保存できません。
• 必ず null をチェックします。 プレイヤーが初めてゲームを読み込むとき、保存状態はありません。