kenoでございます。
Unityで2Dゲームを作るとき、「なんか複数の絵があつまったSpriteを分割して使いたいけど、どうやるんだっけ？」みたいなこと、ありますよね。
「Sprite Editorつかって分割したはずなのに、できてないじゃん」みたいなこともありますよね。
以外と関連項目があって難しいんです。
僕も色々困ってたので一回ちゃんと調べました！簡単に説明するのでどうぞ！
Sprite Editorとは
まずは、Sprite Editorの説明から。知ってる人は次の項目へどうぞ。
Unity2Dではタイルを表示したりキャラクターの絵を表示したりするのに、画像ファイルのJpegやpng等からSpriteというものに変更します。
この際、ステージのタイルだったり攻撃のエフェクトって1枚だけじゃなくて、何枚か続けて使用する必要が出てきたりするんですね。例えば以下のような感じ
これは僕がペイントソフトで1分で作ったものですが、64×320ピクセルで作成してます。別に自分で作らなくてもマップチップのフリー素材はたくさんあるのですが、結構ほしいと思うものがなかったりすることも多く...
とにかく、5枚つづりのSpriteが必要ならデータ的には画像データを5枚用意してそれぞれSpriteにするよりも、画像データを1枚にくっつけちゃってUnity内で5枚に分割したほうが効率がよいんです。
その「1枚の画像データ→5つのSprite」に分割するのがSprite Editorです。
具体的な使い方
僕がよくSprite Editorを使うときには、以下の2つの用途に分けられます。
・マップチップを分割する
・吹き出し画像を9-slicedにする
一つずつやり方を説明します。
マップチップを分割する方法
例を挙げて説明しましょう。先ほどの5枚つづりのマップチップをUnityで5枚のSpriteに変換する方法をやってみます。
１．まずはインポート
まず最初に、Unity2Dのプロジェクトを立ち上げたら、Sprite専用のフォルダを作ってそこにさきほどのマップチップをドラッグ＆ドロップ。
２．マップチップを選択
マップチップのインスペクターで確認するべき事項は以下の通り
・Texture Type : Sprite (2D and UI)
・Sprite Mode : Multiple
・Pixels par Unit : 64 (今回の場合)
Sprite ModeはMultipleにしないと分割するSpriteとして認識されないので設定しましょう。
PPU(Pixels par Unit)は「マップチップ一つ分のサイズ」の定義です。
今回の例では、横方向に5つ分のチップが並んでいますが、すべてのチップのサイズは64で、それが5個分で320ピクセルになっています。
これを5つ分に分割したいので1つ分のサイズは64という話。
デフォルトではPPUは100になっていると思うので、書き換えておきましょう。
重要！Spriteの設定に変更を加えた際には一番下にある「Apply」を忘れずに押しましょう。インスペクターを下にスクロールするとApplyボタンが出てきますよ。
３．さっそく分割してみる
さて、それでは早速分割してみましょう。インスペクターの半ばにある「Sprite Editor」というボタンを押します。
ちなみに、ボタンがないぞ！って方は画面上部のメニュー「Window→Package Manager」から「2D Sprite」というパッケージをインストールする必要があるみたいです。今だとだいたいデフォルトではいってると思いますが一応。
Sprite Editorを開くとこんな感じになっているでしょうか。
分割するために最初におこなうべきことは、「5個に分割する」ということですね。
上のほうにあるSliceボタンを押してTypeを「Grid by Cell Count」にします。
Typeは何個かあって、状況に応じて使い分けるのが良いと思います。
・Automatic : 自動的に分けるべき箇所を認識して設定してくれる。ちょっと融通が利かないときもあるが、基本的にはこれでいいかも。例えばマップチップが画像ファイルの中に乱雑に配置されている場合などに役に立つ。
・Grid by Cell Size : マップチップなどを設定したピクセルサイズで割ってくれる。1つのタイルのサイズが分かってる時などに使えるかも。
・Grid by Cell Count : 今度はチップが縦に何個、横に何個あるかで分割してくれる方法。僕は縦横できれいに割れるマップチップをよく使うのでこの方法が好き。
・Isometric Grid : 斜め上から見たタイルなどの分割に使う。僕はIsometricあまり使わないので詳しくないが、好きな人はすきそう。
さて、Grid by Cell Countで以下のように設定してsliceボタンを押せば、5つに分割されます。赤い線で区切られているのが分かるでしょうか。
最後に、画面右上にある「Apply」ボタンをおして、確定をしますよ。これを忘れないようにしましょう。
４．確認をする
さて、それでは最後にProjectタブを確認してみましょう。最初にマップチップをインポートした場所を確認してみると、5つのSpriteに分けられていることが確認できると思います。
あとはお好きなようにSpriteとして使ってもらうとよいと思います。よく使う例としては、Tilemapの機能を使ってステージを作成したりですかね。
Tilemapについては以前使い方を説明した記事があるので、そちらをご覧ください。
Tilemapをスクリプトで操る方法！[Unity] - kenogadget’s blog
吹き出し画像を9-slicedにする方法
今度はSprite Editorの別の使い方を確認してみましょう。
例えば、ゲーム内の吹き出しって、結構セリフ量によって横幅縦幅が変わったりしませんか？
吹き出しだけでなく、大きさを動的に変えられる四角とか。いま僕が作ってるゲームでもそれが出てくるんですよ。
でも、そのサイズ変更をTransformで行うと、解像度の問題で線が太くなったりするんですね。不格好になってしまう。
横幅を伸ばしたいけど、縦線は太ってほしくない。そんな時に有効なのが「9-slice」なんです。
１．画像のインポートからSprite Editorまで
今回はとてもシンプルな四角形の吹き出しを使いますが、フリーの素材を使うこともできます。一応今回使った四角形を張っておきますね。まっしろで透過だから見えないかも。右クリックで保存して使っていただいても大丈夫です。
重要なのは以下の項目です。
・Texture Type : Sprite (2D and UI)
・Pixels per Unit : 256
・Mesh Type : Full Rect
今回は一枚のSpriteになるのでSprite ModeはSingleで大丈夫そうですね。
Mesh TypeはデフォルトのTightだとうまく9-sliceが機能しない可能性があるそうで、Full Rectにしときましょう。
２．分割線を決定する
Sprite Editorを開くと以下のようになっていると思います。
今回はsliceのボタンがoffになってるみたいですね。その代わりspriteというタイトルがついたタブが開かれています。基本的に9-sliceはここで設定していきます。
よーく見てみると、画像の上下左右に緑の点があるのが分かるでしょうか。
これを移動させることでどの部分を分割するかを決めるわけですね。やってみましょう。
例えば、上の緑の点をつかんで下げてみるとこんな感じ。
みどりの線が出てきました。同時にSpriteタブのT(Top)の数値が35になっています。うえから緑の点を35ほどさげたってことですな。
このSpriteはこの緑の線にそって上と下に分けられることになります。
では上下左右やってみます。
全方向で分割ができました。
なぜこんなことをするのだろうか？
その理由は9-sliceの仕組みにあります。
ちょっと雑ですが理解図を描いてみたのでご覧ください。
例えば、横に進む線が縦に延ばされてしまった場合、もちろん線は太くなります。しかし横に進む線が横に延ばされても長くなるだけで太さは変わりません。
この性質を利用しセクションに分けることで、それぞれの線が太くならない拡大縮小をすることが可能になりました。
では、Sprite Editorに戻って、「Apply」を押して戻りましょう。
３．Sceneで確認
それでは満を持して9-sliceの威力を確認しましょう。
ヒエラルキーにスライスしたSpriteを持っていき、画面に表示させます。
インスペクターでDraw ModeはSlicedにしましょう。
これで完璧なはず。
それではこのSpriteのサイズを変えてみてください。
どうでしょうか？
うまくいかない？
心配しないで。インスペクターのtransformのほうのsizeを変えるとどうしてもこうなってしまうのです。
そっちではなく、Sprite RendererのDraw Modeの下に出てきたsizeを変えてみましょう。
どうでしょうか。線がそのままの太さですね。
このようにして吹き出しや画像を変に伸ばすことなく拡大縮小できるのです。
まとめ
今回の記事では、Sprite Editorを使って「マップチップを分割する方法」「画像を9-sliceして拡縮する方法」をご紹介しました。
マップチップの分割を使えばより効率的にゲームが作れるようになるし、画像が変に伸びないようにと気を配るのもクリエイターとして必要なセンスですね。
一緒にゲーム制作頑張りましょう！
kenoでした。
