読者です 読者をやめる 読者になる 読者になる

Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのScrollbarの使い方【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.1.1f1 Personal(2015年7月)
f:id:hiyotama:20150624205139p:plain


ひよこエッセンスの時間です〜

今回はuGUIの中でもScrollbarについてまとめていきたいと思います〜


uGUIのScrollbarまとめ

①テキストをスクロールさせてみる

Scrollbarといったらまず最初に想像するのがこれだと思います〜


f:id:hiyotama:20150702181201p:plain
Scrollbarの例


それでは順を追って作っていきましょう〜


まずはHierarchyビューからCreate > UI > Panelを選択します〜


f:id:hiyotama:20150702181432p:plain


PanelのAchor Presetsをmiddle-centerにし、Widthを300、Heightを100にします〜


f:id:hiyotama:20150702182022p:plain
PanelのRect Transform設定

f:id:hiyotama:20150702182430p:plain
こんな感じ


続いてPanelの子オブジェクトとして、Textを作成します〜

TextはAnchor Presetsをstretch-stretchにし、PivotをX: 0、Y: 1に変更します〜

f:id:hiyotama:20150702182738p:plain


次に、改行する度にTextのサイズが自動的に大きくなるようにします〜Add ComponentからLayout > Content Size Fitterを選択します〜

Inspectorビューを見るとHorizontal Fit(横)とVertical Fit(縦)という項目がありますので、Vertical FitのほうをPreferred Sizeに変更し、改行に対応できるようにします〜


f:id:hiyotama:20150702183457p:plain
Vertical FitをPreferred Sizeに変更


この状態でテキストを何行か書くとPanelからはみ出してしまいますので、PanelにMaskコンポーネントを取り付けます〜Add ComponentからUI > Maskで取り付けられます〜


f:id:hiyotama:20150702185553p:plain
Panel外に出てしまったものを


f:id:hiyotama:20150702185613p:plain
Maskで隠す


更にPanelにScroll Rectというコンポーネントを取り付けます〜これにより、指定したオブジェクトに対してスクロールをかけることができます〜

Contentには先ほど作成したTextを指定し、縦方向にのみスクロールさせたいのでHorizontalはfalse、Verticalはtrueに設定しましょう〜


f:id:hiyotama:20150702185849p:plain



続いてHierarchyビューのCreate > UI > Scrollbarを選択し、Panelの子オブジェクト置きます〜

ScrollbarのDirectionはBottom To Topに変更し、Panelの右端に配置します〜


f:id:hiyotama:20150702190047p:plain
Direction : Bottom To Top


最後にPanelとScrollbarを関連付けるために、Scroll RectのVertical Scrollbarに、今作成したScrollbarを指定しましょう〜


f:id:hiyotama:20150702190259p:plain


これで完成しました〜Scrollしてみましょう〜


f:id:hiyotama:20150702190550p:plain
Scrollして

f:id:hiyotama:20150702190623p:plain
続きを見る


②Scrollbar解説
それではScrollbarの解説に移りたいと思います〜

f:id:hiyotama:20150702190740p:plain
ScrollbarのInspectorビュー


Interactable〜Navigationまでは以下エッセンスと同内容なので、割愛させて頂きます〜

hiyotama.hatenablog.com


Handle Rectは、Scrollbarのハンドルの画像です〜デフォルトではScrollbarの子オブジェクトであるSliding Area > Handleが指定されています〜


f:id:hiyotama:20150702191019p:plain


Directionは、Scrollbarの向きを設定できます〜
Left To Right、Right To Left、Bottom To Top、Top To Bottomの4方向があります〜


ValueはScrollbarの位置を表します〜
0〜1で表されています〜


SizeはScrollbarのサイズを表します〜
Bar全体に対する割合でサイズを決めます〜
Scroll対象が大きくなれば、Sizeもそれに合わせて小さいサイズになってくれます〜


f:id:hiyotama:20150702191532p:plain
Scroll対象が大きくなると、自動的に小さくなる


最後にNumber Of Stepsです〜
Scrollした時のステップ数を決めます〜例えばNumber Of Stepsを2にすると、Scrollbarの位置が以下の2ステップに限定されます〜


f:id:hiyotama:20150702191911p:plain
ステップ1


f:id:hiyotama:20150702191921p:plain
ステップ2


Scrollbarについてひと通り見てきました〜


以上ひよこエッセンスでした〜

ありがとうございました〜