UnityでUIを作る時、こんなことを思ったことありませんか?
「デフォルトのUIで出来ること少なすぎ...」
ですが、実はUnity標準のUIパーツだけで案外いろんな表現が出来たりします。
今回は、プラグインを一切いれずに、Unity標準で出来るボタン表現について解説します。
角丸ボタン
Webサイトなどでよく見る角丸ボタン。
実は、角丸四角のテクスチャ素材が無くても作れちゃいます。
ただ、直感的には分かりづらいです。
通常通りボタンを追加
目が見える状態にしましょう
そして、テクスチャ素材に、「9-Sliced」を選択。3つありますがどれでもいいです。
デフォルトは1ですが、1よりも小さくします。
ドロップシャドウつきのボタン
今度は、ボタンにドロップシャドウを付けます。
こっちはもっとカンタン。
シャドウのオフセット(ずらす)距離を調整します。シャドウの色も変えられます
ドロップシャドウがあるだけで、ボタンっぽくなります。
ボタン以外でも、ポップアップパネルなど、いろんな場所で使っていきましょう。
また、Unity標準では、パッキリとしたドロップシャドウしか実現できませんが、True Shadowというアセットを使うと、ふわっとした自然なシャドウが実現出来ます。
ポケポケみたいな、ニューモーフィズムデザインっぽいUIを作るには、TrueShadowアセットは必須。
アウトライン付きのボタン
最後はアウトラインをを付ける方法。
オフセットの太さを調整します。色も変えられます
ただ、デフォルトのアウトラインコンポーネントを使う際は以下の点に注意が必要です。
多角形素材ではアウトラインが破綻する
星のような多角形の素材は、アウトラインが破綻します。
Outlineシェーダーが、ベースのテクスチャを左右にずらした範囲を描画するようになっていますが、上下左右4方向にしかずらしていないので、多角形の先っぽはうまくアウトラインが出ないのです。
これはUnity標準だけではどうしようもありません。
どんな図形のアウトラインでも、ちゃんとキレイに出るUIシェーダー作れるアセットを作っています。
アセット情報を発信していますので、よければXフォローしてくださいね。
Shadowコンポーネントと併用すると汚くなる
先ほど紹介したShadowコンポーネントと、Outlineコンポーネントを併用すると、シャドウがキレイな形で出てくれません。
理由はちゃんと分からないのですが、もとのテクスチャサイズに対してシャドウを掛けてくれるのではなく、アウトラインも含めた領域に対して、シャドウを作ろうとするから?なのかもしれません。
いずれにしても、ShadowとOutlineの併用はオススメしません。
テクスチャからアウトラインを付けるか、テクスチャからドロップシャドウを付けるようにしちゃいましょう。
まとめ
Unity標準だけでも実はちょっとしたUI表現が出来るよ、という話でした。
それでは、素敵なゲーム制作ライフを！
コメント