nirasan's tech blog

趣味や仕事の覚え書きです。Linux, Perl, PHP, Ruby, Javascript, Android, Cocos2d-x, Unity などに興味があります。

NGUI の UIScrollView で1要素分スクロールさせるスクリプト

はじめに

  • Unity の NGUI で UIScrollView を使うと、要素を列挙してスクロールして表示させるようなパーツが簡単に実装できます。
  • 列挙する要素に UIDragScrollView コンポーネントをアタッチすると、ドラッグでスクロール可能ですが、今回は1要素分だけ進む・戻るボタンを実装します。

準備

  • UIScrollView のアタッチされたオブジェクトの下に UIGrid のアタッチされたオブジェクトを配置します。
  • UIGrid オブジェクトには UICenterOnChild もアタッチしておき、要素の中央でスクロールが停止するようにします。

実装

  • UIScrollView と同じ階層に空のオブジェクトを作成し、UISprite(ボタン画像表示用)と、BoxCollider(ボタンタッチ判定用)をアタッチします。
  • 以下のスクリプトを作成し、先の作成したオブジェクトにアタッチします。
public class ScrollViewScroll : MonoBehaviour {

	public UIScrollView scrollView;
	public float delta;

	public void OnClick () {
		scrollView.Scroll (delta);
	}
}
  • scrollView には対象の UIScrollView のオブジェクトを指定します。
  • delta はスクロール量みたいなもので、UIScrollView の表示幅に合わせていい感じに調整します。500px 程度だと 5.0f でよかったです。マイナスの値で逆方向にスライドします。