あさちゅんのゲームブログ

UnityやSiv3Dに関するゲーム開発メモを残していきます

UnityのuGUIで押したくなるUIを作る

UIって重要です。いくら内容がすごくてもUIがちゃっちいんじゃ一気にしょぼくなります。ってことで今回は自分が制作したゲーム『green』で作ったUIを紹介します。Press Z Key!!!

大きさが変わるUIを作る

大きさが変わるUI

『green』のタイトル画面で出てくるやつですね。

uGUIでImageを作りそれに適用するスクリプトを書きます。GameObjectには必ずTransformがついていますが、uGUIには代わりにRectTransformがついています。GetComponent<RectTransform>()したくなるところですが、RectTransformはTransformを継承していて今回はlocalScaleをいじるだけなのでtransformプロパティだけで十分です。

あとは、最大値と最小値を指定してVector3.Lerp関数とかでlocalScaleを適宜変えれば、大きさが変わるUIの完成です。止まってるより随分にぎやかになりました。

点滅するUIを作る

点滅するUI

次に点滅するUIを作ります。ImageやTextのコンポーネントを取得すればいいのですが、これらはUI名前空間にあるのでそのままでは使えません。「using UnityEngine.UI;」を追加するか、UI.Imageのように使いましょう。

ここでImage型やText型のフィールドを作りたくなりますが、透明度はこれらの基底クラスであるGraphic型が持っているので、これのフィールドを作ることにより両者に対応したコンポーネントを作れます。

UnityのUpdateは一秒間に100回近く回っていることもあり、こんな頻度で透明度を更新しても目にはわからないかもしれません。そこでコルーチンを使って更新頻度を下げます。

コルーチンはWaitForSeconds型を返すことにより、処理をいったんやめ、指定した秒数後に再開させることができます。これをつかってコルーチンを無限ループさせることによって、このスクリプトだけ違う頻度で更新しているかのように扱えます。

余談ですが、StartCoroutine("Func");をよく見かけますが、StartCoroutine(Func());の方が綺麗だし、引数関係で困らない気がします、、、

まとめ

uGUIはとても便利ですが、デフォルトのままだと「Unityで作りました感」が出てしまいます。画像を自分で用意したり、ちょっといじるだけでも劇的に変わるので手は抜けませんね!

また、今回は扱いませんでしたが、UnityのcolorはRGBa全て0~1で指定します。インスペクターの表示は255だし、Siv3Dも255なのでややこしいですね笑

使用したソフト
OS X Yosemite バージョン 10.10.5
Unity 5.2.0f3