作ったゲームを人に遊んでもらうなら、ブラウザで開けば遊べる形がいちばん手軽です。Godot の Web 向けの書き出しと itch.io（個人のゲームを無料で公開できるサイト）を使えば、URL を渡すだけで遊んでもらえます。
ただ、書き出した index.html をダブルクリックしてもゲームは始まらず、zip を itch.io に上げただけでは、ページにダウンロードボタンしか並びません。Web 版で渡すのはファイルではなくページなので、どこにどう置くかが動作の一部になります。
この記事では、手元のブラウザで動くことを確かめてから、itch.io に置く方法を解説します。
この記事でわかること
- Web 書き出しで出てくるファイル一式
file://で開けない理由と、手元で動かす方法- itch.io で設定する3か所と、非公開のまま試す手順
- ブラウザ特有の3つの制約（音・キー入力・フォント）
動作確認環境: Godot 4.7
Web 書き出しで出てくるファイル
Windows 向けなら、.exe と .pck の2つです（Embed PCK をオンにすれば1つ）。Web 向けは、書き出し先に指定した名前を頭に付けたファイルが並びます。
書き出し先を index.html にすると、次のようなものが出てきます。
index.html ブラウザが最初に読む
index.js 起動のためのコード
index.wasm エンジン本体
index.pck ゲームのデータ
index.audio.worklet.js 音の処理
index.audio.position.worklet.js 音の処理
index.png / index.icon.png / index.apple-touch-icon.png 起動画面とアイコン
この一式でひと組です。配るときは、その回に出たファイルを全部そろえます。必要なファイルが欠けると、起動できなかったり、音だけ鳴らなかったりします。
書き出し先の名前を index.html にしておくのには理由があります。多くの置き場所は、フォルダを開いたときに index.html を最初に読みます。itch.io に zip で置くときも、この名前が入口になります。
レンダリング方式は、Web では Compatibility だけが使えます。Forward+ と Mobile は動きません。Project Settings の Rendering → Renderer → Rendering Method には .web 用の欄が別にあり、そちらは最初から gl_compatibility（Compatibility のこと）になっています。普段の開発を Forward+ のまま進めていても、Web 版はこの欄の設定で書き出されます。光や影は Compatibility の描き方になるので、3D の見た目はエディタと変わることがあります。
書き出し全般の話と、プリセットが赤くなるときのテンプレートの入れ直しは エクスポート入門 にあります。
手元のブラウザで動かす（Run in Browser）
出てきた index.html をダブルクリックすると、ブラウザは開きますが、ゲームは始まりません。白いままのことも、エラーが出ることもあります。アドレスバーを見ると file:// で始まっています。
file:// は手元のファイルを直接開いた印、http:// はサーバーという置き場所から配られた印です。file:// の状態だと、ブラウザは隣にある .wasm や .pck を取りに行けません。ファイルとして開い たのか、置き場所から配られたのかを、ブラウザは区別しています。
他のエンジンでいうと: Unity の Web ビルド（WebGL）も、通常は
file://で直接開かず、Web サーバー経由で実行します。Unity の Build And Run がローカルの Web サーバーを起動するのは、Godot の Run in Browser と同じ役目です。Unreal Engine 5 には、標準機能としてのブラウザ向けの書き出しはありません。
手元で確かめるなら、エディタから動かします。Web のプリセット（書き出し先ごとの設定）を1つ作って、Runnable（エディタから直接起動できるようにする設定）をオンにしておくと、停止ボタンと実行ボタンのあいだに Web の項目が出ます。そこから Run in Browser を選ぶと、内蔵のサーバーが立ち上がってブラウザが開きます。既定では http://localhost:8060/tmp_js_export.html です。
このとき動いているのは、エディタが一時フォルダへ書き出し直したものです。自分が保存した書き出しフォルダの index.html とは別物になります。ゲームが Web で動くかを先に見るための道具で、配るファイルの確認は zip を置いてから行います。
アドレスバーが file:// になっていないかを、毎回見てください。白い画面のときは、まずここを見ます。
itch.io で設定する3か所
アカウントを作って新しいプロジェクトページを用意します。作成画面の Kind of project で HTML を選んでおくと、このあとの設定がそろいます。上げる zip は、書き出しフォルダの中のファイルを全部選んで圧縮したものです。フォルダそのものを圧縮すると、zip を開いたときに index.html が一段奥に入ります。zip の一番上に index.html が見える形にしてください。
そのうえで触るのは3か所です。
- Uploads に zip を上げ、This file will be played in the browser にチェックを入れます。付けないままだと、相手はダウンロードして手元で開き、さっきの
file://の真っ白に行き着きます - Embed options で表示のしかたと寸法を決めます。ページの中に埋め込むなら幅と高さを入れます。実践のように Stretch を
canvas_itemsとkeep（縦横比を保ったまま画面ごと伸ばす設定）にしてあれば、ゲームと同じ縦横比なら小さめの数字でも比率を保って縮みます - 公開状態を Draft にしておけば、一般には公開されません。人に見せる準備ができてから変えます
確認は編集画面ではなく、ページを表示した側で行います。埋め込みは最初、itch.io の起動ボタン（Run game）が出ている状態で、それを押すとゲームが始まります。
最初の操作と、音・キー入力
ブラウザには、ユーザーが操作するまで音を鳴らさない仕組みがあります。ページを開いた瞬間に音楽が流れ出すのを防ぐためのものです。
Godot はキーやクリックを受け取った時点で音の再開を試みます。それでも、操作より前に鳴らした音は、鳴らないまま終わったり、あとから遅れて聞こえたりします。_ready() で効果音を鳴らす作りだと、Windows 版とブラウザで結果が変わります。
最初に鳴らしたい音は、開始ボタンを押したときなど、操作をきっかけにして鳴らします。
キーボードにも似たところがあります。ページに埋め込まれたゲームは、画面をクリックするまで入力が届かないことがあります。矢印キーを押したのにページのほうがスクロールするなら、まだゲームが入力を受け取っていません。画面を一度クリックすれば直ります。
Web 版の日本語フォント
PC で動かすときは、フォントに無い字形を OS のフォントが肩代わりします。日本語を Label に入れるだけで表示できるのはそのためです。肩代わりに任せると書体が環境ごとに変わる話は 日本語フォント入門 にあります。
Web ではこの肩代わりが使えません。同じプロジェクトなのに、ブラウザでだけ文字が四角に化けます。
直し方は、日本語のフォントファイルをプロジェクトのフォルダに入れて指定することです。Label ごとなら Theme Overrides の Font、プロジェクト全体なら Project Settings の GUI → Theme → Custom Font に入れます。ファイルを入れただけでは使われません。
実践：手元のブラウザで4つを確かめる
ゲームジャムの提出、友達へのテスト依頼、ポートフォリオ——どれも最初の一歩は「自分のブラウザで動く状態」を作ることです。itch.io のアカウントが無くても、ここまでは確かめられます。確かめるのは次の4つです。
- アドレスが
http://になっているか - 日本語が読めるか
- 操作のあとに音が鳴り、四角が動くか
- フォントを外すと、日本語が四角に化けるか
① 置くもの
新しいシーンを1つ作ります。
- Project Settings の Display → Window → Size で、Viewport Width を
1280、Viewport Height を720にする - 同じく Stretch の Mode を
canvas_items、Aspect をkeepにする（ウィンドウに合わせ、縦横比を保ったまま画面ごと伸ばす） - 配布が許可されている日本語フォント（
.ttfか.otf）を1つ用意して、プロジェクトのフォルダにコピーする。Noto Sans JP のような無償のものが扱いやすいです - ルートに Node2D を置いて Main。
main.gdを付けてmain.tscnで保存し、FileSystem ドックの右クリックから Set as Main Scene にする - Main の子に ColorRect を置いて位置
(540, 310)、サイズ(200, 100)。Mouse グループの Filter を Ignore にする（四角の上のクリックを四角が横取りせず、スクリプトまで届くようにする） - Main の子に Label を置いて MessageLabel。 位置
(480, 200)。テキストは「クリックかスペースで始めます」 - MessageLabel のインスペクタで
Theme Overrides > Fonts > Fontに、さきほど入れたフォントファイルを指定する - Main の子に AudioStreamPlayer を置いて ClickSound。短い音のファイルを Stream に入れる
- ColorRect と MessageLabel は、右クリックから「Access as Unique Name」をオンにする（
%ColorRectのように名前だけで取れるようになる）
フォントの指定を忘れると、日本語の確認で文字が四角になります。
# main.gd
extends Node2D
const SPEED := 400.0
var _started := false
@onready var box: ColorRect = %ColorRect
@onready var label: Label = %MessageLabel
@onready var sound: AudioStreamPlayer = $ClickSound
func _unhandled_input(event: InputEvent) -> void:
if _started:
return
if not event.is_pressed() or event.is_echo():
return # 離したときと長押しは数えない
if event is InputEventMouseButton:
if event.button_index != MOUSE_BUTTON_LEFT:
return # ホイールでは始めない
elif event is InputEventKey:
if event.keycode not in [KEY_SPACE, KEY_ENTER]:
return
else:
return
_started = true
sound.play() # 最初の音は、操作をきっかけに
label.text = "動いています"
func _process(delta: float) -> void:
if not _started:
return
box.position.x += Input.get_axis("ui_left", "ui_right") * SPEED * delta
② 書き出す
Project → Export... を開き、Add... から Web を選びます。プリセットが赤いときはテンプレートが入っていないので、エクスポート入門 の手順で入れてください。
- プリセットの Runnable をオンにする
- Options → Variant → Thread Support はオフのままにする（オンにすると配信先に追加の設定が要る。おまけで扱う）
- Export Project... を押し、新しい空のフォルダを選んで、ファイル名を
index.htmlにする
書き出したフォルダを開くと、index で始まるファイルが並んでいます。ここで index.html をダブルクリックしたくなりますが、それが最初の失敗です。
エディタに戻り、実行ボタンの並びから Web の項目を選んで Run in Browser を実行します。ここで動くのは一時フォルダへ書き出し直したものですが、ゲームが Web で動くかはこれで分かります。
③ 動かして確かめる
ブラウザが開いたら、まずアドレスバーを見ます。http://localhost:8060/... で始まっていれば、置き場所から配られています。file:// なら、書き出したフォルダの index.html を開いてしまっています。
画面の中央には四角があり、その上に「クリックかスペースで始めます」と日本語で読めます。四角が並んでいたら、フォントの指定が届いていません。
画面を左クリックするか、スペースを押すと音が鳴り、ラベルが「動いています」に変わります。そのあと左右キーで四角が動きます。始まる前は、左右キーを押しても何も起きません。音が鳴らないときは、ブラウザのタブがミュートになっていないかも見てください。
最後に、フォントを1か所だけ外します。テーマやプロジェクト設定で日本語フォントを指定していない状態で、MessageLabel の Theme Overrides → Fonts → Font を空にして、もう一度 Run in Browser で開きます。エディタで F5 したときは読めていた日本語が、ブラウザでは四角になります。PC で読めていたのは OS のフォントが肩代わりしていたからで、Web にはそれが無いことが、この1か所で見えます。確かめたらフォントを戻します。
アカウントを持っているなら、ここから itch.io へ上げます。Run in Browser が見せていたのは一時フォルダへ書き出し直したものなので、確かめる途中で直したところがあれば、先に Export Project... で書き出し直します。そのうえで書き出しフォルダの中のファイルを全部選んで zip にし、Uploads へ上げて This file will be played in the browser にチェックします。Embed options で幅 1280・高さ 720 を入れ、公開状態は Draft のまま、ページを表示して、Run game を押してから同じことを確かめます。アドレスは https:// です。埋め込みでは、先にゲーム画面をクリックしてください。クリックする前の矢印キーは、ページのスクロールに使わ れます。
ポイントは2つです。
- 書き出した直後に開きたくなるのを我慢する:
index.htmlのダブルクリックは、ほぼ必ず真っ白になります。最初の確認はエディタからのブラウザ実行で行います - 手元で4つ通してから上げる: itch.io で真っ白だったとき、原因がゲーム側か置き方かを切り分けられます。手元で動いているなら、疑うのは書き出し直したか、ブラウザで遊ぶチェック、Thread Support の3つです
書き出しの設定全般は エクスポート入門、Web 前提でプロジェクトを始めるときの決め方は プロジェクトの初期設定 にあります。
うまくいかないときは
| 症状 | 原因 | 直し方 |
|---|---|---|
| 手元では直ったのに、itch.io では古いまま | Run in Browser の一時フォルダだけが新しく、配る書き出しフォルダは前のまま | Export Project... で書き出し直してから zip にする |
| 手元では動くのに、itch.io だけ白い | Thread Support をオンにしていると、配信側に追加の設定が要る | オフのまま書き出し直して、まず動くかを見る |
| itch.io でスクロールバーが出る・縦横比が崩れる | Embed options の幅と高さが、ゲームの画面サイズと合っていない | まずゲームと同じ寸法（1280×720）にする。直らなければ、Godot の Stretch の設定も見る |
| プリセ ットが赤く、テンプレートを入れ直しても Web に書き出せない | 4.7 の .NET 版のエディタは、Web へ書き出せない | GDScript だけのプロジェクトなら、通常版のエディタで開いて書き出す |
おまけ：先に知っておくと良いこと
- Thread Support は困ってから: オンにすると、ブラウザ側で
SharedArrayBufferという仕組みが要り、配信するサーバーが特定のヘッダーを返す必要があります。itch.io には対応する設定がありますが、まずオフのまま出して、性能で困ってから検討します - 読み込みが遅いのは大きさのため: エンジン本体だけで数十メガバイトあります。長いままの
wavや使っていない大きな画像を入れない、日本語フォントの太さ違いをいくつも入れない、くらいで最初は足ります - Web 版のセーブは別の場所:
user://は、ブラウザがそのサイト用に持っている保存領域に置かれます。エディタで動かしたときのセーブとは別物で、ブラウザのサイトデータを消すと消えます - Web 版だけの出し分け:
OS.has_feature("web")で Web 版かどうかを判定できます。終了ボタンを Web では隠す、のような小さな出し分けに使います
まとめ
- 出てくるのは一式:
index.htmlを先頭にしたファイル全部でひと組。配るときは一式をそろえて zip にする file://では動かない: 手元で見るときはエディタの Run in Browser。アドレスバーがhttp://かを毎回見る- itch.io で触るのは3か所: ブラウザで遊ぶチェック・埋め込みの寸法・公開状態
- 音とキーは操作のあと: 最初の音はクリックやキーをきっかけに鳴らし、埋め込みでは先にゲーム画面をクリックする
- 日本語はフォントを入れる: Web には OS のフォントの肩代わりが無い
作ったゲームを最初にブラウザで開くとき、この違いはどこに出てくるでしょうか。
