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

developer_RYO’s blog

スマホアプリやPCゲーム、音楽やイラストを自由気ままに作っている人の技術ログです

【uGUI】下からスライドインするボタンを作りました

f:id:developer_RYO:20160523235446g:plain

>夜分こんばんわ。
今回、gif画像に示すような、下から「スッ」と出てくるボタンを実装しました。
汎用的に使えそうな感じがするので、ブログに残しておきます。

目次

■1. uGUIのCanvasを用意する。
■2. uGUIの動かしたいButtonを3つ用意する。
■3. 「スッ」と動かす用のuGUIのButtonを用意する。
■4. iTweenを使って動きを付ける。
■5. 「スッ」と動かす用のuGUIのButtonをクリックしたときの挙動を決める。
■6. 参考サイト

※動作はwindows10,Unity5.0.0f4で確認しました。

///////////////////////////////////////////////////////////////////////////

■1. uGUIのCanvasを用意する。

f:id:developer_RYO:20160524000020p:plain
Hierarchy上で右クリックして、UI>Canvasを押す。CanvasがSceneに作られる。

■2. uGUIの動かしたいButtonを3つ用意する。

f:id:developer_RYO:20160524000021p:plain
Hierarchy上で右クリックして、UI>Buttonを押す。3個作る。TEXTの名前は適当に「START」、「SCORE」、「HELP」とでもする。
POSXは3個とも0にして、POSYをそれぞれ-400,-550,-700に設定する。

■3. 「スッ」と動かす用のuGUIのButtonを用意する。

f:id:developer_RYO:20160524000023p:plain
Hierarchy上で右クリックして、UI>Buttonを押す。TEXTの名前は適当に「上昇します~」とでもする。
POSXは330、POSYは-270に設定する。

■4. iTweenを使って動きを付ける。

csファイルを作る。ファイルの名前は適当にEaseUpUIとでもしておく。
EaseUpUiという関数によって、オブジェクトの動きを制御する。
動作を開始するまでのタイムラグを引数に設定しておく。

using UnityEngine;

public class EaseUpUI : MonoBehaviour {

	public void EaseUpUi(float delay)
    {
        iTween.MoveBy(this.gameObject,
            iTween.Hash(
                "delay"   , delay,
                "time"    , 0.8f,
                "y"       , 500,
                "easeType", iTween.EaseType.easeOutCirc
                )
            );
    }
}

■5. 「スッ」と動かす用のuGUIのButtonをクリックしたときの挙動を決める。

f:id:developer_RYO:20160524000025p:plain
「スッ」と動かす用のuGUIのButtonのInspectorの、ButtonコンポーネントのOn Click()をいじる。
動かしたいButtonをObjectとして設定し、EaseUpUI.EaseUpUiを選択。引数で動作開始時刻を調整する。

■6. 参考サイト

○uGUIをiTween使って動かしましょうというページ。
albatrus.com

○イージング動作のチェックに使ったページ。触っているだけで楽しい。
easing_demo