3Dモデルから2Dスプライトを作成する!SpriteMakerの使い方

  Unity   ,




追記:このアセットは残念ながら公開が終了したようです。 というわけで、この記事は自分用の備忘録となります。

こんにちは! 購入したアセットの記事を書き始めたAki(@akisnote)です!

今回はSprite Makerというアセットのご紹介です。

このアセットは3Dモデルをキャプチャーして2Dスプライトを作成するアセットです。

実はかなり前に買ったアセットなんですが、久しぶりに使おうと思ったらすっかり操作を忘れていました……。というわけで備忘録もかねてます。

では、さっそく見てみましょう!

アセット概要

Sprite Makerでは、3Dモデルをキャプチャーでき、そのスプライトを作成できます。また、パーティクルエフェクトやアニメーションのレコーディングやキャプチャーをサポートし、これらにスプライトシートを作成します。これは、3Dモデルをスプライトにただ変換するツールではなく、最新のアップデートにより役立つスプライトパッカーツールです。
引用元:Sprite Maker - Asset Store

作業環境

以下の環境で作業しました。

  • Windows 10
  • Unity 2018.3.2f1
  • Sprite Maker 1.9

事前準備

まずは3Dモデルをシーンに配置します。

Fantasy Boss Monster 01というアセットの中からTetitoneというボスモンスターをシーンに配置しました。石のゴーレムでとてもかっこいいです!

今回は Fantasy Boss Monsters 01 というアセットを使いました。

とてもカッコいいローポリのモンスターが6体も入っているんですが、買ったっきり使ったことがないのでここで使わせてもらいますw(笑い事ではなくきちんと使いたい……)

次にカメラを調整しておきます。3Dモデルが収まるように調整しましょう。

被写体がきちんと画面に収まるようにカメラを調整します。パースの有無なども調整しておきましょう

ここまでできたら、ツールバーから下記の通りに進めて、Sprite Bakerウィンドウを表示します。

Tools > Unitycoding > Sprite Maker > Sprite Bakerの順で開きます。SpriteBakerは別ウィンドウで開くのでタブでまとめたり別ウィンドウのままサイズを整えたりしておきます。

Sprite Bakerの設定項目

設定項目の詳細を見ていきましょう。

SpriteBakerを開いたところ。

カメラ

使用するカメラを指定します。

メインカメラしかない場合は変更の必要はありません。 複数のカメラがあり、かつ、メインカメラ以外を使用するときは変更します。

メインカメラ以外だとたまに挙動が怪しいので、メインカメラでの使用推奨です。

解像度

書き出すスプライトの解像度を設定します。

ここの指定とカメラ(Preview)での見た目は一致しないので注意が必要です。

例を挙げると、Previewでは右端が見切れていますが……

Previewでの見た目では3Dモデルの右端が見切れてしまっている。

実際に出力された解像度では表示されています。

設定した解像度で出力された画像は3Dモデルが見きれずにきちんと出力された。

この逆もまた然りで、Previewで表示されていても出力後に切れていることもありえます。

Views

カメラの角度の指定です。

便利といえば便利なんですが……、Viewsの値を変えるとなぜかカメラが上方向にずれてしまうので、この項目はあまり使わないほうがいいかもしれません。

下の画像では、3Dモデルが中央にくるように調整していたのですが、Viewsの値を変更したら上にずれてしまいました。 (Yの値を変えたから、というわけではありません。この件は後述)

alt

使うとしたら角度を変えたあとに、カメラの位置を調整する必要があります。

ちなみに、Xの値を変えると上下方向に回り込むように動いて、Yの値を変えると横方向に回り込むように動きます。(???)

alt alt

(X,Yが逆になっているのか、私の理解が間違っているのか……)

フレーム

出力するフレーム数を指定します。

10を指定したら0~9フレームが出力されます。 Previewでは0~10フレームまで見れますが、出力されるフレームと一つずれるので注意が必要です。

ターゲット

3Dモデルを指定します。

Animation Clips

アニメーションを指定します。

※「ターゲット」で指定した3Dモデルに、アニメーターコンポーネントがないと選択できません。とはいえ、ただあればいいだけなのでサクッと追加すれば大丈夫です。(タブン)

複数のアニメーションを指定すれば、その分だけスプライトが出力されますが、出力されるフレーム数を個別に指定することはできません。

Bake

Bakeボタンを押すと、3Dモデルがキャプチャされます。

Sprite Packerというウィンドウが開くので、そこでPackするとスプライトが出力されます。

Preview

アニメーションをフレーム単位で確認できます。

※カメラを変えた場合、Previewの見た目に反映されないので、SpriteBakerウィンドウを開き直す必要があります。開き直さなくてもBake自体はきちんとできます。

Sprite Packerの設定項目

Sprite BakerウィンドウでBakeボタンをクリックすると、自動で開きます。

手動で開く場合は、Tools > Unitycoding > Sprite Maker > Sprite Packerの順に開きます。

Sprite Packerウィンドウを開いたところ。Sprite Bakerでキャプチャした画像が並んで表示されている。

Pack Mode

自動かグリッドを選びます。まとめかたの違いなので、基本的に自動で良いと思います。

グリッドを選んだ場合は、更にCompact,row,columnを選びます。

Max Size

パックされた画像の出力サイズを指定します。

1024と指定したら最大1024×1024になります。

最大サイズに収まるように解像度が下げられてしまうので注意が必要です。

Trim

周囲をトリミングします。

Trimにチェックを入れると、Paddingという項目が出てくるので、トリミングしたいサイズを指定します。

Save Single

アトラス1と個別のスプライトを両方出力します。

個別のスプライトのみ出力されるわけではありません。

Atlas Padding

個々のスプライトに余白を追加してからアトラスを出力します。

Pivot

Pivotの位置を指定します。

出力されたもの

出力されたものがこちらです。個々のスプライトがまとめられて出力されました。

最終的に出力されたものがこちらになります。それぞれのスプライトがまとめられ一枚のテクスチャアトラスになりました。

あとはこれを使って、2Dゲームに組み込んだりすれば良いわけですね。

ちなみに、Unityの標準機能であるSprite Editorを使えば、スライスをやりなおしたりピボットを変更することも可能です。

あとがき

気になるところはいくつかありましたが、まったく使えないわけではないですし、むしろ使いやすさを押していきたいですね。

値段も$5ですし。Plus/Proを使用中なら$4です。お財布にもやさしい。

長い間アップデートが行われていないので、手放しでおすすめ!というわけではありませんが、3Dモデルを2Dスプライトにする方法をお探しの方なら十分検討する価値があると思います。

お手軽で大変便利なアセットです。ご興味のある方はこちらからどうぞ。

では!


  1. アトラスー複数の画像を一つの画像にまとめたもの。テクスチャアトラス、アトラス画像ともいう。 [return]

関連ページ