無料アニメーションスプライト

ナイトには3つのループがあります。剣を掲げて重心をわずかに移す待機、歩きのサイクル、全力疾走です。3枚とも 4×2 グリッドの8フレームで、左から右、上から下の順に読み、コマは 209×236 ピクセル。待機から歩き、走りへ切り替えても、キャラクターは1ピクセルもずれません。

その場でループする生き物は8体です。翼をはばたかせるドラゴン、目が光るゴーレム、8本の脚を動かす機械のクモ、とぐろを巻くシーサーペント、羽ばたくコウモリ、宙に浮かぶドクロ、つぶれては戻るスライム、しっぽを振るキツネ。アイテムも3つループします。フラスコの中で泡立つポーション、表面を光が走る盾、表から縁へ回転する金貨です。この11点はすべて横一列4フレーム、コマ 200×267 ピクセルの帯なので、エンジンの読み込みプリセットを1つ作れば全部に使えます。

ループは多少ラフに扱っても破綻しにくいですが、速さは大切です。大きな生き物は毎秒5〜8フレームくらいのゆっくりめが似合います。ドラゴン、ゴーレム、シーサーペントは、ゆっくり呼吸させたほうが重く見えます。コウモリや金貨のように小さくて速いものは毎秒10〜14フレーム。ナイトの待機は6〜8、歩きは8〜12、走りはそれより少し速めです。足が床を滑って見えないよう、移動速度とアニメーションの速さを合わせてください。

盾のきらめきはループでもかまいませんが、光と光のあいだに間を置いたほうがきれいです。1回再生して1〜2秒待ち、また再生しましょう。同じループをいくつも置くとき、たとえばコインの列やコウモリの群れでは、それぞれ別のコマから再生を始めます。完全にそろったループは機械的に見えますが、少しずらすだけで場面に生気が出ます。

Phaser では、this.load.spritesheet にページのフレーム幅と高さを渡してシートを読み込み、this.anims.create と generateFrameNumbers でフレーム 0〜7 または 0〜3 を指定し、repeat を -1 にしてループさせます。Godot では、AnimatedSprite2D の SpriteFrames にスプライトシートの読み込みでシートを追加し、列と行を入力して FPS を設定し、Loop がオンになっていることを確認します。Unity では Grid By Cell Size でシートを切り分け、フレームをシーンにドラッグしてクリップを作り、Loop Time はチェックしたままにします。

ナイトの3つのループは、ひとつのステートマシンにまとめましょう。入力がなければ待機、方向キーを押しているあいだは歩き、ダッシュボタンを押しているあいだは走り。コマサイズがそろっているので、切り替えにオフセットは要りません。

欲しいループがここにない場合、このサイトには3つの方法があります。SpriteGen のジェネレーターは、短い説明から6・8・12フレームの新しいアニメーションシートを描きます。待機・歩き・走り・飛行はループする組み込みの動作です。「GIF をスプライトシートに」ツールは、手持ちのアニメーション GIF をブラウザ上でスプライトシートにします。スプライトシートメーカーは、バラバラのコマ画像を1枚のシートにまとめます。どれを使っても、このページの素材と同じく、コマが等間隔に並んだ透過 PNG ができあがり、どのエンジンでもループ再生できます。