メッセージウィンドウの作り方

2018.06.16
Unity
UI

1. 画像の用意
2. 画像の設定
3. メッセージウィンドウの作成

画像の用意

　このようなシンプルなウィンドウ画像であれば、この画像のみで様々な大きさのメッセージウィンドウを作成することができます。そのため、大きさの異なるウィンドウを作成するたび、新たに画像を用意せずに済みます。

画像の設定

　使用する画像を選択し、InspectorからSprite Editorを開きます。

右下のBorderの数値をすべて20へ変更します。

これで画像の設定は終わりです。

メッセージウィンドウの作成

　HierarchyのCreateからシーンへCanvasを追加します。（Create→UI→Canvas）
追加したCanvasへImageを追加します。（Create→UI→Image）

追加したImageを選択し、InspectorからSourceImageにメッセージウィンドウの画像を指定します。ここで、ImageTypeがSlicedになっていることを確認してください。

これで、大きさを変更しても、枠線が太くなったり細くなったりすることがないメッセージウィンドウができました。ただし、元の画像よりImageのサイズを小さくすると、枠線が細くなってしまうことに注意してください。