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

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

【Unity開発】uGUIのPanelの使い方(非表示の方法等)【ひよこエッセンス】

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


スポンサーリンク

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


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


今回はuGUIのPanelについてまとめたいと思います〜

uGUIのPanelまとめ

①Panelの解説

Panelの役割はその名の通り、他のGUIをまとめて置く土台です〜

まずはPanelを作ってみましょう〜HierarchyビューからCreate > UI > Panelを選択します〜


f:id:hiyotama:20150630141507p:plain
Panel作成


するとゲーム画面全体にもやがかかったようになりますが、実はこれ、画面全体をPanelが覆っているのです〜


f:id:hiyotama:20150630141912p:plain
もやがかかった感じ


※ちなみにPanelの機能は使いたいけど画面には非表示にしておきたい時は、ColorのAlphaを0に変更すれば実現できます!

f:id:hiyotama:20150818161116j:plain
Colorを開き、パラメータのA(Alpha)を0にすると非表示に


それではPanelのInspectorビューを見ていきましょう〜


f:id:hiyotama:20150630142111p:plain
PanelのInspectorビュー


まずはRect Transformですが、通常のものとは違いLeft、Top、Right、Bottomという項目になっています〜
例えば以下のような設定にしてみると


f:id:hiyotama:20150630143237p:plain


以下のようにPanelのサイズを変更します〜
ようやくPanelの実態が見えました〜


f:id:hiyotama:20150630143607p:plain


Anchor以下については通常と同じですので、以下エッセンスをご参照下さい〜


hiyotama.hatenablog.com


Imageコンポーネントについても通常のものと全く同じですので、以下エッセンスをご参照下さい〜


hiyotama.hatenablog.com

②Panelを使ってみる

それではPanelを使ってGUIをデザインしてみましょう〜


まずはPanelの色を変えます〜ImageコンポーネントのColorをクリックし、以下の例を参考に色を変更してみて下さい〜
Aは透明度を表します〜


f:id:hiyotama:20150630151549p:plain


f:id:hiyotama:20150630151620p:plain
ちょっと透明の緑のPanel


次にButtonを作成します〜HierarchyビューからCreate > UI > Buttonを選択し、Panelの子オブジェクトにします〜


f:id:hiyotama:20150630152738p:plain
Panelの下にButtonを配置


それではButtonのInspectorビューからAnchor Presetsを開いて、altを押しながらright-bottomを選択して下さい〜

f:id:hiyotama:20150630154616p:plain
right-bottom選択


すると、CanvasではなくPanelの右下にAnchorが設定されます〜
これはPanelの子オブジェクトとし、Anchorの基準がPanelとなったためです〜


f:id:hiyotama:20150630154854p:plain


Buttonのデザインは別途エッセンスがあるので、そちらを参照しながら作成して下さい〜


hiyotama.hatenablog.com


f:id:hiyotama:20150630165359p:plain
Button設置


続いてInput Fieldを作成しましょう〜HierarchyからCreate > UI Input Fieldを選択し、Panelの子オブジェクトとします〜


f:id:hiyotama:20150630165009p:plain
Panelの子オブジェクト


こちらも以下エッセンスを参照して、Panelが中央に来るようデザインして下さい〜


hiyotama.hatenablog.com


f:id:hiyotama:20150630165335p:plain
Input Field設置


最後にTextを作成してタイトルを付けましょう〜HierarchyビューからUI > Textを選択し、Panelの子オブジェクトとします〜


f:id:hiyotama:20150630165935p:plain
Panelの子オブジェクト


Anchor Presetsをleft-topにし左上に来るように設定したら、以下エッセンスを参照して配置して下さい〜


hiyotama.hatenablog.com


f:id:hiyotama:20150630170315p:plain
Text設置


こんな感じでGUIをまとめてたい時に土台として使うのがPanelです〜


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

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