MSX「8ドット2色」を攻略する

こちらも、旧Twitterのモーメントから。
MSXのSCREEN2(or 4)の、8ドット2色環境でのキャラクタの描き方（主に、ダウングレード）についていくつか連投した記事をまとめます。

なお、8ドット内に2色 の説明は、@Rui8bit さんの記事と作品が素晴らしいので、是非こちらを参考にして下さい。

たとえば、カイ（ドルアーガの塔）を描いてみる

大まかにこうやってるよという説明

中央の6コマが順を追った制作過程です。
1コマ目のフルカラー状態から、まずは2色化します。（2～3コマ目）
自分が 目コピで描くときは、最初から3コマ目の絵を意識して絵を描いてることが多いです。

そして、4コマ目の「塗れるところに色を塗る」工程で、色がはみ出してしまうところを探します。

自分が使っている、ドットエディタは、汎用エディタなので、MSX用の補正はしてくれませんが、グリッド表示機能を活用して、8ドット毎に線が出るようにしています。
最終的に、機械的なチェッカーを通すので、この時点ではグリッド線の境界線をまたいで2色が混ざってないか簡単な目検でゴリゴリ描いてます。

4～5コマ目は、はみ出したところを加工しています.
顔からはみ出している青（髪の毛の色から伝染した
耳やもみあげの表現）を一旦削ってしまう方針にしました。

次に、握られた手の周りが、服の色のが手に伝染して水色になってしまい、よくわからなくなっているので、服や髪の部分も含めて加工しています。

この場合は、握った手の位置を少し下げて、袖部分の水色を外側のグリッドに逃がすようにしたうえで、髪の毛が自然に背中に消えるように形状工夫しました。

細かいところを調整

あとは、色が入れられる場所を探して、色を追加します。
主に、手首の影部分のような立体化のフェーズです。
今回は、顔を部分がおおよそ16pxにしっかり収まるように、あらかじめリサイズしてあったので、肌色部分に黒が必要ない部分が多いです。
そこで、チークだとか鼻の頭の光点だとかが打てます。

髪の毛の輪郭線は、オリジナルの髪色が青緑っぽい色だったので、当初青輪郭としたのですが、重要なのは髪色を「黒」にすることなので、思い切って赤にしてみたら、一旦削ってしまった頬骨あたりのドットを復活させても違和感がありません。
このへんは、内側の境界にも赤色を刺せば、アンチエイリアス表現のフリをして、採用できそうだと見当をつけ、耳元を加工しました。

ゲーセンで見かけた、インストラクションカードのカイは、もっとギュッと脇を締めた感じの"お願い"ポーズなのですが、手の位置が下がってしまっているので、若干不満なんですけれど、思い出補正で"そう"見てもらうことにして、今回はここで完成とします。

描ける場所に描くのが正義

先にも触れましたが、実は最初から顔がピッタリ8px境界に収まるように、輪郭調整していました。
制限が多い環境なので、身も蓋もない話ですが「描けるところに描く」というのが攻略法でして…

比較のため、発表済みのいくつかの画像を同じサイズ切り取って、境界線に色を付けてみました。

16ドットあれば結構な表情が書き込めますし、比較的顔に近い場所から、髪色が自由になるので、後が楽なんですね。

また、16ドットサイズなら、最終的にスプライトでパッチを当てるとか、スプライトで、目パチや口パクアニメーションなんかもできちゃうサイズで、ゲーム向きでもあります。

ゲームの顔グラフィックに利用するには

RPGなんかのゲーム制作に応用するには、こんな感じでやると良いと思います。
あの「モナリザ」を意識して描いてみましたが、カイ同様、黒髪にすると決めれば、残り部分は背景色として利用することもできます。

今回は、リアル系の絵なので細かく色を刺して、立体感だったり、「らしさ」を表現してみました。

サイズ決め打ちだと、自由度がないのでは？

SCREEN２の制限は、横方向の8ドットについての制限なので、縦方向は１ドット単位で動かせます。
ですので、ゲーム制作で利用するなら、女性キャラや子どもキャラは成人男性キャラに比べて目の位置が2～4ドットぐらい低くなるように移動したり、顔部分の縦方向の長さで調整すればいいと思います。

たとえば、先のモナリザ描いた時期に並行で描いていたのがこちら。

すべて、モナリザと同じフォーマットで中央の16pxに顔のメインパーツが来るようにして、周囲のchipで髪型や装飾品を描きました。

この作例では、年令によって顔の縦位置を調整しているので、年長（最上段）のクレア・スコットは頭上の方が切れてるけれど、年少（最下段）のマルロ・ルチーナは頭頂まで描き込めてます。

というわけで、MSXのキャラゲーでも、このくらい描き込めるよという話でした。

追記　「描ける場所に描くしかない」の部分に対策を…

多少強引ですが、元絵を少し横にずらすことで「描ける場所」を作り出す話を書きました。