退屈ブレイキング

マンガ、ゲームとiPad Pro関連を中心に、世の中にある素敵なものをじっくりねっとり伝えるブログ。

Powered by 複眼RSS

Asepriteでガンガン動くドット絵アニメーションを作る方法

s


はじめに

f:id:ama46572222:20170521085016g:plain

こんにちは、DAIMAです!
上でドット絵のヘンなトリが
踊り狂っておりますが、
今回の記事では、このような
ドット絵アニメの作り方をご紹介します。

www.taikutsu-breaking.com

ツールは、以前当ブログでご紹介した
Asepriteを使用します。

Asepriteでのアニメーション作成方法から
ドット絵アニメの効率的な作成法まで、
ドット絵初心者の方にも
簡単に実践できる内容をお届けします。

f:id:ama46572222:20170521103148j:plain

ちなみに、
サンプルアニメのキャラクターは
unityで細々と自主制作している
アクションゲームの自機キャラ「ウグイスくん」です。

そもそもこの記事も、そのゲーム制作の
副産物だったりします。
(この辺の奮闘記もいずれ記事に...)

アニメーション制作の基本

まずは、アニメーション制作の
要領を掴むため、
簡単なサンプルから始めてみましょう。

asepriteで、ボールが
上下に跳ねる動き
を作ってみます。

f:id:ama46572222:20170521221918j:plain

まずは、適当な大きさで
縦長のキャンバスを準備。

f:id:ama46572222:20170521221952j:plain

続いて、レイヤータブの上で
右クリック(パッドなら指二本でタップ)して
レイヤーオプションを表示し、
「new」で新規レイヤーを作成します。

さらに、最初のレイヤーを「ball」
新規レイヤーを「ground」と名付け、
ballレイヤーには赤いボールを、
groundレイヤーには白で地面を描きました。
(レイヤー名の変更はレイヤータブ上でダブルクリック)

ボールと地面が準備できたら、
次はフレームタブ上で右クリックして、
「new」を選択します。

f:id:ama46572222:20170521222339j:plain

既存フレームの内容をコピーした
新規フレームが追加されました。
フレームは、アニメーションの
コマに当たる概念で、gifアニメでは、
このフレームを次々と切り替えることで
アニメーション表現を実現しています。

ですが、今の状態では
最初のフレームと新規フレームの内容が
全く同じであるため、
再生ボタン(▶︎)を押しても
ボールは動きません。

f:id:ama46572222:20170521222423j:plain

ですのでここはひとまず、
新規フレーム内のボールの位置を
20pxほど上に移動させてみます。
この状態で再生ボタンを押すと...

f:id:ama46572222:20170521112014g:plain

動きました!
とはいえ、たった2枚の画像では
ボールが跳ねているようには見えませんね。

次は、画像の枚数を増やして
全体の変化率を高めてみましょう。

f:id:ama46572222:20170521113622g:plain

だいぶそれらしくなりましたね。
単純な等速直線運動ではなく、
バウンドの頂点で加速度を落としているのが
ミソだったりします。

ただ、ぶっちゃけると
この程度の動きなら
わざわざドット絵で表現する必要性は皆無です。

次の章では、もっと実用的で
複雑なキャラクターの動作を
ドット絵アニメーションで表現してみましょう


キャラクターを歩かせてみよう

アニメーション制作の
基本が把握できたと思いますので、
次はもっと実用的な例をご紹介します。

f:id:ama46572222:20170521115910g:plain

ここで再登場して頂くのが、
冒頭にも登場したウグイスくんです。
今度は彼を歩かせてみたいと思います。

第一段階 ラフスケッチで下準備

アニメーションを作る際は、
作りたいアニメーションの全体像を
あらかじめ脳内で
イメージしておくことが重要です。

キャラクターの体の各パーツが
アニメーション中にどのように動くのか、
対象と同じ動きをしている動画を見たり、
実際に自分で動きを真似たりしながら、
動きの流れを描きとめた
イメージスケッチを作成してみましょう。

f:id:ama46572222:20170521123425j:plain

ご覧のようにかなりテキトーですが、
これがあれば、動き全体に必要な
画像の総数がおおよそ推測できますし、
右足を出す→右足が着く→左足を出す→左足が着く...
という挙動のルーチンを把握する上でも
欠かせないタスクです。

ドット絵を描く

それではいよいよ、Asepriteを使用した
アニメーション素材の作成に移りましょう。

まず、キャンバスの既存フレームに
ベースとなる立ち絵素材を貼り付けます。

オニオンスキンを活用せよ

f:id:ama46572222:20170521125731j:plain

続いて、新規空フレーム(New Empty Frame)を作成し、
レイヤータブ上部右端の
オニオンスキンのパネルを選択します。
すると、上記画像のように
直前のフレームの内容が透過されて
表示されるようになります。

オニオンスキンの機能を使うことで
既存のドット絵と常に比較しながら
新規ドット絵を作成することができます。
また、フレームを囲む選択範囲を
拡縮することで透化するフレームの範囲を
自在に調整することも可能です。

オニオンスキンは、
アニメーション作成に大変役立つ機能ですので
ぜひ使いこなせるようにしましょう。

はじめは大雑把に

f:id:ama46572222:20170521131508j:plain

上記のキャプチャをご覧いただくと、
キャラクターの輪郭が
抽象画のような大雑把さで
描かれていることが分かります。

私がドット絵のアニメを作るときは
まずこのようなラフ画を
ひととおり作ってしまって、
動きが最初に想定した通りのものに
なっているかを確認します。

この過程を踏むことで、
一生懸命細部まで作り込んでから
いざ動かしてみると、
動きがスムーズに繋がっていない!
という悲劇を
あらかた回避することができます。

理屈としては、デッサンするときに
まずあたりをとってから
細部を詰めていくのと同じですね。

ディティールを詰めよう

先ほどの段階で作成したラフアニメを元に、
一枚一枚のドット絵の仕上げを行います。

ここでの留意点は、
動きの流れを意識することと、
共通して使えるパーツは
なるべく使いまわして
制作所要時間を節約すること
です。

ここで一度、今回のアニメーションで
動かす必要があるパーツを
リストアップしてみましょう。

歩きアニメなので当然「」は
大きく動かす必要がありますね。
また、自然な歩行描写のために、
歩き動作に合わせて、体全体を
わずかに上下させる必要もあります。

また、しっぽ単体でも
歩行に合わせて上下させることで
「動いている感」
よりプラスしたいと思います。

パーツの流用で作業効率UP!

動かす必要がある部分を列挙したことで
逆説的に、歩行アニメ中に動かさなくても
良い部分についても判明します。

f:id:ama46572222:20170521132736j:plain

つまり、上半身と頭は
アニメーション全体を通じて
一枚目と同じものが
使いまわせるということです。

もちろん、
突き詰めるならそれらの箇所も
一枚一枚微妙に変化させるのがベストですが、
今回はあえて動かさない部分を作って
それでも違和感がないかどうかを
実証してみようと思います。

f:id:ama46572222:20170521134049j:plain

上記画像は、歩行アニメのドット絵
一枚ずつ並べて表示したものです。
ここで注目ていただきたいのが、
1番と5番、2番と6番、3番と7番、4番と8番は
左右の足の前後関係が入れ替わっただけで
基本的なディティールは
ほぼ同じ
であるという点です。

つまり、上記ペアのうち片方、
8枚中4毎の画像は、
ペアの画像を改変することで
非常に少ないコストで
制作することができる
ということです。

このように、ただでさえ
時間を取られるドット絵制作において
いかに(質を落とさず)時間を節約するか
と言う点は、実はヒジョ〜〜〜に
重要なポイントだったりするのです。

細部を仕上げる

最後までドット絵が描けたら、
もう一度アニメを再生して
動きに違和感がないかをチェックします。

抜けているパーツがないか、
物理的に不可能な動きをしていないか、
よくよく観察して、
全体の完成度を高めます。

歩きアニメ完成!

f:id:ama46572222:20170521114352g:plain

2時間ほどの作業を経て、
歩行アニメーションが完成しました。
それなりに時間はかかりましたが、
自分の描いた絵が動くと
やはり嬉しいものですね。

先述した通り、
頭と上半身は最初に描いたものを
全体を通して流用しています。
欲を言えば手なども少し
動かしたかったところですが、
十分歩いて見えるアニメに
仕上がったのではないかと思います。

f:id:ama46572222:20170521114924g:plain

また、asepriteでは
タイムラインのフレームタブのオプションで
フレームごとに表示時間を
変更することが可能です。

f:id:ama46572222:20170521115020g:plain

試しに一枚あたりの表示時間を
半分にするとこのようになります。
ダッシュ動作などに使えそうです

f:id:ama46572222:20170521115120g:plain

4倍界王拳
ここまでくるとちょっとキモいですね。

おわりに

ドット絵アニメ制作心得まとめ

  • ラフスケッチで動きのイメージをつかめ!
  • 細部は後回しにして、まず全体の動きから把握せよ!
  • 時は金なり!あらゆる手段で時間を節約せよ!
  • 最後の微調整に全力を込めよ!

ドット絵に未来はあるか?

近年のゲーム制作の主流はやはり3D。
一度モデルを作ってしまえば
様々な場面で使い回しが効きますし、
細かいパーツの変更があった場合でも
ドット絵よりはるかに手軽に
修正することが可能です。
(百枚超のキャラ絵を描いた後に
ちょっとした装飾品のつけ忘れに
気づいた時の絶望感といったらもう...
)

とはいえドット絵
スマホゲーや個人制作ゲームを中心に
まだまだ根強い人気を誇っています。

これは、3Dモデリングに比べて
参入ハードルが低いと言うだけでなく、
リアルに表現され過ぎないからこそ、
受け手の想像力を刺激する余地を残す

ドット絵ならではの良さが
支持されてのことではないかと
私は考えています。

今後、グラフィック表現の主流が
ドット絵に戻る...なんてことは
ほぼありえないとは思いますが、
コンクリートに生えた雑草のごとく
細々とでもドット絵文化が
生き残ってくれれば...
と願う日々です。


news.denfaminicogamer.jp

最近読んだ記事ですが、
現役プロのドッターのお話が載っていて
なかなか含蓄のある内容でした。
確かにドッターは本質的に
マゾなのかもしれませんね(笑)


広告