キャラクタースプライトメーカー:プロンプトから完全なスプライトシートを生成
自分のキャラクタースプライトメーカーを作成
待機、歩行、攻撃、8方向のキャラクタースプライトを1つの説明から作成します。透明フレーム、整ったグリッド、エンジン対応。その後、キャラクターを歩き回れる3Dワールドに配置できます。
キャラクタースプライトメーカーは、文章による説明を受け取り、完全なスプライトシートを返します。待機、歩行、走行、攻撃、詠唱を8方向で、透明フレーム上に、固定グリッドで、原点を足元に配置します。キャラクター(体型、シルエット、パレット、手持ちの武器、衣服のレイヤー)を入力すると、ツールは手作業で描き直す必要のある1つのヒーローフレームではなく、その説明にあるすべてのポーズをレンダリングします。
スプライトとスプライトシートの違いは、画像とアニメーションシステムの違いです。1つの優れた待機フレームは絵です。シートはステートマシンです。エンジンがループできるフレーム数、インデックスできる方向、そして歩行サイクルがループの途中で形を変えないよう、すべてのセルで一貫したキャラクターが必要です。Neta Studioはプロンプトからシート全体を構築し、そのキャラクターを歩き回れる3Dワールドに配置できます。
1つのプロンプトから完全なキャラクターシートへ
キャラクターを平易な言葉で説明します。種族または身体構造、グリッドに対する身長、体格、髪または兜、衣服のレイヤー、持っているもの、パレットの範囲、アートディレクション(ピクセル、ペイント、フラットベクター)。メーカーはそれをキャラクタースペックに解析し、同じスペックから完全なマトリクス(すべてのアニメーション、すべての方向)をレンダリングします。出力はシートであり、ポーズ選択ではありません。
1つのフレームでは、キャラクターがゲームで機能するかどうかはほとんど分かりません。動いた瞬間に、3つのことが保たれる必要があります。実際に描画するサイズでシルエットが読み取れること、フレーム間でパレットがずれないこと、ピボットがさまよわないこと。シートはこれらの制約を即座に可視化します。歩行を待機の隣で確認し、フレーム3をフレーム1と比較し、エンジンに届く前にドリフトを発見できます。
1つの説明から作業することは、キャラクターの再現性も保ちます。プロンプトを変更する(マントをプレートに替える、パレットを2段階寒色にシフトする)と、変更がすべてに適用された状態でシート全体を再生成できます。新しい色の決定に合わせて40フレームを手作業で編集する必要はありません。
01
キャラクターの説明を書きます。体型、グリッド単位での身長、体格、衣服と持ち物、パレット、アートディレクション。
02
フレームグリッドを設定します。正方形セル、2の累乗に適したサイズ、アニメーションの行順をドキュメントに記載。
03
シートを生成し、各アニメーションの最初のフレームと最後のフレームを確認します。隣接しているべきで、同一であってはなりません。
04
最終的な表示スケールでシルエットを確認します。ズームインしてはいけません。
05
透明PNGフレームを、ドキュメント化されたグリッドと足元を原点としてエクスポートします。
待機、歩行、走行、攻撃、詠唱
5つのアニメーションでほとんどの2Dキャラクターをカバーできます。待機、歩行、走行、攻撃、詠唱です。待機はキャラクターが生涯の大半を過ごす呼吸のループです。歩行は移動のループで、通常は足の接地が最も目立つものです。走行は同じ動きをより速く、胴体をより傾けたものです。攻撃はワインドアップ、コンタクトフレーム、リカバリーを伴うワンショットです。詠唱はホールド(投射物や範囲効果が解決する間キャラクターがとどまるポーズ)を伴うワンショットです。
フレーム数は一般的に思われている以上に重要です。ゲームプレイのスケール(320×180または640×360のビューで、おおよそ32〜64ピクセルの高さのキャラクター)では、歩行4フレームは歩行として認識され、6フレームはより滑らかに見え、8フレームは得られるものよりコストが大きくなり始めます。走行サイクルは4フレームで機能することがよくあります。待機は2〜4フレームで、2は古典的な呼吸、4は揺れや武器の上下などのセカンダリアクションを加えられます。攻撃は通常3〜5フレームです。ワインドアップ、コンタクト、フォロースルー、リカバリー。詠唱はホールドフレームを含む4〜6フレームです。
ここでの失敗モードはフレーム数ではなくタイミングです。フレーム間ディレイなしでエクスポートされた4フレームの歩行は、エンジンのフレームレートで再生され、ステップではなくジッターのように見えます。シートにはアニメーションごとの推奨fpsが付属するため、エンジンのインポーターは上書きできる妥当なデフォルトを持てます。
| アニメーション | フレーム | ループ | 備考 |
|---|---|---|---|
| 待機 | 2–4 | はい | 呼吸または揺れ。最初と最後のフレームは隣接 |
| 歩行 | 4–8 | はい | 偶数フレームに足の接地が最もきれいに見える |
| 走行 | 4 | はい | 歩行より傾きが大きく、ストライドが長い |
| 攻撃 | 3–5 | いいえ | ワインドアップ、コンタクト、フォロースルー |
| 詠唱 | 4–6 | いいえ | 解決のためのホールドフレームを含む |
1つのストリップ、1つの説明
8方向とは、シートがN、NE、E、SE、S、SW、W、NW(45度刻みの全周)をカバーすることを意味します。トップダウンおよびアイソメトリックのゲームではこれが必要です。プレイヤーは固定カメラからキャラクターを見て、任意の方向に移動できるためです。4方向(N、E、S、W)では、斜めが視覚的な嘘になります。キャラクターが北東に歩いているのに、スプライトは東を向いています。8方向にすることで、向きが移動ベクトルと一致します。
シートはマトリクスとしてレイアウトされます。方向ごとに1行、アニメーション内のフレームごとに1列、または方向ごとに1ブロックで同じ順序ですべてのアニメーションを含みます。順序がドキュメント化されていれば、どちらでも機能します。UnityのSprite Editorはグリッドでスライスします。GodotのAnimatedSprite2Dは個別のリージョン矩形またはスライスされたテクスチャを必要とします。GameMakerのスプライトエディターはグリッドとフレームごとの原点を取ります。エンジンでインデックスする順序は、シートがレンダリングされた順序と一致する必要があります。そうでないと、ムーンウォークするキャラクターになります。
微妙な部分は遷移フレームです。8つの正規の向きだけをレンダリングすると、移動ベクトルが22.5度の境界を越えるたびにスプライトがパチッと切り替わります。緩和策は2つあります。8つの向きをレンダリングし、短い旋回アニメーションで境界をカバーするか、パチッと切り替わるのを受け入れ、キャラクターの回転を8つの最近傍にスナップさせ続けるかです。どちらも正当で、シートは旋回フレームの存在を前提としていないため、どちらもサポートします。
セット全体で一貫したキャラクター
スプライト作業における本当の失敗はドリフトです。キャラクター1は特定の頭身比、特定のパレット、特定の線の太さで生成されます。キャラクター2は後で、異なる表現のプロンプトから生成され、頭半分背が高く、肌の色が寒色寄りで、輪郭が太くなって返ってきます。パーティ画面で並べると、同じゲームのものには見えません。
ドリフトは説明不足のプロンプトから生じます。最初のプロンプトが「短くずんぐり、落ち着いたアース系パレット、32ピクセルセル、1ピクセル輪郭」で、2番目が「鎧を着た騎士」だったなら、セットを説明したのではなく、無関係な2つのものを説明したのです。キャスト全体でスタイル句を同一に保ち、識別句(種族、体格、装備、指定されたパレット内の色)だけを変えます。
Agent Sprite Forgeはそのスタイル句を安定して保つように作られています。共有のスタイルスペックからキャストを生成するため、個々のキャラクターが異なっても、頭身比、輪郭の太さ、パレットの範囲は一定に保たれます。テストは簡単です。キャスト全体の待機フレームを最終表示サイズで並べます。1つが別のゲームのように見えるなら、スタイルスペックがドリフトしています。
キャスト全体で1つのスタイルを保つ
識別プロンプトを書く前に、スタイルの次元を固定します。セルサイズ、頭身比、ピクセル単位の輪郭の太さ、パレットの範囲とシェーディングの方向、アートディレクション。これらを定数として扱います。すべてのキャラクタープロンプトはそれらを継承し、識別情報だけを追加します。キャラクターがスタイルから外れて返ってきたとき、修正はほぼ常に識別句ではなくスタイル句にあります。
エンジン対応エクスポート
すべてのフレームは透明PNGとしてエクスポートされます。シートにはドキュメント化されたグリッド(セルの幅と高さ、方向ごとの行、フレームごとの列、アニメーションの順序)が付属するため、インポーターは各セルの位置を把握できます。原点は足元、キャラクターの重心に水平に中央揃えされるため、スプライトを地面の位置に配置すると、画像の中心ではなく足元が地面に置かれます。
この原点の選択はすべてのエンジンで重要です。UnityのSprite Editorではカスタムピボットを設定できます。ドキュメント化された原点に合わせてbottom-centerに設定します。GodotのAnimatedSprite2Dはスライスされたテクスチャからのフレームごとのリージョン矩形を使用します。スライスをドキュメント化されたグリッドに合わせておかないと、ループが1フレームずれます。GameMakerのスプライトプロパティはグリッドとスプライトごとの原点を取ります。同じbottom-centerの値が適用されます。
エクスポートプリセットは上書きできます。ゲームが異なるセルサイズで動作する場合、シートは整数倍でクリーンにスケールします。非整数倍のスケールがぼやけを生みます。ピクセルアートにはポイントフィルタリング、ペイントにはバイリニア。透明アルファは保持されるため、インポート前のマット処理は不要です。
| エンジン | インポート方法 | 設定する内容 |
|---|---|---|
| Unity | Sprite Editor | bottom-centerにカスタムピボット。グリッドでスライス |
| Godot | AnimatedSprite2D + SpriteFrames | テクスチャをドキュメント化されたグリッドにスライス。フレームごとのリージョン矩形 |
| GameMaker | スプライトプロパティ | ドキュメントのグリッドサイズ。原点はbottom-center |
キャラクターの次の人生:3Dワールド
スプライトシートはキャラクターです。ワールドはそれが住む場所です。シートを生成したのと同じ説明が3Dゲームビルダーに入力され、歩き回れるThree.jsワールド(地面、コリジョン、カメラ、キャラクターが立つ場所)に変換します。ツール間でファイルを移植するのではなく、説明そのものがアセットです。
そのワールドはブラウザで歩き回れます。キャラクターを配置し、カメラを操作し、ワールドが実際に提示するスケールでスプライトが読み取れるかを確認します。フラットなスプライトビューアーでは正しく見えたキャラクターも、遠近法と影が関わると、ライティングされた3Dの床に対して間違って見えることがあります。両方を同時に見ることで、ミスマッチを早期に発見できます。
これはThe Cyclops' Islandがたどるのと同じ道(1つの説明からプレイ可能なワールドへ)であり、Mini Worldはその小規模版です。スプライトメーカーは同じパイプラインの2D側の端です。何かを説明し、使えるアセットを取得し、動き回れる場所に置きます。
- Agent Sprite Forge1つのキャラクターの説明から、完全なスプライトシート(8方向の待機、歩行、走行、攻撃、詠唱)を透明PNGフレームとドキュメント化されたグリッドで生成します。
- The Cyclops' Island手作業で配置するのではなく説明から構築された、歩き回れる生成3Dワールドで、スプライトメーカーで作ったキャラクターの投入先として使用します。
- Mini World完全なシーンを作成せずに、歩ける空間でキャラクターをすばやく確認するための小規模3Dワールドプリセット。
- 3Dゲームビルダー文章による説明を、実際にプレイ可能なThree.jsワールドに変換するブラウザベースのビルダー。キャラクターは操作可能なアクターとして配置されます。
それが属するワールドへ歩き出そう
スプライトは、立つ場所のないキャラクターです。最後のステップは他にはないものです。今作ったシートを、誰かが歩き回れるワールド(小さな島、惑星、雨の通りの角)に配置します。このサイトのすべてのワールドは1つの文章による説明から作られ、プレイできるページとして公開されています。
よくある質問
キャラクタースプライトメーカーとは何ですか? +
キャラクタースプライトメーカーは、文章による説明を完全なスプライトシート(8方向の待機、歩行、走行、攻撃、詠唱)に変換します。透明フレーム、ドキュメント化されたグリッド、足元を原点とします。すべてのポーズを手描きする代わりに、1つの説明からの生成ステップに置き換えます。
歩行サイクルには何フレーム必要ですか? +
4〜8フレームです。ゲームプレイのスケール(おおよそ32〜64ピクセルの高さ)では、4フレームは歩行として認識され、8フレームはより滑らかに見えます。8を超えると、追加フレームはシートサイズとインポート時間のコストが、読み取りやすさの見返りを上回ります。
なぜ4方向ではなく8方向なのですか? +
トップダウンおよびアイソメトリックのゲームは固定カメラを使用し、任意の方向への移動を許可するため、4方向では斜めが視覚的な嘘になります。45度刻みの8方向にすることで、スプライトの向きが移動ベクトルと一致します。
スプライトはどの形式でエクスポートされますか? +
透明PNGフレームで、ドキュメント化されたグリッド上に、足元を原点、キャラクターに水平に中央揃えしてレイアウトされます。同じシートは、ピボットまたは原点をbottom-centerに設定した後、Unity、Godot、GameMakerにインポートできます。
セット内のキャラクターが一貫しないのを防ぐにはどうすればよいですか? +
スタイルの次元(セルサイズ、頭身比、輪郭の太さ、パレットの範囲、シェーディングの方向)を固定し、キャラクターごとに識別情報だけを変えます。ドリフトはほぼ常に、識別の説明ではなく説明不足のスタイル句から生じます。
同じキャラクターを3Dワールドで使用できますか? +
はい。スプライトシートを生成したのと同じ説明が3Dゲームビルダーに入力され、歩き回れるThree.jsワールドに変換します。ブラウザでその中を移動し、ワールドが提示するスケールでキャラクターがどう見えるかを確認できます。
3Dゲームビルダーに戻る
完成した31の3Dワールド、ゲーム、シーンはすべて1つのページにあり、どれもプレイ可能です。
実際のキャラクターシートを見る
このライブラリのすべてのアセットは、プロンプトが記録された透明でゲーム対応のPNGです — キャラクタースプライトシートとスプライトリソースライブラリで、アクション、スタイル、主題でタグ付けされています。閲覧とダウンロードは無料です。