Construct 3 の基本操作を学ぶ(6)~スコアの表示

前回はインスタンス変数を使って敵にHPを設定する方法について、簡単に解説をしました。今回は敵を倒したときにスコアが表示される仕組みを作ってみたいと思います。

※この記事では、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

グローバル変数を使ってみよう

前回の記事でインスタンス変数のお話をしました。オブジェクトに変数をつけることができる機能で、いろいろ応用ができます。

今回は特定のオブジェクトではなくて、ゲーム全般(すべてのレイアウトに適用される)に変数を設定します。これをグローバル変数 ( global variable ) と呼びます。

イベントシートを開いて、下の余白の部分で右クリックをしウインドウを開いて、Add global variable を選択してください。

すると設定画面が開きます。名前を Score にしましょう。ほかの要素はデフォルトのままでOKです。下部のOKボタンをクリックしてください。

※ initial value は開始時の数字を表しています。ゲーム開始時のスコアということなので、そのまま0でいいですよね。

画面がもとにもどりますが、イベント一覧の最上部に global number Score = 0 の表示が追加されているはずです。

これでスコアをためていく準備ができました。次に敵を倒したときに今設定した Score に数字が付与される仕組みを作っていきます。

敵を倒したときに数値を加算する

敵 ( Monster ) を倒したときにスコアが加算されるようにしたいので、イベントシートを開いて以前に作った、条件:Monster HP ≦ 0 に新たなアクションを加えます。

Add action をクリックし、System → Add to と選択します。するとウインドウが開きますが、デフォルトの状態で Score  1 が入力されているはずなので、そのままでOKです。

下部の Done をクリックするとアクションが追加されているはずです。これで敵を倒したときに、1という数字がグローバル変数に追加されます。

でもこのままではどこにもそのスコアが表示されません。試しにプレビューで確認してください。どこにも変化はないですよね。

次のセクションでこれを「見える化」してきましょう。

スコアを表示させる

スコアを表示させるための流れは以下のようになります。

  • 新たなレイヤーを作る
  • テキストオブジェクトを配置する
  • テキストに、得たスコアを表示させる

ということでまずは新しいレイヤーを作りましょう。

レイヤーなんですが画像編集ソフトなどを使っている方にはおなじみのあれです。簡単に言ってしまうと、透明なガラス的なものです。

画面右下にあるレイヤーウインドウの余白で右クリックをして Add layer at top をクリックしてください。

新しいレイヤーが layer 0 の上に生成されましたね。このまま名前を入力することができるので HUD と入力しエンターキーを押しましょう。

HUD とは Heads-Up Display の略で、常に表示されているスコアや残機表示に用いられる用語です。レイヤーの名前はなんでもいいのですが、慣習に従ったほうが良いでしょう。

レイヤーが複数になると要注意です。何か作業をする前に、そのレイヤーが選択されているかを確認してください。

これから HUD レイヤーにスコアを表示させるためのテキストを配置するので、HUD が選択された状態にしておきます。

まずは、この HUD を画面に固定していつでも同じ場所にあるようにしたいのです。

なぜかというと、思い出してほしいのですが、Player が常に画面の中央にいるようにビヘイビア( scroll to )を設定しているので Player の動きと共に画面が動いてしまって、せっかくのスコア表示が見えなくなってしまうからです。

HUD が選択されていることを確認し、画面左の Properties ウインドウを見てください。scroll & zoom の項目内に parallax というものがあると思います。

デフォルトでは 100% 100% になっていますが、これを 0,0 に変更しましょう。これで HUD は下層レイヤーがどんなに動いても、つねに固定表示されている状態となります。  

次にテキストを入れます。これはオブジェクトを配置したときと同じ要領で行っていきます。

再度 HUD レイヤーが選択されていることを確認し、画面上でダブルクリックをして Text のアイコンをダブルクリックしてください。するとマウスポインタが十字に変化します。

この状態で背景画像の左上部をクリックしてください。テキストボックスが配置されます。

デフォルトでは文字が黒くなっていてほとんど見えないと思います。テキストが選択された状態で画面左の Properties 内の size と color の項目をそれぞれ 18 と 白に変更しましょう。色は直感的に選ぶことができます。

これで Text という文字が見えるようになりましたね。

ここで一度プレビュー画面で確認してみてください。Text という文字が常に画面左上に表示されていますね。これからここに Score を表示させます。

イベントシートを開き、以前に作った system → every tick にアクションを加えます。復習になりますが、この every tick は「常時」という意味でした。

Add action をクリックし text → Set text とクリックし進めます。すると入力画面が開くので “Total : ” & Score と入力してください。”~”内はそのままそれがテキストとして表示されます。

& Scoreの部分はグローバル変数の Scoreを表しています。要するに一体倒すごとに追加される数字がここに表示される仕組みです。この辺りは Java Script っぽいですね。

さて、ここでプレビュー画面で確認をしてみてください。敵を倒すごとに Total : の部分に数字が加算されていればイベントがうまく機能しています。

上手く動かない場合は、レイヤーや変数の名前などをもう一度確認してください。

今回はここまでです。ほぼゲームは完成していますが、次回は敵を自動的にスポーンさせる機能を追加し、全体のまとめをします。

メンタルハックWEB
Construct 3 の基本操作を学ぶ(7)~敵の自動スポーン(生成) | メンタルハックWEB 前回はグローバル変数を使って敵を倒したときにスコアを表示させる方法を簡単に解説をしました。今回はいよいよ最終回です。敵の自動スポーンとプレイヤーの消滅を設定して...
Menu