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

time 2016/01/12

folder Unity

概要

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

英単語×RPG! 　勉強？ゲーム？やり込み要素ありのアプリ！（開発中）

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

・ラブライブっぽい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;
			}
		}
	}
}