未経験からGodotで始める自作ゲーム開発【8日目】

AI Assisted
この記事は筆者の実装経験をもとに実装コードをベースで執筆し、AIによる校閲・推敲を経て公開しています。

はじめに：Webで公開する

7日目でMac/Windowsアプリとして書き出しましたが、今の時代、ダウンロードして遊んでもらうのはハードルが高いです。 そこで今日は、「自分のWebサイト（Next.js）にゲームを埋め込んで、URLひとつで遊んでもらえるようにする」 方法を解説します。

Godot 4のWeb書き出しは「ブラウザのセキュリティ制限」との戦いになりますが、正しい設定を行えば Next.js アプリの一部として綺麗に動作させることができます。

---

1. Godot側の準備（Webエクスポート）

Godot 4でWeb向けに書き出す際は、「設定」 が命です。

レンダリングモードの変更

デフォルトの Forward+ モードはWebでは重すぎるか、動作しないことが多いです。 エディタ右上のレンダラー設定をクリックし、Compatibility（互換性） に変更してから、プロジェクトを再起動してください。

Web用に書き出す

Next.jsプロジェクトの public フォルダ内に配置するのが定石です。

1. Next.jsプロジェクトの public フォルダ内に、ゲーム用のディレクトリを作ります。

• 例: public/games/mytetris/

1. Godotメニューの [プロジェクト] > [エクスポート] > [Web] を選択します。
2. [エクスポートパス] を、作成したフォルダ内の index.html に指定します。
3. [プロジェクトのエクスポート] を実行します。

---

2. Next.jsの設定（最重要）

ここが最大の難関です。 Godot 4のWebゲームは SharedArrayBuffer という機能を使うため、Webサーバー（Next.js）側で**「セキュリティヘッダー」** を正しく返す必要があります。 また、iframeで表示するために X-Frame-Options の設定も必要です。

プロジェクトルートの next.config.js を開き、以下の headers 設定を追加してください。

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        // ゲームファイルのパスに合わせて修正してください
        source: '/games/mytetris/:path*',
        headers: [
          {
            // マルチスレッド処理に必須
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          {
            // マルチスレッド処理に必須
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            // iframeでの表示を許可する（これがないと拒否される！）
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

注意: 設定を変更した後は、必ず開発サーバー（npm run dev）を再起動してください。

---

3. ページへの埋め込み（iframe）

Godotのキャンバスはページ全体のスクロールやイベントを奪いやすいため、Reactコンポーネントとして直接置くよりも iframe で隔離して表示する のが最も安定します。

表示したいページ（例: app/tetris/page.tsx）に以下のように記述します。

export default function TetrisPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
      <h1 className="text-3xl font-bold mb-6">My Tetris</h1>
      
      <div className="relative border-4 border-gray-700 rounded-lg overflow-hidden shadow-2xl">
        {/* publicフォルダ内のファイルを指定 */}
        <iframe
          src="/games/mytetris/index.html"
          width="600"
          height="900"
          style={{ border: 'none', display: 'block' }}
          // フルスクリーンや音声再生を許可
          allow="autoplay; fullscreen; xr-spatial-tracking"
          title="Tetris Game"
        />
      </div>

      <p className="mt-4 text-gray-400">
        PC: 矢印キーで移動 / Spaceで回転
      </p>
    </div>
  );
}

---

4. トラブルシューティング

実装中に遭遇したエラーと解決策のまとめです。

① SharedArrayBuffer is not defined

• 原因: next.config.js の COOP / COEP ヘッダー設定が効いていません。
• 対策: サーバーを再起動したか確認してください。また、デプロイ先（Vercelなど）でも同じヘッダー設定が必要です。

② localhost で接続が拒否されました

• 原因: X-Frame-Options: DENY がデフォルトで設定されているため、iframe内での表示がブロックされています。
• 対策: next.config.js で X-Frame-Options: SAMEORIGIN を明示的に設定して上書きします。

③ 画面が真っ暗のまま

• 原因: Godotのレンダラーが Forward+ のままになっている可能性があります。
• 対策: Godotエディタ右上で Compatibility に変更し、書き出し直してください。

---

完成！

これで、Next.jsで作られたポートフォリオサイトの中に、Godotで作った自作ゲームが組み込まれました。 URLを共有するだけで、世界中の人に遊んでもらうことができます。

Webエンジニアとしての「サイト構築力」と、ゲーム開発者としての「コンテンツ制作力」。 この2つが組み合わさった強力な作品の完成です！