Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【Unityネタ】サイズを変えても比率が変化しない「ふきだし」を作る

今回はUnityネタをやっていきます。
9スライスを使ってサイズが変化してもカクカクにならない「ふきだし」を作っていきます。

f:id:Raspberly:20210411232925p:plain

 

はじめに

この記事を書こうと思ったきっかけはこちらです。
Twitterでも話題のバーチャル・ジャパン・プラットフォームの紹介動画
とても印象的な場面がたくさん出てきます。

www.youtube.com


みなさんも気になる所があるかと思いますが、個人的に一番気になったのがこのシーン!

f:id:Raspberly:20210411183709p:plain

このふきだしの部分です
左右に引っ張っているせいなのか比率が変化してカクカクになっています。
これは見栄えがよくないですね。

 

 

そこで今回は、9スライスを使ってサイズが変化してもカクカクにならないふきだしを作ってみます。
これに関する解説記事はたくさんありますが、さわったことがない領域なのでまとめておきます。

 

 

開発環境

Unity 2020.3.0f1

 
吹き出しの素材はこちらを使わせていただきました

カスタマイズ可能!フリーアイコン

 

 

Imageをそのまま大きくするとどうなるか

まずはダメな例としてImageをそのまま大きくしてみます。
ImageにSpriteを割り当てWidthを大きくしてみると、左右の黒枠や下の出っ張りが引き延ばされカクカクになります。

f:id:Raspberly:20210411220624g:plain

これはImageに割り当てられているSpriteの比率が変化し、引き伸ばされているためおこります。

 

 

Spriteの9スライス

これを回避するためにはSpriteの9スライスを行います。
9スライスは、Spriteを9分割しサイズが変更されてもアスペクト比が維持されるようにする2D手法です。
Sprite Editorから分割できます。

2D Spriteパッケージのインストール

Sprite Editorを使うには、Unity Package Managerから2D Spriteパッケージをインストールする必要があります。

f:id:Raspberly:20210411213847p:plain

 

テクスチャのImportSettings

ふきだしテクスチャのImportSettingsを変更します。
Texture TypeをSpriteに、MeshTypeをFull Rectに変えます。変更後はApplyを忘れないように。

f:id:Raspberly:20210411223316p:plain

 

Sprite Editorからスライス

そのままImport SettingsからSprite Editorを起動します。

f:id:Raspberly:20210411225041p:plain

 

ここでSpriteを分割する境界(緑色の線)を設定します。
ふきだしの尖っている部分や角が引き延ばされないよう↓のようにします。

f:id:Raspberly:20210411225216p:plain

境界設定後はApplyを忘れないように

ImageのImage Typeを変更

SpriteをCanvas内のImageに設定したら、Image TypeをSliced*1に変更します。

f:id:Raspberly:20210411225603p:plain

 

これで完成です。
サイズを変更しても角や尖っている部分は引き延ばされないようになりました。

f:id:Raspberly:20210411230900g:plain

 

 

まとめ

・Spriteを9スライスすることで、サイズが変化しても比率を保つことができる
・9スライスはSprite Editorから行う
・Image TypeはSlicedかTiledにする

f:id:Raspberly:20210411233308g:plain

 この辺はあまり詳しくないので間違っている所や改善点があればコメントなどによろしくお願いします。

 

 

 

 

 

 

参考資料

docs.unity3d.com

 

shikaku-sh.hatenablog.com

 

 

テキストに合わせてサイズを可変させるにはこちらがオススメ

tech.pfq.jp

 

 

*1:Tiledでもよい、違いはこちらスプライトの 9 スライス - Unity マニュアル