【Unity】uGUIのPanelをスライドインさせる方法

UnityのuGUIでPanelをスライドイン/アウトさせる方法です。
少し、てこづったのでメモ。

画面、右上のPauseボタンをクリックすると、Canvasの外にあるメニューパネルがスライドインします。
ugui_panel_slide_1.png

動かすとこんな感じ。


まずは、Panelにアタッチするスクリプトから。

PanelSlider.cs

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

public class PanelSlider : MonoBehaviour {
public AnimationCurve animCurve = AnimationCurve.Linear(0, 0, 1, 1);
public Vector3 inPosition; // スライドイン後の位置
public Vector3 outPosition; // スライドアウト後の位置
public float duration = 1.0f; // スライド時間(秒)

// スライドイン(Pauseボタンが押されたときに、これを呼ぶ)
public void SlideIn(){
StartCoroutine( StartSlidePanel(true) );
}

// スライドアウト
public void SlideOut(){
StartCoroutine( StartSlidePanel(false) );
}

private IEnumerator StartSlidePanel( bool isSlideIn ){
float startTime = Time.time; // 開始時間
Vector3 startPos = transform.localPosition; // 開始位置
Vector3 moveDistance; // 移動距離および方向

if( isSlideIn )
moveDistance = (inPosition - startPos);
else{
moveDistance = (outPosition - startPos);

while((Time.time - startTime) < duration){
transform.localPosition = startPos + moveDistance * animCurve.Evaluate((Time.time - startTime) / duration);
yield return 0; // 1フレーム後、再開
}
transform.localPosition = startPos + moveDistance;
}
}


処理は単純なので、特に解説しないけど、強いて言えばこの一行。
public AnimationCurve animCurve = AnimationCurve.Linear(0, 0, 1, 1);

インスペクタ上で、AnimationCurveをGUIで調整出来るようになります。
ugui_panel_slide_2.png

てこづった理由は、Panelを移動させるのに、transform.localPositionじゃなくて、transform.positionをいじってたからでした。
なんでズレるかなぁ・・って悩んでしまいました。

よく考えたら、Panelは、Canvasの子オブジェクトだもんね。
Canvas位置は、原点にいないので、その分、ズレてたわけでした。

ちなみに、transform.localPositionの代わりに、PanelのRectTransformのlocalPositionを移動させても良いです。
RectTransformは、Transformを継承してるので、結果は同じになります。

RectTransform rectTransform = gameObject.GetComponent< RectTransform >();
rectTransform.localPosition = XXXXX;

"【Unity】uGUIのPanelをスライドインさせる方法"へのコメントを書く

お名前:
メールアドレス:
ホームページアドレス:
コメント: