トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

【SpriteEditor】Spriteの頂点を分割して角丸をきれいに引き伸ばす【Unity】

角丸

角丸の長方形だと少し垢抜ける。

f:id:bibinbaleo:20200422151941p:plain

角丸の長方形SpriteをUnityで変形したときに、角丸が崩れないようにしたい。

f:id:bibinbaleo:20200422152141p:plain

こんな感じのカッコ悪い角丸になる

f:id:bibinbaleo:20200422152144p:plain

SpriteEditor

角丸の四角を作る。200*200とか小さくていいのかな?(よくわからない)

f:id:bibinbaleo:20200422152829p:plain

それをunityで読み込んだらインスペクタのSpriteEditorを押す

f:id:bibinbaleo:20200422143708p:plain

こんな画面が開く

f:id:bibinbaleo:20200422143715p:plain

Borderの数値もしくは緑の線を動かしていい感じにする。角丸の部分が切り取られる感じ?

できたら上のApplyボタンを押す

ImageでSpriteを設定

そしてimageにSpriteを設定する。そしてImageTypeをSlicesにする。

f:id:bibinbaleo:20200422143711p:plain

すると動かしたときも端がいい感じにいなるかも。

Sliced

f:id:bibinbaleo:20200422153115p:plain

Simple

f:id:bibinbaleo:20200422153111p:plain

角丸サイズ

長方形のサイズはUnityのRectTransformのWidth・Heightに合わせないと角丸が変になる

 

 

f:id:bibinbaleo:20200422154011p:plain

f:id:bibinbaleo:20200422154007p:plain

Unityのサイズに比べてspriteの長方形が大きすぎるとSlicedにしても角丸が大きくなる。

f:id:bibinbaleo:20200422154015p:plain

Spriteが小さすぎると角丸の部分だけ解像度が低くなる

f:id:bibinbaleo:20200422152357p:plain

結局作る対象のUnityサイズに合わせてパーツも作らないといけないのか

f:id:bibinbaleo:20200422154219p:plain

元のImageスプライト

もともとImageコンポーネントにはUISpriteというスプライトが入っているじゃないですか。

f:id:bibinbaleo:20200422150733p:plain

こんなかんじ。32*32なんだ!ちゃんとBorderも設定してある。

f:id:bibinbaleo:20200422150737p:plain

適用されているものはこれ。

f:id:bibinbaleo:20200422150500p:plain

全体的に暗くなるし、線が入るので好きじゃなくてすぐに消してたけど、よく考えるとこれも角丸だ!

小さくして角丸の部分が解像度低くなるのはしょうがないのか?それが正解??

最後に

 

www.project-unknown.jp

docs.unity3d.com