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

デジタルフロッグ

Unityのアプリの開発をしながらいろいろと忘れないための備忘録でございます。

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

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

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

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

f:id:karaagedigital:20160827140801p:plain

Menuの作成

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

f:id:karaagedigital:20160831111420p:plain

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

karaagedigital.hatenablog.jp

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

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

それぞれに適当にボタンっぽい画像を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を7にします。

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

 

f:id:karaagedigital:20160831111910p:plain

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

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

f:id:karaagedigital:20160831112612g:plain

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

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

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

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