Unity+UnrealEngine4+Blog.

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

Unity&C#学習 part18 GUISkin GUIの文字の色や大きさ、配置を簡単に変える

Unity&C#学習 part18はGUISkinの学習をしていきます。GUISkinを使えるように設定すれば、色や大きさや配置などGUIに関する様々なもの簡単に変える事ができるようになります。

 

例えば前回、GUIのボタン間隔を開けたい!とGUILayout.Space();とコードを打っていましたが、そんなことしなくてもポン!と変えることができます。下の画像のように所定の場所へ数字を入れるだけです。GUISkinのInspectorパネルのButton内のMarginを変えるだけです!

f:id:nabesi777:20180923104610j:plain

 

 すごく便利です! 今回の学習内容は便利さはすごいですが、手間はまったくかかりません。めちゃ簡単です。

 

参考動画はこちらです。

 

 

▶ 今回の学習内容

  • GUIを自由にカスタマイズする

 

▶準備するもの

  • コードを追加するための前回のスクリプト
  • GUISkin

 

前回記事↓

nabesi777.hatenablog.com

 

 

 

それではまずGUISkinを準備します。

Assets>Create>GUISkin

 

 名前はなんでもいいですが、TutorialSkinにしました。

 

 次にスクリプトの追加をします。追加は2行だけです。

11行目と15行目だけで、そのほかは前回のGUILayoutに使用したコードです。(スクリプトの名前は、カスタマイズして遊ぶ際にLayouttestとしています)

*後ほどカスタマイズするのでGUILayout.Space(20);は消しといてください。

 

GUISkin Unity&C#

 

 スクリプトができたらMainCameraへアタッチして、さらにInspector上でGUISkinを格納します。

f:id:nabesi777:20180923104931j:plain

 

 これで設定は終わりなので、あとは変えたいものあれば変えます。再生しながら色を変えることができるので便利です。

 

Project上のGUISkinをクリックしてから、再生ボタンを押します。InspectorパネルへはButton以外にもSlidberなど様々なものがカスタマイズできます。

今回はButtonだけをカスタマイズしてみます。

 

 GUISkinのボタン欄で変更します。

テキストカラーを変えて、カーソルがボタン上に来たら赤に変わるようにしました。またボタン間隔を10px開けました。

f:id:nabesi777:20180923110156j:plain

 

 フォントのサイズを20にして、ボタンサイズをエリアサイズではなく文字に合わせるようにStretchWidthのチェックを外しました。

 

f:id:nabesi777:20180923110508j:plain

 

 そうすると以下のようになりました!

f:id:nabesi777:20180923110623g:plain

 

まだまだ項目はたくさんあるので、色々と弄ってみましょう!