ドット絵アニメーションを作る方法｜コマを描いてGIF・スプライトシートに保存

1. ドット絵アニメの保存形式を選ぶ

ドット絵アニメーションは静止画を順番に切り替えて動いているように見せる仕組みです。たとえば同じ顔の絵で目を開いたコマと閉じたコマを作れば、まばたきする動きになります。

完成した動きをそのまま再生したいならAnimated GIF、ゲーム側でコマを切り出して使いたいならスプライトシートPNGが候補です。スプライトシートは複数の静止画を1枚に並べた画像で、ファイルそのものは再生されません。

Pixel Animation Studioでは、動くGIF、全コマを並べたPNG、現在の1コマだけのPNGを作成できます。

2. 16×16～128×128のキャンバスを準備する

Pixel Animation Studioを開き、16×16、32×32、64×64、128×128、またはカスタムサイズからキャンバスを選びます。カスタムサイズも幅・高さそれぞれ最大128pxまでです。

初めてなら32×32など小さなサイズを選ぶと、1コマの描画量を抑えられます。拡大表示しても絵のピクセル数そのものは増えません。Gridは位置を確認するための線で、保存する画像には入りません。

すでにドット絵のPNGを持っている場合は、その画像1枚からプロジェクトを開始する方法もあります。PNGの縦横は最大128pxまでで、画像を自動で縮小する機能はありません。

3. 最初のコマを描いて色を整える

鉛筆で1コマ目を描き、消しゴムで不要なドットを消します。塗りつぶしでまとまった領域を塗り、スポイトでは画面の色を拾えます。鉛筆と消しゴムの太さは1 / 2 / 4pxから選択できます。

ズームで見やすい大きさに拡大し、必要ならGridを表示します。スマートフォンでは1本指で描画し、2本指で画面を移動・ピンチ操作できます。PCではマウスホイールでズームし、Spaceを押しながらドラッグして表示を移動できます。

間違えた線はUndo / Redoでやり直せます。描画履歴はコマごとに分かれており、別のコマの編集には影響しません。

4. コマを複製し、オニオンスキンで動きを付ける

1コマ目ができたらフレームを複製し、次のコマで動かしたい部分だけを書き換えます。コマは追加・複製・削除・並べ替えができ、1つのプロジェクトで扱えるのは1～128フレームです。

Onion SkinをONにすると、直前のコマを薄く重ねて見られます。目や手足の位置を少しだけずらしたい場合に、前の形を参考にできます。表示されるのは直前の1コマです。

選択ツールを使うと、矩形で囲ったドットを移動したり、コピー・切り取り・貼り付けしたりできます。貼り付ける場合は、先に貼り付け先の選択範囲を作る必要があります。PCなら矢印キーで選択中のドットを1pxずつ動かせます。

5. 表示時間を調整してアニメーションを再生する

フレームごとの表示時間は20～5000msの範囲で、10ms刻みで設定します。すべてのコマを同じ長さにしたい場合は「すべてに適用」を使えます。表示時間が短いほど、そのコマが次のコマへ早く切り替わります。

プレビュー画面ではPlay / Pause / Restart / Loopを使い、動きと切り替わり方を確認します。動きが急に飛ぶと感じたら、コマを複製して中間の形を描くか、表示時間を見直します。

スマートフォンでは下部の「編集 / フレーム / プレビュー / 書き出し」から画面を切り替えられます。キャンバスを触る編集と再生確認を、別々の画面で操作できます。

6. 既存のPNGをフレームとして読み込む場合

手元にPNGがある場合は、1枚のPNGから新しいプロジェクトを始めるほか、同じサイズのPNGを複数枚まとめて追加できます。ファイル選択とドラッグ＆ドロップに対応しています。

追加できるのは現在のキャンバスと縦横のサイズが同じPNGです。サイズが違う画像や大きすぎる画像を自動で縮小・切り抜くことはありません。失敗したファイルは読み込みに成功したものと分けて表示されます。

画像の読み込みに対応する形式はPNGだけです。GIF、JPEG、WebP、Aseprite形式や、すでに並べたスプライトシートを直接読み込む機能はありません。

7. GIFアニメとして保存する

動きができたら「書き出し」を開き、Animated GIFを選びます。全フレームの順番と各コマの表示時間を使ってGIFを生成します。透明背景に対応し、完成したGIFは無限ループします。

GIFでは使える色が最大256色です。必要に応じて色数が減らされるほか、半透明のピクセルは保持できず、透明または不透明に変換されます。元の色や透け具合をそのまま残したい素材では、保存した結果を確認してください。

128×128などの大きめのキャンバスでコマ数も多い場合は、GIF生成で端末のメモリを多く使うことがあります。スマホで処理が重いときは、キャンバスやコマ数を小さくして試します。

8. ゲーム素材向けにスプライトシートPNGを保存する

ゲームや別のアニメーション編集環境でコマを使いたい場合は、Sprite Sheet PNGを選びます。Horizontalは全コマを横一列に並べ、Gridは列数を指定して格子状に並べます。保存前にシート全体の大きさと行・列の数を確認できます。

スプライトシートは静止画像です。ゲームなどで動かす際には、読み込んだ側が各コマを順番に切り出して表示する処理を用意します。アプリがGIFと同じように自動再生できるファイルを作るわけではありません。

今開いている1コマだけを保存するなら、Current Frame PNGを使います。1× / 2× / 4× / 8×で拡大してもドットがぼやけない方式で書き出し、透明部分を維持できます。

9. 編集用プロジェクトを保存し、あとから続きを作る

GIFやスプライトシートの画像ファイルからは、元の編集作業をそのまま再開できません。「プロジェクトを保存」で.pixel-project.jsonを保存しておくと、続きから編集できます。全フレーム、色、表示時間、編集・書き出し設定が記録され、ファイルの上限は12 MiBです。

保存したプロジェクトは「プロジェクトを開く」から読み込めます。IndexedDBが使えるブラウザでは自動保存もありますが、サイトデータを消すと失われる場合があります。プロジェクトファイルと自動保存にはUndo / Redoの履歴は含まれません。選択範囲やクリップボードもプロジェクトファイルには保存されません。

描画、PNGの読み込み、GIF・PNGの生成はブラウザ内で処理し、作品を変換用サーバーへ送信しません。ページを開くときはHTMLを取得する通信がありますが、実行時の外部通信はCSPのconnect-src 'none'で遮断しています。レイヤー、Animated WebPの書き出し、GIFの読み込みには対応していません。

注意点

• 最初は少ないコマで短い動きを作り、コマを複製して変化する部分だけを描き直すと、動きの違いを確かめやすくなります。
• Onion Skinで直前のコマを薄く表示すると、ドットの位置を見比べながら描けます。
• GIFの半透明は維持できません。透け方を残す必要がある画像はPNGとの違いを確認してください。
• 別の端末で編集を続けるなら、GIFだけでなく.pixel-project.jsonも保存しておきます。