ボタンを押した時にリアクションを出すようにしてみよう

仕掛けのあるワールドをつくるとき、Interact Item Triggerを使ったボタンが様々な場面で利用されます。

コンポーネントを設定しただけのシンプルなボタンでもいいですが、ひと手間加えてクリックしたときにボタンに反応が起きるようにすると、ボタンが押されたことが分かりやすくなります。
今回はボタンを押したときのリアクションの作例をいくつか紹介します！

ボタンを作成する

まずはボタンを作成します。
すでにつくっているボタンに機能を追加したい場合はそちらを使ってもかまいません。その場合は、このあと紹介する作例で追加するトリガーを、既存のInteract Item Triggerコンポーネントに追加してください。

Hierarchyを右クリック、または上部メニューのGameObjectからCreate Emptyを選択して新しい空のGameObjectを作成します。名前はButtonとしましょう。
続いて、Hierachy上でButtonを右クリックして、Create Emptyで子オブジェクトを作成します。こちらは名前を「Models」としてください。
さらにModelsの子に、3D Object>Cubeを作成します。このCubeがボタンの見た目とクリック範囲になります。CubeのTransformでScaleを変更し、大きさを調整してください。
- Buttonオブジェクトをクリックで選択してInspectorを開き、Add ComponentからInteract Item Triggerを追加します。
- これでButtonがクリックできるボタンになりました。
  - ボタンを押したときに他のギミックを動作させるためには、Interact Item Triggerの+ボタンでトリガーを追加します。

ここからは、このボタンに様々なリアクションを追加していきます。

ボタンを押すと音が鳴るようにする

ボタンを押したときに効果音が鳴るようにしてみましょう。

まず、HierarchyでButtonを右クリックして子オブジェクトにAudio>Audio Sourceを作成します。
- Audio SourceのInspectorで、AudioClipに効果音の音声ファイルをドラッグ＆ドロップするか、◎ボタンから選択してください。
- また、Audio Sourceの「Play on Awake」はチェックを外しておきます。
  - Audio Sourceのその他の設定についてはこちらの記事も参考にしてください。このAudio Sourceから効果音を鳴らします。
続いて、Audio SourceにAdd Componentから「Play Audio Source Gimmick」を追加します。
- Targetを「Item」に変更し、Keyを「PlaySound」とします。Itemの欄にButtonをドラッグ＆ドロップで指定してください。Parameter Typeは「Signal」を選択します。
ButtonのInspectorに戻り、Interact Item Triggerのトリガーをひとつ追加します。
- Targetは「This」、Keyは「PlaySound」、Valueは「Signal」としてください。

音が鳴るボタンはこれで完成です。アップロードして確かめてみましょう。

ボタンを押すとアニメーションが起動するようにする

続いて、ボタンを押したときにボタンに動きを付けてみましょう。
動きがあると「押した感」がより強くなります。

Animationを作成する

まずはアニメーションを作成します。Projectウインドウを右クリックして、Create>Animationを選択します。
- 今回はAnimationで見た目を変化させるため、作成したAnimationをHierarchy上のModelsにドラッグ&ドロップします。ModelsのInspectorにAnimatorコンポーネントが追加され、またProjectにAnimatorファイルが自動で作成されます。

Animationに動きを記録する

続いてAnimationに動きを記録しましょう。

Animationファイルをダブルクリック、または上部メニューのWindow>Animation>Animationを選択してAnimationウインドウを表示します。
- Modelsを選択すると、Animationウインドウでアニメーションの内容を編集できるようになります。
Animationウインドウの左上の赤いボタンを押してRECモードにします。
- ※ボタンがクリックできないときは、Modelsオブジェクトが選択されているか確認してください。
- ウインドウ上部でフレームを選択し、白い線を「30」の位置に移動します。
  - InspectorでModelsのScaleを変更してみましょう。Animationにひし形のキーフレームが追加されます。
  - さらに「60」の位置に移動して、Scaleを元に戻します。設定出来たらもう一度赤いボタンでRECモードを解除してください。
これで「ボタンの大きさが一瞬変わって元に戻る」というアニメーションが設定できました。

ボタンを押したときにこのAnimationを再生する仕組みをつくる

最後に、ボタンを押したときにこのAnimationを再生する仕組みをつくります。

Projectで先ほど自動作成されたAnimatorファイルをダブルクリック、または上部メニューのWindow>Animation>AnimatorからAnimatorウインドウを開きます。
- Modelsを選択すると、Animatorウインドウで「Entry」から作成したAnimationに矢印が向かっています。この状態では、オブジェクトが有効になるとすぐにAnimationを再生するようになっています。
- Animatorウインドウの左上のタブで「Parameters」を開き、+ボタンから「Trigger」を選択して新しいパラメーターを追加します。名前は「Play」としてください。
次に、Animatorウインドウの何もない場所を右クリックして、Create State>Emptyを選択します。
- 作成されたStateを右クリックして、Set as Layer Default Stateを選択してください。Entryからの矢印の行先が変更されます。
- さらに「Any State」を右クリックして「Make Transition」を選択し、作成したAnimationに矢印をつなぎます。
- この矢印をクリックで選択して、Inspectorで「Conditions」の+ボタンをクリックして条件を追加し、「Play」が選択されていることを確認します。

最後に、ボタンのクリックとAnimatorを連動させます。

ButtonのInspectorでInteract Item Triggerにトリガーを追加し、Targetを「This」、Keyを「PlayAnimation」、Valueを「Signal」とします。
続いてModelsのInspectorにSet Animator Value Gimmickコンポーネントを追加します。
- Targetを「Item」、Keyを「PlayAnimation」、ItemにButton自身を選択、Parameter Typeを「Signal」、Animator Parameter Nameを「Play」とします。
これでボタンをクリックしたときにAnimatorの「Play」パラメーターが反応し、Animationを再生するようになります。

ボタンのモデルとアニメーションを工夫すれば、さまざまなデザイン・動きのボタンをつくることができます。

ボタンを押すとパーティクルが発生する

Animationを利用して、ボタンを押したときにパーティクルが発生するようにしてみましょう。

パーティクルを作成する

Buttonを右クリックしてCreate Emptyで空の子オブジェクトを作成し、名前をEffectsにします。
- さらにEffectsを右クリックしてEffects>Particle Systemを作成します。Particle Systemには多数の設定項目がありますが、ここでは必要な設定だけ解説します。詳しい設定は他の記事を参照してください。
Particle Systemを選択してInspectorを開き、Loopingのチェックを外してください。
- また、EmissionモジュールでRate over Timeを0とし、代わりにBurstsの項目をひとつ追加します。
- 追加したBurstsの項目ではTimeが0.000になっていることを確認してください。
- このように設定すると、Particle Systemがアクティブになったときに一度だけパーティクルが発射されるようになります。他の項目も調整して好みのパーティクルをつくりましょう。設定出来たら、Particle SystemのInspectorの一番上にあるチェックを外して非アクティブにしておきます。

ボタンを押した時にパーティクルが発生するようにする

続いて、上の節と同様にAnimationを作成し、Effectsにドラッグ&ドロップします。
- Animationを編集して、ボタンが押されたときにParticle Systemが非アクティブ→アクティブに変化するようにします。
- Effectsを選択してAnimationウインドウを開きます。赤いボタンでRECモードにして、「1」の目盛の位置に白い線を移動してください。その後、Particle Systemを選択して、Inspectorのチェックをつけてアクティブにします。
- RECモードを解除して、Animationウインドウの白い線を動かしたときに「0」の位置ではParticle Systemが非アクティブ、「1」より後ろではアクティブになることを確認してください。

続いて、EffectsのAnimatorを編集します。

前節のModelsと同様に、パラメーター「Play」でAnimationに遷移するようにしてください。
今回は非常に短いAnimationのため、もうひとつ設定が必要になります。
- Animatorの遷移時には、前のAnimationから滑らかに変化させるようになっています。このフェードの時間をゼロにして、瞬時に切り替わるように設定しましょう。
- Any StateからAnimationへの矢印を選択し、Inspectorを確認します。
- Settingsを開いて、「Transition Duration (s)」をゼロにしてください。