Unity++blog.

UnityやC#とかについて学習したことを書いてます

Unity &C#学習 part17  GUIのレイアウトを自動でコントロールする

今回はGUILayout機能を使用してレイアウトをコントロールする方法を学習していきます。

 

今までのGUIの配置はPX単位で指定して配置をしていました。しかし、端末が変わったり、他のプロジェクトなどで表示させる場合は再度PXをひとつひとつ調整する必要があります。

 

今回の学習でGUIへ表示させるものをひとかたまりにして、他のものへ応用する際にはそのかたまりを調整することで手間を減らすことができるようになります。バラバラのものをひとつにまとめるイメージでしょうか?

 

参考にした動画です。

 

 

いままで学習したプロジェクトが ごちゃごちゃしてきたのと、動画でも新規のプロジェクトを使用しているため、新しいプロジェクトで学習していきます。

 

▶学習内容

  • GUIのレイアウト機能

 

▶準備するもの

  • 新規プロジェクト
  • カメラ
  • 照明
  • 新規スクリプト

 

 新規スクリプトを作成して下記コードを記入します。スクリプトの名前はGUILayoutTUTとしました。スクリプトができたらメインカメラへアタッチします。

 

Unity&C# GUILayoutTUT

 

 以上なんですが、これだけではなんのこっちゃかわからないので、自分なりに弄って解釈してみます。

 コード通りの画面がこちらです。

f:id:nabesi777:20180922190108j:plain

 

まず12行目

「GUILayout.BeginArea(new Rect(0, 0, 200, 60));」を下のように変えてみます。

()内は左から表示位置x、y、サイズx、yです。

 

「GUILayout.BeginArea(new Rect(100, 50,300, 30));」に変えてみます。

f:id:nabesi777:20180922191240j:plain

 

なるほど!これはわかりやすい。もう一つわかることが、エリアのサイズに合わせて水平方向のボタンの大きさが大きく変化していることです。また垂直方向へはサイズ変更が見られません。

 

「GUILayout.BeginArea(new Rect(0, 0,100, 60));」に変えてみます。縮小はしないようです。おそらく水平・垂直ともに縮小限度があるのだと思います。

f:id:nabesi777:20180922191706j:plain

 

 

次に動画の中でであったので試してみたのですが、垂直へのボタンアレンジをコメントアウトしてみると、SliderValue:1のボタンが消えました。水平方向のボタンですけど。。そして左のボタンが大きくなってます。

 

f:id:nabesi777:20180922190430j:plain

 

まだよくわからない!エリアを500,500にして、ボタンを下画像のようにコピーして2個表示させるようにしてみました↓

f:id:nabesi777:20180922192819j:plain

 

ふむふむ!

では、表示位置・大きさを調整してボタンを3つに複製すると・・

f:id:nabesi777:20180922193921j:plain

 

おお~!なんかそれっぽくなってきました!

いままでは個別でボタン表示・管理させていたため引っ越しが大変でした。この方法なら「GUILayout.BeginArea(new Rect())」これを管理するだけで大丈夫なのでかなり楽です!

 

簡単に画面下へ移動できます。

GUILayout.BeginArea(new Rect(10, 440, 620, 480));  Y軸を440としただけです。

f:id:nabesi777:20180922194708j:plain

 

 

以前ブログに書いたこの記事↓のエリア版みたいなものでしょうか。

この時は配列を使用して横に並べました。

nabesi777.hatenablog.com

 

 

では今までは

 

//水平グループ
GUILayout.BeginHorizontal();

 

この下に記述していたので、次は垂直にメニューバーを作る為に

 

 //垂直グループ
GUILayout.BeginVertical();

 

の下へボタンコードを設置してみます。水平ボタンは一つ残しで、垂直のものを2つカット&ペーストしてみます。

f:id:nabesi777:20180922201919j:plain

 

なるほど!

 

では GUILayout.BeginArea(new Rect(10, 20, 100, 480));としてみます。さらに垂直グループ「GUILayout.BeginHorizontal();」の直下は空にしてすべて垂直グループの下へ移します。

f:id:nabesi777:20180922202715j:plain

 

f:id:nabesi777:20180922202721j:plain

 

おお~!!いい感じに理解ができました!

が、上画像のアイテムとマップの間の開けれるかな??と最後に疑問が出ました。一度何かで似たようなことをやった記憶があるので、チュートリアルを遡ってみましたらありまst、なかったので探してきました!!笑

 

GUILayout.Space();

この()内に任意に数字を入れてボタンコードの間に入れていきます。これで画面内自由自在にレイアウトができるようになりました!!

f:id:nabesi777:20180922211505j:plain

f:id:nabesi777:20180922211511j:plain

 

おわり