unity4.6 beta / uGUI スクロール編

5分で作れるスクロールビュー

本当に簡単です。Panelを2つ用意し、それを親子関係にして、親の方に2つのコンポーネントをくっつけるだけです。順番に説明してゆきます。

まずはUIを配置

緑色のPanelにScrollView
橙色のPanelにContents
という名前をつけて、ContentsをScrollViewの子にしました。
さらに、後々スクロールしていることがわかりやすくなるように、いくつかのボタンをContentsの子にしました。

コンポーネントをアタッチする

ScrollViewを選択して、さらにInspectorのAdd ComponentからUI→Scroll Rectを選択してください。
Scroll RectのContentというメンバに、Hierarchyビューにある、先ほど作ったContentsをドラッグ&ドロップしましょう。

なんとこれだけで、スクロールビューとして機能するようになります。gifアニメでどうぞ:

細かい設定

先ほどのScrollViewにアタッチしたScroll Rectのメンバを変えてみましょう。

各メンバの説明:
Content ... スクロールビューの中身を指定する。
Horizontal ... 横方向にスクロールするか。
Vertical ... 縦方向にスクロールするか。
Movement Type ... スクロールビューが端まで来た時、さらにその先までスクロールできるか(Unrestricted)、スクロールできるがすぐに戻される(Elastic)か、全くスクロールさせない(Clamped)かを指定する。
Elasticity ... Movement TypeでElasticを指定した時のみ出現。スクロールを戻す速度を0～1で指定する
Interia ... ビューから指を離した時、スクロールが緩やかに減速していくか。
Deceleration Rate ... Interiaをオンにした時のみ出現。減速する速度を0～1で指定。0に近いほど摩擦が大きい
Horizontal Scrollbar ... 横方向のスクロールバー。また後日……
Vertical Scrollbar ... 縦方向のスクロールバー。

見えちゃいけない場所が見えてる

先ほどのScroll Rectに加えて、Maskをアタッチすることでちゃんとクリッピングしてくれます。ScrollViewを選択して、さらにInspectorのAdd ComponentからUI→Maskを選択すればOKです。

unity4.6 beta / uGUI ドラッグ編

ソース

UI Example Project | Unity Community
ここのサンプルプロジェクトを見ながら書いてます

uGUIとInterface

uGUI用の Image などのGameObjectに、以下のインターフェースを継承・メソッドを実装したスクリプトを付けると、様々なイベントを拾えるようになる。

例えば、マウスドラッグのイベントを拾うためには3つのインターフェースを継承し、メソッドを実装する必要がある。

void IBeginDragHandler.OnBeginDrag(PointerEventData)
void IDragHandler.OnDrag(PointerEventData)
void IEndDragHandler.OnEndDrag(PointerEventData)

PointerEventData

PointerEventDataは様々なプロパティを持っている。ドキュメントは無いっぽいのでプロパティの名前から判断するしか無いと思う

namespace UnityEngine.EventSystems {
	public class PointerEventData : BaseEventData {
		public int clickCount;
		public float clickTime;
		public Vector2 delta;
		public bool eligibleForClick;
		public RaycastResult pointerCurrentRaycast;
		public GameObject pointerDrag;
		public GameObject pointerEnter;
		public int pointerId;
		public GameObject pointerPress;
		public RaycastResult pointerPressRaycast;
		public Vector2 position;
		public Vector2 pressPosition;
		public GameObject rawPointerPress;
		public Vector2 scrollDelta;
		public Vector3 worldNormal;
		public Vector3 worldPosition;

		public PointerEventData(EventSystem eventSystem);

		public Camera enterEventCamera { get; }
		public Camera pressEventCamera { get; }

		public bool IsPointerMoving();
		public bool IsScrolling();
		public override string ToString();
	}
}

拾うだけの実装例

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class UguiDragEventReceiver : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
	public void OnBeginDrag(PointerEventData ped) {
		Debug.Log("マウスドラッグ開始 position="+ped.position);
	}
	public void OnDrag(PointerEventData ped) {
		Debug.Log("マウスドラッグ中 position="+ped.position);
	}
	public void OnEndDrag(PointerEventData ped) {
		Debug.Log("マウスドラッグ終了 position="+ped.position);
	}
}

からの

からの

できた。応用すればテキストを動かしたりも簡単にできるはず

スマフォで本当にオープンワールド

あいさつ

こんばんは！真夏のアセットアドベントカレンダーということで、僭越ながら記事を書かせていただくことになりました、19さいゲームプログラマことLekと申します。よろしくおねがいします。

さて今回はオープンワールドということで、広い地形が必要ですね。地図からterrainを生成するアセットがあるので、それを使いましょう！

南の島へ行こう

Real World Terrainをインポートすると、UnityのメニューバーのWindow/Infinity Code/Real World Terrainから地形生成用のウィンドウを開くことができます。

Run the helperというボタンを押すと地図が開いて、どこをterrain化するか指定できるようになります。夏ということで、小笠原諸島の父島を指定してみました
指定できたら、Copy this to clipboard欄の文字列をコピーしておきましょう。

先ほどの地形生成用のウィンドウに戻り、Insert coordinates from the clipboardを押すと座標が更新されます。あとはStartを押して、気長に待ちましょう。すると……
なんということでしょう。Untiy上で父島が再現されました。遠目にはかなりのクオリティ。

スマフォで動かないとタイトル詐欺になってしまうので、Nexus5実機で動かしてみました。Time of DayとUnity付属のWater(Pro Only)を置いても60FPS付近を維持しています。

課題

テクスチャのソースが衛生写真なのですごく荒い。これさえどうにかなれば……あと木や草を自動で植える設定にしているはずなのですが、なぜだか一本も見当たりません。設定が悪いのか地図データが悪いのか、はたまたソフトのバグなのか……もしReal World Terrainを使っている方がいましたらご教授オナシャス！(自分のTwitter垢に飛びます)

おまけ

Generate buildingsにチェックを入れると、Open Street Mapのデータを元に建物を生成してくれます。4時間ほどかけて渋谷を生成してみましたが、結果は……

アドベントカレンダー残り10日

明日はnaichiさんです。よろしくおねがいします