レトロゲーム機の制約に則ったドット絵を描く(MSX SCREEN2)
この記事では、MSX SCREEN2のグラフィックを例に、8bitのレトロゲーム機に代表される2DCGの、「制約がある背景画」となる静止画のドット絵を描く為の工夫や、個人的に考えている事をまとめてみました。
ドット絵を描くソフトは、汎用ピクセルエディターの「Aseprite」を使用します。
MSX SCREEN2 のグラフィックの制約
MSXという8bitホビーパソコンの、「SCREEN2」
という表示形式で採用されている背景描画には、次のような制約があります。
解像度:256x192ピクセル
15色パレット、最大同時発色15色
8x1ピクセルに最大2色
「8x1ピクセルに最大2色」とは、キャンバス全体をを横8、縦1ピクセルのグリッドで区切り、そのそれぞれのマス目の中で、色数を2色以内に収める事を意味します。
横より縦の色数制限が少ないという事になります。

今回は、Asepriteのパレットプリセットにある「MSX2」というパレットを使用します。

初代MSXの描画チップ「TMS9918A」互換パレット
(明確な参照元が分かりませんでしたが、BEFiSによる検証サイト内で、v9938で設定されている
色として掲載されている画像と同じ色のようです。)
ブランドとしてのMSXに固有かつ、象徴的な色の組み合わせである為、こちらを採用して描いていきます。
そもそもなぜ制約を守って描くのか
こんなキャンバスやパレットに対して、自分にとって絵を描くモチベーションとなる必要性を答えると、
「制約から可能性が広がる表現があるため」
というのが一番の理由として挙げられます。
制約から絵を連想できる
MSXの発売当時は、採用した描画チップの性能によって、パレットが識別可能な程度の色数しか持てなかった事情はやむを得ません。
ですが現在では、色数をコントロールできるパレットは、あえて意図的に色数を減らしたスタイルを引き出し、ドット絵の表現を際立たせるツールとなっています。
範囲内の色数制限も、パレットのように、使いこなし方を考えられないのでしょうか。
例えば、「8x1ピクセルに最大2色」にインスパイアされ、導かれるようなアイデアを挙げてみると…
2色:片方の色を共通にする、背景を透かした透明感のある材質
横方向に厳しい制約:羽や階段などの左右に広がりあるモチーフ
混色時における横縞:画面に水平な地面のざらざらとした質感
縦方向の1ピクセル単位のグラデーション:遠景にある、高層ビルの上層につれ霞んでゆく調子
など…

多少突飛なアイデアであっても、忌避しがちな対象であった、制約という存在が、絵を描く事自体の誘因となっていきます。
実機で映る
おまけとして外せないのは、本物のレトロコンシューマーを通して、描いた絵を表示できるという点です。
これは捉え所が奥深く、実際の表示環境を駆使した作品(ゲーム等)でない限り、純粋なロマンのみによって、しばしば美化しやすい動機です。
どこまでを想定し、どこからを味とするか、といった実機と結び付く魅力を捉えるには、表現に留まらず技術的な、工夫の余地が見つかって止みません。
静止画ドット絵においては、あくまで偶然映るんだな~と考える程、現在までその位の自然体を目指して、自分は描いた画像データの状態を作品として発信しています。
特定の15色パレットを使う事の他に、範囲内の色数制限があるという特徴を知ったところで、それをどのように判定し、描いていくかをまとめていきます。
制約を感じさせない絵を描くには、制約を感じずに描く
SCREEN2の範囲内の色数制限に則ったドット絵を完成させる為に、その制約を一度気にせずに描き始めます。
制約を活かす余地を残す志向をした例を、いくつか挙げてみます。
ソフトウェア的に制限しない
まず、使用するピクセルエディターについてですが、レトロゲーム機のグラフィックを描く方法として、専用のピクセルエディターがあります。
それらのいくつかは、規定の色数を置いた時点で、自動的にその範囲が塗りつぶされる、色数厳守のキャンバスで絵を描くものです。

(Windows / Mac / Linux)
3色目が2色どちらかを塗りつぶして、自動的に各範囲内を2色に収める。
自動的・ソフトウェア的な制限は、絶対にミスが出ません。
また、制約の視覚的な特徴を出しやすいです。
そのかわり、自動的な描写が起こりうる立場は、常に自分の脳の外側にある関係上、想像通りに描く事が中々にやりにくいです。
意識的な制限の方では、より高い操作性で描く事ができます。
落書きのような自由な描写や発想を、なるべくそのままアウトプットしたい自分は、Asepriteといった、汎用ピクセルエディターを使用します。
この方法をとる理由は、ミスできるゆとりがある方が、描きやすい為です。
言い換えれば、ミスを手動で直します。
ですが流石に、想定する色数を超えた範囲を、目視で判別するのは限界があります。
そこで使用するのが、「Pixel Polizei」というエラーチェッカーソフトです。
ミスした場所を、印で示してくれます。

制約に則った画像は、バイナリデータなどの実機向けの形式にも出力できる。
SCREEN2の他複数の画面に対応。
この方法は、ミスだった部分を自分が描いたために、修正に勇気が要る描写を垣間見てしまう瞬間があります…が、特定のピクセルエディターに依存しないので、柔軟に描けます。
とはいえ、修正する量や回数の多さを大変に思うかも知れません。
自動的に修正される制限は、ゼロから何かを生み出す創造のプロセスに、制約が余計な伴走をします。
エラーチェッカーという局所的な役割は、創作に同時進行だった意識を後にまわし、作業工程を分割します。
無を有にする難易度を助長する方法よりも、修正をとても楽にしてくれる存在だと思います。
この方法は、創造性を開放してくれます。
自ら生み出したミスに一度寛大になる方法を選択した事で、描きやすさを得た代わりに、ミスに自力で対応する必要が出てきてしまいました。
じゃあこのミス自体を減らす事は出来ないのか…!?
2色で描く
自由度が最も高く、ミスが絶対に出ない方法がこれです。
下絵として全体像を一時的に2色で描くのはもちろん、部分的な陰影や質感など、ミクロな表現を2色で描けるだけ描いて、そのまま完成まで保つ事も多いです。


MSXや同年代のハードにある、独自性の強い「人の感覚を頼りに作られていないパレット」は、良い感じの色の組み合わせがある程度限られます。
そのため、画面の発色数を意図的に減らして、配色に統一感を出す狙いもあります。
特定の2色にする意識というよりかは、2色で描写するという選択を、複数のサイズの範囲で行うような意識です。
注意点として、この攻略法の使いすぎには気を付けます。
2色で描くという事は、MSXのグラフィックの固有性を排除して、描きやすさを優先します。
後述しますが、これを極端にすれば、MSXである意味が無くなってしまいます。
なので完成まで同時発色2色を貫かず、これは下絵の時点で留めます。
使う色を絞る
続いて、15色のパレットから、使いやすい色を選びます。
MSXのグラフィックを描く上で、8bit機という描画媒体である事を思い出してみます。
特徴的なのは、「パレットに人為性の介入が少ない」という事です。
特に色数が限られたパレットには、生成上の癖があります。
2色以上を組み合わした時、不調和な結果になる事が少なくありません。
良いと感じた配色の手札を持っていれば、それを乗りこなせます。

方法としては、色の組み合わせを一覧しやすくまとめたデータを、専用のキャンバスを設けて作ります。
代表的には、
感覚的な明度を順番に並べたもの
色相を順番に並べたもの
補色(灰色)になる組み合わせ
似た明度、色相の組み合わせ
など、規則性や調和感が取れていたり、単に良いと感じた色の組み合わせを、自由に描いています。
明度の順番に並べてみると、中間に位置する最も明るい赤を境に、それより明るい色との明度差が激しい事が分かります。
MSX2パレットの特徴(癖)です。
明度順に並べた色を起点に、特徴を捉え、ハーフトーンに含ませる色の濃さなどに向けて、想像の幅を広げていきます。
そして、パレットを二分する方法などで、配色の種類を増やしていきます。
Asepriteでは、プロジェクトデータをキャンバスウィンドウの境目にドラッグ&ドロップすると、画面を分割して複数キャンバスを同時に表示できます。
これを隣に置いて、見返しながら絵を描きます。
また、この時パレットの色の明度や色相の順番も揃えて、プリセットとして保存して使うと便利です。

Altを押しながらマウスホイールを回すと、パレットで選択している色を隣に移動できます。
パレットの並びを直感的にする事で、この機能を使って近似色の組み合わせを選ぶ事が、瞬時に行えるようになります。
MSX2パレットは、明度が似た色が含まれているため、それぞれの明暗の階調に対応した色相が、だいぶ定まってきます。
近似色が選択肢の一つとなるようなグラデーションにすると、使う色が絞られます。

使う色が厳選される事で、必然性を持って、階調に適当な色を決める事ができます。
そして、その中で代わりとなる色を知っておく事で、諧調を構成する色の組み合わせの中に、バリエーションを作る事や、微調整がしやすい冗長さを含ませる、という意識です。
形を緩めて描く
次に、描く対象を選ぶ時の意識です。
表情が硬くない、柔軟な表現を選ぶ事で、配色制限に縛られない自由な描写を目指せます。
モチーフや素材などの形が、定まりにくいものを対象に表現する事で、色が範囲外にはみ出ても、形状の許容範囲が広い分がそこを吸収してくれます。
例えば、
森や雲などの自然物
アナログのブラシのようなタッチ
など、自らの意思・手で、形状を描く時の流れをコントロールがしやすい表現が、SCREEN2のキャンバスで描く絵に、伸び伸びとした印象を与えます。

近似色と併せて使うと効果的です。

遠くから見た分には違和感が少ない、絶妙で大胆な描写ができます。
必ずしも、細かさや正確性を中心に据えて、描く必要はありません。
制約を感じずに描く方法の中で、制約を感じさせない、無駄のない描写にする必要は無いんだ、という対照的な意識によるアプローチです。
より制約あるグラフィックを用いる
さて、いきなり冒頭の見出しに対して矛盾を感じる文章が来ましたが、
MSXの描画制限の意識どころか、MSXである意識さえ、脱出していこうと思います。
8bit機のグラフィックの中には、ZX Spectrum など、8x1ではなく
「8x8ピクセル中に最大2色」という制約を持つものがいくつか存在します。

原色から成る8色から、8x8pxごとに2色まで配色でき、各配色で明度を下げるかどうか選択できる。
黒はそれ以上暗くならない為、同時発色数はMSXと同じ15色。
(Aseprite,、PIxel Polizeiを使用して作成。)
色数制限の範囲が8x1である事は、数字的に比較すれば、8x8のグラフィックよりもだいぶ寛容であるように聞こえます。
ですが実際に描いてみると、配色の解像度が高くなったからと言って、描きやすさに繋がるとは限らない事を思い知ります。
むしろ配色を意識する箇所が沢山あるため、色数の管理に時間がかかってしまうのです。
8x1pxというサイズ感が、制約を想定して描く事を難しくしています。
これを無くすため、意識する色数制限の範囲を一度、描きやすい形に広げます。
同時発色を減らして描くのと同じ考えで、キャンバスをより描きやすい形式にする方法として、「よりマクロな制約を求める」 という事をします。
もう一つ、より制限された描画媒体を紹介します。
決まった文字や図形を配置する方法で描く、「キャラクタグラフィック」というものがあります。

8x8のキャラクタタイルを一覧から選んで配置し、
それを構成する2色は、原色から成る8色から選択できる。
(CGE7を使用して作成。(Windows))
レトロゲーム機の画面は、ドット絵が映って見える事は変わりませんが、キャラクタグラフィックは、その表現方法が違います。
この方法に特徴的なのは、8x8pxをコントロール可能な解像度として、タイルを配置する事です。
主に文章を描画する目的の、8bitPC内臓フォント・タイルセットは、選択肢の個数は限りがあり、任意に内容を変える事ができません。
ですが、タイルの中には設計者のセンスを感じるものもあります。
キャラクタグラフィックは、作者の個性・人為性を媒介した手札であると言えます。

Amstrad CPC のキャラクタタイルセットの
下位32個。
顔文字がかわいい
もう一つの特徴として、タイルセットの選択肢から、適切なタイルを選ぶ事は、ドット絵とは異なり意図通りにはいきません。
8x8pxのタイルの造形は複雑で、情報量が多い為です。
そのため、置く前と後で変化に富んでいて、予測がほとんど利きません。
描きこなすには、試行回数を増やすとともに、自分は偶然に任せる事を大事にしています。
時には操作ミスまでも味方にする勢いで、偶発を楽しみ、結果に寛容になる精神が、大胆な表現を可能にします。
キャラクタグラフィックを用いた表現には、このような表現媒体の仕様に寄り添うように、キャンバスに向かう事ができる感覚があります。
これも、制約に対する視点・向き合い方を、外側へ拡大する方向に持っていく、制約へのマクロな解決方法です。
キャラクタグラフィックは、ドット絵の文脈を含んでいるものの、その表現方法によって、ドット絵との違いを定義できます。

使用したタイルセットは、「C64 PETSCII」。
(lvllvlを使用して作成。(Web Browser))
ですが、もはやその過程を示さずとも、作品が作り方を伝えるような、強い画を表せる特徴を持っています。
表現手法を想像・共感でき、見通しやすい側面のある創作の様式を用いて、キャンバスを乗りこなすハードルを下げていきます。
制約を視野へ変える
制約は、表現方法を決める為のルールです。
キャラクタグラフィックでは、これがツールとして顕在化しています。
表現の難易度の上昇を定めたものではないはずです。
表現媒体の性質を共有する領域、業界・コミュニティにある普遍性と比較して、感じる表現力の差の印象が、ときに難易度に結び付いて感じられます。
定性的に頼れる固有性があると、感覚的な難易度から、より純粋に様式へと焦点が絞られます。
そこに、描きやすさだけでなく、個性的な表現の可能性を覗く事ができます。
タイル選びの個性が、作品から伝りやすいキャラクタグラフィックは、これを実現しやすい表現方法であると思います。
8bit機には特にはっきりと、描画媒体それぞれを識別できるユニークな特徴・画の強さがあります。

家庭用8bit機への移植による、パックマンのスプライトキャラクターの変化。
最上段がアーケード版原作。
(Pac-Man Comparison Evolution 72 Versions - Gameplay Sprites Deaths より)
制約が成り立たせる形態を通して、認識可能となるキャンバスが、8bit 2DCGの醍醐味です。
より広いレトロハードの描画機能の視点や、違った表示方法を持って向き合う事で、独自の表現の強みや、魅力を見出せるものであるように感じます。
より制約あるグラフィックを用いる事は、元の表示性能がもたらす表現の難易度に対する、直感的な印象から離れます。
遠ざかった先からは、客観的な視点が効きます。
下限を知る事で、制約の厳しさではなく、画面の捉え方が一つでは無い事に気付けるようになります。
そして、それらの描画媒体の性能に対して、表現には自由度と、寛大さがあるという事を知る事にも繋がります。
大切なのは、既存の観念に囚われないマクロな目線と、実地的な姿勢です。
視野を広げ、違う描画のアプローチを取り入れる事で、描きやすく、新機軸として発想できる、大胆な表現が見えてくるのではないでしょうか。

制約という表現媒体
さて、ここまで「2色で描く」や「より制約あるグラフィックを用いる」事などについて字にしてみました。
これらの方法は、描く間に制約を感じる瞬間を減らし、完成の見通しを良くします。
これはメリットではありますが、制作過程の全体を通して見れば、逆効果でもあります。
制約がもたらす画面の固有性を、減らしてしまう為です。
そのまま他のレトロハードと下位互換性のある画面として、絵を完成とさせてしまうと、MSXの制約をもってして描く意味が無くなってしまいます。
そのため最終的には、良い意味で制約を感じさせる要素のある、制約を表現とした絵にする必要があります。
このような絵を何の為に描いているのかはっきりさせる為、MSX SCREEN2における、それらしいグラフィックの特徴・制約の視覚的な象徴は、どんなところにあるのか考えてみます。
横8ドットと鮮明な色彩
8x1という範囲は、
横方向は、識別可能な最低限の2色
縦方向は、最大限の配色の自由度
という少し極端で、半端な性質があります。
それを多くのマス目で意識する事になる為、配色の選択にとことんこだわる事で、表示性能の強みが発揮されていきます。
この性質によってSCREEN2では、縦方向の混色の自由度の高さによって、色彩的な印象の限界を押し進める事ができます。
また同時に、範囲制限による横縞の形状的な特徴が表れます。

描いているとよく、色が複数の範囲をまたぎ漏れる事で、不自然に区切られた直線が現れざるを得ない状況が出てきます。
横8ドットの変化が徴証となり、不自由ないものに感じていたドット絵が、そのグラフィックの制約に準拠しているという事実を顕わにする瞬間。
その時、さらにMSX2パレットの高彩度な色が牽引し、SCREEN2の固有性をより強固なものにします。
この二つの関係が、MSX SCREEN2の、視覚的な象徴となります。
この制作上の体験を、鑑賞者にも伝え、共有します。
ここから、表現として
横に厳しい色数制限による造形
彩度の高い色彩
というこれらの特徴を、効果的に作品に取り込みます。
「効果的に作品に取り込む」 とはつまり、
制約の視覚的特徴が、表現に対して一致感があり、的確であればある程、よりこれらの存在意図が発揮されるという事です。
これが納得感のある鑑賞へと繋がっていくはずです。

制約を完全に感じさせないように描いた絵は、きれいかも知れません。
ですが、描画処理媒体に向き合う姿勢を考えると、特徴を発見して、既存の印象を拡張するような絵の方が、より美しい態度であるような気がします。
範囲内の色数制限という制約からでしか、生まれない表現を発想していく。
この意識が、キャンバスへの筆致に説得力を持たせます。
そして、それが作品のエッセンスとなります。
(制約に適応した能力を作品価値として示唆する意識は無くします)
このような発想を持つ事で、表現の選択肢が広がり、たとえ自由なキャンバスであっても、表現とした制約を適用させる事ができます。
キャンバスには、範囲内の色数制限以外の、パレットやキャンバスサイズの基本的な要素は存在しています。
今あるドットを表現する平面上にも、ドット絵の普遍性のルーツを感じ取る事ができるのです。
レトロゲーム機にある、グラフィックに象徴的な要素とは何か。
これを抽出し作為的に適応させる事ができれば、制約という型を破って行っても、作品としての価値が出てくると言って過言ではないのではないでしょうか。
まとめ
MSX SCREEN2 を描く為の工夫から、そのグラフィックのアイデンティティについて考えてみました。
今回はMSX SCREEN2を例にとりましたが、制約の特徴の現出可能な規模をどの位コントロールできるかは、ゲーム機によって大きく異なり、個性豊かです。
これに留まらず、他のマシンも体系的にまとめてみるのも楽しいかもしれません。
原理的な表現は、今ある表現の理解を深めるきっかけとなるはずです。
独創へのカギは、足るを知る事です。
ぜひ、制約という言葉を、作品スタイルの選択肢やツールとして、頭の片隅に好感的に置いておき、時には信頼も置いてみて頂ければ、この記事を書いた甲斐があります。
最後まで読んで下さりありがとうございました…!

