私は挑戦する手合いの人間ではありません。
しかしドット絵に限っては「いつもと何かを変えてみるか」「少し大規模なアニメを作ってみるか」などと思い立つことがあります。
今回がそれです。
DMMが提供するタワーディフェンスゲーム『千年戦争アイギス』のキャラクター「ぬらりひょんの娘シノ」のドット絵を描きました。
どんなドット絵にしようかきちんと計画しイメージ通りに完成まで漕ぎ着けた、私にとって稀有な作品です。
全体の雰囲気、アニメーションの種類、画風どれをとっても私が今まで描いてこなかったタイプに仕上がりました。
備忘録としても使えるように、作中で使用したアニメーションの制作手順を記事後半にまとめました。
ぜひ読んでいってください。
『千年戦争アイギス』から「ぬらりひょんの娘シノ」のドット絵
タイトル：『夜行前』
制作時間：52.8時間
ぬらりひょんの娘であるシノは妖怪たちの現総大将です。
もうすぐ日が暮れる時間帯。
場所は東の国のどこか。
百鬼夜行のために妖怪たちが集まってきます。
頭数が揃うのをシノが待っているシチュエーションを描きました。
妖怪の行列アニメーションはちゃんとループしています。
シノの髪にも風でなびくアニメーションをつけているので注目してみてください。
登場キャラクター
ぬらりひょんの娘シノ
本作の主役。
クラス「ぬらりひょん」の最初のユニットにして、最高レアリティ黒のイベントユニットです。
私がアイギスを開始して初の収集イベントで入手したキャラです。
かなり尖った性能なのですが当時の貧弱な戦力だと普通に強く、入手後半年くらいは普段使いしていました。
ビジュアルは第２覚醒後の「妖怪剣客ぬらりひょん」分岐。
もちろん、うちのシノが剣客分岐だからです。
イベントも好きです。
シノが百鬼夜行を作り上げられるように王子（主人公）が手伝いをする内容です。
暴力と恐怖で妖怪を配下に加えるシノを見て、妖怪と敵対しているはずの人間の忍者が「それ以上はさすがに……」と止めに入るのが笑いました。
最終的には信頼で妖怪たちを率いるようになりますが、シノの暴力が結構好きだったので複雑です。
親の仇である酒呑童子に単身で挑んだときは「ああ、ピンチになったところを王子が救ういつもの流れね」と思いました。
実際は酒呑童子の首をあっさり落として撤退させ、敗北どころかほぼ完勝でした。
やっぱり最上位の妖怪ですからこのくらいの貫禄が自然です。
展開ありきで安易なピンチに陥らなかったところが好印象なイベントでした。
好きなセリフ
「（河童たちが）何か粗相をした時に、かなりきつく叱ってしまいます」
「手も……少し、出してしまいます」
妖怪総大将として成長しようとするシノの苦悩とシノに締め上げられる河童たちの姿が想像できて好きです。
頑張っているシノには申し訳ないのですが、シノと河童の組み合わせだけで笑ってしまいます。
河童ばかりシバかれてないですか？
いつも怒られている舎弟みたいです。
百鬼夜行
ゲーム中では百鬼夜行のすごい版「千鬼夜行」が登場するのですが、ここでは一般的な呼称の「百鬼夜行」を使います。
『夜行前』に登場する妖怪はすべて、ゲーム中の敵として実際に登場します。
シノと敵対する「鬼」側についている妖怪も多数いる状況なので、未だに妖怪との戦闘があります。
どんな種類の妖怪にも、鬼につく者もいればシノにつく者もいるスタンスで描いています。
左から
- 餓鬼
- 鬼娘
- カラス天狗
- 青坊主
- 河童
左から
- 牛鬼
- 鬼
アイギスをプレイしている方なら「かまいたちはいないの？」と思うかもしれません。
かまいたちは背丈が低く草むらで隠れてしまうので描きませんでした。
他の妖怪を踏み台にして空中を飛び回らせたり、やりようがあったかもしれませんね。
こだわりポイント
青い炎
炎の色を青くした理由は格好良さ以外にもあります。
シノは青い鬼火を連れているので、私の中で青い炎のイメージがあるのです。
シルエットを青く燃え上がらせることで、シノの息がかかった妖怪たちを表現しました。
なお、シノ本体は紫色の妖気を身に纏っており、成長するとイメージカラーは完全に紫になります。
背景のオレンジと対照的な色合いにしたかったので青色を選びましたが、そうでない場合は紫色を優先するかなあと思います。
主線と陰影を強調しない画風
シノが住む「東の国」は日本風の景観、文化を持つ国です。
作品全体にも日本的な雰囲気を持たせられないかと考えました。
切り絵、折り紙、浮世絵……日本を連想できる芸術品を想像した結果、画風をいつもと変えることにしました。
具体的には主線に頼りすぎず陰影を強調しないで描くことです。
色差が明白ならば主線を描かなくても境界がわかります。
形をしっかりとれていれば、陰影を描き込まずとも立体感は伝わります。
まあ、結局は彼岸花や山といったオブジェクトに頼るんですけどね！
ちゃんとした計画
恥ずかしながら、私は計画を立てて作品を作る習慣がほとんどありません。
「こんな感じの作品にしよう」というイメージを持って制作にあたるものの、描いてみて「ここに何か足そう」「ここも動かそう」「色はこうしよう」と行き当たりばったりで手を加えています。
いつまでもそれでは駄目だと思い、今回からざっくりラフを描いて全体の色合いや配置のバランスを見るようにしました。
アニメーション個所とアニメーション内容もこの時点で決めました。
「シノの髪と彼岸花はたまに風でなびく」「シノ背後の妖怪シルエットは前方に歩く」「シルエット内の水色の炎はメラメラ燃えている」といった具合です。
計画通りに作品が完成するのはこんなにスッキリするものだったんですね。
燃えるシルエットのアニメーション制作手順
シノの背後を移動している妖怪たちの燃えるシルエットを制作する手順を説明します。
題材を差し替えれば様々な作品に応用できると思います。
アニメーションの全体像
妖怪のシルエットをくり抜いた夕焼け背景を、燃える遠景画像に重ねて作っています。
くり抜いた穴の後ろで炎がアニメーションする仕組みです。
しかしながら問題点が１つありますよね。
それは、妖怪のシルエットも動いていることです。
「妖怪が歩行動作する」「妖怪が前方に座標移動する」という動きが夕焼け背景側で発生します。
上の重ねイメージはあくまでアニメーション１コマ分です。
次は夕焼け背景、炎遠景からそれぞれ２枚目の画像を重ねたコマを作る必要があります。
各アニメのループ枚数が異なるようなら画像番号の組み合わせもずれてきますので、管理が大変です。
組み合わせのずれを防止でき、誤りがあっても簡単に修正できる方法でアニメーションを作るのが望ましいとわかります。
２つのアニメーション方法
「動く物体の中がさらに動く」アニメーションを作る方法について２つ思いつきます。
- 夕焼け背景をシルエットでくり抜いて燃える遠景上に配置する。
- 燃える遠景をシルエット型にくり抜いて夕焼け背景上を歩行させる。
どういった方法かそれぞれ見ていきましょう。
方法１の「夕焼け背景をくり抜く方法」です。
これは冒頭で説明したように『夜行前』で実際に使用した方法です。
重ね合わせてコマを作るイメージはこんな感じです。（緑がヌキ部分）
くり抜いた背景は歩行（妖怪の動きと前進）に特化、炎の遠景は燃える動作に特化します。
お互いがどのようなアニメーションをしていようが意識せずに済みます。
炎を修正しても夕焼けの背景画像を変更する必要がありません。
逆の場合も同様です。
方法２は「燃える炎の遠景をくり抜いてシルエットとして使う方法」です。
コマのイメージはこんな感じです。
完成するコマは方法１と同じなのがわかるでしょうか。
しかし、この方法２には致命的な欠点があります。
夕焼け背景上にシルエットを配置する座標と同じ座標で、遠景をくり抜いてシルエットを作らないといけないのです。
例えば画像の上側のように妖怪を配置したいなら、画像の下側で示したように炎の遠景の同じ位置から妖怪のシルエットを切り出さないといけません。
シルエットを作るのに全く別の画像を参照しなければいけないのでは作業効率が悪くミスにもつながります。
シルエットと炎の画像に関連性ができてしまいますから、炎を修正するとシルエットも作り直しです。
よって方法２は論外、方法１でアニメーションを制作しています。
アニメーション制作の流れ
ここから制作手順を説明していきます。
具体的な手段は使用ツールによって異なるので、場合によっては工程を大幅に削減できるかもしれません。
ちなみに、私はEDGE2を使用してドット絵を制作しています。
かなりの長期間EDGEを使用していた経験もありますのでアニメーション機能に関してざっくり比較させていただきますと、断然EDGE2の方が上です。
EDGEで同じ作業を行うと相当な手間がかかると想定されますのでご注意ください。
アニメーションに強いドット絵ツールも持っておくことをお勧めします。
制作の流れは以下です。
- シルエットのアニメーションを作る。
- 背景とシルエットを重ねたアニメーションを作る。
- 手順２で作ったアニメのコマを１枚の画像に並べて出力する。
- 手順３で作ったコマのシルエット部分をくり抜く。
- 手順４で作った画像を使用して最終的なアニメーションを作る。
妖怪のシルエットのアニメーションを作る
まずは各妖怪の歩行アニメーションを作ります。
これがないと始まりません。
後に別の色で塗りつぶすので背景色と被らない１色でシルエットを塗りつぶしておきます。
夕焼け背景で使用していない黒色で塗りつぶしました。
歩行感が出るように全身描きましたが、草むらに隠れる足元は手を抜いても問題ありません。
最終的に見えなくなる部分がわかっていると手を抜ける個所が明確になるのがいいですね。
足元が隠れた状態で前方に移動させるとエスカレーターみたいにスーっとした動きになってしまう場合は、身体全体をしっかりと上下に揺らすと歩行感が出ますよ。
シルエットと背景を重ねたアニメーションを作る
妖怪たちを夕焼け背景上に配置し、行列を作っていきます。
妖怪の歩行速度や追い越し、アニメのループもここで確定させます。
このアニメ制作方法および制作効率は使用ツールに大きく依存します。
EDGE2で制作した場合、上のような夕焼け背景外に配置したシルエットも含んだ状態のgifアニメが出来上がりました。
必要なのは夕焼け背景の範囲ですのでリサイズします。
夕焼け背景からはみ出ている部分をカットしました。
ツールによっては最初のアニメを出力した時点でリサイズまで完了しそうです。
私はやり方が分からなかったので各コマを手作業で修正しました。
効率化の余地アリです。
gifアニメのコマを１枚に並べて出力する
先ほど制作したアニメーションのコマを１枚に並べて出力します。
この作業もツール機能に依存します。
EDGE2には読み込んだgifアニメを１枚に並べて出力する機能がありますので一発でした。
各コマのシルエット部分をくり抜く
シルエットを透過色で塗りつぶします。
手順１の時点でシルエットを１色で塗りつぶしているので作業は単純です。
「色を選択をして塗りつぶす」「シルエットの色を透過色に置き換える」などツール機能に合わせて効率的な方法を選択します。
バケツを使って手作業で塗りつぶすのはやめましょう。
時間がかかる上に作業漏れが発生しかねません。
このヌキ作業により妖怪のシルエットの下側の画像が見える状態になりました。
夕焼け背景画像が全コマ完成です。
最終的なアニメーションを作る
以降は通常のアニメーション制作手順と変わりありません。
この時点で他の画像も完成させておいてください。
『夜行前』でいえばシノや彼岸花、炎の遠景にアニメーションがあります。
炎の遠景に関してはどこが露出するか上層の夕焼け画像次第ですので、単体で見たときに未完成部分がないように仕上げます。
他のコマと重ね合わせて最終的なコマを作っていきます。
夕焼け背景と炎遠景どちらもアニメーションするわけですから重ね合わせるコマ番号の組み合わせには注意しましょう。
ツールによってはコマを実際に作らなくても各画像を重ね合わせてアニメ用の１コマとして管理する機能があります。
同じ画像を使いまわせるということですね。
ツールの使い方になるのでここでは詳細な説明を避けますが、EDGE2ならいずれ解説できると思います。
全コマ完成したらgifアニメで出力して完成です。
反省点
もっと効率的な方法があったのではと思います。
制作手順２～４は手順５で使用するコマを作る中間作業であり、実質的にドット絵を描く作業ではありません。
それなのに１０時間以上かかりました。
こういうとき色々なツールを使えれば、いや、ツールや機能を知っているだけで大きなアドバンテージになります。
ツールの知識もスキルなんだなあと思い知らされました。
しかし完成図が見えていたからか力技でどうにかなるビジョンも見えていました。
イメージって大切です。
まとめ
「燃える妖怪のシルエット」を制作した実際の手順を書いてきました。
効率化できるに越したことはないですが、完成イメージさえ見失わなければ非効率的でも手法はなんとかなると感じました。
ドット絵を描く技術だけでなく作品を作るための技術にも目を向けていきたいです。
完成イメージを実現する手段を増やせば、いい作品をより早く生み出す助けになります。
一緒に上達していきましょう。
