
ドット絵アニメ・メイキング『もちぺったん』
今日は、元旦の投稿で使用したドット絵アニメのメイキングをお届けします!
ところで、あまり気にしていなかったのですが「元旦」というのは1月1日の朝のことなんだそうですね。"旦"の字の、"日"の下にある棒が地平線を示していて、「日の出」の様子を表していると。へー。
なお、このキャラクターは以前作ったSRPG用に作成したモンスターで、『もちぺったん』という名前がついています。どうやって戦うのかよくわかりませんが、名前は『もじぴったん』からのパクリです。ぴったん♪ たんた もじぴったん♪ です。ああもう大好き。

ただし、この旧『もちぺったん』はぼくがデザインしたものの、ドット絵としては自分で描いたものではありませんでした。そこで今回あらためて、自分で描きつつ、ある"問題点"を直すことにしたのです。
臼の準備
旧もちぺったんは64x32ドットの菱形マスの上に置くキャラクターだったので大きめに描かれたのですが、今回は単独のドット絵なので小さめにして24x24ドットのキャンバスに本体=臼を収めるように描きます。
バババッといきますよ。

まずはシルエット的に"○"に近くなるようアウトラインを描き(手順①)、上面・側面・穴を塗り分け(手順②)、側面の色を5段階に塗り分けることで円筒形の丸みを出し(手順③)、穴の中をぼんやり暗くし(手順④)、お餅を入れます(手順⑤)。
杵の準備
続いて、お餅をつくための杵を用意します。臼の頭上で杵を振りつつも、臼自体は画面の中央に置く必要があるために、ここでキャンバスをかなり広げて64x48ドットにしました。

そして、杵の動き=軌道を決めていきます。
動きをあまり精巧にしてもタイヘンなだけで大した意味もないので、今回は3コマを基本としたアニメーションにする前提です。
杵を振り上げたときの角度を青色の線、振り下ろしたときの角度を赤色の線、その中間となる振り上げ途中を黄色の線として動きのアタリをつけてみました。それぞれの線が、おおむね杵の棒の位置になります。

ここで注意が必要なのは"黄色の線"です。黄色の線は振り"下ろし"途中ではなく、振り"上げ"途中であることを意識しておかないと、おかしなアニメになってしまいます。
杵を振り下ろすときは勢いがあって動きが速いのでコマ数は少なく、逆に振り上げるときはゆっくりなのでコマ数を多くする必要があるからです。今回の場合で言えば、振り上げを2コマ、振り下ろしを1コマにすることで「ゆっくり振り上げ、素早く振り下ろす」動きにします。
RPGなどバトルがあるタイプの自作ゲームにおいて、剣で斬りつける動きを細かく描いてしまって、"ゆっくり斬って"、"すばやく剣を引く"という不思議な動作になっているのを見かけることがありますが、これはコマ数の割り振りが逆になっているのが原因です。
そんなわけで、杵の動きの黄色の線は"振り上げ"時のものになるわけですが、さらに、振り上げ"始め"の方が速度が速く、振り上げ"終わり"でゆっくりになることも考慮する必要があります。そこで黄色の線は、単純に赤線と青線の中間にするのではなく、少し青線(=振り上げ終わり)に近い角度になるようにしておくとイイ感じにできます。
能書きはこれくらいにして、それぞれの角度の杵を描き込んでいきましょう。


振り下ろしのコマでは、お餅の外側を少し浮かせて「ついた!」という感じを出しています。ついた! ぼよ~ん。です。ぼよ~ん。

振り上げ途中のコマでは、お餅が杵に引っ張られて持ち上がった様子を示します。実際にはここまでグワッと持ち上がることはありませんが、コミック的な表現として大袈裟な動きにしておきます。
たいせつなのは、このコマが振り下ろしではなく振り上げの瞬間だからこそお餅が引っ張られるということです。振り下ろしの瞬間だとまだつかれていないお餅は静かにたたずむだけになりますからね。
「持ちあげよう、餅だけに」ということです(しーん)
……間違うと静かにたたずんでしまう気持ちがよくわかったところで、先へ進みましょうかね。
なお、旧もちぺったんの"問題点"とは、杵ではなく槌(ハンマー)になってしまっていることでした。ひどい! 前出の旧画像を見て気付いた人はかなり鋭い観察眼を持っていると思います。ぜひ、自慢してください。
顔をつける
ただの餅つきアニメではおもしろくないので、臼に表情をつけ、アニメ用のコマとして完成させていきます。背景もおだやか・さわやかで明るい色にしています。

最後に、各コマ画像を8倍サイズ(512x384ドット)に拡大して、GIFアニメとして統合します。
アニメ設定
振り上げ終わりと振り下ろしの瞬間は少し長めに表示した方が良いため、それぞれのコマの表示時間は、
・振り上げ終わり:0.2秒
・振り下ろし:0.4秒
・振り上げ途中:0.1秒
としてみました。

あとは無限ループするようにすれば――

ドット絵アニメ『もちぺったん』の完成です!
ところで冒頭で触れたように、元旦の"旦"の字が「日の出」を示しているのなら、"臼"という字は「上部からの攻撃で破壊された太陽」みたいですよね。
宇宙規模のスケールで餅つきをする奴と言えば"耳の長いアイツ"しか思いつきませんが、太陽を破壊してしまったからこそ"アイツ"は月で餅つきをしているのではないでしょうか。
今年、辰年のお正月にそのことに気付いたのは、去っていく"卯"の背中がまだ見えているからかもしれませんね。
(おしまい)