読者です 読者をやめる 読者になる 読者になる

CGメソッド

CG制作に関してのヒント

MENU

【Unity】uGUIでコードを書かずに画面遷移する方法

f:id:min0124:20160828115925p:plain

uGUIでコードを書かずに画面遷移する方法。

やり方

UIパーツの作成

  1. ボタンの作成 GameObject>UI>Button

  2. 平面の作成 GameObject>UI>Inmage

  3. ボタンと平面の親にGameObjectを作成

  4. 作成したGameObjectの親にさらに『View1』と命名

  5. 『View1』を複製して『View2』とする

f:id:min0124:20160728230240j:plain

アニメーションの作成

  1. 『View1』のRect Transform>Anchorsの値をMIN(0,0) MAX(2,1)に変更。右側に画面ひとつ分、領域が拡張されることを確認

  2. 『View1』の子のGameObject Rect Transform>Anchorsの値をMIN(0.5,0) MAX(1,1)に変更。ボタンが拡張された領域に移動しているのを確認

  3. Animationウインドウを開き、子のGameObjectを選択した状態で『Create』ボタンを押してアニメーションを作成(ToView)

  4. Add PropertyからAnchor MaxとAnchor Minのプロパティを追加

  5. アニメーションの作成。Min(0→0.5)Max(0.5→1)ついでにイーズがかかるようにカーブを調節

  6. 同じように画面が待機状態のアニメーションも作成する。View1(Min:Max 0.5,0) View2(Min:Max 1,0.5)

  7. Projectウインドウにあるアニメーション(ToView)を選択して Loop Timeのチェックをはずして、ループを切っておく

f:id:min0124:20160728230317j:plain

f:id:min0124:20160728230324j:plain

f:id:min0124:20160728230331j:plain

メカニムでのUIの遷移設定

  1. Animatorウインドウを開く

  2. 右クリックからCreate State>Emptyを押して、ステートを3つ作成。

  3. オレンジのステートを選択して、右クリックから Make Transitionを押して、作成したステートにぐるっと一周するよう(View1→ToView2→View2→ToView1→View1)に繋いでいく。

  4. ToView1、ToView2を選択して、Motionにさきほど作成したアニメーション(New Animation)を追加、ToView1のほうはSpeedを『-1』にする

  5. View1、View2を選択して、それぞれにMotionに待機状態用のアニメーションを『View1』,『View2』にする

  6. Animatorウインドウの左側のParametersのタブに切り替えて『+』ボタンを押してTrrigerを2つ(View1,View2)作成する

  7. View1→ToView2 の矢印を選択、 Conditionsの+ボタンを押してView1を選択、続いてView2→ToView1 の矢印を選択、 Conditionsの+ボタンを押してView2を選択

  8. 再生ボタンを押して、ParametersのView1,View2を選択して遷移状態を確認

f:id:min0124:20160728230907j:plain

ボタンを押すとアニメーションする設定

  1. ボタン(Button1)を選択して、Onm Click()の+ボタンを押す。

  2. ○ボタンを押してAnimatorが入っているGameObjectを追加。

  3. No FunctionからAnimator>SetTrigger(String)を選択してView2を記述(トグルのParameters名)

  4. 再生してボタンが押すとView1が右側に移動することを確認

  5. 同じ要領でView1が移動してでるView2画面のボタンにもAnimator>SetTrigger(String)を選択してView1と記述して、もとのView1画面に戻るようにする

f:id:min0124:20160728230915g:plain

感想

今回は下記のQiitaの記事を参考に再現してみました。

特にメカニムとボタンを使った表現はUI遷移だけでなくキャラモーションやエフェクトのチェックでも、デザイナーだけで構築できるので便利です。

【追記】

遷移を作成するときに、一つのアニメーターですべての遷移をつくるのではなく、それぞれのUIの命名を統一して、スライドなりフェードなりの機能別でアニメーターをつけていくと作業が楽でした。

参考

qiita.com

SOU·COLLE | uGUIのAnchorsでレスポンシブアニメーション