SPRITE PRODUCTION WORKFLOW
Pixel Studio
Pixel Studioは、スプライトシートをゲーム用のフレーム素材へ整えるブラウザー内のピクセルアート制作ツールです。画像を分割して位置をそろえ、ドットやアニメーションを調整して、制作に使う形式で書き出せます。
画像を分割・調整し、ゲーム用のフレーム素材へ
スプライト素材を仕上げる流れ
01
シートを読み込む
スプライトシートを取り込み、Grid分割や分割位置の調整で各コマを切り分けます。
02
透過と位置を整える
背景色の透過や余白の調整を行い、共通CanvasとPivotを使ってフレーム間の位置をそろえます。
03
フレームを編集する
ドット、レイヤー、フレーム、クリップを調整し、オニオンスキンや再生プレビューで動きを確認します。
04
素材を書き出す
用途に合わせて画像、アニメーション、シート情報を選び、ブラウザーから保存します。
公開版で利用できる機能
画像の分割と整列
- Sprite SheetのGrid分割とセル境界の調整
- 背景色と許容差を使った透過処理
- フレームを共通Canvasへ配置し、Pivotと足元位置を調整
- 元画像を資料として表示しながら、キャラクターを切り抜いて配置
ピクセルとアニメーション編集
- 鉛筆、消しゴム、塗りつぶし、スポイト、直線、矩形、範囲選択、移動
- レイヤー、パレット、フレーム、複数クリップの編集
- オニオンスキン、FPS・再生時間・Loopの設定とプレビュー
- Hold / DuplicateまたはTransform InterpolationによるAuto Inbetween
保存と書き出し
- Animated GIF、選択フレームのPNG、PNG Sequence ZIP
- Sprite Sheet PNGと、フレーム座標・時間・FPS・Loopを含むAnimation JSON
- .rpsproj形式でのプロジェクト保存・読み込みとブラウザー内の自動保存
AFTERECHOのスプライト制作との関係
AFTERECHOでは、ナギのAI生成画像をUnity用スプライトシートに分け、IdleやAttackなど7種類の状態へ整理し、Pivotを調整してUnity内で動作を確認した制作記録を公開しています。Pixel Studioには、同じ制作工程のうちシート分割、フレーム位置の調整、クリップ編集、素材書き出しを支援する機能があります。公開記録からPixel Studioをナギの制作に直接使ったとは確認できないため、ここでは制作工程上の関連として紹介しています。
ナギのスプライト制作記録を読むブラウザーで制作を始める
画像の分割からフレーム調整まで、公開版の操作画面で試せます。
制作データはブラウザー内で扱い、必要なファイルは利用者が保存します。