【Unity】コードを書かずに、ボタンのON/OFFで表示状態を切り替える方法

f:id:min0124:20160828115925p:plain

コードを書かずに、メカニムとアニメーションを使って、表示状態のON/OFFをできるようにします。

普段コードを書かないので、中途半端にスクリプトを書くよりも、メカニムでささっと作って、確認したほうが楽でした。

こちらの記事の簡易版。

min.hatenablog.jp

準備

なんでも良いのですが、カメラに付けるだけでビジュアルが変化するイメージエフェクトをボタンのON/OFFで切り替えてみます。

  1. イメージエフェクトのアセットをインポートしておきます。

Assets > ImportPackage >Effects

f:id:min0124:20161202075849j:plain

  1. Main Camera に SepiaTone のスクリプトをアタッチ

f:id:min0124:20161202080024j:plain

再生して画面がセピア色になることを確認。(確認用に適当なキューブを作成)

f:id:min0124:20161202081543j:plain

やり方

  • ① Animationウインドウを開き、Main Camera を選択してCreateボタンを選択

  • ② 生成される .anim ファイル名は New AnimationからAnimation_offとしておく(通常状態用)

  • ③ もうひとつ.animファイルを作成。Assets > Create > Animationから Animation_onという名前に(イメージエフェクト点灯用)

  • ④ Animator ウインドウを開き、なにもない所でCreate state > Emptyから ノード(グレー)を作成。

f:id:min0124:20161202080811j:plain

  • ⑤ 最初から生成されていたオレンジのノードをanimation offという名前にして motionの項目に②の.animをアサイン。グレーの方も同様にanimation_onとして.animをアサイン。

  • ⑥ Parameters タブに切り替えて、+ボタンから Trrigerを作成。testという名前に。

  • ⑦ ノードを右クリックして Make Transitionからノード同士を繋ぐ。グレーからオレンジ。オレンジからグレー

  • ⑧ ⑦で生成された矢印をクリックして+ボタンを押す。testという項目が追加。もう片方の矢印も同様に追加

f:id:min0124:20161202080912j:plain

  • ⑨ アニメーションウインドウの赤丸ボタンをONにしてアニメーションを記録。SepiaToneのチェックボックスをon/offして表示を記録。(Animation_off→OFF状態, Animation_on→ON状態)

f:id:min0124:20161202083336p:plain

  • ⑩ Componet > UI > Button からボタンを作成

  • ⑪ 生成したボタンを選択して、 Inspectorの一番したの+ボタンをクリック。

  • ⑫ Noneの表示のところにMain Cameraをドラッグ&ドロップ

  • ⑬ No Function表示のところを選択して Animtor > SetTrigger(String)を追加。下の欄にTestの文字を追加

f:id:min0124:20161202080506j:plain

  • ⑭ 再生してボタンを押すとイメージエフェクトがONになり(画面がセピア色に)。もう一度クリックするとOFFになります。

f:id:min0124:20161202082131p:plain

応用

特定のものには、イメージエフェクトを付けたくない場合、別カメラを作成してLayerの設定をすれば分けることができます。

tsubakit1.hateblo.jp