2016/06/21
概要
GUIに動きをつけるとちょっとカッコよく見える気がする。下記動画の開始直後のGUIの動きみたいな感じ。
あとは下記サイト様みたいな感じか。
・ラブライブっぽいUIをUnityとiTweenで作ってみる
開発中のアプリはNGUIで作ってるけど、NGUIは有料Assetで高いので、uGUI(Unity標準のGUIシステム)で上記のような動きを再現してみた。
方法
NGUIにはUI部品に簡単な動き、色、透明度の変更ができるTweenScaleみたいなスクリプトがあるけど、uGUIにはない!!
無料AssetのiTweenとかで実装しようかと思ったけど、下記サイトにNGUIと同じような使い方ができるスクリプトを発見。拝借させていただいた。
・[Unity][uGUI] uGUIでNGUIライクなTween
ugui-Tween-Toolのダウンロード
からugui-Tween-Tool-master.zipをダウンロードして解凍。解凍してできたuGUIフォルダをUnityにぶっこむ。
適当なゲームプロジェクトを作成
適当にプロジェクトを作っちゃってください。
CanvasとButtonの設置
GameObject⇨UI⇨ButtonでButtonを追加。
上記のような状態になる。
TweenManager.cs
using UnityEngine; using System.Collections; using uTools; public class TweenManager : MonoBehaviour { public GameObject[] Buttons; private uTweenPosition[] uTweenPositions; private Vector3[] originalPosition; // Use this for initialization void Start () { if (Buttons.Length > 0) { uTweenPositions = new uTweenPosition[Buttons.Length]; originalPosition = new Vector3[Buttons.Length]; for (int i = 0; i < Buttons.Length; i++) { uTweenPositions [i] = Buttons [i].GetComponent<uTweenPosition> (); Vector3 from = Buttons [i].transform.localPosition; from.x = 400; originalPosition [i] = from; Vector3 to = Buttons [i].transform.localPosition; uTweenPositions [i].from = from; uTweenPositions [i].to = to; } } } public void StartTweens(){ StopCoroutine ("IStartTweens"); initPosition (); StartCoroutine ("IStartTweens"); } private IEnumerator IStartTweens(){ if (uTweenPositions.Length > 0) { for(int i=0; i< uTweenPositions.Length;i++){ uTweenPositions[i].RePlay (); yield return new WaitForSeconds (0.1f); } } } private void initPosition(){ if (uTweenPositions.Length > 0) { for(int i=0; i< Buttons.Length;i++){ Buttons [i].transform.localPosition = originalPosition [i]; } } } private void resetTweens(){ if (uTweenPositions.Length > 0) { foreach (uTweenPosition tp in uTweenPositions) { float temp = tp.duration; tp.duration = 0f; tp.ResetTimeBeforePlay (); tp.duration = temp; } } } }
ポイントと使い方
・インスペクター上のButtonからIEnumeratorを使えるように、public void StartTween()でラップ。
インスペクターでの設定
適当なObjectにTweenManager.cs(名前適当すぎる。。)をアタッチ。今回はCanvasにアタッチ。
GameObject⇨UI⇨ButtonでCanvas上にButtonを設置
Add ComponentでuToolsと検索し、「Tween Position(uTools)」を選択。
uGUI/Assets/Scripts/Tween/uTweenPosition.csをアタッチしても問題ない。
Buttonを選択しCtrl+Dで複製。
ButtonのPosYを適当な値に設定。
例)
Button PosY =50
Button(1) PosY =0
Button(2) PosY = -50
同じ要領でボタンを動かすための、テスト用ボタン(TweenStartButton)をCanvasに追加。
TweenStartButtonのButtonコンポーネントにOn Click()があるので、右下の+ボタンを押下。
CanvasオブジェクトをDrag&Dropし、先ほどアタッチしたTweenManagerのStartTweenを選択。
これで、再生して、TweenStartButtonをクリックすると、動画のような動きになると思う。
まとめ
ボタンが動くだけでもちょっと雰囲気が良くなると思うので、適当に改造して使ってみてください。