スプライトアニメーター：スプライトシートアニメーションのプレビューとエクスポート

スプライトアニメーターは、スプライトシート（1枚の画像に詰め込まれたアニメーションフレームのグリッド）を読み取り、再生することで、アートがゲームに近づく前に、タイミング、間隔、シルエットを判断できるツールです。Neta Studioのスプライトアニメーターは、シートを読み取り、画像の寸法からフレームサイズ、列数、再生順序を推測し、ブラウザのキャンバス上で再生を開始します。アップロードは一切行われません。

静止フレームでは歩行サイクルについて何もわかりません。フレーム3とフレーム4、コンタクトポーズとパッシングポーズを比較し、1つのセルが1ピクセルずれているために全体がずれていないかを確認する必要があります。アニメーターは読み込み時にそれを行い、推測が間違っている場合は、フレームサイズ、順序、FPSを手動で修正できます。

スプライトシートアニメーションをプレビュー

PNGまたはWebPをキャンバスにドロップします。アニメーターは固有の幅と高さを読み取り、妥当なグリッドを推測します：寸法を因数分解し、一般的なスプライトサイズで正方形に近いセルが得られる小さな整数の列数（2〜16）を探します。512×512のシートで128pxフレームが4列、384×256のシートで64pxフレームが6列 — どちらもほとんどの場合、正しい推測になります。300×300のシートはそうなりません。300は16/32/64で割り切れないため、フレームサイズを手動で設定することになります。

再生は`imageSmoothingEnabled = false`を設定したHTMLキャンバス上で実行されるため、ピクセルは整数倍でシャープなまま保たれます。4×または8×への拡大は最近傍法で行われ、これはピクセルアートに求めるものです：32pxのフレームを8×で表示すると、画面上では256pxのスプライトになり、元の各ピクセルが8×8のブロックに拡大されます。バイリニア補間では、それらは灰色の塊になってしまいます。

すべてがキャンバス上で行われるため、ファイルがマシンから出ることはありません。アップロードもキューもアカウントもありません。クライアントの未公開シートをドロップしても、タブ内に留まります。トレードオフは、非常に大きなシートはブラウザのメモリに制限されることです — 4096×4096のPNGはRGBAにデコードすると約67MBになり、デスクトップでは問題ありませんが、低スペックのタブレットでは厳しいです。

フレームサイズ、順序、FPSを設定

実際に表示されるものを決める設定は3つあります：フレームサイズ、再生順序、速度です。どれか1つでも間違えると、アートとは無関係な理由でアニメーションがゴミのように見えます。

フレームサイズは、1つのセルの幅と高さをピクセル単位で表したものです。アニメーターは標準の選択肢として16、32、64、128を提供し、カスタム値も指定できます。これはシートの寸法を正確に割り切る必要があります。幅400pxのシートに128pxのフレームを設定すると、3.125列となり、レンダラーは小数点以下を切り捨てて3とし、右側に未使用の16pxのストリップが残ります — これらのピクセルは最後の列で隣接フレームの断片として表示されます。フレームが右端でせん断されて見える場合、フレームサイズがシートの幅を割り切れていません。

順序はrow-majorかcolumn-majorです。row-major（一般的なデフォルトで、ほとんどのエクスポーターが生成する形式）は左から右に読み、次に行に折り返します。column-majorは上から下に読み、次に右に移動します。列でエクスポートされた歩行シートを行として読み取ると、フレーム1、フレーム5、フレーム9と再生されます — アニメーションの4分の1を各ティックで飛ばすストライドです。修正はトグル1つですが、症状を認識する必要があります：動きが飛び飛びになることです。

FPSと`image_speed`は混同されがちな別々のノブです。FPSはプレイヤーが1秒あたりに進めるフレーム数です。`image_speed`（GameMakerの用語で、人々が検索してたどり着くものです）は、ルームスピードに対するスプライトのアニメーション速度の倍率です。1.0はシートがゲームステップごとに1フレーム再生されることを意味し、0.5は1ステップおきに再生されることを意味します。ブラウザアニメーターでは、FPSを直接設定します。GameMakerのスプライトを移植していて、キャラクターが2倍の速度でアニメーションする場合は、シートを再カットする前に`image_speed`を確認してください。

歩行サイクル、待機、攻撃

3つのアニメーションがキャラクターの読みやすさの大部分を担っており、それぞれ失敗の仕方が異なります。同じように失敗するものはないため、1つの一般的なクリップをループするだけのプレビューツールは的を射ていません。以下では、失敗モードをアニメーションタイプ別に分けています。

3つすべてに共通するルール：ズームインではなく、最終的なゲームスケールでプレビューします。8×で読み取れる歩行も、1×ではしばしば崩壊します。脚の持ち上げが2ピクセルで、持ち上げた足と地面のコントラストが低すぎるためです。何かを承認する前に、プレビューをプレイヤーが実際に見るサイズに縮小してください。

4方向の歩行シートは通常、下、左、右、上の順に並んでいます — 下はカメラを向き、上は背を向き、左と右は水平のペアです。一部のエクスポーターは下、上、左、右を使用します。上を押したときにキャラクターがムーンウォークする場合、行が入れ替わっており、上入力に対して下の行を再生しています。これはプレイヤー側の2行の修正であり、再エクスポートではありません。

8方向移動には斜めが必要です：左下、右下、左上、右上。水平ミラーの4方向では、4行を安価に得られます（左と右は同じアートを反転したもので、多くのシートが8行ではなく4行である理由です）。4方向だけで斜め移動を行うと、エンジンは最も近い向きを選択せざるを得ず、斜め入力で目に見えてスナップします。ゲームが斜め移動をサポートするなら、8つの異なる行を用意するか、スナップを受け入れるかです。

フレーム数：16〜32pxでは、方向ごとに6または8フレームが一般的です。4フレームでは歩行はポップに見えますが、小さなサイズでは読み取れます。10フレームでは、コンタクトポーズとパッシングポーズの間隔が狭くなり、フレームごとのタイミングが必要になりますが、均一FPSのプレイヤーでは表現できません。ブラウザアニメーターは均一に再生するため、ここでプレビューする場合は、均等な間隔でシートを構築してください。

待機は、何も起こっていないときにプレイヤーがじっと見つめるアニメーションなので、1フレームあたりの重みが最も大きいです。標準的な構造は呼吸のループです：胸が上がり、肩が1ピクセル持ち上がり、体重が移動し、そして戻ります。スクワッシュ・アンド・ストレッチは、静的スプライトが押されているように見えるのを防ぎます。ダウンビートでは、キャラクターを垂直方向に1〜2ピクセル圧縮し、横に1ピクセル広げます。アップビートではその逆を行います。

よくある失敗は、スクワッシュをやりすぎることです。32pxのキャラクターを4px圧縮すると高さの12.5%になり、ゼリーのように見えます。32pxのスプライトで垂直方向に1ピクセル伸ばすと3%で、呼吸のように見えます。待機がトランポリンで跳ねているように見える場合、おそらくセル全体を拡大縮小しており、その中のキャラクターではありません — フレームがグリッドに対してサイズ変更されています。

出荷するのと同じFPSで待機をプレビューします。6 FPSの待機は漂い、12 FPSでは呼吸します。遅い待機はほとんど同じ画像に小さなオフセットを加えたものなので、実際に確認しているのはループポイントです：最後のフレームが最初のフレームにきれいに移行し、肩の位置にジャンプがないことです。

攻撃は、均一な連続ではなく、不均一なタイミングを持つ3つのフェーズです。予備動作は引き戻します — 腕をコックし、体をねじり、しばしば2〜3フレーム保持するか遅くします。インパクトは1〜2フレームで、最も速い部分であり、武器が最大に伸び、ポーズが最も極端になります。回復は戻りであり、アマチュアが早すぎるカットをする場所です。6フレームの攻撃で、予備動作2、インパクト1、回復3は読み取れます。6フレームの攻撃を均等に2-2-2に分割すると、押しのように見えます。

アニメーターは均一に再生するため、コツはフレームごとのタイミングを変更するのではなく、フレームを複製して予備動作のポーズを保持することです。同一の予備動作フレームを2つ使うと保持できます。インパクトフレームを1つ使うとスナップが得られます。これは手作業で作成されたシートで使われるのと同じテクニックで、どのエンジンへの移植にも耐えます。

詠唱アニメーションには2つ目の問題があります：エフェクトは特定のフレームで出現し消滅する必要があります。シートに投射物や魔法陣がフレームに焼き込まれている場合、プレイヤーは実際のオブジェクトをいつスポーンするかを知る必要があります — 通常は最初のインパクトフレームです。エフェクトが別オブジェクトの場合、シートをクリーンに保ち、スポーンを実時間の秒ではなくインパクトフレームのインデックスに合わせてタイミングを取ります。

1つのプロンプトから歩行サイクルを生成

歩行サイクルの8行を手作業で作成するのは何時間もの作業で、その見返りとして得られるシートはまだプレイヤーで確認する必要があります。Agent Sprite Forgeはそれを逆転させます：キャラクターの説明を書くと、シートを生成します。1つの説明、8方向、シートはすでにグリッドにカットされ、透過フレームと足元のアンカーガイドが付属しているため、配置してもキャラクターが上下に揺れません。

最初の段階では、アンカーガイドはアートよりも重要です。足が同じ地面線を共有していない歩行サイクルは、絵がどんなに良くても、キャラクターがトランポリンの上にいるように見えます。生成されたフレームがアンカーを保持しているため、シートをアニメーターにドロップして再生し、地面線が保たれるのを確認できます — これは静的画像では得られないチェックです。

生成される出力は通常のスプライトシートです：行と列、透過背景、標準的なフレームサイズ。Neta Studioに縛られることはありません。エクスポートし、プレビューのためにアニメーターにドロップし、エンジンが単一の行を必要とする場合は再カットして、次に進みます。ジェネレーターが不要な方向（たとえば、ゲームが4方向のみをサポートしているために後ろ左など）を生成した場合は、再カットのステップでその行を無視します。

スプライトアニメーションソフトウェア：比較すべきもの

適切なツールは、すでに手元にあるものによって異なります。完成したシートとタイミングに関する疑問は、空白のキャンバスとキャラクターがいないこととは別の問題です。以下の表では、出発点を適したツールにマッピングし、エンジン自身のアニメーターが正解でサードパーティのプレイヤーが不要なケースも含めています。

経験則：プレビューするならプレイヤーを使います。作成するならエディターを使います。生成するならジェネレーターを使います。ほとんどの混乱は、プレイヤーを作成に使うことから生じます — 再生ツールでは悪いコンタクトポーズを修正できず、再生機能のないペイントツールではタイミングの感触を修正できません。

GIFまたは再カットシートをエクスポート

2つのエクスポートでほとんどのケースをカバーできます。1つ目はアニメーションGIFです：現在のループを、現在のFPS、現在のスケールで、単一ファイルとして出力します。GIFはランタイムが不要で、任意のチャットウィンドウ、レビューツール、イシュートラッカーで再生できます。これは、何もインストールしない共同作業者に送るものです。コストは256色パレットで、ほとんどのピクセルアートには問題ありませんが、滑らかなグラデーションではバンディングが目立ちます — スプライトに滑らかな輝きがある場合、ポスタライズされることを覚悟してください。

2つ目は再カットシートです。アニメーターは読み込んだシートとそのフレーム設定を使用して、異なるパッキングで新しい画像を書き出します：フリップブック用の単一の行、方向セット用の4行、または異なるセルサイズでの同じグリッドです。再カットは、セルサイズが同じままで並べ替えのみを行う場合はロスレスです。セルサイズを変更すると、ツールはリサンプリングを行い、整数倍でないピクセルアートのリサンプリングはエッジをぼかします。

一般的な再カットはフリップブックです：1つのアニメーションのすべてのフレームを左から右に単一の行に配置し、折り返しはありません。一部のエンジンやCSSスプライト技法はその形状を求めます。6フレームの歩行を取り、6の1行に再カットすると、ストリップはフレーム幅の6倍×フレーム高さの1倍になります。代わりにそのストリップをGIFとして必要な場合、スプライトシートからGIFへのコンバーターが、パックされたシートから同じループエクスポートを行います。

エクスポートする前にフレームサイズと列数を設定します。エクスポーターは、読み込み時に推測したグリッドではなく、プレイヤーで設定したグリッドを使用して書き出します。せん断を修正するために推測を上書きし、フレーム数を再確認しなかった場合、エクスポートされたシートは間違った数を継承します。

それが属する世界に足を踏み入れる

スプライトは、立つ場所のないキャラクターです。最後のステップは、他にはないものです：作成したシートを、誰かが歩き回れる世界に配置します — 小さな島、惑星、雨の街角。このサイトのすべての世界は、1つの記述された説明から作られ、プレイできるページとして公開されています。

FAQ