ようこそ Construct 2 の世界へ！このガイドは「ゴーストシューター」というHTML5デモ・ゲームの作り方を紹介します。まずはどのようなゲームか このリンク先のデモで試してみましょう。ゲームでは、プレイヤーは常にマウスの方向を向いていて、矢印キーを使って移動させることができます。左マウスボタンをクリックするとモンスターに向かって弾を撃ちます。このようなシンプルなゲームを作るのに必要な「レイヤー」や「イベント・システム」などの基礎知識をこのガイドで解説します。
ご注意：このチュートリアルのコメント欄での質問は控えてくださるようお願いします。質問はフォーラムに 投稿する方が答えを得る可能性がずっと高いからです。
もう一つのチュートリアルについて
このチュートリアルは「トップダウン・シューター」を扱いますが、プレイヤーがジャンプしたり走ったりする「横スクロール系」のゲームを解説している How to make a platform game という初心者向けガイドも用意しています。どちらのチュートリアルから初めても構いませんが、どちらのタイプも作れるように両方ともお勧めします。
それから、Kyatricというユーザーによる How to make an Asteroids clone in under 100 events というチュートリアルもあります。こちらはやや上級者向けですが、詳しく解説されています。
Construct 2 のインストール
もしまだでしたら、ここから Construct 2の最新バージョンをダウンロードしましょう。Construct 2 エディターはウィンドウズでのみ使用できます。ただし、ゲームそのものは Mac、リナックス、iPad等、どんなプラットフォームでも実行できます。Construct 2 は制限のあるユーザーアカウントにもインストールできます。またそのまま持ち運びも出来ますから、USBにインストールして別のコンピューターで利用することも可能です。
さあ始めましょう
セットアップが完了し次第、Construct 2 をスタートさせましょう。スタートが完了したら File ボタンをクリックして、 New を選択します。
New Project ダイアログでは何も変更しなくても構いません。Create project ボタンをクリックするだけプロジェクトが作成されます。Construct 2 は .capx という拡張子のファイルにプロジェクトの全てを保存します。今は空の レイアウト が表示されているはずです - このデザイン・ビューでオブジェクトを作成したり位置を指定したりします。レイアウトはゲームのレベル、もしくはメニュー・スクリーンだと理解しても差し支えありません。他社のツールなどでは ルーム, シーン または フレーム などと呼ばれいるかもしれません。
オブジェクトを加える
タイル状背景
まず最初にやっておきたいことは同じ背景画像をタイルのように繰り返し表示させることです。そのためには Tiled Background オブジェクトを使用します。 背景用のテクスチャーを以下に用意してあります - 右マウス・クリックでコンピューターのドライブに保存しましょう。
次に、レイアウトの空白の部分のどこかを ダブルクリック して、新しいオブジェクトを挿入します（レイアウトが一杯になっている場合は、右クリック、 Insert new object メニューを選択することでも出来ます。) Insert new object ダイアログボックスが表示されたら、Tiled Background オブジェクトをダブルクリックしてオブジェクトをレイアウトに挿入します。
レイアウトのどの位置にオブジェクトを挿入するかを指定するために十字カーソルが表示されます。レイアウトの中心近くのどこかをクリックしましょう。今度はテクスチャーファイルを指定するための テクスチャーエディター が開きます。先ほど保存したタイル用のイメージファイルを指定します。まず、フォルダーアイコンをクリックし、イメージファイルのダウンロード先を指定して、背景イメージファイルを選択します。
テクスチャーエディターは、右上のXボタンで閉じましょう。保存するかどうかの確認ダイアログが出た場合は保存してください。この時点でレイアウト上に背景オブジェクトがタイル状に繰り返し表示されているはずです。次にレイアウト全体をカバーするようにサイズを変更することにしましょう。オブジェクトが選択されている状態で、左側にある Properties Bar に、サイズと位置を含む、オブジェクトの属性を表示されているのが分かります。オブジェクトの位置の値を 0, 0 （レイアウトの左上）に、オブジェクトのサイズの値を1280, 1024 （レイアウトのサイズと同じ）に変更してください。
レイアウト全体を見るには、コントロールキー を抑えながら マウス・ホイール でスクロールするか、viewメニューのzoom out を2回ほどクリックしてズームアウトします。また、スペースキーもしくはマウスのホイールボタンを押しながらマウスを動かすと左右にスクロール出来ます。便利な機能でしょう？ タイル状背景がレイアウト全体をカバーしているか確認してください。
ズームは、コントルールキー＋0、またはviewメニューのzoom to 100% で通常の状態に戻すことができます。
（私と同じせっかちな人はタイトル・バーにある 'run（実行）' アイコンをクリックしてみましょう。設定した背景がブラウザーに表示されるはずです。やりましたね！）