ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【unity】 1つの画像をスライスさせてみる

今回は、1つの画像から複数の画像を取り出す(スライス)やり方を載せます。

 

例えば、下のような1つの画像があったとします。

f:id:win-friendof:20160605213430p:plain

1つの画像を使って、5つの画像にします。

※画像は基本的に透過させます。

 

1.画像の読み込み

初めに、unityの[ Asset ]の部分にスライスしたい画像をドラッグ&ドロップで読み込ませます。

f:id:win-friendof:20160605221047p:plain

 

2.スプライトモードをマルチに変える

現状ではこれ1つの画像であることになっています。

これを複数の画像にするためにスプライトモードをマルチに変えます。

読み込ませた画像を選択して、[ Sprite Mode ] をクリックして [ Multiple ] を選択します。

f:id:win-friendof:20160605221135p:plain

 

 

3.画像の編集画面を出す

[ Sprite Editor ] を開きます。

f:id:win-friendof:20160605221242p:plain

 

4.スライスをする

Sprite Editor の左上にある [ Slice ] ボタンをクリックします。

基本的には設定は変えなくても大丈夫です。

f:id:win-friendof:20160605215026p:plain

最後にスライスボタン(赤い部分)を押すとスライスできます。

 

5.スライス結果

下のよーく画像を見ると四角いラインで囲まれているのが分かります。

f:id:win-friendof:20160605215027p:plain

この枠線でスライスするよ!って意味です。

 このウィンドウを閉じると保存するかどうか聞かれるので [ Apply ] を選択します。

 

6.スライスした画像を使う

Assetにある画像のアイコン(画像の赤枠部分)をクリックするとスライスした画像が出てきます。

あとはそれぞれの画像を使っていきます!

f:id:win-friendof:20160605221540p:plain