こんにちは！新入社員のタケです！
今日はシステムを作っていく中で、UIをIllustratorで作ってUnityで実際に使ってみました！
普通のUIの角よりも丸々とした形が欲しかったのです…！
画像の作り方編とUnityでの適用方法をまとめてみますー！
作り方は結構簡単です！
まずはIllustratorを起動して画像サイズを決めます。
だいたい64x64～128x128くらいあれば十分ですね。
作ったら、角丸の四角形にしたいので角丸長方形ツールを使います。
中央をAlt+クリックすると図を生成するダイアログが開くので、お好きな角丸の半径を好きな値にしましょう。
これで丸さが決まります。
キャンバスいっぱいに四角形を広げます。
ここで色を付けてしまうとUnity上から色を変えることができなくなってしまいます。
なので基本的にUIを作る時は真っ白か少し灰色をのせるくらいにすると良いですね。
デフォルトのUIに近づけたかったのですこーしだけ灰色をのせた枠線を付けています。
これでUIの素材画像ができました！
これをUnityにまずは取り込みましょう。
プロジェクトが3Dだと画像を取り込んだ時にはUIに使えない状態になっています。
まずはTextureTypeをDefaultからUI/Sprite用に変換します。
変換したら右下のSprite Editorを押しましょう。
Sprite Editorではこの作ったUI画像を切り分ける作業をします。
ここで適切に切り分けておくと、デフォルトのUIのようなどれだけサイズが広がっても劣化しないように使用できます。
右下のSpriteの設定のBorderという部分に数字を適当に入れましょう。
そうすると緑色の線がグリッド上に引かれます。
この緑の線が四隅の角丸部分にかからないように配置します。
画像が正方形なので、全部同じ数字を入れれば大丈夫ですね。
角丸サイズが30pixelくらいだったので80を入れておきました。
これでSprite Editorでの設定はおしまいです。
この状態で実際にPanelに設定してみましょう。
そうするとふにゃーんとなんだか伸びた感じになっちゃいました。
Imageコンポーネントの中のPixels Per Unit Multiplierの数を増やしてみましょう。
だんだんと角が良い感じについていきます。
値をどんどん上げていくとデフォルトのUIのように角丸具合をおさえたUIも作ることができちゃいました。
このUIさえあれば角丸からそうでもないものまで、大体困らなさそうですね！いい感じのUIができました！
…
ちゃんと装飾したUIを作ればもっと面白いことができそうですね…！
色味だけには気を付けて…絶対にUnityの中でつけられるようにしておこう！（とてもやりづらくなる）
コメント
コメントを投稿