今回はUnityネタをやっていきます。
9スライスを使ってサイズが変化してもカクカクにならない「ふきだし」を作っていきます。
はじめに
この記事を書こうと思ったきっかけはこちらです。
Twitterでも話題のバーチャル・ジャパン・プラットフォームの紹介動画。
とても印象的な場面がたくさん出てきます。
みなさんも気になる所があるかと思いますが、個人的に一番気になったのがこのシーン！
このふきだしの部分です。
左右に引っ張っているせいなのか比率が変化してカクカクになっています。
これは見栄えがよくないですね。
そこで今回は、9スライスを使ってサイズが変化してもカクカクにならないふきだしを作ってみます。
これに関する解説記事はたくさんありますが、さわったことがない領域なのでまとめておきます。
開発環境
Unity 2020.3.0f1
吹き出しの素材はこちらを使わせていただきました
Imageをそのまま大きくするとどうなるか
まずはダメな例としてImageをそのまま大きくしてみます。
ImageにSpriteを割り当てWidthを大きくしてみると、左右の黒枠や下の出っ張りが引き延ばされカクカクになります。
これはImageに割り当てられているSpriteの比率が変化し、引き伸ばされているためおこります。
Spriteの9スライス
これを回避するためにはSpriteの9スライスを行います。
9スライスは、Spriteを9分割しサイズが変更されてもアスペクト比が維持されるようにする2D手法です。
Sprite Editorから分割できます。
2D Spriteパッケージのインストール
Sprite Editorを使うには、Unity Package Managerから2D Spriteパッケージをインストールする必要があります。
テクスチャのImportSettings
ふきだしテクスチャのImportSettingsを変更します。
Texture TypeをSpriteに、MeshTypeをFull Rectに変えます。変更後はApplyを忘れないように。
Sprite Editorからスライス
そのままImport SettingsからSprite Editorを起動します。
ここでSpriteを分割する境界(緑色の線)を設定します。
ふきだしの尖っている部分や角が引き延ばされないよう↓のようにします。
境界設定後はApplyを忘れないように。
ImageのImage Typeを変更
SpriteをCanvas内のImageに設定したら、Image TypeをSliced*1に変更します。
これで完成です。
サイズを変更しても角や尖っている部分は引き延ばされないようになりました。
まとめ
・Spriteを9スライスすることで、サイズが変化しても比率を保つことができる
・9スライスはSprite Editorから行う
・Image TypeはSlicedかTiledにする
この辺はあまり詳しくないので間違っている所や改善点があればコメントなどによろしくお願いします。
参考資料
テキストに合わせてサイズを可変させるにはこちらがオススメ
*1:Tiledでもよい、違いはこちらスプライトの 9 スライス - Unity マニュアル
