Construct 3 の基本操作を学ぶ(1)~画面の見方と背景の設置

この記事では、Construct 3 のビギナーズガイドを参照しながら、ゴーストシューターという簡単なゲームを一緒に作っていきます。

あわせて読みたい
Beginner's guide to Construct 3 ★★★★★ Thanks for choosing Construct 3! Let's get started making your first game. We'll be making the Ghost Shooter demo game. You'll learn everything you need to know...

完成版はこちらで確認が可能です。

あわせて読みたい
Construct 3 r388.2 ★★★★★ Launch Construct 3 r388.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.
Menu

制作の準備をしよう

まずはこれから作っていくゲームの完成版を確認してイメージをグッとつかみましょう。

あわせて読みたい
Construct 3 r388.2 ★★★★★ Launch Construct 3 r388.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.

クリックして画面を開いたら編集画面の上部にある再生ボタンを押してください。

あたらしいウインドウが開いてゲームがスタートします。このゲームは方向キーとマウスで操作をします。方向キーでキャラクターを動かし、マウスポインタでキャラクターの向きを変えて左クリックで弾を発射します。

私たちはこれから、このゲームを作っていくわけです。

完成版の確認が終わったら、ゲームのウインドウを閉じて、ブラウザの更新ボタンを押してみてください。すると以下のような画面になると思います。変わらない場合はこちらをクリックしてください。

あわせて読みたい
Construct 3 r388.2 ★★★★★ Launch Construct 3 r388.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.

開いたら、赤丸で示した NEW のボタンをクリックしましょう。これで新しいプロジェクトを開始することができます。

クリックをすると以下のような画面が現れます。これは特に変更しなくてOKです。でも名前くらいは適当に付けておきましょう。test と名前を付けて Create をクリックしましょう。

新しいプロジェクトのページが表示されたはずです。

左にプロパティウインドウ、右にプロジェクトとレイヤーのウインドウがある、これがデフォルトの状態です。詳しい画面の見方はあとで説明をしていきます。

中央のシートの中にある点線の内側がゲームで表示される部分(ビューポート)になります。こちらもこれから説明していきます。

背景を作ってみよう

ここではゲーム画面に背景を加えていきます。

まず背景に使う画像をこちらのページからダウンロードさせてもらいましょう。

Background

画像の上で右クリックをし「名前を付けて画像を保存」を選択し、デスクトップなどわかりやすいところに保存をします。

次に Construct 3 編集画面上の適当なところでダブルクリックをしてください。以下のような場面が開くと思います。

下にスクロールをしていくと「Tiled Background」というタイルのようなアイコンがあるのでそれをダブルクリックします。(クリックで選択し、下部の Insert ボタンをクリックしてもOK )

画面がもとにもどりますが、マウスポインタが十字形に変わっていると思います。この状態で画面上の適当なところでクリックをしてください。挿入する画像の編集画面が開きます。

この画面で絵を描くこともできますし、ファイルから準備をした画像を開くこともできます。いまは先ほどダウンロードした画像を開きたいので、上部のフォルダのマークをクリックしましょう。

そして先ほどダウンロードした画像を選択します。

すると選択した画像が表示されるはずです。この状態でウインドウ右上の×印をクリックしウインドウを閉じます。

画面がもとの編集画面に戻り、画像が置かれている思います。これを全体に広げてあげましょう。

画像が選択されている状態で、画面左のプロパティ内の Position を 0, 0 に、Size を 1708 × 960 に変更してください。

すると背景画像が画面いっぱいに拡大されたはずです。

ここでついでに画面の拡大縮小、移動方法にも触れておきましょう。

  • Ctrl + マウスホイール 画面の拡大縮小
  • スペースキー + マウス操作 画面を動かす

なお、今は先ほどの背景画像が選択されている状態なので、どこか空白地帯を一度クリックして、なにも選択されていない状況にしてから、これらの動作を試してみてください。

オブジェクトをロックをして固定しよう

先ほど背景画像を設置することができました。ここにプレイヤーや敵を配置していきますが、背景をクリックするたびに背景画像が選択されると面倒なのでロックをしてしまいましょう。

さきほど設置した背景画像の上で右クリックをするとウインドウが開くので、Lock → Lock selection をクリックします。

すると先ほどまでクリックするたびに反応していた背景画像が、選択されなくなったはずです。変更を加えたくなったときは同じ手順でロックを解除します。

背景など動かないものを設置したら、とりあえずロックをかけておいてもよいかもしれません。

今回はここまでです。次回へ続きます。

メンタルハックWEB
Construct 3 の基本操作を学ぶ(2)~キャラの配置と行動 | メンタルハックWEB 前回はプロジェクトの開始と背景画像の配置について、解説いたしました。今回はマップ上にキャラクターや各種エフェクトを配置し、それぞれの動きを設定してみましょう。 ※...
Menu