AppSeedのアプリ開発ブログ

アプリ開発会社AppSeed(アップシード)開発担当のブログです。iOS、Android、Unity、Cocos2d-xなどアプリ開発関連のTipsや備忘録、アプリ開発に役立つ情報を発信します。

【Unity】枠画像を綺麗に引き延ばす方法(スライス)

【Unity】枠画像を綺麗に引き延ばす方法(Sprite Editor)

Unityで作るアプリで、ゲーム内のキャラが会話するシーンとか、ダイアログが表示されたりするシーンを作ることが結構あるのですが、上記のようなフレームを表示させたい場合、今までは原寸大のフレームを用意して使ってました。

 

原寸大のフレームを用意する場合の問題点として、アスペクト比の違う枠の表示に対応できない(別画像を用意する必要がある)という点があるのですが、最近Unityのスライス機能を使えばフレームの表示がかなり便利だということを知ったので、今後の為に書き残しておきたいと思います。

 

【Unity】枠画像を綺麗に引き延ばす方法(Sprite Editor)

1.フレーム画像を用意する

【Unity】枠画像を綺麗に引き延ばす方法(Sprite Editor)

まず、フレーム画像を用意します。

サイズはなんでも構いませんが、正方形の方が綺麗に引き伸ばせるので、縦と横のサイズが同じ正方形をお勧めします。

 

2.Unity Sprite Boarderを設定

【Unity】枠画像を綺麗に引き延ばす方法(Sprite Editor)

次に、追加した画像素材に対してどこを引き延ばすかの指定を行います。

画像のImport Settingを開いて、「Sprite Editor」を選択します。

 

2.Unity Sprite Boarderを設定

Sprite Editorを選択すると、上記のようなウィンドウが表示されるので、どこを引き延ばすかをBorderの値で設定します。

 

3.枠画像の表示

2.Unity Sprite Boarderを設定

画像の設定が終わったら、あとは表示するだけです。

枠画像を表示するゲームオブジェクトにImageコンポーネントを追加、

画像リソースの指定をして、Image Typeを「Sliced」にすればオブジェクトのサイズに合わせて枠画像が拡大します。

いい感じに引き伸ばされない場合は、SpriteEditorでBorderの指定を調整すればOKです。

 

スライス画像のメリット

スライス画像を使うメリットとしては、サイズ指定で枠画像を用意した場合に比べ、アスペクト比の違う枠も1つの画像で表現できるという点があります。

通常は、同じような枠でも表示するサイズやアスペクト比が違う場合別画像として用意する必要がありますが、スライス画像ではそれがないので、アプリサイズの削減をはかれそうです。

Borderの微調整は多少手間にはなりますが、慣れればスライズ画像の方が便利だなと思います。