HUDを作る
HUDとはプレイヤーのヘルスやスコアなどのゲーム情報を表示させるインターフェイスのことです。テキストオブジェクトを使って簡単なHUDを作成しましょう。
HUDは画面上、常に見える状態になっているべきものです。インターフェイス用のオブジェクトは、例えばプレイヤーが動いた時に画面の外にスクロールして消えてしまっては困ります - 常に表示されているべきものですから。レイヤーは、デフォルト設定ではスクロールするようになっています。レイヤーを画面に固定するためにはレイヤーの Parallaxパララックス効果 の設定を使います。パララックスとは、別々のレイヤーをそれぞれ異なるスピードでスクロールさせることで疑似的に3D効果を持たせることを指します。ただし、パララックスの値を0にすると、一切スクロールしなくなってしまうのです。これはHUDの実装に最適ですね。
前に使用したレイヤーバーに戻ってください。そして、HUD と名付けた新しいレイヤーを加えましょう。一番上のレイヤーになるよう留意し、なおかつ選択されていることを確認してください(選択することでアクティブレイヤーになるきましでしたね)。Parallax プロパティーの値をproperty to 0, 0 に設定します(X軸とY軸に対してともに0にする、ということです)
空白をダブルクリックして 新しいオブジェクトを加えます。 今回は Text オブジェクトを選び、レイアウトの左上あたりに配置します。文字が黒色だと見にくいので、プロパティーバーを使って文字のスタイルは,bold、italic,、色はyellowを選択し、フォントはやや大き目のサイズを指定します。サイズは表示される文字が入るぐらいの大きさに変更しましょう。 以下のようになっていれば大丈夫です。
今度はイベントシートに切り替えてください。テキストがプレイヤーのスコアを反映して更新されるようにしましょう。以前加えた Every tick イベントに、新たに Text -> Set text というアクションを加えます。
ところで & オペレーターを使って、数を文字に変換し、繋げて別の文字列を作ることができます。テキストは以下のように設定しましょう。
"Score: " & Score
前の部分、 ("Score: ") は、文字列が常に Score: というラベルで始まることを意味します。後ろの部分、(Score)、っとなっていますが、この部分にはスコア グローバル変数の値が代わりに表示されるようになります。 & が前と後ろの部分をつないで一つの文字列を作るというわけです。
ゲームを実行して、モンスターを何匹かやっつけてみましょう。 スコアが表示され、画面上の同じ場所から動かないようになっていますか?
最後の仕上げ
もうすぐ完成です。最後の仕上げといきましょう。
まず最初に、モンスターを全部やっつけてしまうと何もすることが無くなってしまってはつまらないので、定期的にスポーン(生成)するようにしましょう。三秒に一回、新しいモンスターを生成するようにします。新いイベントは以下のように設定します。
コンディション: System -> Every X seconds -> 3
アクション: System -> Create object -> Monster, レイヤーは 1, X軸には 1400, Y軸には random(1024)
1400 はX軸上、レイアウトの右端をすぐ超えたあたり。 random(1024) はランダムに決定されるY軸上の位置で、レイアウトの高さのどこかになります。
そして最後に、モンスターがプレイヤーを殺せるようにしましょう。
コンディション: Monster -> On collision with another object -> Player
アクション: Player -> Destroy
最後に
おめでとうございます、Construct 2で作成する初めての HTML5 ゲームがついに完成しました。もしサーバーを持っているのであれば、FileメニューのExport でゲームを他の人たちに見てもらえるように出来ます。Construct はまず、プロジェクトの全てのファイルをコンピューターのファルダーに保存します。さらにそれをサーバーにアップロードしたり、ウェブページに組み込んだりして公開することができます。もしサーバーを持っていないなら、 ドロップボックスを使って共有するという方法もあります。
このチュートリアルで、Construct2 のいくつかの重要な基礎を学習しましたね:オブジェクトの挿入、レイヤーの使い方、ふるまい、イベント、などなど。 今後さらに Construct 2 を学ぶための準備になったでしょうか? 他にもいろいろ便利な機能が沢山あります、ぜひ試してみてください。
完成品のダウンロード
チュートリアルプロジェクトの完成したものをダウンロードしてみてください。ゲームオーバー" のメッセージやモンスターのスピードがだんだん上がる、といった機能を加えてあります。もう基礎を理解しているので、どのような仕組みかすぐに分かるはずですし、解説のコメントもたくさん書いてあります。
大変お疲れ様でした!もし、このチュートリアルに何か問題があったり改善できる点などがあるようでしたら、コメントを残すか、フォーラムにメッセージを残してください。出来る限りの対応をします。
最後に、もしこのチュートリアルを気に入ってくださって、友達にもConstruct 2 を紹介してみたいと思ったのであれば、リンクを送って差し上げてはどうでしょう? 怒られるようなことにはならないでしょう :)
さらに学習する
音楽やサウンド効果に興味がありますか?マニュアルの Sounds & Music セクションに簡単な解説がありますので試してみてください。
また、プラットフォームゲームを解説した別の初心者向けガイドもありますHow to make a platform game.
Construct 2 のイベントの仕組みをもっと詳しく知るためには、マニュアルの How Events Work セクションを読むことをお勧めします。今後、ご自分のプロジェクトをスムーズに進めるためにも一度読んでおくといいでしょう。さらにもっと情報が必要な場合はマニュアルとして完全なドキュメンテーション complete documentation in the manual があることもお忘れなく。