サブピクセルアニメーション

概要

小さなスプライトでは、最小の整数単位の動きは1ピクセルで、1ピクセルは大きな動きになりえます。16ピクセルのキャラクターが呼吸のために胸を1ピクセル上げると、しゃっくりしているように見えます。

サブピクセルアニメーションはこれを回避します。形を動かす代わりに、縁に沿ったピクセルの色を変えるのです。縁のピクセルが背景色から中間色へ、さらに形の色へと変わると、縁が3分の1ピクセル、次に3分の2ピクセルと外へにじみ出るように見えます。目には滑らかで小さな動きとして映ります。

アーティストがそうする理由

• 穏やかな待機モーション。呼吸、浮遊、上下の揺れが、ぎこちなくならず落ち着いて見えます。
• 小さなスプライト。16や32ピクセルでは大きな動きの余地がないので、端数が重要になります。
• ピクセルを増やさずに滑らかに。大きなサイズで描き直さなくても、動きの見かけの解像度が上がります。

よくある間違い

• 中間色が多すぎる。縁のためだけに新しい色を足すと、パレットが増え、スプライトがぼやけて見えます。すでにランプにある色を使いましょう。
• 大きな動きに使う。走りのサイクルや剣の振りは、はっきりした整数ピクセルのポーズのほうが読み取りやすくなります。
• 輪郭がそろっていない。形の片側がサブピクセルの段で動き、もう片側が跳ぶと、形が伸び縮みして見えます。
• ちらつき。はっきりした方向なしにフレーム間でピクセルを行ったり来たりさせると、動きではなくノイズに見えます。

手作業でのやり方

1. 開始と終了のポーズを、1ピクセル離して描きます。
2. その間に、縁のピクセルだけが変わるフレームを1〜2枚加えます。
3. 移動で覆われる縁のピクセルそれぞれに、ランプの中間色を1段挟みます。
4. ループをゲームの速度と1×ズームで再生します。フレームを増やす前にタイミングを調整しましょう。
5. スプライトのほかのピクセルはすべて動かさず、変化が縁の動きとして読み取れるようにします。

Pixorの役割

Pixorのサブピクセルの動きスタイルノードは、1フレームに1ピクセル未満しか動かないパーツの動きを、アーティストと同じように縁のピクセルで表現します。それ以外にも、Pixorはレンダリングしたアニメーションを十分に安定させるので、サブピクセルの手仕上げを加える価値があります。ピボットはすべてのフレームと向きで1ピクセルに固定されるので、体ががたつきません。明暗の帯は面がはっきり向きを変えるまで保たれ、ディザリングは面に固定され、クリーンアップのパスが孤立ピクセルや1フレームだけ現れる線を取り除きます。Pixorはクリップ全体のちらつきも測定します。

そこからAsepriteに書き出せば、各アクションと向きに独自のタグが付きます。サブピクセルの手描きの仕上げは別レイヤーに加えましょう。再レンダリングしても、手描きのレイヤーは各フレームに残ります。

関連

• ミクセル：動きをピクセルグリッドに沿わせるべき理由
• プリレンダースプライト
• アニメーション、Aseprite、書き出しマニュアル