iTweenを使った動的なメニューの表示

最近はiTweenの事ばかりやっていてゲームなるものを全く作っていません。

でもこういう積み重ねが面白いゲームを作るうえでは必要だと考えてはいますがどうでしょう(´・ω・`)

それではiTweenを使って今回もざっとやっていきたいと思います。

Menuの作成

まず最初にCanvasでPanelを準備します。

PanelのImageには適当に背景をぶっこみました。

karaagedigital.hatenablog.jp

アニメーションの遷移でも使った背景を使ってます。

その次に再びCreateからUI→Buttonを選択しMenuボタンを作成し、Create→UI→ImageからImageを作成してCntr+Dで６つほどコピーしました。

それぞれに適当にボタンっぽい画像をImageに突っ込みRectTransfromのPosYを画面外に出るまで下に下げます。

スクリプトをガリガリ書いてみる

次にButtonにスクリプトを追加しました。名前は今回はわかりやすいように

iTweenMenuという名前でやってます。

それではスクリプトです。ガリガリというほどありません。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System.Collections.Generic;

public class iTweenMenu : MonoBehaviour {
[SerializeField] List<Image> B = new List<Image>();
bool Menu;
void Start(){
Menu = false;
}
public void ButtonClick(){
　if (!Menu) {
　　Menu = true;
　　iTween.MoveTo (B [0].gameObject, iTween.Hash ("y", 80, "time", 1.0f, "delay", 0f));
　　iTween.MoveTo (B [1].gameObject, iTween.Hash ("y", 220, "time", 1.0f, "delay", 0.2f));
　　iTween.MoveTo (B [2].gameObject, iTween.Hash ("y", 370, "time", 1.0f, "delay", 0.4f));
　　iTween.MoveTo (B [3].gameObject, iTween.Hash ("y", 520, "time", 1.0f, "delay", 0.6f));
　　iTween.MoveTo (B [4].gameObject, iTween.Hash ("y", 670, "time", 1.0f, "delay", 0.8f));
　　iTween.MoveTo (B [5].gameObject, iTween.Hash ("y", 820, "time", 1.0f, "delay", 1.0f));
　　iTween.MoveTo (B [6].gameObject, iTween.Hash ("y", 970, "time", 1.0f, "delay", 1.2f));
　} else {
　　Menu = false;
　　iTween.MoveTo (B [0].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　　iTween.MoveTo (B [1].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　　iTween.MoveTo (B [2].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　　iTween.MoveTo (B [3].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　　iTween.MoveTo (B [4].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　　iTween.MoveTo (B [5].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　　iTween.MoveTo (B [6].gameObject, iTween.Hash ("y", -500, "time", 1.0f));
　}
}
}

using UnityEngine.UI;

UIを使う際には必要です。もう魔法の言葉的な感じなのでとにかく必要だと覚えておきましょう。
using System.Collections.Generic;

Listを使う際に必要です。これも魔法の言葉的な感じなのでとにかく必要だと覚えておきましょう。

スクリプトを保存するとInspectorのI Tween MenuにはB　SizeとあるのでSizeを７にします。

そうするとElement0~6まで展開されので最初に作成したImageをそれぞれ突っ込んでいきます。

最後にOn Click()のところにiTweenMenuのスクリプトが格納されたButtonオブジェクトを突っ込んでiTweenMenuのButtonClickを選択して下さい。

そうるするとボタンを押すとiTweenMenu内のButtonClick()内のスクリプトを実行します。

クリックすると順にしたから出て来て、もう一度押すと引っ込んでいく動きが出来ました。

メニューボタンを押していきなりメニューボタンがパッと出てくるよりも視覚的にメニューがズズズッと出てくるだけでなんだか作りこまれているように見えてきますね。

パパッとmenuだせよ！と思う人もいるのでまあその辺は…timeを縮めるなどしましょうか(´・ω・`)

ちなみにスクリプトはわかりやすいように列を揃えてますが、Tabが使えなくてスペースを使っているのでそのままコピペするとエラーが出るのでお気を付けください。