こんにちは！この記事ではトリガー・ギミックを用いて、THE 橋渡りのワールドのギミックを作成する方法を紹介します！今回は、「ボタンを押したら一時的に表示されるオブジェクト」を作っていきます！
実際に体験できるワールドはこちらから
各コンポーネントについての詳細は公式ドキュメントをご確認ください
実際につくってみる
▼ 今回使用したアセット
すでにワールドを作っている方は、お持ちのSceneデータを使ってやってみましょう！
オブジェクトの準備
まずはステージを作るために、好きなように配置しましょう
次にボタンとなるオブジェクトも配置してアイテムとして触れるようにしましょう！
アイテムの作り方はこちらの記事で詳しく説明しているので参考にしてみてください
今回のオブジェクトは、置いてある状態で直接使うため、「Interact Item Trigger」をアタッチします！「マウスクリック（デスクトップの場合）されたとき」に、「自分自身（This）」に「ボタン（button）」という「信号（Signal）」を送りたいので上記の画像のように設定しました。
詳しいトリガー・ギミックの仕組みの説明はこちらの記事を参考にしてみてください
Cubeオブジェクトは後々好きなモデルに差し替えられるようにトリガー・ギミックのコンポーネントはつけていません。それでは、試しにSceneを再生してみましょう！
アイテム化ができていれば、オブジェクトの枠に色が付きます！
オブジェクトを非表示から表示に切り替える
ここからはTHE 橋渡りで行っている、橋の非表示から表示を作っていきます。
まずは表示状態が切り替わる橋のオブジェクトを作成しましょう！
「Button」オブジェクトを作った時と同じく、「Bridge」という空のオブジェクトを作成し、子オブジェクトとして橋のモデルを配置します。今回は「Bridge」オブジェクトにも、橋のモデルにも、特に付けるコンポーネントはありません。ただ、「Bridge」オブジェクトは非表示にしておきましょう。
アニメーションをつくる
このワールドでは「Bridge」オブジェクトの表示状態をアニメーションを用いて行っています。では、アニメーションを作っていきましょう！
まずはアニメーションウィンドウを表示させます。
「Window」＞「Animation」＞「Animation」から表示させることができます！
以下のようなウィンドウが開けばOKです！
では「Create」ボタンからアニメーションのファイルを作成しましょう。
「BridgeAnimation」という名前で作成してみました。
また、このアニメーションファイルを選択すると、
「アニメーションウィンドウ」の表記が以下のように変わります。
これでアニメーションを作成する準備ができました。
では、早速作っていきましょう！
作成方法は、アニメーションウィンドウの「Add Property」を押すのですが、今はまだ押しても反応がありません。どのオブジェクトのアニメーションを作成するのかを選択してないので、まずはオブジェクトの選択からしていきます。
橋の表示状態が変わるアニメーションを作成するので、「hierarchy」から「Bridge」をクリックして選択します。これで「Add Property」を押すことができます。
次にオブジェクトの状態を記憶するためにキーフレームを設定していきます。
「Add Property」＞「Bridge」＞「Is Active」を選択し、赤枠の✙ボタンを押します。
「Is Active」はオブジェクトが表示されてるか、消えているかを制御する項目です。
では、✙ボタンを押してみます。
すると・・・
上記のような表示に変わります。
さらに、アニメーションウィンドウの右上にある「歯車マーク」＞「Seconds」を選択します。
これにより、アニメーションが再生されて何秒経過したらオブジェクトがどう変化するか、を制御することができるようになります。
今回はボタンを押したらすぐ表示されてほしいので、考え方は、「ボタンを押す」＞「アニメーションを再生」＞「すぐ橋を表示」です。
ですので、アニメーション再生したらすぐに橋が表示するように設定していきます。
白色の縦棒を一番左側の０秒の位置まで移動させます。
赤枠の数値を直接変えることでも、変更出来ます！
※60で１秒になります
そして、この白い棒の位置が現在キーフレームにキーを打つ位置（時間）になります。
なので、今は０秒の位置にキーを打つことになります。
どのようなキーかというと、「オブジェクトを表示状態にする」というキーです。
やり方は・・・
赤枠にチェックを入れるだけです。
Sceneの方も見てみると・・・
チェックを入れたとたん表示されました！！
キーフレームの右の方にもすでにキーが打たれていると思うので、そちらも同じくチェックボックスにチェックを入れましょう！
これで完成！・・・といかないのがアニメーションです。
これはまだ、アニメーションの中身を設定しただけです。
なので、「再生しないさい」という命令がない限り再生されません。
アニメーションの説明はこちらの記事でも取り上げています。
ぜひ参考にしてみてください。
アニメーションを再生させる
では、アニメーションを再生させる仕組みをつくっていきましょう！
「Button」オブジェクトに「Set Animator Value Gimmick」を追加します。
▼ 各種パラメータは下記を参照して下さい。
- 「Target」は「Item」
- 受け取る側の「Key」は「Button」
- 「Item」は「Button」
- 「Parameter Type」は「Signal」
- 「Animator Parameter Name」は「active」
また、「Set Animator Value Gimmick」を追加すると、「Animator」というコンポーネントも自動で追加されます。こちらに「Animator Controller」を設定することで、アニメーションが再生されるようになります。
「Animator Controller」の基本的な操作はこちらの記事を参考にしてみてください。
ではここからは、「Animator」の中身をつくっていきます。
Project内から、「Create」＞「Animator Controller」で作成しましょう。
「Bridge Animator Controller」という名前にしました。では、「Bridge Animator Controller」をダブルクリックして「Animator」を開き編集していきます！
空のステータスを作成を作成して名前をDefaultにしました。
次に、先ほど作った「Bridge Animation」を「Animator」内にドラッグアンドドロップで追加します。
そうしたら、アニメーションの推移の指定を作成していきます。
上記のように推移をの矢印を作成します。
次にパラメータを設定していきます。
今回はParameterをTriggerに設定し名前は「Set Animator Value Gimmick」の「Animator Parameter Name」で設定した「active」にします。
さらに、「Default」から「Bridge Animation」に向かう推移の矢印を選択し、Inspector内の「conditions」>「 +アイコン」＞「active」で推移する条件を設定します。
そして反対側の矢印は、アニメーションの再生が終わったら、自動的に「Default」の状態に戻るようになっています。なので、「アニメーションの再生が終わる」、つまり、「橋が非表示になる」ようになります！
これでAnimator内の作業は終わりです。では、この完成したAnimatorをAnimatorコンポーネントに設定していきます。
Animatorコンポーネントの「Controller」パラメータに「Bridge Animator Controller」をドラッグアンドドロップします。
これで完成です！ではSceneを再生してみましょう！
おぉ！クリックしたら橋が表れて、そのあと消えるようにもなりましたね！
でも、橋が表れてる時間がすごく短いです。これでは渡りきる前に落ちてしまいます。
なので、最後に橋が表れている時間を調節して完成にしましょう！
アニメーションウィンドウに戻って作業をします。
１秒の位置にあるキーを選択し、ドラッグしたまま５秒くらいの位置に移動させました。
これで５秒の間、橋が表示されるようになったはずです。
再度Sceneを再生して確認してみましょう！
橋の表示時間が伸びましたね！これなら渡れそうです！
以上がTHE 橋渡りのワールドで使われているトリガー・ギミックの説明でした。
今回紹介した方法はオブジェクトを表示したら、時間経過で非表示になるギミックでしたが、任意で切り替えるボタンを作成する方法もあったり、他のトリガー・ギミックを用いたノウハウも多くあるワールド作成の知見やノウハウを共有するCluster Wikiをぜひ活用してみてください！！
誰でも参加OK！作って楽しむ公式Discordコミュニティ
https://docs.cluster.mu/creatorkit/support/creator-community/
雑談から相談まで、気軽に交流できます！こちらもぜひ活用ください！
