how-tos

GPT Image 2.5でスプライトシートを作成する方法:PNGからGIFへ

Poyo.ai Team
2 min read
Share:

GPT Image 2.5でスプライトシートを作成する方法:PNGからGIFへ — 記事のカバーイラスト

GPT Image 2.5はスプライトシート用のアートワークを提供できますが、分割、タイミング調整、ピボット設定、アニメーション書き出しは別の工程として行う必要があります。 Sunburstを使用して、元のクロックワーク・クーリエ参照画像から1つの4×4シートを作成し、その後16個の固定サイズフレームと4つのGIFプレビューを書き出しました。

この結果は有用なプロトタイプであり、エンジンですぐ使えるアニメーションを保証するものではありません。歩行や走行には引き続き動きの確認が必要であり、生成されたピクセルアート風の見た目は、アーティストが管理する論理的なピクセルグリッドと同じものではありません。

PoYoでGPT Image 2.5を使ってスプライトシートを作成する。

作成したもの

ネイビーの帽子、ティール色のコート、錆色のスカーフ、クリーム色のサッチェルを持つ元のクロックワーク・クーリエ参照画像

アイデンティティ設定は意図的に簡潔にしました:真鍮の顔、ネイビーの帽子、ティール色のコート、錆赤色のスカーフ、クリーム色のサッチェル、茶色のブーツです。動きのポーズを要求する前に参照画像を生成しました。

元の1024ピクセル4×4生成スプライトシート

シートには4行が含まれています:

行要求した4つのフレームプレビュー目的
14つの歩行フェーズループする移動テスト
24つの走行フェーズより速い移動テスト
3しゃがみ、離陸、空中、着地1つのジャンプシーケンス
4バッグに手を伸ばす、手紙を持つ、手紙を差し出す、ニュートラル1つのインタラクションシーケンス

元のシートは 1024×1024 なので、各固定セルは 256×256 です。個々のポーズをセルいっぱいに収まるよう再スケールしていません。

ステップ1:キャラクター参照を確立する

衣装のまとまりが明確で、足が見える全身画像を使用してください。キャラクターをゲームサイズに縮小した際にノイズになる小さな装飾的ディテールは避けてください。

今回の参照画像はペイント風イラストですが、シートでは簡略化されたピクセルアート解釈を要求しています。これは意図的にレンダリングスタイルを変更するものです。目的は元のテクスチャをピクセル単位で完全に保持することではなく、認識可能なデザイン要素を引き継ぐことです。

生成前にアイデンティティ要素の短いリストを書き出してください。すべての出力をそのリストと照合します。最初のシートでセルごとにコート、帽子、サッチェルが変化している場合は、アニメーション書き出しに時間をかける前にデザインを修正してください。

ステップ2:固定レイアウトと明示的なポーズを要求する

プロンプトの重要な部分は次のとおりでした:

Create a 4 by 4 sprite sheet with exactly sixteen evenly sized cells.
Use the attached character as the identity and costume reference.
Consistent right-facing side view, same character scale and ground
baseline, full body and generous transparent margins in every cell.

Row 1: four phases of a walking cycle.
Row 2: four phases of a running cycle.
Row 3: crouch, takeoff, airborne jump, landing.
Row 4: reach into satchel, hold a letter, extend letter, return to neutral.

No grid lines, floor, drop shadows, frame numbers, or labels.
1024x1024 canvas, 256x256 cells.

PoYoでは、以下のリクエストを選択しました:

{
  "model": "gpt-image-2.5-sunburst",
  "input": {
    "prompt": "Your complete character and sprite-sheet instructions",
    "image_urls": ["https://your-public-storage.example/character.png"],
    "size": "1:1",
    "resolution": "1K",
    "quality": "high",
    "background": "transparent",
    "output_format": "png"
  }
}

例の参照URLをアクセス可能な画像URLに置き換えてください。正確なクリエイティブリクエストをダウンロードすると、完全なスプライトプロンプトと別の動画例を確認できます。

両方の2.5モデルは、公式生成ガイドによると透明な出力に対応しています。ここではSunburstをテストしましたが、Flareとのスプライト比較テストは実施していません。

ステップ3:プレビュー背景ではなく透明度を確認する

ダウンロードしたPNGにはRGBAアルファチャンネルがあります。そのピクセルの約 63.9%が完全に透明 です。最大アルファ値は255ではなく254であるため、厳密には完全に不透明なピクセルはありません。ただし、最も不透明なピクセルでも完全な不透明度との差はわずか1/255です。

ビューアは透明ピクセルの下に保存された奇妙な色を表示することがあります。白い背景上でファイルを合成した結果、あるプレビューで見えた背景は不透明な長方形背景ではないことが確認されました。不必要な再生成に料金を支払う前に、実際のアルファチャンネルを確認してください。

本番用途では、明るい背景と暗い背景の両方でアセットを確認してください。ハロー、半透明の衣装部分、スカーフ周辺の切り抜きに注意してください。PNGとWebPはアルファを保持できますが、JPEGは保持できません。

今回のGIFプレビューでは、アルファしきい値128でバイナリ透明度を持つパレットを使用しています。これは確認用の簡易プレビューです。完全なアルファに対応するエンジンやエディターでは、元のPNGを使用してください。

ステップ4:固定セルを分割する

4×4シートの場合:

cell width  = image width / 4
cell height = image height / 4
cell x      = column × cell width
cell y      = row × cell height

このシートでは、元画像の矩形は256の倍数です。各セルの下中央付近に共通のピボットを設定することから始めます。今回のプロトタイプメタデータでは(128, 250)を使用しています。

各フレームの表示バウンディングボックスを自動的に中央揃えしないでください。意図したジャンプがその場に固定されたキャラクターになったり、スカーフの動きに合わせて体が横に滑ったりする可能性があります。ジャンプ行では、安定した座標系内で垂直方向の動きを持たせる必要があります。

アトラス矩形と推奨タイミングをダウンロード。

完全なスプライトキットをダウンロード:元のシート、16個すべてのPNGフレーム、4つのGIFプレビュー、アトラスメタデータ、セットアップノート。

ステップ5:各アクションを個別にプレビューする

歩行プレビュー、4フレーム、毎秒8フレーム:

生成されたシートから書き出した4フレーム歩行プレビュー

走行プレビュー:

生成されたシートから書き出した4フレーム走行プレビュー

ジャンププレビュー:

生成されたシートから書き出した4フレームジャンププレビュー

手紙インタラクションプレビュー:

生成されたシートから書き出した4フレーム手紙インタラクションプレビュー

各GIFは確認しやすいようにループします。ゲーム内では、ジャンプや手紙アクションは通常1回だけ再生され、アイドル状態に戻ります。アトラスメタデータでは、ループするアクションとして歩行と走行のみを指定しています。

4フレームあればペース配分や位置合わせの問題を確認できますが、滑らかな移動を保証するものではありません。1行目の変化は控えめで、走行ポーズはより誇張されています。8 FPSがすべてのアクションに適切だと仮定せず、エンジン内でフレーム時間と動きを調整してください。

このプロトタイプにまだ必要なもの

アセットを本番利用可能と判断する前に、実際のゲーム解像度で確認してください。肩掛けバッグの側面、顔の輪郭、帽子の比率、足の接地、最後のフレームから最初のフレームへの遷移を確認します。

厳密なピクセルアート制作では、論理的な解像度とパレットを決めてください。そのグリッドを選択した後でのみニアレストネイバーでダウンサンプルし、一貫しないエッジのピクセル集合を手直しします。生成された1024ピクセルシートは、見た目上のすべてのピクセルが同一ブロックを占める証明にはなりません。

当たり判定形状、ヒットボックス、イベントマーカー、ゲーム状態の遷移は画像内には含まれていません。これらはエンジン側で追加してください。見た目の良いスプライトシートだけでは、ジャンプ物理や手紙を渡すタイミングは定義されません。

実際の生成コスト

今回の参照リクエストではSunburstを1K/mediumで使用し、2.95 credits のコストでした。シートでは参照画像付きで1K/highを使用し、11.78 credits のコストでした。

合計では 14.73 credits、または$0.07365 です(1 creditあたり$0.005の場合)。分割とGIFエンコードはローカル処理であり、追加のモデル生成は送信していません。これらのコストは、この1つの採用済みプロトタイプを対象としており、無制限の修正を含むものではありません。

その他の料金体系についてはGPT Image 2.5の料金をご覧ください。

よくある質問

GPT Image 2.5はGIFを直接出力しますか?

テストした画像リクエストではPNGが返されました。GIFはその後、シートのセルから作成しました。

UnityやGodotでシートを使用できますか?

PNGをインポートしてセルに分割できます。ただし、ピボット、アニメーションタイミング、再生状態、衝突動作を設定する必要があります。特定のエンジン統合テストは実施していません。

なぜ各フレームを個別に生成しないのですか?

共有シートは衣装やスケールの確認を容易にできます。個別生成では各ポーズにより多くの余地がありますが、フレーム間のばらつきを生じさせる可能性があります。どちらの方法でも確認作業は必要です。

同じキャラクターを映画的な短編にできますか?

はい。別の動画ワークフロー用のデザイン方向や参照として使用できます。私たちのImage 2.5 + MiniMax H3チュートリアルでは、異なる映画的レンダリングスタイルで描いた関連するクロックワーク・クーリエのストーリーを紹介しています。

Share: