
紐ビュンビュンから始めよう~ドット絵アニメーション覚書
魚類の鮭川です。

ドット絵のアニメーションを描いてみたいですね?
となった時、おそらく動機になるのは以下のどれかかと思います。
・オクトパスナントカーとか、古い所だとメタルそれッグとか、いわゆるドット絵スゴすぎのゲームほんとリスペクトなんすよ俺
・あンのクリエイターさんまじスゴくてェ…近づきたくてェ…
・うス、ゲーム制作者なんスけど、必要なので描いてます
どれかじゃなかったらすみません。
やってみたいけど楽しそう。
作ってみたいけど難しそう。
まったく差し支えございません。
まずは一本の線を引くところから始めてみましょう。
お手元に書くものをご用意ください
線が引けたらなんでもいいです。ペンタブはあったら便利だけれど、マウスでも10割方だいじょぶです。ぶっちゃけエンピツに付箋紙やノートの端っこでもいけますが、お手軽なアプリをご紹介しておきます。
PC使ってるおにいさんおねいさん:
GraphicsGale
https://graphicsgale.com/
わたくし鮭川斗蘭も日頃お仕事で愛用しております。
スマホがとくいなおにいさんおねいさん:
dotpict
https://dotpict.net/
スマホで描いてすぐ投稿できるステキなサイトさん。
ドット絵やってる方はAsepriteをお持ちの方も多いと思います。もちろんそれでもOK。
紐ビュンビュンから始めよう
見出しから何言ってんのか全然わかんないと思います。
そこで、10分で作った27枚のGIFアニメをご用意しました。

見るからに儚く、くしゃみをすれば宙に霧散するような一本の線が舞うこのパラパラ漫画ですが、ここにドット絵アニメーションの義務教育の全てが詰まっています。
やってみる前に意識すること
簡単そうですよね、これ。
そもそも紐じゃなくてよくてミミズ、最悪サナダムシ、下手すればシャツからほつれた糸です。まず生き物ではない。
そんな一本の線が、なにやら躍動的に動いているように見えます。
これは以下の2点を重視しているからです。
「印象に残るかたち」
こんな形してたな~って線を時々いれることでメリハリが出た感があるような気がします。気がしません?


「超速いとこ・超遅いとこ」
線を長く書くと速く、短く書くと遅くなります。そりゃそうですね。


また、遅いところは2・3枚使うとなめらかゆっくり動いてるように見えます。前後で線をしっかりなぞる必要はありません。だいたい合っててちょっとずつ形が変わるぐらいでOK。


紐ビュンビュンのつくりかた
上の2点を意識しながら、実際に作ってみましょう。
手順としてはこんな感じです。
適当に一本線を引く。引いたら次のフレーム(コマ)へ。
前の線の端っこ辺りから、また一本線を引く。
1・2を繰り返しつつ、たまに印象に残るかたちを挟む。
飽きたら最初のフレームにつながる線を引いて完成。
「速いパート」「遅いパート」を交互に繰り返すのがコツです。5枚速くして3枚遅くする、みたいな感じ。

遅いとこは埃みたいな線になってもいいぞ
また、線の前の方は伸ばしつつ、後ろの方はある程度残すというのも効果的です。上の動画で左にいる時ににゅるっと巻いてる線なんかがそれ。「印象に残るかたち」の応用です。
もし可能なら、フレームごとの表示時間も設定しておきましょう。オススメは1枚あたり6/100秒(4/60秒)とかその辺です。設定方法はお使いのアプリの説明書をご確認下さい。
紐ビュンビュンで学べること
原画、中割という言葉を聞いたことはありませんか。
原画は「印象に残るかたち」。
中割は「超速いとこ・超遅いとこ」。
この2つに相当します。
パンチの動作を思い浮かべてみて下さい。
構え→拳を引く→パンチ、の3つの動作で構成されると想像がつくと思います。これが原画になります。

そしてその間を埋める"→"が中割です。

さらにちょっと引く(中割)、右手を突き出す(中割)
パンチのポーズ(原画)
でも人を書くのは大変だし、印象に残るかたち(ポーズ)を考えるのももっと難しいですよね。まずはノリで作れたほうがぜったい楽しい。
そこで紐ビュンビュンを試してみると、原画と中割を学びつつ、メリハリビンビン・ぬるぬるなめらかなアニメーションを練習することができるのです。しかもワンセット10分で。
『ここはこうしたら速くて鋭い動きになるかも!』
『ここは遅くしてタメたほうが次の動きが映えるかも!』
『ここでむっちゃグルグルしたら面白いかも!』
シンプルな一本線を書くだけなので、こうした思いつきもどんどん出てきます。気の向くまま、自由に紐をビュンビュンして下さい。
慣れてきたら、「印象に残るかたち」を先に何枚か作ってから間を埋める「超早いとこ・超遅いとこ」を作ってみてください。原画と中割をより理解できます。




あとがき
オススメ情報をお伝えする記事ですので言葉で説明しましたが、実際にやってみると本当に簡単ですし、人によっては「気付いたら100枚書いてた」って方もいらっしゃるかもしれません。なにせ1枚数秒で書けちゃいますから、続けようと思えばいくらでも枚数を伸ばせちゃいます。

デカいと重くてアップロードできないのでちっちゃい画像ですみません
ちなみに直線ツールだけでやるのも楽しいですよ。レーザー光線が壁や障害物でカンカン反射するようなイメージでやってみて下さい。

以上、鮭川斗蘭がお伝えしました。
ぜひ紐ビュンビュンで気持ちよくなって下さい!
