16×16ドット絵を歩かせてみよう アニメーション作ってみた

小さいドット絵キャラが動いているのはファミコン的でレトロ感ふつふつ。

そんなわけでアニメーションやってみましょう!

題材は「鬼滅の刃」の竈門炭治郎。
私が以前作った16×16炭治郎があるのでこれを歩かせたい。

基本の立ち姿

ちなみに実サイズ(16×16)を4倍に拡大しております。

上の絵をもとに、右手(左足)を出した絵と左手(右足)を出した絵を作ります。

右手が前
左手が前

これらを、「立ち」→「右手が前」→「立ち」→「左手が前」の順番に表示させると歩いている感じになるのではと想像。
これを実際やってみると、

1フレーム100ms(ミリ秒)の表示でこんなかんじ。

1フレーム200msと1フレームの表示時間を長くするとアニメーションがゆっくりに。動きの確認がしやすいですね。
歩いている感じは出せているのではないでしょうか。

4枚の絵の繰り返しでもこれだけ歩き感が出るのであれば、絵の枚数を増やせばもっといい感じになるのでは?
というわけで絵を増やしてみましょう。

8枚にしてみました。
これを動かすとどうなるでしょう?

こうなりました。1フレーム100msです。
動きがなめらかになりましたね。

小さいドット絵なので、これ以上細かい動きをつけることは多分不可能。16×16ピクセルのアニメーションであれば、このくらいのなめらかさが限界かなと思います。

ここまではキャラクターの位置を動かさず、足踏み状態でアニメーションをつけていました。
このアニメーションがついたキャラクターを横に動かしてみましょう。

動くと歩き感が増しますね。

もう少し改良してみます。着地した足がずれない微調整をしてみます。
説明が難しいので調整してみたものをどうぞ。

足が地面にくっついているような感じがわかるでしょうか?
横に移動しても足の位置が同じになるように各フレームの絵を修正しています。

どちらも歩き感は出ていると思うので、必要に応じて表現を使い分けられるとよいのではないかと思っています。

せっかくなので、鬼滅の刃の他のキャラクターにもアニメつけてみました。

かまぼこ隊の行進。

みんな同じ歩き方なので、もっと歩き方のバリエーションを増やせるとよいなと感じました。あと、今回は手と足だけしか動かしてないですが、頭とか髪とかも動かせるんだろうなとも思いました。アニメーションは奥が深そう。

ドット絵のアニメーションはほぼ挑戦でしたが、ある程度の形になったのではないかと思います。やればできる。今後もがんばるぞ。