*

[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]Unity4.6 UIチュートリアル Lesson2.UI Rect Transform 日本語要約

今回はUIのRect Transformの使い方。 公式はここ→http://unity3d.co

記事を読む

Unity_

[Unity]Unity2Dチュートリアル 画面上のGameObjectを左下から取得する

前回、画面上のオブジェクトを一括で手に入れる方法はわかりました。 しかし、これではどのオブジェクト

記事を読む

unity move

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

移動します。 transformプロパティ GameObjectのtransformプロパテ

記事を読む

unity toggle button label

[Unity]コードリファレンス テキストを表示する。

テキストを表示します。 OnGUI() Unityでテキストを表示する場合は、OnGUI()

記事を読む

logo

[Unity]Unity2Dでパズドラのようにタイルを動かす ソース解説

◆全文 using UnityEngine; using System.Collection

記事を読む

instantiate cube unity

[Unity]コードリファレンス GameObjectの複製

GameObjectを複製します。 Object.Instantiate(Object ori

記事を読む

Unity_

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

昨日、適当なリリースのTOPページの要約しただけで、ここにたどり着くワードがUnity4.6だらけに

記事を読む

logo

[Unity]Unity 2Dチュートリアル スプライトをドラッグ(タップ)して移動する ソース解説

◆全文 using UnityEngine; using System.Collection

記事を読む

Unity_

[Unity]Unity4.6リリース 翻訳的な何か有り

http://unity3d.com/unity/whats-new まだ全然扱えていないのに

記事を読む

Unity_

[Unity]Unity2Dでパズドラのようにタイルを動かす

今回からスクリプトがかなり難しくなってくるかも。 前回の続き。 というわけで前回はドラッグで

記事を読む

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 ↑