UnityのuGUIで複数のスクロールビューを切り替える演出の作り方

FacebookのUnity助け合い所で質問があったので、ちょっと書いておきます。（件の問題は解決済み）

とりあえず、こんな感じのを作ります。今回はボタンで制御しますが、画面端からのスワイプやスクロールバー自体のスワイプといったギミックで差替えても良いんじゃないかと思います。

作り方

まず2つのスクロールビューとボタンを用意します。一つは画面外に配置、一つは画面内に配置する感じです。

スクロールビューの作り方はUnityのuGUIでスクロールビューを作る - テラシュールブログに書いてあります。

データ構造的にはこんな感じです。コントロール対象となるスクロールビュー（ScrollView）は親オブジェクト作っておくと管理が楽になります。

ちなみにスクロールビューの名前は異なる名前を指定するのが良いです。後々管理も楽ですし、何よりAnimationの「名前が重複してるとうまく動かない」問題を回避出来ます。

で、後はこの2つのオブジェクトの位置をアニメーションで差替えてやります。やり方はUnityのuGUIで「UIのアニメーション制御」 - テラシュールブログに書いてあります。

まずはアニメーションを作ります。

作るAnimationClipは、Blue Scroll View表示のBlueForcusとRed Scroll Viewを表示するRedForcusです。

ゴチャゴチャするのが嫌なのでUnityのAnimatorControllerにAnimationClipを内蔵する - テラシュールブログで内蔵しちゃいます。

AnimatorはScrollViewsにアタッチします。こうすれば、一つのAnimatorで複数の項目を一括制御出来ます。

変更する項目は「Red Scroll View.Anchor.x」と「Blue Scroll View.Anchor.x」のみ。

画面外のスクロールビューのパフォーマンスが気になる几帳面な人は、表示されない方のIsActiveをFalse、表示される方のIsActiveをTrue。

これらの項目を使って、BlueForcusなら青が綺麗に表示されてる位置、RedForcusなら赤が綺麗に表示されてる位置まで各ScrollViewを動かします。

ちなみにActiveをfalseに設定すると余計なキーが大量に打たれますので、消しましょう。動かす必要のないキーは消しても問題ありません（操作する事で結果的に打たれてしまうキーです）但し、編集の度にキーが打たれるので若干鬱陶しいです。

後はAnimatorでAnyStateから各項目へのTriggerを設定します。Unity5なんでちょっと表示が違うかもしれませんが、機能は4と同じような感じです。

要するにRedForcusTriggerとBlueForcusTriggerがあり、各条件でRedForcusとBlueForcusへ移行します。条件は矢印をクリックして指定。

あとはボタンのクリックでアニメーターを動かしてもらいます。

下に配置しているボタン2つのButtonのOnClickイベントにアニメーターを登録、Animator.SetTriggerでBlueForcusTriggerとRedForcusTriggerを引数に指定します。やり方はUnityの新GUI、UGUIのイベント制御について - テラシュールブログ。

これで、ボタンを押せばアニメーションで2つのスクロールビューが入れ替わるギミックが完成です。

コードを利用した制御

こういった方法で組み上げてしまうのは楽といえば楽なのですが、スクリプトによる追加制御やゲーム全体の進行管理、コードの追跡の事を考えると、少しスクリプトを噛ませた方が良い気がします。

例えば「特定のグローバルなパラメータを監視するスクリプトをを用意し、特定パラメータになったらAnimatorのトリガーを実行（もしくはCrossFadeやTweenを使用）」「ボタンは特定のグローバルなパラメータを変更する」といった感じ。

変更点はボタンが直に操作するのではなく一枚噛ませるだけなので、実際作って色々見た後に調整しても問題無いと思います。

この辺りは後ほど詳しく書こうと思います。