わがままアリスと百日戦争 制作手記 グラフィック編 ~その4

この記事はフリーゲーム「わがままアリスと百日戦争」の制作秘話をだらだらと書いたものです。
・ネタバレ上等
・ゲーム遊んだよ!
という方向けの内容なので、その点をご承知ください。

はじめに

わがままアリスと百日戦争 制作手記 グラフィック編
最終回の今回は、ドット絵とエフェクトについて取り上げようと思います。

ドットの制作

本ゲームでは、戦闘シーンがこのように演出スペースとステータス表示スペースに分かれています。
f:id:chicchi0531:20180210011813p:plain

演出スペースでは、各ユニットがドット絵のリーダー一体と、兵士多数であらわされていて、
各ドット絵には、待機モーションと攻撃モーション(キャラによっては防御モーションも)があります。

グラフィックをドット絵にするのは企画段階ですでに決まっていて、
キャラクター数から、描かなければならないドット絵も100枚近くになることも予想できていました。
そこで、本ゲームの制作では、ドット絵の制作の時短が何よりも重要でした。

ドット絵の制作は、ドット絵ツールなどで色パレットをもとにポチポチ打つのが普通ですが、
本ゲームはフルカラーを使用でき、
画面全体の解像度も高いため、通常サイズのドットで、256x256の解像度を使用することができました。
そこで、なんちゃって制作手法でドット絵を生成することにしました。

なんちゃってドット絵の制作手法

本ゲームの制作でとった、なんちゃってドット絵の制作手順は次の通りでした。
1.高解像度で下絵を描く
f:id:chicchi0531:20180210014951p:plain

2.高解像度を保ったまま色を塗る
f:id:chicchi0531:20180210015016p:plain

3.ニアレストネイバー法(最近傍法)で縮小する
f:id:chicchi0531:20180210015151p:plain

4.ふちを付ける
f:id:chicchi0531:20180210015220p:plain

5.必要ならエフェクトを付けて、完成
f:id:chicchi0531:20180210015253p:plain

動画にしたものがこちら、
youtu.be

この手法はもっと小さいドット絵にも使うことができます。
小さなドット絵でも、アクションゲームなどのアニメーション付きドットの制作はとても大変です。
これは本ゲームではなく、以前私が参加したハッカソン形式のゲーム制作会でのことですが、
2日でアクションゲームを完成させる必要があり、
さらにそのメインキャラクターは、攻撃、吸血行動、ジャンプ、ホバリングホバリングしながらの攻撃、やられモーション、と
かなり多彩なアクションを含んでいました。
これを2日で仕上げるのは、素直にやっていては間に合わないと考えた私は、なんちゃってドット絵の制作手法を使うことにしました。

まず、このような4倍の解像度のアニメーションを作り、連番で出力します。
f:id:chicchi0531:20180210020347g:plain

そして、上記の手法で、これを最終的な解像度へ落とし、仕上げます。
f:id:chicchi0531:20180210020715p:plain
f:id:chicchi0531:20180210020443p:plain

結果的に、この手法により、このキャラクターを1日(実働5時間程度)で仕上げることができました。

注意

この手法は、よくよく拡大してみれば、結構粗が多い手法です。
制作スピードは格段に上がりますが、クオリティを重視するキャラクターなどは、丁寧にドットをうつことをお勧めします。

ギャラリー

本ゲームで制作したドット絵と、元絵の比較を置いておきます。

ベガ

f:id:chicchi0531:20180210021044p:plain f:id:chicchi0531:20180210021941p:plain

クロ

f:id:chicchi0531:20180210021224p:plain f:id:chicchi0531:20180210022002p:plain

ニア

f:id:chicchi0531:20180210021724p:plain f:id:chicchi0531:20180210022030p:plain

アリス

f:id:chicchi0531:20180210022510p:plain f:id:chicchi0531:20180210022531p:plain

エフェクト

エフェクトは、gifでアニメーションを下描きしたり、文で指定したものをエフェクトデザイナーに作ってもらいました。
Unity向けのエフェクトデザインソフトは、有償のものではBishamonなどがありますが、
今回はUnity内部のパーティクルシステムであるShurikenのみを使って実現しました。

正直エフェクトに関しては、特に書くこともないので、作例だけ置いておきます。

作例

f:id:chicchi0531:20180210024559g:plain
f:id:chicchi0531:20180210024612g:plain
f:id:chicchi0531:20180210024606g:plain
f:id:chicchi0531:20180210024842g:plain
f:id:chicchi0531:20180210024853g:plain

ありがとうございました。