読者です 読者をやめる 読者になる 読者になる

週刊SleepNel新聞

SleepNel所属のぽうひろが日々の個人開発で気になったことを綴ります。

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

作ってみた Unity GIMP

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

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

今回は、作成したボタン画像をUnityで使うところまでやってみたいと思います。
前回はこの状態でした。
f:id:pouhiroshi:20160712091653p:plain:w300
レイヤーを複製して、垂直方向に反転させます。
f:id:pouhiroshi:20160713080952p:plain:w300
Unityには1つの画像を複数に小分けにする機能がありますが、四角形に切り出されるため
切り出しやすいようにレイヤーを配置しておきます。
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

簡単にですがGIMPで複数のボタン画像をまとめて作成し、Unityに取り込みSpriteEditorでスライスするというところまで開設しました。SpriteEditorは手動で範囲を指定して切り出すこともできます。便利ですね!!
ぜひトライしてみてください!

それでは良いインディー開発ライフを!!!

広告を非表示にする