*

[Unity]Unity4.6 UIチュートリアル Lesson9.UI Scroll Rect 日本語要約

公開日: : 最終更新日:2014/12/27 Unity

Unity関連まとめページはこちら→Unity

Lesson8.UI Transition 日本語要約の続き。

公式はこちら→UI Transition

Scroll Rect

今回はScroll Rectについての模様。

今までの動画と違って、一緒に作っていく内容です。
Scroll Rectはドラッグなどで動かすことが出来るものです。
早速やってみましょう。

準備

画像

とりあえずは画像が必要なので用意をします。
なんでもよいですので、こないだ使った爆弾の画像でも使ってみます。
bomb

Hierarchy

HierarchyにはPanelとその配下にGameObjectを配置します。

まずはPanelを設定。
GameObject -> UI -> Panel と選択。
Wannabenote

HierarchyのPanelを右クリックして Create Empty を選択。
Wannabenote

GameObjectの名前をScrollViewに変更しておきます。
Wannabenote

Scroll Rect コンポーネント

作成したGame ObjectにScroll Rectをアタッチします。
Game Objectを選択したまま、Add Componentを選択し、 UI -> Scroll Rect と選択します。
Wannabenote

また、Scrolle Viewの配下に Content という名前のGameObjectを作成してImageをアタッチします。
Content というGameObjectを作成。
Wannabenote

AddComponent から Image をアタッチ。
Wannabenote

そして、準備した画像をImageにアタッチします。
Wannabenote

Scroll ViewのContentを作成したContentというGameObjectに設定します。
Wannabenote

Maskの追加

Scroll ViewにImageMaskをアタッチします。
Wannabenote

準備は完了です。
Wannabenote

試しにゲームを実行して画像をドラッグすると画像が動きます。

プロパティ解説

Horizontal,Vertical

HorizontalとVerticalはそれぞれ、ドラッグの方向を許可しています。
デフォルトでは両方チェックが入っていますが、ためしにHorizontalのチェックを外してゲームを実行してみます。
画像をドラッグで移動しようとすると、Horizontalは許可されていないため、上下にしか動きません。
Wannabenote

Movement Type

Movement Typeは三種類あります。
Wannabenote
意味は

  • Unrestricted:無制限モード
  • Elastic:ゴムモード
  • Clamped:留めモード

みたいな意味でしょうか。

Unrestricted

その名の通り、無制限に移動できます。
マスクの外に飛ばしてしまうことも出来ます。
http://wannabe-note.com/wp/wp-content/uploads/2014/12/Wannabenote118.jpg”>Wannabenote

Elastic

ゴムのように伸縮します。
マスクの外に出すぎた場合、自動的に補正をして、出ないようにしてくれます。
試しにContentの大きさをマスクよりも大きくして動かしてみましょう。
Wannabenote

ゲームを実行して、マスクよりも外に画像を持っていくと、自動的に補正されて座標が戻るのがわかります。
Wannabenote

Clamped

Elasticと似ていますが、動きの違いとしては、そもそもマスクよりも外側に動きません

Inertia

Wannabenote
チェックをすると、ドラッグするときに慣性が働きます。
慣性を効かせたくない場合にチェックを外します。

Deceleration Rate

慣性に対する減速率です。
小さくなればなるほどすぐに慣性がなくなります。
2とかの1を超えた数字にすると逆に加速していきます。

Horizontal Scrollbar, Vertical Scrollbar

スクロールバーを利用する場合に設定します。

設定方法

Panelを右クリックして UI -> Scroll bar を追加します。
Wannabenote

スクロールバーを配置したい場所に配置します。
Wannabenote

今回は横方向のスクロールバーを作ってみたので、Scroll ViewのHorizontal Scrollbarに作成したScrollbarをセットします。
Wannabenote

ゲームを実行し、スクロールバーを動かすと連動して画像が設定したScroll Rectが動きます
Wannabenote

以上で動画の説明は終わりでした。

例えばPanelに対してScroll Rectをアタッチすれば、そのパネルが配下のUIごと動くのでオプション画面などに最適ですね。

また次回。

ad

関連記事

unity

[Unity]コードリファレンス GameObjectの検索と削除

検索ですので、検索対象となるCubeでも適当に置いておきます。 GameObject.

記事を読む

addcomp

[Unity]コードリファレンス コンポーネントをアタッチする。

コンポーネントをプログラム実行時に追加します。 AddComponent() AddComp

記事を読む

unity

[Unity]コードリファレンス GameObject生成

Unityをまじめに扱う必要が出てきたので、自分用のリファレンスを書いていきます。 適当にボタ

記事を読む

Unity_

[Unity]Unity4.6 UIチュートリアル Lesson5.UI Text 日本語要約

前回の続き。今回はUI Textについての説明。 とはいえ、さすがにテキストなので、あまり説明

記事を読む

logo

[Unity]Unity 2Dチュートリアル スプライトを元の位置に戻す ソース解説

◆全文 using UnityEngine; using System.Collection

記事を読む

cropped-wannabenote_logo.png

[Unity]Unity4.6 UIチュートリアル Lesson11.UI Mask 日本語要約

Unity関連まとめページはこちら→Unity Unity4.6 UIチュートリアル Less

記事を読む

Unity1_5

[Unity]Unity2Dで3マッチパズルを作ろう~インストール編~

Unityの2D機能で3マッチパズルでも作ろうかと思ったのですが、ほとんど資料がない。Unity

記事を読む

Unity_

[Unity]Unity 2Dチュートリアル スプライトをクリック(タップ)して削除する

前回、スプライトを置くことが出来たのですが、動かせるようにしたいところです。 ドラッグして動

記事を読む

unity rotate worldpoint

[Unity]コードリファレンス GameObjectを回転する。

くるくる回します。 rotationプロパティ Objectの向きをワールド座標で指定します

記事を読む

Unity_

[Unity]Unity2Dチュートリアル 直線で3つ同色のパズルを消去する

前回の続き。 パズドラじゃなくて、パズドラ+ぷよぷよの謎パズルを作ってしまったので、 今回は

記事を読む

ad

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

  •  Auther;わなび

     「オープン系得意だよね? 俺のPCの調子悪いんだけど」という無茶振りから解き放たれゲームエンジニアに。
    C#とかUnityを扱います。
    Twitterフォロー大歓迎です。
    githubアカウント→wannabenote
  • follow us in feedly
PAGE TOP ↑