GIMPでボタン作成！Unityでスライスして使ってみるよ！

みなさん、こんにちは。ぽうひろです。
f:id:pouhiroshi:20160712085031p:plain:w300

前回はGIMPのパスツールを使ってボタン枠を作成しました。
sleepnel.hatenablog.com

今回は、作成したボタン画像をUnityで使うところまでやってみたいと思います。
前回はこの状態でした。
f:id:pouhiroshi:20160712091653p:plain:w300
レイヤーを複製して、垂直方向に反転させます。
f:id:pouhiroshi:20160713080952p:plain:w300
Unityには１つの画像を複数に小分けにする機能がありますが、四角形に切り出されるため
切り出しやすいようにレイヤーを配置しておきます。
f:id:pouhiroshi:20160713081341p:plain:w300
ついでに元画像の反転したものも作っておきました。
pngに出力する前に余白がたくさんあるので、小さくしておきます。
f:id:pouhiroshi:20160713082821p:plain:w300
範囲選択し、画像＞選択範囲にキャンパスを合わせる
f:id:pouhiroshi:20160713082842p:plain:w300
小さく切り取られました。
f:id:pouhiroshi:20160713082858p:plain:w300
ファイル>エクスポートでpng出力です。オプションはこんな感じで。
f:id:pouhiroshi:20160713082919p:plain:w300
作成できました。この画像をUnityにドラッグドロップしましょう。
f:id:pouhiroshi:20160713082939p:plain:w300
一枚のSprite状態で入りましたね。これを分割します。
f:id:pouhiroshi:20160713082958p:plain:w300
SpriteModeをMultipleにし、SpriteEditorボタンを押します。
f:id:pouhiroshi:20160713083014p:plain:w300
確認ダイアログが出ますがApplyします
f:id:pouhiroshi:20160713083026p:plain:w300
SpriteEditorウインドウが出るので、左上のSliceを押し、AutomaticでSliceボタンを押します。
f:id:pouhiroshi:20160713083045p:plain:w300
するとどうでしょう！！ボタンごとに枠がつきましたね！
f:id:pouhiroshi:20160713083054p:plain:w300
これで右上のApplyボタンを押せばスライスが完了です。
結果、button_0〜3のSpriteが作成されます。これでUnityで使うことができます！！
f:id:pouhiroshi:20160713083110p:plain:w300