この記事では、Construct 3 のビギナーズガイドを参照しながら、ゴーストシューターという簡単なゲームを一緒に作っていきます。
完成版はこちらで確認が可能です。
制作の準備をしよう
まずはこれから作っていくゲームの完成版を確認してイメージをグッとつかみましょう。
クリックして画面を開いたら編集画面の上部にある再生ボタンを押してください。
あたらしいウインドウが開いてゲームがスタートします。このゲームは方向キーとマウスで操作をします。方向キーでキャラクターを動かし、マウスポインタでキャラクターの向きを変えて左クリックで弾を発射します。
私たちはこれから、このゲームを作っていくわけです。
完成版の確認が終わったら、ゲームのウインドウを閉じて、ブラウザの更新ボタンを押してみてください。すると以下のような画面になると思います。変わらない場合はこちらをクリックしてください。
開いたら、赤丸で示した NEW のボタンをクリックしましょう。これで新しいプロジェクトを開始することができます。
クリックをすると以下のような画面が現れます。これは特に変更しなくてOKです。でも名前くらいは適当に付けておきましょう。test と名前を付けて Create をクリックしましょう。
新しいプロジェクトのページが表示されたはずです。
左にプロパティウインドウ、右にプロジェクトとレイヤーのウインドウがある、これがデフォルトの状態です。詳しい画面の見方はあとで説明をしていきます。
中央のシートの中にある点線の内側がゲームで表示される部分（ビューポート）になります。こちらもこれから説明していきます。
背景を作ってみよう
ここではゲーム画面に背景を加えていきます。
まず背景に使う画像をこちらのページからダウンロードさせてもらいましょう。
画像の上で右クリックをし「名前を付けて画像を保存」を選択し、デスクトップなどわかりやすいところに保存をします。
次に Construct 3 編集画面上の適当なところでダブルクリックをしてください。以下のような場面が開くと思います。
下にスクロールをしていくと「Tiled Background」というタイルのようなアイコンがあるのでそれをダブルクリックします。（クリックで選択し、下部の Insert ボタンをクリックしてもOK ）
画面がもとにもどりますが、マウスポインタが十字形に変わっていると思います。この状態で画面上の適当なところでクリックをしてください。挿入する画像の編集画面が開きます。
この画面で絵を描くこともできますし、ファイルから準備をした画像を開くこともできます。いまは先ほどダウンロードした画像を開きたいので、上部のフォルダのマークをクリックしましょう。
そして先ほどダウンロードした画像を選択します。
すると選択した画像が表示されるはずです。この状態でウインドウ右上の×印をクリックしウインドウを閉じます。
画面がもとの編集画面に戻り、画像が置かれている思います。これを全体に広げてあげましょう。
画像が選択されている状態で、画面左のプロパティ内の Position を 0, 0 に、Size を 1708 × 960 に変更してください。
すると背景画像が画面いっぱいに拡大されたはずです。
ここでついでに画面の拡大縮小、移動方法にも触れておきましょう。
- Ctrl + マウスホイール 画面の拡大縮小
- スペースキー + マウス操作 画面を動かす
なお、今は先ほどの背景画像が選択されている状態なので、どこか空白地帯を一度クリックして、なにも選択されていない状況にしてから、これらの動作を試してみてください。
オブジェクトをロックをして固定しよう
先ほど背景画像を設置することができました。ここにプレイヤーや敵を配置していきますが、背景をクリックするたびに背景画像が選択されると面倒なのでロックをしてしまいましょう。
さきほど設置した背景画像の上で右クリックをするとウインドウが開くので、Lock → Lock selection をクリックします。
すると先ほどまでクリックするたびに反応していた背景画像が、選択されなくなったはずです。変更を加えたくなったときは同じ手順でロックを解除します。
背景など動かないものを設置したら、とりあえずロックをかけておいてもよいかもしれません。
今回はここまでです。次回へ続きます。
