マガジン

GDevelop入門:無料ノーコードでブラウザ書き出し

遊びをつくる

執筆にClaudeを使用しています。

既存の木製ビー玉コースを保ちながら、一つの青い橋を慎重に足す手元
記事のテーマをもとに制作したAI生成イラスト。

GDevelopは、プログラミングの知識がなくてもゲームを作れるオープンソースのゲームエンジンです。「イベントシート」と呼ばれる条件と行動の組み合わせでロジックを記述し、完成したゲームをHTML5形式でブラウザ向けに書き出せます。インストール版とブラウザ版の両方が無料で使えるため、環境を選ばず試せる点が特徴です。 「ノーコードツールは簡単そうだが、実際にブラウザで動くゲームを公開するまでどんな手順が必要か」——この記事はその疑問に答えます。GDevelopの基本的な仕組みと、ブラウザ書き出しから公開までの流れを、判断基準と詰まりやすいポイントを交えて説明します。

この記事の目次
  1. GDevelopの「イベントシート」とは何か
  2. ブラウザ書き出しの仕組みと前提条件
  3. プロジェクト開始から書き出しまでの手順
  4. 実際に詰まりやすいポイント
  5. GDevelopを選ぶ判断基準
  6. 次の行動
  7. 参考資料

GDevelopの「イベントシート」とは何か

GDevelopでは、コードの代わりに「イベント」を積み重ねてゲームを作ります。各イベントは「条件(Condition)」と「アクション(Action)」の2列で構成されています。たとえば「プレイヤーキャラクターがプラットフォームの外に落ちた」という条件に対して「シーンを最初からやり直す」というアクションを設定する、という形です。

UnityのC#やGodotのGDScriptと違い、文法エラーが原因でゲームが動かないという詰まり方がありません。一方で、複雑な処理——たとえばランダムなマップ生成やリストのソート——をイベントだけで書くと、イベントの量が膨大になることがあります。「作りたいゲームがパズル・アクション・シンプルなRPGといった定番ジャンルの範囲に収まるか」を最初に確認しておくと、途中で行き詰まるリスクを減らせます。

イベントシートにはグループ機能があり、関連するイベントをまとめて折りたたんで見通しをよくできます。規模が大きくなる前に「外部イベント(External Events)」として処理を分割しておくと、後から見直しやすくなります。

ブラウザ書き出しの仕組みと前提条件

GDevelopのエクスポート機能は、プロジェクトをHTML・JavaScript・アセットのセットに変換します。この書き出し結果はZIPファイルとしてダウンロードでき、Webサーバーに展開するだけで動作します。

注意点が一つあります。ローカルのファイルシステムからindex.htmlを直接ダブルクリックして開いても、多くのブラウザではCORSポリシー(異なるオリジン間のリソース共有制限)によってアセットの読み込みが失敗します。動作確認はローカルサーバーを立てるか、いずれかのホスティングサービスにアップロードして行うのが確実です。

GDevelopのブラウザ版(gd.games)を使っている場合、エクスポートの一部機能がクラウド経由になります。デスクトップ版(Windows・macOS・Linux)では書き出しをローカルで完結させられるため、ファイルの扱いやデバッグの自由度が高くなります。どちらを選ぶかは作業環境と好みで決めて問題ありません。

プロジェクト開始から書き出しまでの手順

1. プロジェクトを作る

GDevelopを起動したら「新規プロジェクト」を選び、テンプレートの一覧からジャンルに近いものを選びます。テンプレートはそのまま動くサンプルとして完成しているため、構造を観察してから自分のゲームに応用するのが近道です。白紙から始める「空のプロジェクト」を選ぶと、シーンとオブジェクトをゼロから配置することになります。

2. シーンとオブジェクトを組み立てる

シーンエディタにオブジェクト(スプライト・テキスト・ボタンなど)を配置し、プロパティパネルでサイズ・位置・レイヤーを設定します。GDevelopにはビヘイビア(Behavior)という拡張機能が付属しており、「プラットフォームキャラクター」「物理演算」「トップダウン移動」などを数クリックで追加できます。自分でイベントを書かずに済む部分が増えるため、最初はビヘイビアで動きの基礎を組み、細部をイベントで補う進め方が効率的です。

3. イベントシートでロジックを書く

条件を左列に、アクションを右列に追加します。「キーが押された」「オブジェクトが衝突した」などの条件は検索欄で絞り込めます。変数(Variable)はシーン変数・グローバル変数・オブジェクト変数の3種類あり、スコアや残機のような状態管理はシーン変数またはグローバル変数を使うのが基本です。

詰まりやすいのは「条件が重なって意図しないタイミングで発火する」ケースです。イベントに「サブイベント」を追加して条件を絞り込む、または「トリガーワンス(Trigger once)」条件を加えて1フレームに1回だけ実行されるようにする、という対処で解決することが多いです。

4. プレビューで動作確認する

エディタ上部の「プレビュー」ボタンを押すと、ブラウザウィンドウが開いてゲームを即座に確認できます。変更のたびにプレビューを再起動すれば、書き出しと同じ動作に近い状態でテストできます。ただしプレビューと書き出し後の動作が完全に一致しない場合があります。最終的な確認はZIPを書き出してホスティング環境に置いた状態で行うことを推奨します。

5. HTML5形式で書き出す

メニューから「ファイル → ゲームをエクスポート → HTML5ゲーム」を選びます。出力先フォルダを指定すると、index.htmlとassetsフォルダ、JavaScriptファイルが生成されます。これらをZIPにまとめてアソバースに投稿するか、GitHubPagesやNetlifyなどのホスティングサービスに展開したうえでURLを登録することもできます。アソバースはZIPファイルの直接投稿と公開済みURLの登録の両方に対応しています。

実際に詰まりやすいポイント

アセットのパスが通らない:画像や音声をOSのフォルダから直接プロジェクトに追加した場合、書き出し時にパスが解決できないことがあります。GDevelopのプロジェクトフォルダ内にアセットをまとめ、プロジェクトマネージャーからインポートする習慣をつけると防げます。

モバイルでの操作が動かない:デスクトッププレビューではキーボード入力でテストしていても、スマートフォンブラウザには物理キーボードがありません。タッチボタンのオブジェクトを別途用意し、「タッチまたはマウスボタンが押された」条件でキー入力と同じアクションを呼ぶ設計にする必要があります。

書き出しサイズが大きくなりすぎる:音声ファイルをWAVのままプロジェクトに入れると書き出し結果が数十MBになることがあります。OGG形式への変換や、BGMをループ用にトリミングするといった前処理でサイズを抑えられます。ブラウザゲームでは読み込み時間がプレイ継続率に直結するため、1MBあたりの体験価値を意識してアセットを選ぶことが重要です。

ライセンスの確認:GDevelop本体はMITライセンスで、作ったゲームへの制約は基本的にありません。ただし、GDevelopのアセットストアや外部のフリー素材を使用した場合は、それぞれの素材のライセンスを個別に確認する必要があります。商用・非商用の区別や帰属表示の要否は素材ごとに異なるため、公式情報を確認した上で判断してください。

GDevelopを選ぶ判断基準

GDevelopが向いているのは、「コードを書かずにゲームの仕組みを理解したい」「2Dの定番ジャンルを短期間で形にしたい」という状況です。横スクロールアクション・パズル・シューティング・簡易なRPGであれば、既存のビヘイビアとテンプレートの組み合わせで大部分を構成できます。

一方、3Dゲームの制作、複雑なデータ処理、独自のシェーダーを多用する演出などはGDevelopの得意領域ではありません。また、チームでバージョン管理をしながら開発する場合、GDevelopのプロジェクトファイル(JSON形式)はGitで差分管理できますが、ワークフローの整備に手間がかかることがあります。

「とにかく動くものを作って公開まで試してみたい」という段階であれば、GDevelopは始めるコストが低く、書き出しからホスティングまでの一連の流れを体験する教材として適しています。

次の行動

GDevelopの公式サイトからデスクトップ版をインストールし、付属のプラットフォームゲームテンプレートを開いてプレビューを動かしてみてください。その後、キャラクターの速度やジャンプ力を変えるだけでも、イベントシートの読み方が実感として掴めます。動くものができたらHTML5書き出しを試し、アソバースへのZIP投稿または外部URLの登録で公開まで通してみることをお勧めします。

参考資料

  • GDevelop 公式ドキュメント(wiki.gdevelop.io)
  • GDevelop GitHub リポジトリ(ライセンス確認)
  • MDN Web Docs「CORS(オリジン間リソース共有)」