Mecanimとアニメーションを使えば、コードを書かなくてもボタンのON/OFFで表示状態を切り替えられます。
スクリプトを書くのが苦手なデザイナーでも、この方法ならすぐに実装できます。
目次
今回作るもの
ボタンを押すとイメージエフェクト（セpiaTone）がON/OFFで切り替わる仕組みを作ります。
同じ方法でUIの表示切り替えやオブジェクトのON/OFFにも応用できます。
事前準備
- Assets → Import Package → Effectsでイメージエフェクトをインポート
- Main CameraにSepiaToneスクリプトをアタッチ
- 再生して画面がセピア色になることを確認（確認用にCubeなどを配置しておく）
アニメーションの作成
OFF状態のアニメーション
- Animationウィンドウを開く
- Main Cameraを選択して「Create」ボタンをクリック
- ファイル名を「Animation_off」にして保存
ON状態のアニメーション
- Projectウィンドウで右クリック → Create → Animation
- ファイル名を「Animation_on」にする
Animatorの設定
ステートの作成
- Animatorウィンドウを開く
- 何もない場所で右クリック → Create State → Emptyでグレーのノードを作成
- 最初から生成されているオレンジのノードを「animation_off」にリネームし、MotionにAnimation_off.animをアサイン
- グレーのノードを「animation_on」にリネームし、MotionにAnimation_on.animをアサイン
トリガーの設定
- Parametersタブに切り替え
- 「+」ボタン → Triggerを選択
- 名前を「test」にする
トランジションの接続
- animation_offノードを右クリック → Make Transition → animation_onに接続
- animation_onノードを右クリック → Make Transition → animation_offに接続
- 両方の矢印（Transition）を選択し、Conditionsの「+」ボタンで「test」を追加
アニメーションの記録
- Animationウィンドウで赤い録画ボタンをONにする
- Animation_offを選択した状態で、SepiaToneのチェックをOFFにして記録
- Animation_onを選択した状態で、SepiaToneのチェックをONにして記録
- 録画ボタンをOFFにする
ボタンの設定
- GameObject → UI → Buttonでボタンを作成
- ボタンを選択し、InspectorのOn Click()の「+」ボタンをクリック
- 「None」の部分にMain Cameraをドラッグ＆ドロップ
- 「No Function」→ Animator → SetTrigger(String)を選択
- 下の入力欄に「test」と入力
動作確認
再生してボタンを押すと、イメージエフェクトがONになり画面がセピア色に変わります。
もう一度押すとOFFに戻ります。
応用：特定のオブジェクトだけエフェクトを適用しない
特定のオブジェクトにはイメージエフェクトを適用したくない場合、以下の方法で対応できます。
- 別のカメラを作成
- Layerを分けて設定
- カメラごとにCulling Maskを調整
参考：http://tsubakit1.hateblo.jp/entry/2015/11/25/000000
この方法で切り替えられるもの
| 対象 | 例 |
|---|---|
| コンポーネントのON/OFF | イメージエフェクト、スクリプト |
| GameObjectの表示/非表示 | UI要素、3Dオブジェクト |
| パラメータの値 | 色、サイズ、位置 |
まとめ
- Mecanimを使えばコードなしでON/OFF切り替えが実装できる
- AnimatorのTriggerとボタンのSetTriggerを組み合わせる
- デザイナーだけでも動作確認用のUIが作れる
- UIの表示切り替えやデバッグ機能の実装にも応用可能
