スマゲ

スマートなゲームづくりを目指して日々精進

UnityのuGUIでフレームのみのボタンを作る

UnityのuGUIでフレームのみのボタンを作ります

■完成イメージ
f:id:sanukin39:20160327140445p:plain

■画像の用意
外枠のみが白で内側が透過されている画像を用意する
画像はサイズ32x32で縁幅がそれぞれ2ピクセル
f:id:sanukin39:20160327140653p:plain

■Unityの切り分け
画像をUnityへインポートしインスペクターからSprite2d(2D and UI)を選択する
その後、SpriteEditorを起動する
f:id:sanukin39:20160327141149p:plain

SpriteEditorでは以下のように設定する
Pivot: Center
L, R, T, B : 3
このようにすると ボタンのサイズ、比率が変わっても縁が崩れないまま表示されるようになる
f:id:sanukin39:20160327141939p:plain

■ボタンへ反映
uGUIでボタンを作成、ボタンオブジェクトのImageにあるSourceImageに作成した画像を適用する
f:id:sanukin39:20160327142725p:plain

f:id:sanukin39:20160327142735p:plain

f:id:sanukin39:20160327142746p:plain

■色を変更する
ボタンのImageの色、子オブジェクトのTextの色を変更すれば好きな色のボタンを作成できる
f:id:sanukin39:20160327140445p:plain

■素材画像
白背景の白画像なので見づらいが、以下にはります
============
f:id:sanukin39:20160327140617p:plain
============