メニュー画面のボタンに動きをつけて、かっこいいGUIを作る【Unity開発】【uGUI】

概要

GUIに動きをつけるとちょっとカッコよく見える気がする。下記動画の開始直後のGUIの動きみたいな感じ。

http://magnaga.com/unity/2016/01/11/youtube-movie-develop/

あとは下記サイト様みたいな感じか。

ラブライブっぽいUIをUnityとiTweenで作ってみる

 

開発中のアプリはNGUIで作ってるけど、NGUIは有料Assetで高いので、uGUI(Unity標準のGUIシステム)で上記のような動きを再現してみた。

方法

NGUIにはUI部品に簡単な動き、色、透明度の変更ができるTweenScaleみたいなスクリプトがあるけど、uGUIにはない!!

無料AssetのiTweenとかで実装しようかと思ったけど、下記サイトにNGUIと同じような使い方ができるスクリプトを発見。拝借させていただいた。

[Unity][uGUI] uGUIでNGUIライクなTween

ugui-Tween-Toolのダウンロード

WestHillApps/ugui-Tween-Tool

からugui-Tween-Tool-master.zipをダウンロードして解凍。解凍してできたuGUIフォルダをUnityにぶっこむ。

適当なゲームプロジェクトを作成

適当にプロジェクトを作っちゃってください。

CanvasとButtonの設置

スクリーンショット 2016-01-12 21.49.49

GameObject⇨UI⇨ButtonでButtonを追加。

スクリーンショット 2016-01-12 21.52.40

上記のような状態になる。

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にアタッチ。

スクリーンショット 2016-01-12 21.55.10

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

 

スクリーンショット 2016-01-12 22.23.05

同じ要領でボタンを動かすための、テスト用ボタン(TweenStartButton)をCanvasに追加。

TweenStartButtonのButtonコンポーネントにOn Click()があるので、右下の+ボタンを押下。

CanvasオブジェクトをDrag&Dropし、先ほどアタッチしたTweenManagerのStartTweenを選択。

これで、再生して、TweenStartButtonをクリックすると、動画のような動きになると思う。

 

まとめ

ボタンが動くだけでもちょっと雰囲気が良くなると思うので、適当に改造して使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA