Construct 3 の基本操作を学ぶ(2)~キャラの配置と行動

前回はプロジェクトの開始と背景画像の配置について、解説いたしました。今回はマップ上にキャラクターや各種エフェクトを配置し、それぞれの動きを設定してみましょう。

※この記事では、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 r368.2 ★★★★★ Launch Construct 3 r368.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.
Menu

キャラクターを配置しよう

まずは今回使うキャラクターとエフェクトの画像をサイトからダウンロードをしましょう。リンクを開いて画像の上で右クリックをし、「名前を付けて画像を保存」を選択、わかりやすいところに保存します。

では、画面上にこれらを配置していきましょう。

画面上のどこか適当なところでダブルクリックするとウインドウが開きます。下にスクロールをして Sprite をダブルクリックしてください。

ウインドウが閉じてマウスポインタが十字に変化しています。この状態でどこでもよいので画面上をクリックしてください。

すると Sprite の編集画面が開きます。ここで直接絵を描くこともできますが、今は先ほどダウンロードした画像を使いたいので、上のタスクバーの中にあるフォルダのボタンをクリックし、自分のPCから画像をもらってきましょう。

この作業を繰り返して、とりあえずどこでもよいので先ほどダウンロードした4つの画像をレイアウト上においてください。

4つの画像を置くことができたら、それぞれ名前を変更しましょう。この名前はあとで他との関連性をつけていくときに重要になってきます。混乱を防ぐためにそれぞれ適切な名前を付けてください。

名前を付けるには、まず対象をクリックし、画面左の Properties ウインドウの Name の部分を変更するだけです。それぞれ、PlayerMonsterExplosionBullet とします。

※ちなみに画像を入れる際は、ドラグ&ドロップでもOKです。でも一度に複数の画像をドロップすると一つのグループとして認識されてしまうので、一つずつやることを忘れないでください。

さて、とりあえず Bullet と Explosion はゲーム開始時に画面上にあってはいけないものなので、画面の外に出しておきましょう。背景画面がない、バックが白のところに移動(ドラグドロップ)してください。

プレイヤーに動作を設定しよう

配置したそれぞれのオブジェクトに動作(Behaviors)を設定していきます。

まずプレイヤーに「方向キーを押すとその通りに移動する」という動作を設定してあげます。Player を選択した状態で、左の Property ウインドウ内の Behaviors → Add / edit Behaviors を選択します。

新しいウインドウが開きここに選択した動作の一覧が表示されるのですが、まだ何も選択していないので何も表示されていないはずです。この画面で Add new behavior をクリックしてください。 

するとたくさんのアイコンが表示されました。下にスクロールをして、8 direction というアイコンをダブルクリックしましょう。そうすると先ほどの画面に戻りますが、リストに 8 direction が追加されたはずです。

この 8 direction という Behavior によって Player を方向キーで操作できるようになったはずです。ここで一度プレビュー画面で実際に動きを確認してみましょう。

いろいろ問題があると思います。まずはプレイヤーが移動しても画面が追従しないのでフレームアウトしてしまうこと。そして、背景画面の外に出てしまうこと、この2点を改善するための動作を追加していきましょう。

ここで先ほどと同じ要領で、ほかの二つの動作 Scroll To と Bound to layout も追加してください。画面は以下のようになっているはずです。

もう一度プレビューを開いて操作してみてください。いくら動かしてもプレイヤーが常に画面の中央にいて、かつ、画面から外に出なくなったと思います。

このように、少し変更を加えたらプレビューで動作を確認するとよいですよ。

他のオブジェクトに動作を設定しよう

さて、プレイヤーは自由に動き回り、かつ常に画面が追従し背景から飛び出ない状態になりました。

同じようにほかのオブジェクトにも動作を設定していきます。

  • Monster に Bullet movement 
  • Explosion  Fade 
  • Bullet  Bullet movement と Destroy outside layout 

それぞれ以下のような効果がオブジェクトに付与されます。

  • Bullet movement : まっすぐ今の角度で直進させる
  • Destroy outside layout : レイアウトの外に出ると消滅する
  • Fade : 徐々に消えていく

ここで一度プレビューで様子を見てみましょう。Bullet と Explosion はレイアウトの外に出ているので確かめることができませんが、Monster の動きに注目してください。

Bullet movement を付与しているので、プレビュー開始とともにビューっと前進していきますね。でもちょっとスピードが速すぎると思いませんか? スピードを調整してみましょう。

Monster を選択した状態で左のプロパティ画面を見てください。Behaviors の中に Bullet という項目があって、そのすぐ下に speed という欄があるはずです。

ここの数値で Bullet movement の直進スピードを変えることができるのです。400になっているはずなのでこれを80に変えてみてください。そしてもう一度プレビューで確認してみましょう。

Monster の移動スピードがいい感じになっていると思います。

今回はレイアウトにオブジェクトを追加して、それぞれに動作を設定してみました。お気づきだと思いますが、様々な動作をオブジェクトに付けることができるので工夫次第でかなり多くの動きを実装することができます。

いろいろ試して遊びながら学んでいきましょう。次回は player がマウスポインタの方向を常時向いているように、イベントを設定してみます。

メンタルハックWEB
Construct 3 の基本操作を学ぶ(3)~イベントの基本 | メンタルハックWEB 前回はオブジェクトを設置して、それに動作(Behavior)を加えました。今回はイベント (Event) を追加して機能を持たせてみます。よりゲームらしい表現が可能になります。 ...
Menu