3D モデルから作る 8 方向スプライトシート
リグ付きの 3D モデルを読み込むと、カメラが Y 軸を回りながら各方向をレンダリングし、アニメーションを指定したフレーム数でサンプリングして、一枚の透過 PNG シートに組み立てます。方向がいくつでも同じ俯角・同じ画角を共有するので、方向によってキャラクターの大きさが変わりません。レンダリングはブラウザ内で動くため、クレジットはかかりません。
手順
1モデルを読み込む
リグ付きの GLB か GLTF。Mixamo ボーンなら外部のモーションファイルもそのまま使えます。
2モーションを選ぶ
モデル内蔵のものを使うか、モーションだけの GLB を別に読み込みます。
3カメラとコマを決める
方向数（4・8・16）、1 方向あたりのフレーム、1 コマの大きさ、投影と俯角。
4シートを書き出す
透過 PNG 一枚と、各コマの矩形が入った JSON を受け取ります。
各操作の役割
- 1 · キャラクターモデル
- リグ済みの GLB / GLTF を読み込みます。カメラはモデルのバウンディングボックスに合わせて自動でフレーミングするので、センチ単位で作られた Mixamo のモデルも自動で正規化されます。スケルトンがなければアニメーションはできません。
- 2 · モーションファイル（任意）
- 任意です。GLB を読み込むと、その中のクリップがボーン名を手がかりにモデルへリターゲットされます。残すのは回転トラックだけです。位置とスケールは元のスケルトンのものなので、プロポーションの違うモデルに当てるとメッシュが崩れます。
- モーション
- 見つかったクリップの一覧です。モデルに同梱されていたものも、アニメーションファイルから来たものも並びます。選ぶとプレビューで再生され、書き出しが有効になります。モデルに無いボーンを参照している場合は、その数を警告で知らせます。
- 視点をリセット
- カメラを現在の方向と俯角に戻し、ズームも解除します。自由視点は確認用です。書き出しは常に下で設定した方向と俯角を使い、ドラッグした先の角度は使いません。
- 8 方向のプレビュー列
- プレビューの下に並ぶ 8 つの小窓が、8 方向すべてをリアルタイムで描いています。クリックするとメインビューがその方向に切り替わります。読み取れない向きを見つけるためのもので、正面では良く見えるポーズが背面ではまったく判別できない、ということが起こります。
- 投影
- 平行投影はすべての方向を地面に正確に揃えます。3 段階のレンズは遠近を加えるもので、望遠は平行投影に近いまま少しだけ奥行きを戻します。切り替えてもフレーミングは変わらず、遠近の強さだけが変わります。
- カメラ俯角
- カメラの俯角で、全方向で共通です。真横 0° はプラットフォーマー向き、30〜45° は見下ろし RPG の定番です。方向ごとに俯角を変えるとシートがずれるため、設定はひとつだけです。
- 方向数
- Y 軸まわりにいくつの向きを描くかです。8 方向が標準。上下左右にしか歩かないゲームなら 4 方向でシートが半分になり、16 方向は旋回が滑らかになる代わりにサイズが増えます。
- 1 方向あたりのフレーム
- クリップから何コマ抜き出すかです。終端は含めないので、最初と最後のコマが継ぎ目なくループします。
- 1 コマの大きさ
- トリミング前の 1 セルのピクセルサイズです。この後、全フレーム共通の透明な余白を切り落とすため、最終的なセルはこれより小さく、正方形でもなくなるのが普通です。
- ピクセル化
- セル解像度の数分の一でレンダリングし、深度と法線の切れ目に沿って輪郭を描きます。有効にするとシートは最後のリサイズを行いません。それがピクセルの粒を均一に保っています。
- スプライトシートを作る
- 方向数 × フレーム数のセルを手元の GPU でレンダリングし、1 方向 1 行の透明 PNG にまとめます。この処理に課金はありません。
- PNG をダウンロード / JSON メタデータ
- シート本体と、各セルの矩形およびエンジンが分割に使う列数・行数を記した JSON です。
- 歩かせてみる
- できあがったシートを WASD かポインタで実際に歩かせます。絵が正しいかは止まっていても分かりますが、方向の割り当てが正しいかは一周させて初めて分かります。
スペック
| 入力 | リグ付き GLB / GLTF（Mixamo ボーン推奨） |
|---|---|
| 出力 | 透過 PNG シート + JSON メタデータ |
| 方向 | 4 / 8 / 16 方向 |
| クレジット | 不要 — レンダリングはブラウザ内 |
| カメラ | 平行投影または 15°/30°/50°、俯角 0°〜60° |
| ピクセル化 | オフ、または 2× / 3× / 4× のブロック（深度・法線の輪郭付き） |
| エンジン | Unity, Godot, Phaser, RPG Maker ほか格子シートを読むもの |
苦手なこと
モーションの質は持ち込んだモデル次第です。モーションライブラリの汎用的な歩きを当てると、髪飾りや鞄のように揺れるべきものが動きません。その手の副次的な動きは 3D 側でカーブを作り込む必要があります。Mixamo 以外のボーンでは外部モーションが合わないことがあり、自動リギングは未対応なのでリグ済みのモデルが必要です。また 3D を縮小した絵は、手で打ったドット絵とは質感が異なります。
よくある質問
クレジットはかかりますか
かかりません。レンダリングが利用者のブラウザで動くため、課金対象がありません。
リグの無いモデルでも使えますか
まだ使えません。ボーンが必要です。Mixamo や自動リギングを一度通してください。
モーションはどこから
モデル内蔵のものか、モーションだけの GLB を別途読み込みます。Mixamo ボーン同士ならそのまま移ります。
キャラクターがその場から動きません
意図した挙動です。移動をシートに焼き込むとコマごとに枠外へ出てしまいます。移動はエンジン側で処理してください。
Unity や Godot への取り込みは
PNG を入れ、JSON の列数・行数で分割します。Godot では個別フレームを SpriteFrames に渡す方が速いことが多いです。