ドット絵の題材が被るのはブログを開設して以降、今回が初めてではないでしょうか。
世界的に大人気なTCG『マジック:ザ・ギャザリング』から「大修道士、エリシュ・ノーン」を再び描きました。
エリシュ・ノーンといえば「うまくいかなかった」とブログ上で明確に述べた唯一のドット絵です。
技術的にできるだけのことはやったのですが、イメージを具現化するに至らなかったといいますか、イメージそのものがなかったといいますか……。
だがしかし!
うまくいかなかったと分かっているものをそのままにしておく私ではございません!
半年間の上達を確かめる意味でも、またエリシュ・ノーンにチャレンジしました。
ぜひ見ていってください。
『MTG(マジック:ザ・ギャザリング)』から「大修道士、エリシュ・ノーン」のキラカード風ドット絵
![『エリシュ・ノーン』](https://toristar.com/wp-content/uploads/2021/01/EleshNorn_Kira_2bai.gif)
タイトル:『エリシュ・ノーン』
制作時間:18.4時間
冒頭で述べたように、リベンジ目的で本ドット絵の制作を決意しました。
エリシュ・ノーンを描くのは今回で2回目。
2020年の8月に前作を公開しています。
静止画にエフェクトアニメをつける発想で制作したこの作品、どのようなエフェクトにするか深く考えずに突っ走り、想像と違うドット絵になってしまいました。
ドット絵と失敗談を過去記事に載せていますので、よろしければご覧になってください。
うまくいかなかったまま終わりにしたのではファイレクシア人に申し訳が立ちません。
静止画にエフェクトアニメを足すという、前作と全く同じコンセプトで再チャレンジ!
キラカードのようなアニメを目指すと真っ先に決めました。
色と雰囲気を前作に似せ、ちょっとしたリメイクの位置付けです。
大修道士、エリシュ・ノーン
![エリシュ・ノーンのドット絵](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-W01-EleshNorn-min.png)
みんな大好き、私も大好き、エリシュ・ノーンです。
怪物寄りの容姿で描きました。
イラストレーターの解釈によってキャラクターデザインが異なってくるのがMTGカードイラスト。
「相応の敬意」「骨髄の破片」で描かれる外見を参考にしています。
ちなみに、クリーチャーカードのエリシュ・ノーンはこんな感じです。
こちらも美人ですね。
ノーンの僧侶
![ノーンの僧侶のドット絵](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-W02-Priests_of_Norn-min.png)
エリシュ・ノーンには従者が付き添い、腰布が地面に触れないよう持ち上げています。
私の作品では従者に「ノーンの僧侶」を採用。
ノーンの名を冠していますし、姿を見てもエリシュ・ノーンのカードに登場しているファイレクシア人と同タイプだと思います。
脇役なので目立たない色で作画しました。
ファイレクシアの塔
![ファイレクシアの塔のドット絵](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-W03-PhyrexianTower-min.png)
キラアニメに埋もれているので判別しづらいでしょうが、「ファイレクシアの塔」をイメージして背景を描きました。
新ファイレクシア次元の世界観に寄せたかったので、再録バージョンのイラストを参考にしています。
こだわりポイント
本作のこだわりポイントは、何といってもキラカードのようなアニメーションです。
エリシュ・ノーンという題材や、ドット絵のデザインに合っていたかと問われると、まあ……怪しくはありますが……。
今回のアニメはあくまでプロトタイプ。
この後の記事で詳細をまとめています。
キラカード風アニメーションのプロトタイプ
![](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-eyecatch02-min-1024x538.png)
「キラカードのようなドット絵」は『エリシュ・ノーン』の計画段階で思い付いた初めての試みでした。
よって本作に搭載したアニメはプロトタイプ第一号といえるでしょう。
改善できそうな点がいくつも見つかり、まだまだ研究が必要だと分かりました。
さしあたってプロトタイプの制作方法を記事に残します。
キラカード風のドット絵は描いていて楽しかったので同じコンセプトの作品をこれからも作りつつ、アニメーションの完成度を高めていきたいですね。
以下が大まかな制作手順です。
- 単体アニメを作る。(メイン作業)
- 単体アニメを並べる。
- 任意の色に変える。
- 任意の形に切り出す。
- ドット絵に重ねる。
5工程もあるように見えて、手順1さえ終われば残りの作業はとても簡単です。
単体アニメを作る
キラカードと聞いて真っ先にイメージするのは、四角いブロックが敷き詰められたような箔押しではないでしょうか。
![キラのイメージ](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T01-KiraImage-min.png)
この四角いブロック1つを最小単位と捉えます。
![キラのブロック単体](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T01-KiraImageSingle-min.png)
実物のカードを確認するとブロックの中央から扇状に光が反射。
カードを傾けると中心を起点にして扇状の光が回転するように動きました。
この動作をドット絵で再現します。
まず、「扇状の光の回転」アニメのラフを描きましょう。
描き込み後に動かすと情報量が増えて大変になるので、動きの骨子を先に確定させるのです。
![キラのラフ(コマ)](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T02-KiraAnimeKoma-min.png)
![キラのラフアニメ](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T02-KiraAnime.gif)
ラフが完成したら光の反射を描き込んでいきます。
![キラ描き込み後(コマ)](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T03-KiraAnimeKoma-min.png)
最暗色とハイライトがはっきりと区別できる程度に、アンチエイリアスとグラデーションでドットの境界を鈍らせました。
最暗色とハイライト周りにはグラデーションを用いずアンチエイリアスだけを使うと、色のメリハリがついて良さそうです。
![キラアニメ](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T03-KiraAnime.gif)
さて、そのまま制作すると上画像のような回転アニメーションが完成。
しかし、実物のカードがこんな光り方をするでしょうか?
キラカードを眺めるときはカードを左右に傾けながら輝きを楽しむのがほとんどでしょうから、半円上を行ったり来たりする動きにした方が自然と思われます。
描いたコマを並べ替えてアニメーションを作り直します。
![キラアニメ再編成(コマ)](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T04-KiraAnimeKoma-min.png)
![キラアニメ再編成](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T04-KiraAnime.gif)
14コマで構成しましたが、どうでしょうか。
最小単位である1ブロックのアニメーションが完成しました。
単体アニメを並べる
ブロックを敷き詰め、ドット絵を覆うサイズのキラシートを作ります。
『エリシュ・ノーン』のサイズは150×200ですからシートも同サイズ。
こうするとドット絵の最大サイズまでの箔押しをカバーできます。
![キラシート](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T05-KiraSheet-min.png)
縮小画像では分かりづらいかもしれませんが、同一ブロックをシート単位で敷き詰めています。
キラシートも14コマでアニメーションするわけです。
![キラの各ブロック(NO付)](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T05-KiraKoma-min.png)
![キラシート(NO付)](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T05-KiraSheetNo-min.png)
シートが完成したらアニメの確認しましょう。
面積が変わるとイメージが違ってくるかもしれません。
![キラシートのアニメ](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T05-KiraAnime.gif)
よさそうですね。
任意の色に変える
シートまで完成すれば以降の工程はもはや量産作業です。
例えば、ドット絵の左上、現在は赤色でベタ塗りされている新ファイレクシアのシンボルマークに箔押ししたいとします。
![ベタ塗りのファイレクシアシンボル](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T06-EleshNorn-min.png)
赤箔で飾りたいので、キラシートのカラーパレットを赤系統に変更して赤いキラシートを作ります。
大元のキラシートを修正すると万が一の時のバックアップがなくなるので、別ファイルに出力したキラシートを加工して逆輸入するといいでしょう。
![赤色に変更したキラシート](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T06-KiraSheetRed-min.png)
同じように、緑箔にしたい個所があれば緑、白箔にしたいなら白という具合に、必要な色のキラシートを生産しておきましょう。
![緑色のキラシートの例](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T06-KiraSheetGreen-min.png)
任意の形に切り出す
キラシートを箔押し対象個所の形に切り取ります。
マスク用画像を作成し、マスク処理で切り出すのがおすすめです。
![マスク用画像](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T07-Mask-min.png)
具体的な方法は過去記事で触れているので今回の説明は割愛します。
使用ツールによってはマスク機能をサポートしているかもしれません。
キラシートにマスク用画像を被せて青色を透過すれば
![マスク処理をしたキラシート](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T08-SymbolAnimeKoma-min.png)
箔押しされた新ファイレクシアシンボルが完成します。
![ファイレクシアシンボルのアニメ](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T08-SymbolAnime.gif)
ドット絵に重ねる
完成したファイレクシアシンボルをドット絵に重ねて、最終的なアニメーション用のコマを作っていきます。
重ね先のドット絵は、先ほど見せたこちら。
![ベースのドット絵](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T06-EleshNorn-min-1.png)
14コマのシンボルをそれぞれ重ねるのですから、最終的なコマ数も14枚になります。
![](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T09-KiraKasane-min.png)
なんだか本当の箔押し作業みたいですね。
余談になりますが、動画で見たオリカ制作の箔押しもこんな感じでした。
重ねたら、早速アニメーションさせてみましょう。
![](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T09-KiraKasane.gif)
キラシートの動きがドット絵のシンボルに反映されました!
改善点
制作過程で改善点が見えてきたので最後に見ていきましょう。
反射光の色調整
キラアニメに同系統の色しか使っていないと単調になりがちでした。
実物のキラカードを見ると、例えば青色の箔押しであっても虹色に光っていたりするんですよね。
『エリシュ・ノーン』に実物のようなギラギラ感がない理由はそこかなと。
次にキラカード風のドット絵を描く時には、色を真っ先に改善したいと考えています。
キラ加工の場所および面積の調整
箔押しの位置、面積、全体に占めるバランスをもっと検討するべきでした。
『エリシュ・ノーン』では背景にキラアニメが偏っていてバランスが悪かったです。
実物のキラカードは背景のみならず、キャラクターの一部にも箔押しがされています。
これによってカード全体が輝いて見えるのでしょう。
ドット絵にも取り入れたいところです。
試しにエリシュ・ノーンの一部を箔押ししてみましょう。
![キャラクターの一部を箔押し](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T10-EleshNorn.gif)
白磁の明るい部分をキラ加工しました。
これだとイマイチな印象ですが、使い所によってはかなり映えるかもしれませんね。
アニメーションの調整
今回は光の反射を扇型で捉え、半円上を往復するアニメーションでキラを表現しました。
![キラアニメ](https://toristar.com/wp-content/uploads/2021/01/mtg-eleshnorn2-T05-KiraAnime.gif)
ただ、実物の見え方とはちょっと違うかな、という印象です。
動きが慌ただしくも感じます。
アニメが速過ぎたのかもしれません。
カードを眺めるときの手の動き、速度を参考にアニメを描くのが正解でしょうか。
感覚として、色調整よりは優先度が低いとは思います。
色が改善されれば気にならなくなるレベルの可能性があります。
今回のドット絵はいかがでしたか?
キラアニメの是非は置いておいて、前作より美しいエリシュ・ノーンを描けたので私は満足です。
サイズが大きいと描き込みの幅も広がりますね。
このまま上達していけば、いずれは女神のようなエリシュ・ノーンを描けることでしょう。
では、等倍のドット絵でお別れです。
次回の記事でお会いしましょう。
![『エリシュ・ノーン』等倍](https://toristar.com/wp-content/uploads/2021/01/EleshNorn_Kira.gif)