先週に予告した通り今回は怪物のドット絵です。
怪物といえばMTGのクリーチャー。
現在公開中のカード枠素材を使用したドット絵を制作しました。
まだ描いたことがない青のカードを選んでいます。
ぜひ見ていってください。
以下のページから使用した素材を入手できます。
MTG（マジック：ザ・ギャザリング）から「ダンダーン」のドット絵
タイトル：『ダンダーン』
制作時間：19.5時間
実は私は、MTGを開始して初パックを購入後にMTGを即やめた経験があります。
主な原因は臭いでした。
冗談のような本当の話です。
昔のカードには今より強いインクの臭いがありました。
もちろん、臭いだけならやめるまでに至りません。
MTGのリアルなイラストがあってこそです。
当時は基本セット第５版とウルザブロックの時代。
アナログで描かれているからか、カードイラストも今よりずっと不気味でした。
「チャブ・トード」や「大笑いの悪鬼」なんかがパックから出てくるわけです。
こんな気持ち悪いカードが変な臭いを発しているわけですから、小～中学生くらいの子供に耐えられるはずがありません。
今回描いた「ダンダーン」も気持ち悪かったカードの一枚です。
巨大生物が足元にいるシチュエーションはそもそも怖いですよね。
幼い日のトラウマクリーチャーをドット絵にできるあたり、月日による嗜好の変化を感じます。
ダンダーンを見ても味のある良いイラストとしか思いません。
これまでのMTGドット絵は悔いが残るものでした。
イラストよりもテキスト欄が目立つ問題を抱えていました。
今回のドット絵はイラスト部分のアニメーションを増やし、テキスト欄より目立たせる心積もり。
しかし今度は動いていない時のテキスト欄が少し寂しくなってしまいましたね。
３作目だというのにまだまだ反省点が尽きません。
ビジュアルガイド
ダンダーン
ダンダーンの正体はカサゴらしいです。
うっすら見えるヒレが確かにそんな感じですね。
キモいディスカスみたいな魚だと思っていました。
ドット絵を描くにあたってカサゴの資料を集めましたが思いの外かわいく、ダンダーンの不気味さがありません。
気持ち悪い魚を描こうと頑張っていたら謎の魚類になりました。
まあ、「ダンダーン」という魚種なのでいいでしょう。
ちなみに「ダンダーン」というクリーチャー・タイプはもう存在しません。
白枠カード
昔はカードが白枠で再録される決まりがありました。
私が入手したダンダーンは第５版のカード。
最古のセットである『アラビアンナイト』からの再録です。
思い出に合わせてドット絵も白枠で制作しました。
こだわりポイント
ダンダーンがカサゴの一種ならば海に住んでいるはず。
テキスト欄を砂浜に見立てて波打ち際を表現しました。
波が引いている間はテキスト欄に動きがないのでイラスト側に目が行く寸法です。
そしてもう一点。
貝やヒトデと一緒に打ち上げられた円月刀を描いています。
円月刀は『アラビアンナイト』のエキスパンションシンボル。
今回のダンダーンは第５版の再録バージョンであり『アラビアンナイト』のエキスパンションシンボルは当然入っていません。
砂浜に円月刀を置いて初版要素を加えました。
浮き沈みするダンダーンの描き込み
本作のアニメーションの一つが、水中から顔をのぞかせるダンダーンです。
キャラクターが背景から出現あるいは消えていくアニメーションは応用範囲が広いはずなので、『ダンダーン』で使った手法をまとめておこうと思います。
手順は大きく２つです。
- 背景に溶け込むようにキャラクターの色を変える。
- 環境表現を描き足す。
それぞれ解説します。
背景に溶け込むようにキャラクターの色を変える
動作のベースは背景色に溶け込むようにキャラクターの色を変化させていくことです。
まずはダンダーンの基本画像とカラーパレットを見てみましょう。
カラーパレット左端の黄緑色は透過色なのでここでは無視します。
１番の暗色から７番の明色まで１つのグラデーションになっています。
１番を背景色に、他をダンダーンの描き込みに使用しています。
２番～７番の色を１番の暗色方向にずらせばダンダーンの色が暗くなっていき、背景に溶け込んでいきます。
具体的には、ダンダーンの７番色の個所を６番色で塗り直し、6番色の個所を５番色で塗り直し、５番色の個所を４番色で塗り直し……という具合に各部を１段階暗い色で塗り直します。
パレットの色が１つずれるイメージなので「色をずらす」と表現しました。
すでに最暗色の１番を使用している個所は塗り直す必要はありません。
作業を実施した画像がこちら。
左側が元のダンダーン、右側が色を１段階ずらしたダンダーンです。
下側には背景を取り払った画像を並べました。
全体が暗色に１段階近づいたことで尾ビレ付近が背景と同色に置き換わり、背景と同化していると分かります。
ダンダーンが後退し、尾ビレが光の届かない位置に移動した状態を描いたと言えます。
次は、１段階ずらした状態の画像の色をまた１段階ずらす……これを繰り返して暗いダンダーンを作っていきます。
各コマは元々全く同じ画像ですが、色の違いで距離感が違って見えるでしょう。
これだけでも雰囲気の大部分を表現できていると思いませんか？
アニメにするとこんな感じです。
ドット絵エディタに用意された機能に左右されますが、カラーパレットの色交換機能などを利用すると効率的に作業できます。
例えばEDGE2なら、１番から６番までを選択して「色のコピー」で色を上書きすると画像に新しい色が反映されます。
下画像のように選択範囲を赤矢印の方向にドラッグする操作です。
パレットが変わってしまうので元ファイルを変更しないよう注意しなければなりません。
出力した編集用画像に対してこうした変更をかけ、修正後の画像を元ファイルに移植すると安全です。
ちなみに、このダンダーンはかなり簡単なケースです。
背景色とキャラクターの色が全く違う場合は相応の中間色を作る作業が発生しますし、キャラクターに複数種類の色が使われているなら中間色も増えてきます。
環境表現を描き足す
色の変化だけでアニメーションがほぼ成立しました。
ただ、これで狙い通りのドット絵になったと言えるでしょうか。
ほの暗い水底からダンダーンが現れ消えていく様子を描きたい作品です。
これだけだと暗闇にいるダンダーンに点滅する光が当たっているようにも見えますね。
人によって解釈が分かれると思われます。
クオリティを上げるにはひと工夫必要です。
空なら空、夜なら夜などと、キャラクターがいる環境を判別できる要素を取り入れましょう。
『ダンダーン』で付け加えた要素は以下の３つです。
- ヒレの動き
- 横軸の移動
- 陰影の拡大
ヒレの動きと横軸の移動
『ダンダーン』には「水の中にいる」表現が必要でした。
先ほどのアニメーションの解釈が分かれる理由は、ダンダーンの周りに水を感じさせる要素がなかったからではないでしょうか。
- 漂う様子
- 泳ぐ動作
の観点でこれをカバーすることにしました。
ヒレの先端がユラユラ動くことで水中を漂うさまを、横軸の移動により水中を泳ぐさまを表現します。
水面を揺蕩うボートや波紋のアニメーションを後から追加しますし、ここまでやれば解釈がブレることもなくなるでしょう。
陰影の拡大
色の変更だけでは色数の範囲内でしかコマ数を稼げません。
『ダンダーン』ではもっとコマを増やしたかった（＝水中をゆっくり移動させたかった）ので、描き込みで変化を与えることにしました。
顔部分の陰影の変化です。
どちらも同じ塗り色のダンダーンですが、右側の顔の影の方がわずかに広くなっています。
陰影が大きい方がより奥にいる状態を表します。
アニメーションにすると差が分かりやすいでしょうか。
こうやって描き込みを行って、同じ塗り色の画像内で奥行きの違いを出しています。
ダンダーンが浮き沈みするアニメーションの作成手順として
- 背景に溶け込むようにキャラクターの色を変える。
- 環境表現を描き足す。
という２つを説明してきました。
アニメーションはそれらしく見せるための大きなポイントと完成度を高めるための細かいポイントの２つに分かれると個人的に感じています。
ダンダーンの浮き沈みアニメでは「色の段階変化」の方が前者に当たります。
作品を制作する上で押さえるべきは前者の方で、細かいポイントにまで気を配るのはどちらかというと上達を意識した話じゃないでしょうか。
よって、まずはそれらしく作ることを優先し、自分のスキルや余力に応じて細かな修正を行って付加価値をつけていけばいいのかなと思います。
ドット絵初心者の方はまず色の変化による奥行き表現だけを実践し、慣れてきたら他の要素を増やしていきましょう。
私もまだまだ、細かいテクニックの引き出しを増やしつつドット絵で実現する技術を磨いている最中です。
将来的に同様のアニメーションを制作した暁には、この『ダンダーン』よりも優れた作品になるよう努めていきます。
最後に等倍のドット絵でお別れしましょう。
では。
