Construct 3入門：ノーコードでブラウザゲームを作る
遊びをつくる執筆にClaudeを使用しています。
Construct 3は、ブラウザ上で動くゲームエンジンです。インストール不要でブラウザから開発を始められ、作ったゲームをそのままHTML5形式でエクスポートできます。「ノーコード」と呼ばれる理由は、プログラミング言語を書かずに「イベントシート」という仕組みでゲームのロジックを組めるからです。 「ノーコードで本当にゲームが作れるのか」と疑う人も多いですが、Construct 3はプラットフォーマー（横スクロールアクション）、シューティング、パズルといった2Dジャンルであれば、コードなしでかなりの完成度まで持っていけます。この記事では、Construct 3を初めて触る人が最初の1時間で何ができるかを軸に、エンジンの構造・操作の流れ・つまずきやすい点・ブラウザゲームとしての書き出しまでを順番に解説します。
この記事の目次
Construct 3の全体像を先に把握する
Construct 3の画面は大きく三つに分かれます。レイアウトエディタ（ゲーム画面の見た目を配置する場所）、イベントシート（ゲームの動作ルールを書く場所）、プロジェクトパネル（スプライトや音声などの素材を管理する場所）です。
UnityやGodotに慣れた人がいきなり触ると、「スクリプトファイルはどこ？」と迷います。Construct 3ではコードを書くファイルは原則存在しません。ロジックはすべてイベントシートの「条件→アクション」形式で記述します。たとえば「キーボードのAが押されたとき → プレイヤーを左に動かす」という一文が、そのままゲームの動作になります。
料金体系は無料プランと有料プランに分かれており、無料プランでもプロジェクトの保存数やイベント数に上限はあるものの、試作・学習には十分です。最新の制限と料金は公式サイトで確認してください。
最初のプロジェクトを作る手順
1. プロジェクトの作成
Construct 3公式サイトにアクセスし、「Open Construct 3」からエディタを開きます。「New Project」を選ぶと、テンプレート選択画面が出ます。初めての場合は「Empty」（空のプロジェクト）を選ぶと構造が見えやすいですが、「Platform Game」テンプレートを使うと最初から動くゲームが手元に来るため、仕組みを逆読みする使い方もできます。
2. スプライトを置く
レイアウトエディタで右クリック→「Insert new object」→「Sprite」を選ぶと、キャラクターや障害物になる画像オブジェクトを追加できます。画像は自分でアップロードするか、Construct 3に含まれているサンプル素材を使います。オブジェクトを置いた瞬間にゲーム画面のプレビューが変わるため、配置の感覚がつかみやすいです。
3. ビヘイビアを追加する
Construct 3の強みの一つが「ビヘイビア（Behavior）」です。オブジェクトを選択して「Behaviors」タブを開き、「Platform」ビヘイビアを追加すると、そのオブジェクトは自動的に重力・ジャンプ・着地の物理演算を持ちます。コードを一行も書かずに「床の上を歩いてジャンプできるキャラクター」が完成します。よく使うビヘイビアには以下があります。
- Platform：プラットフォーマー向けの移動と重力
- 8 Direction：上下左右8方向への移動（トップダウン視点に向く）
- Bullet：一定方向へ直進する動き（弾や敵の移動に使う）
- Scroll To：カメラがオブジェクトを追いかける
4. イベントシートでロジックを追加する
ビヘイビアだけでは足りない動作はイベントシートに記述します。イベントシートのタブを開き、「Add event」をクリックすると、オブジェクトと条件の選択メニューが出ます。
たとえば「敵に触れたらゲームオーバーにする」という処理は次のように作ります。
- 「Add event」→「Sprite（プレイヤー）」を選択
- 条件として「On collision with another object」→「Enemy（敵オブジェクト）」を選ぶ
- 右側の「Add action」→「System」→「Go to layout」→「GameOver画面のレイアウト」を選ぶ
この三ステップで衝突判定とシーン遷移が完成します。慣れるまでは「どのオブジェクトの、どの条件に対して、何のアクションを起こすか」という三段構成を意識すると迷いにくいです。
ノーコードの限界と、限界を超える方法
Construct 3のイベントシートは直感的ですが、ロジックが複雑になるほどイベントの数が増え、どの条件がどこで発火しているか追いにくくなります。これが「ノーコードの壁」と呼ばれる現象です。
対策として、Construct 3には「関数（Function）」という仕組みがあります。繰り返し使うイベントのかたまりを関数として名前をつけて登録し、呼び出す形にすると、イベントシートが整理されます。プログラミング経験がある人にとっては「関数を定義して呼ぶ」という感覚に近いです。
また、Construct 3はJavaScriptによるスクリプト拡張にも対応しています。「ほぼノーコードで作るが、特定の処理だけJavaScriptで書く」という混在スタイルも選べます。入門段階ではイベントシートのみで十分ですが、「物理演算のカスタマイズ」「外部APIとの通信」「独自のデータ構造」が必要になったとき、JavaScriptに切り替える選択肢があると知っておくと安心です。
HTML5形式でブラウザゲームに書き出す
作ったゲームをブラウザゲームとして公開するには、「エクスポート」の操作が必要です。
- メニューの「Project」→「Export」を開く
- エクスポート先として「Web（HTML5）」を選ぶ
- 出力フォルダを指定して書き出しを実行する
書き出されるのはindex.htmlと複数のJSファイル・アセットファイルをまとめたフォルダです。このフォルダをZIPに圧縮するか、index.html単体として使えば、Webサーバーや配布プラットフォームにそのままアップロードできます。
書き出し時のよくある失敗点をいくつか挙げます。
- 画像や音声の参照切れ：プロジェクトフォルダ外に置いたファイルを参照していると、書き出し後にリソースが読み込まれません。すべての素材をプロジェクト内にインポートしてから書き出してください。
- 画面サイズの設定ミス：レイアウトのビューポートサイズと書き出し設定のサイズが合っていないと、ゲームが画面に収まらない、または余白が出ます。プロジェクト設定の「Viewport size」を先に決め、レイアウト設計をその比率に合わせるのが順序です。
- モバイル対応の未設定：タッチ操作への対応は自動にはなりません。スマートフォンでも遊べるようにするには、イベントシートにタッチ入力の条件を追加するか、タッチ操作に対応したビヘイビアを使います。
どんなゲームに向いていて、何は難しいか
Construct 3は2Dゲームに特化しており、横スクロールアクション・シューティング・パズル・RPGの戦闘画面といったジャンルは得意分野です。タイルマップ（背景のマス目状の地形）の配置ツールも内蔵されており、マップ作りも比較的早くできます。
一方で、3Dゲームには対応していません。また、大規模なロールプレイングゲームのようにデータ量が多くなると、イベントシートの管理が難しくなります。「チームで大きなゲームを作る」よりも「一人か少人数でコンパクトな2Dゲームを仕上げる」用途に向いています。
競合エンジンと比べると、GodotやUnityは3D対応・大規模プロジェクト向けで学習コストが高め、RPGツクールはRPGジャンルに特化しています。Construct 3は「2Dのアイデアをすぐ動かして確かめたい」人に最もフィットします。
次の行動
Construct 3の公式サイトから無料プランで開発を始め、まず「Platform Game」テンプレートを動かしてみてください。書き出したHTMLファイルやZIPファイルは、アソバースにそのまま投稿して公開できます。作ったゲームを手元で動かすだけでなく、人に遊んでもらう場所として活用してみてください。
参考資料
- Construct 3公式ドキュメント（Scirra）
- Construct 3公式チュートリアル集（Scirra）
