[新型コロナウイルスによるバックアップCD発送遅延のお知らせ]
デバッグシステムの作成ガイド

はじめに

Clickteam Fusion 2.5 のガイドへようこそ! 本ガイドに記載されている情報の一部は、Multimedia Fusion 2 でも利用できます。 PDF 形式のチュートリアルやガイドはご自由に印刷してお読みください。 お好きな時間にご自身のペースで読み、学習していただけます。

Clickteam Fusion 2.5 では、ある結果を得るための方法は 1 つに限定されません。本ガイドでは、それらのうち、最も一般的かつ簡単で効果的と思われる方法をご紹介しますが、方法はそれだけだけではない、ということを頭の片隅に留めておいてください。

本ガイドは、ゲームであれ、アプリケーションであれ、 Clickteam Fusion 2.5 を使って開発を行おうとお考えの方に、知りたいことを丁寧に説明することを目指して作成いたしました。

本ガイドについてのご意見、ご感想をお待ちしております。 学習者のレベルに合わせたガイドを個別に作成するのではなく、初心者から中級、上級者まですべてのレベルの方が同じガイドで同じ目標を達成できればと考えております。

1. デバッグシステムとは

デバッグシステムとは、通常、ゲームの実行中にはアクセスできない特定の値や文字列を見るために開発されたシステムです。 Clickteam Fusion 2.5 には基本的なデバッガがすでに内蔵されていますが、一部のエクステンションに限られ、見ることができるものもそれほど多くありません。

デバッグシステムは、どんな種類のゲームやアプリにも必ず必要となるものではありませんが、ゲームエンジンやアプリが複雑になってきたなと感じた場合には、各フレームで実際何が起きているのかを知るために大変便利です。 ほとんどすべてのオブジェクト一つ一つからリアルタイムでデータを取得することができます。

本ガイドではそのようなデバッグシステム作成の基本を解説いたします。 その後は必要に応じて、基本を拡張し、用途にあったシステムに発展させてください。 一度デバッグシステムの基本を掴めば、カスタマイズはそれほど難しいことではありません。

2. テスト動作領域の作成

Clickteam Fusion 2.5 を起動し、新規にアプリケーションを作成します。 設定はすべて既定のままで結構です (サイズ 640 x 480 等)。

それでは、フレーム 1 の動作領域にオブジェクトを配置していきます。 まずは、表示 メニュー -> ツールバー -> ライブラリウィンドウ を選択してください。 CF 2.5 のメインウィンドウ下部にライブラリツールバーがポップアップ表示されます。 ライブラリツールバー内には、すぐに使える素材が多数含まれています。

インディゲームクリエイター:ライブラリツールバー

続いて、表示 メニュー -> ツールバー -> レイヤーツールバー を選択します。 ゲームの動作領域をレイヤー 1 として、デバッグシステムをレイヤー 2 として作成します。 理由は、デバッグレイヤーを動作領域の上に表示して、さまざまな値を確認するためです。

本ガイドでは、ライブラリツールバーの Games -> Army のグラフィックを使用します。

インディゲームクリエイター:ライブラリツールバー

いくつかのオブジェクトを動作領域にドラッグアンドドロップしましょう。 どのオブジェクトでも構いませんが、種類の異なるものを 2、3 個追加しましょう。 ヘリコプター、戦闘機、戦車がよいでしょう。

それらを動作領域上に離して配置します。 続いて、これらのオブジェクトに動作を割り当てます。 戦車をコントロールし、ヘリコプターと戦闘機には簡単な AI 動作を割り当てることにします。 ヘリコプターと戦闘機を選択し、次の設定でバウンスボールの動作を割り当てましょう。

下図のように設定します。

インディゲームクリエイター:動作 バウンスボール

続いて、戦車を選択して 8 方向 の動作を次の設定で割り当てます。

インディゲームクリエイター:動作 8方向

つまり、戦車は矢印キーでプレイヤーが移動できます。

キーボードの F8 を押して、動作をご確認ください。

バウンスボールの動作を設定したオブジェクト (ヘリコプターと戦闘機) はほどなく動作領域の外へ消えてしまうでしょう。 イベントを作成してそれを防止します。

イベントエディタに移動して、新しい条件を作成しましょう。 ヘリコプターを右クリックして、位置 -> "DCopter1" の位置を判定 を選択します。

インディゲームクリエイター:新しい条件

位置を判定 のダイアログが表示されたら下図のように設定し、OK をクリックします。

インディゲームクリエイター:位置を判定

イベント行で DCopter1 のセルを右クリックして、動作 -> バウンス を選択します。

インディゲームクリエイター:動作 -> バウンス

ヘリコプターに設定したイベントを戦闘機にも設定します。

完了したら F8 を押して、動作をご確認ください。 ヘリコプターや戦闘機は常に動作領域内に留まるはずです。

以上で、テスト動作領域の作成は完了しました! いよいよデバッグシステムの作成に移ります。

このデバッグシステムでは、すべてのオブジェクトについて、その動作、アニメーションフレーム数、その他我々がトラッキングしたいと思うものは基本的に何でもリアルタイムで検出するように作成します。

それでは、フレームエディタに戻って、デバッグシステムの作成を始めましょう。

3. デバッグ レイヤーの作成

本ガイドの最初のほうで表示したレイヤーツールバーを覚えていますか? CF 2.5 ウィンドウの右側にまだ見えていますよね。 新規レイヤー ボタン をクリックして新しいレイヤーを作成しましょう。

インディゲームクリエイター:新規レイヤー ボタン

下図のようになるはずです。

インディゲームクリエイター:レイヤー ツールバー

レイヤー 2 は、これからデバッグシステムを作成するレイヤーです。 レイヤーが複数存在する場合、現在選択されているレイヤーが CF 2.5 の操作の対象になります。 上図が示す通り、現在はレイヤー 1 が選択されていますが、デバッグシステムを作成したいのは、レイヤー 2 です。 レイヤー 2 をクリックして選択しましょう。 続いて、レイヤー 1 の 目のアイコン をクリックして、レイヤー 1 を非表示にします。 レイヤー 2 上でデバッグシステムを作成中は、レイヤー 1 に何があるかは確認する必要はありません。

それでは、デバッグシステムの作成を始めましょう。

レイヤー 2 に新しいオブジェクトを追加します。 メニューから 挿入 -> 新規オブジェクト を選択して、クイック背景オブジェクト を追加してください。 追加したら下図のようにサイズ変更して配置します。

インディゲームクリエイター:クイック背景オブジェクト

クイック背景オブジェクトをクリックして選択し、プロパティを確認します。 表示オプション タブをクリックし、ブレンド係数を 51 に設定します。 オブジェクトが半透明になりますので、その下にあるレイヤーが確認できます。

インディゲームクリエイター:プロパティ クイック背景

クイック背景オブジェクトで作成したこの小さな 「タブ」 が我々のデバッグタブになります。 必要な情報はすべてここに表示します。 今回は、デバッグ情報を文字列および/またはカウンターとして表示することにしましょう。 それでは、文字列オブジェクトをいくつか作成して配置します。 下図のように文字列オブジェクトを作成してみてください。

インディゲームクリエイター:デバッグレイヤー

これらはすべて文字列です。 グレーのデバッグタブ領域に収まるように適当に整列して配置してください。 この後、 1 つのシンプルなイベントを作成して、これらの情報をすべてリアルタイムで更新するようにします。 それではイベントエディタに移りましょう。

インディゲームクリエイター:イベントエディター

4. イベントの組み込み

初めに、Tab キーを押したらデバッグレイヤーの表示/非表示が切り替わるようなイベントを作成します。 このような場合は、フラグ を切り替えるのがベストです。 フラグという言葉を初めて聞いた方、心配しないでください。 これから説明します。 1 つのフラグには 2 つの状態があります: 有効 か 無効 かです。 0 か 1、真か偽、のようなものです。 このフラグの状態を判定します。

それでは、新しいイベントを作成して条件を挿入します: キーボード -> キーを押した時

インディゲームクリエイター:キーボード -> キーを押した時

キーを押すように指示するメッセージが表示されたら、 Tab キー を押します。 これで次のように表示される新しい条件が挿入されます: "Tab" キーを押した時。 従って、この条件行で、プレイヤーである戦車のフラグを変更します。 戦車のセルを右クリックして、フラグ -> 切り替え を選択します。

インディゲームクリエイター:フラグ -> 切り替え

今回はフラグ番号 0 を切り替えることにします。 数式エディタが表示されたら 0 のまま OK ボタンをクリックします。 それでは、フレームエディタを表示してください。 ここで新しいオブジェクトを挿入する必要があります。 挿入 メニュー -> 新規オブジェクト を選択し、続いて レイヤーオブジェクト を選択します。

インディゲームクリエイター:レイヤーオブジェクト

このオブジェクトは、表示/非表示などのレイヤー アクションを実行するために必要となります。 またイベントエディタに戻ります。 ここで、フラグが有効か無効かを判定する必要があります。 「フラグが有効ならば、デバッグレイヤーを表示する。 フラグが無効ならば、デバッグレイヤーを非表示にする」 というものです。

新しい条件を作成します。 戦車を右クリックして、変数 -> フラグ -> フラグが有効 を選択します。

インディゲームクリエイター:変数 -> フラグ -> フラグが有効

数式エディタが表示されたら 0 のまま OK ボタンをクリックします。 続いて、この条件に新たな条件を追加する必要があります。 たった今作成した条件を右クリックして、挿入 を選択します。 続いて、特別オブジェクトを右クリックして、条件を制限 -> イベント連続時にアクションを 1 回のみ実行 を選択します。

インディゲームクリエイター:条件を制限 -> イベント連続時にアクションを 1 回のみ実行

以上で下図のように条件が作成されたはずです:

インディゲームクリエイター:条件

「イベント連続時にアクションを 1 回のみ実行」 とは、最後のループと同じ状態であっても、このイベントに対して繰り返して適用しない、という意味です。 何も変化がないとすれば、これらのアクションを再度実行する目的は何でしょうか? このイベント行で、レイヤーオブジェクトのセルを右クリックして、レイヤー -> インデックス順 -> 表示/非表示 -> 表示 を選択します。 数式エディタが表示されたら 2 と入力して OK をクリックします。

インディゲームクリエイター:レイヤー -> インデックス順 -> 表示/非表示 -> 表示

以上のイベントを作成したら、同じようなイベントをもう 1 つ作成します。 今度は条件で、フラグを無効に、アクションで、非表示を選択します。

ここまで完了したら、 F8 を押してアプリケーションを実行してみてください。 Tab キーを押すとデバッグレイヤーが表示され、もう一度押すと非表示になります。

いかがでしょうか。 想定した通りに動作しましたか。 たった一つのキーを押すだけでランタイム時にデバッグレイヤーの表示/非表示を切り替えることができました。

続いて、デバッグ文字列に情報を表示します。

またイベントエディタに戻ります。 情報を表示するのに、常に実行 という条件を使用することもできます。 常に実行とは、 1 秒間に 60 回すべての文字列をレンダリングするという意味ですが (60 FPS の場合)、これは効率的ではありません。 デバッグレイヤーが非表示の場合は、デバッグ情報は一切見えませんので無駄です。

したがって、この場合は下図の条件を使用しましょう:

インディゲームクリエイター:0にフラッグ

こうすれば、フラグが有効の場合にのみデバッグ文字列を更新します。 フラグが有効の場合とはつまり、デバッグレイヤーが表示されている場合、ということです。 今回は、「イベント連続時にアクションを 1 回のみ実行」 は使用しません。 レイヤーが表示されている間は常に連続して実行し、デバッグ文字列を更新しながら表示し続けたいからです。

それでは、このイベント行の最初の文字列 (DCopter1 Position X:) のセルを右クリックして 可変文字列を変更 を選択します。

インディゲームクリエイター:可変文字列を変更

数式エディタが表示されたら、"DCopter1 Position X: "+Str$ (X("DCopter1")) と入力します。 既存の文字列である DCopter1 Position X: にプラスして DCopter1 の X 座標を文字列で表示するという意味です。 X("DCopter1") の部分は、 Dcopter1 のアイコンを右クリックして、位置 -> X 座標 を選択しても入力できます。

インディゲームクリエイター:位置 -> X 座標

下図のように入力したら、OK ボタンをクリックして数式エディタを閉じます。

インディゲームクリエイター:可変文字列を変更

以上の作業を同じイベント行で、他の文字列に対しても行います。 例えば次の文字列である DCopter1 Position Y: については下記のように設定します。

"DCopter1 Position Y: "+Str$ (Y("DCopter1"))

ここまで設定したら、 F8 を押してアプリケーションを起動してみましょう。 続いて Tab キーを押してデバッグレイヤーを表示します。 上 2 つの文字列について、情報が更新されているでしょうか。 これらはオブジェクト DCopter1 の X および Y 座標を常時抽出して表示しています。 便利な機能でしょう? そうです。 残りのデバッグ文字列も設定していきましょう。

ご注意: Str$() とは、数字を文字列に変換するコマンドです。 移動するオブジェクトの X 座標や Y 座標は数字ですので、ここでは Str$() コマンドを使用して、これらの数字 (値) を文字列に変換し、テキストとして表示しています。

5. デバッグシステムのテスト

次の文字列 DCopter1 Speed: は DCopter1 の速度です。 セルを右クリックし、再度 「可変文字列を変更」 を選択します。 数式エディタが表示されたら、 "Dcopter1 Speed: "+Str$(Speed("DCopter1")) と入力します。

インディゲームクリエイター:可変文字列を変更

OK ボタンをクリックして数式エディタを閉じます。 続いて次の文字列のセルを右クリックしてまた 「可変文字列を変更」 を選択し、次のようにタイプします: "DCopter1 Anim Frame: "+Str$(Image("DCopter1"))

インディゲームクリエイター:可変文字列を変更

どうですか? 面白いでしょう? 以上でオブジェクト DCopter1 に関する 4 つのデバッグ文字列の設定が完了しました。 また F8 を押してアプリケーションを実行してみてください。 Tab キーを押せば、デバッグレイヤーが表示され、 DCopter1 の 4 つの値がリアルタイムに更新、表示されます。

ここまで完了したら、他のオブジェクトについても同様の作業を繰り返して設定してください。 すべて同じイベント行に設定します。 各デバッグ文字列で数式エディタに必要なコマンドをタイプします。 Str$() コマンドは、数字 (値) を文字列に変換するコマンドですので、お忘れなく。

それでは、最後の文字列 「Frames Per Second」 について説明します。 さっそく設定しましょう。 これは、ランタイム時のアプリケーションのフレームレート (FPS、フレーム/秒) を表示します。 やはり、これまでと同じイベント行でセルを右クリックし、 「可変文字列を変更」 を選択します。 数式エディタが表示されたら、次のように入力します: "Frames Per Second: "+Str$(Framerate)

インディゲームクリエイター:可変文字列を変更

完了したら F8 を入力して、動作を確認してください。

6. おわりに

以上で、デバッグシステム (デバッグ レイヤー) の基本的な作成方法を学んだことになります。 いかがでしょう。 デバッグレイヤー上では、あらゆることが完全にカスタマイズ可能であることをご理解いただけましたでしょうか。 あらゆるオブジェクトについて、非常に多くの情報をランタイム時に入手可能で、それは文字通り、あらゆるオブジェクトについてです。 INI オブジェクトでもプログレスバーでも、数式が利用できるオブジェクトならその他何でも情報は取得できます。

繰り返しになりますが、デバッグシステムはすべてのゲームで必要なものではありません。 ただ、中規模以上のプロジェクトならば必要になってくるでしょう。 大規模のプロジェクトなら必須と言えます。

デバッグシステムのもう 1 つの利点は、作業したプロジェクトに何か問題が発生し、その原因がわからない時のためです。 デバッグシステムに必要な情報を表示することにより、問題を追跡し、問題となっているイベントを突き止める助けとなります。

本ガイドはこれで終了しますが、このあと必要な拡張を続けてご自身の用途にあったデバッグシステムを作成してください。