オブジェクトの絞り込みに関する基本ガイド

はじめに

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

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

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

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

1. オブジェクトの絞り込み

ゲームを作成していると、ある種類の敵キャラをレベル内のいたる所で登場させたい場合があるでしょう。 そして、それらの敵キャラすべてについてではなく、それらのうちのたった 1 つに対してだけ、ある種の条件やアクションを適用したい、という場合もあるかもしれません。

その場合、あなたが 「絞り込み」 をしなければ、ほとんどの場合、そのアクションはすべての敵キャラに対して適用されてしまうでしょう。例えば、フレーム内にアクティブという名のオブジェクトが存在し、それには 4 つのフレームが含まれ、それぞれに異なる色付けがされている、という場合を考えてみます:

ワークスペースツールバー

アニメーションフレームはこんな感じです:

アニメーションフレーム

アニメーションの速度は 0 に設定します。 つまり、アニメーション表示はさせません。 ただ 4 つのフレームを用意して、選べるようにするだけです。

動作領域にアクティブ オブジェクトが 3 つ存在しているとします。 ここに例えば、フレームが開始: アニメーションフレームを 1 に変更 (フレーム番号は 0 から始まるので、1 = フレーム 2) というイベントを作成すると、結果的に下図のように、3 つのアクティブオブジェクトすべてでフレーム 2 (黄色) が表示されることになります。

フレーム1

それでは次に、アクティブオブジェクトは最初赤く表示され、ユーザーがその上にマウスポインタを移動すると黄色に変化する、という場合を考えてみましょう。

違うフレーム1

ここで絞り込みの登場です。 ある条件に合致したオブジェクトのみを選択するようイベントで設定します。 Clickteam Fusion 2.5 におけるオブジェクトの絞り込みについては、詳しく説明を始めるときりがないほど実は深い話題であり、オブジェクトの個々のインスタンスの参照を完全にコントロールできるほど便利なものでもあります。

次ページからは、基本的なオブジェクトの絞り込みについて、実際にテストアプリを作成しながら説明します。

2. 動作領域の設定

早速テストアプリを作成していきましょう。 新規アプリケーションを作成し、フレームエディタで アクティブオブジェクトを 1 つ挿入します。

新規オブジェクトの作成

挿入したアクティブオブジェクトは、動作領域の真ん中あたりに配置してください。 アクティブオブジェクトをダブルクリックして編集します。フレーム 1 のコピーと貼り付けを繰り返して、 4 つのフレームを作成します。

オブジェクトの設定

続いて 4 つのフレームすべてを異なる色に変更します。 カラーパレットで選択した色で塗るには、塗りつぶしツールを使用します。塗りつぶしツールのアイコンをクリックし、許容誤差を 100 に変更してください。

塗りつぶしツール

各フレームを下図のように、赤、黄、緑、青に変更します。

オブジェクトの色変更-赤

続いて、方向オプション タブをクリックし、アニメーションの速度を 0 に変更します。 この変更によって、アクティブオブジェクトはアニメーション表示せず常に静止した状態になります。 次の項では、イベントでどのフレームを表示させるかを設定します。

OK ボタンをクリックしてピクチャエディタを閉じます。 フレームエディタで、オブジェクト一覧からアクティブオブジェクトを動作領域にドラッグアンドドロップし、下図のように数多く配置します。これよりもっと多くのオブジェクトを配置してもかまいません。

フレームエディター

続いて、イベントエディタに移動し、絞り込みの条件を作成します。

イベントエディター

3. イベントの作成

これからイベントエディタで、最もシンプルかつ基本的な絞り込みのテクニックを使います。 イベントには 「条件」 があります。 1 つの 「条件」、 または複数の 「条件」 が満たされると、設定したアクションがオブジェクトに対して実行されます。 条件があいまいであったり、オブジェクトと関連付けられていない場合、あるオブジェクトに対して実行されるアクションは、そのすべてのオブジェクトに対して実行されます。例えば、フレームが開始 という条件は、いかなるオブジェクトにも言及していないので、あいまいです。したがって、このイベント行でアクティブオブジェクトにアクションを設定すると、すべてのアクティブオブジェクトに対して適用されます。

アクティブオブジェクトの X 位置が 100 より大きい、というような条件の場合、このイベント行でアクティブオブジェクトに対して実行されるアクションは、その X 位置が 100 より大きいアクティブオブジェクトにのみ適用されます。 その X 位置が 100 以下のアクティブオブジェクトには適用されません。 X 位置が 100 より大きいアクティブオブジェクトを条件としたため、その条件を満たさないアクティブオブジェクトに対しては影響を及ぼさないのです。

それでは、最初の条件を作成してみましょう。 実際に試したほうが理解しやすいはずです。 新規条件を作成し、特別オブジェクトを右クリックして、常に実行 を選択します。

特別オブジェクト-常に実行

イベントエディタは、ランタイム時に、イベントを上から順に下まで実行します。 イベントエディタがすべてのイベントを一通り実行した状態を「tick」 (1 周) と呼びますが、「常に実行」 とは毎 tick ごと実行という意味になります。 したがって、毎 tick ごとにこのイベント行に設定されたアクションを適用することになります。

条件が作成されたら、その条件行でアクティブオブジェクトのセルを右クリックし、アニメーション -> 変更 > アニメーションフレーム... を選択します。

フレームの変更

数式エディタが表示されたら 0 を入力します。フレーム番号 0 のフレームを表示する、という意味ですが、イベントエディタからフレームを参照する場合、0 から始まりますので、実際には一番最初のフレーム、つまり フレーム 1 を表示することになります。

フレーム1を表示

OK ボタンをクリックして数式エディタを閉じます。 続いてもう 1 つイベントを作成します。新規条件を作成し、マウスポインタとキーボードオブジェクトを右クリックし、マウスポインタがオブジェクト上にあるを選択します。

条件-マウスオーバー

次のダイアログでは アクティブオブジェクト を選択し、

条件-マウスオーバーの設定

OK ボタンをクリックしてダイアログを閉じます。 完成した条件行で アクティブオブジェクトのセルを右クリックし、アニメーション -> 変更 -> アニメーションフレーム を選択します。 数式エディタが表示されたら 1 と入力して OK ボタンをクリックします。

それではアプリケーションを実行して、動きを確かめてみましょう。 F8 を押してアプリケーションを実行します。 アクティブオブジェクトは常に赤く表示されます。 ただし、マウスポインタをいずれかのアクティブオブジェクト上に移動すると、そのオブジェクトは黄色に変化します。つまり、最初のイベントですべてのオブジェクトを常に赤く (フレーム番号 0) 表示させ、マウスポインタがオブジェクト上に移動した場合のみ、黄色 (フレーム番号 1) に変化するよう設定したので、このような動作になったわけです。

ここで作成した 2 つのイベントで、オブジェクトの絞り込みの基本的な考え方が理解できたかと思います。条件であるオブジェクトについて言及されている場合、すべてのオブジェクトを検索してその条件に合致するものを探し、アクションを適用します。 イベントの条件でオブジェクトについて何ら言及されていない場合、アクションはそのオブジェクトのすべてのインスタンスに対して適用されます。

4. 練習

オブジェクトの絞り込みについてはもう少し試して、使い方を練習してみることを強くお勧めします。 Clickteam Fusion 2.5 でのゲームやアプリ制作において、非常に役立つテクニックであることがおわかりになるでしょう。

例えば、さきほど作成したイベントからアクションを削除して次のようなものに置き換えてみてください。 これら以外にもいろいろお試しください。

常に実行: オブジェクトを非表示にする (アクティブオブジェクトのセルを右クリック、表示/非表示 -> オブジェクトを非表示にする)

マウスポインタがオブジェクト上にある:オブジェクトを再表示する (アクティブオブジェクトのセルを右クリック、表示/非表示 -> オブジェクトを表示)

または

常に実行: 半透明を 128 に変更 (アクティブオブジェクトのセルを右クリック、エフェクト -> Obsolete -> 半透明に設定)

マウスポインタがオブジェクト上にある:半透明を 1 に変更 (アクティブオブジェクトのセルを右クリック、エフェクト -> Obsolete -> 半透明に設定)

エフェクト-Obsolete-半透明.png 半透明の設定.png