メインコンテンツへスキップ
見出し画像

MSX1風CG1枚絵の中間色表現には横じまディザを勧める理由

    注意点

    この投稿は MSX1ルールで大きな1枚絵のCGを描く事を想定した考察です。スプライトやマップチップ(背景パターン)など、ゲーム制作を想定したドット絵では成り立たないロジックの紹介であって、ゲームドット絵には全く別の方法論があるかと思います。最終的に好みによる部分もありますので、他のやり方がダメという趣旨の記事ではありません、ご注意下さい。

    横じまをメインにしてます

    自分のMSX1風CG作品(手描き)には市松模様ではなくて横じまの中間色表現がよく登場します。

    画像
    左が市松模様、右が横じま模様

    これは狙ってやっていて、横じまを採用した方が手作業をすすめる上でいろいろと有利な点が多いからです。(作成中のコンバーターでも横じまでの中間色再現を優先する処理になっています。)けっこう面白い考察をしていると思うのでポストしておきます。

    以下、市松模様のディザの事を単にタイリング、横じまディザの事を横ライン塗りと呼称します。

    横ライン塗りがMSX1風CGに好ましい理由

    8ピクセル内に2色までルールを犯しずらい

    当然ですが、基本的にはこれが理由です。(ここから派生する長所をこの後紹介していきます。)一応解説するとMSX1(と同系等のビデオチップを積んだゲーム機やパソコン)では画面表示に関して横8ドット内に2色までという厳しい制限があり、タイリングの場合横8px内に2色をすでに消費しています。横ライン塗りの場合は縦に色が分離しているので横8ドット内は1色ですみ、描きこみを追加していっても制限に引っかかる割合がかなり減ります。

    3色目が乗せられる!

    タイリングエリアに別の色で円を描く例を考えてみます。

    画像

    下のようになりますが、横8色内2色ルールを犯している部分が結構あります。

    画像
    このように塗りたいが

    緑色で強調した部分にルール違反があります。

    画像
    広い範囲に違反がある

    これをごまかして修正するため、円の形状を8ピクセル境界に移動させて変形したり、背景または円の内側の色を一部化けさせたりして対応する事になります。

    画像
    外側を色化けさせた例

    ごまかし方は色々ありますが、色がはみ出て化けてしまうような事象はMSX初期のCGによくあったのではないでしょうか。

    画像
    悪い例で申し訳ない:ウィングマン 1985 © ENIX

    次に横ライン塗りで同じことをしてみます。

    画像
    ばっちり表現(円の変形は誤って適用したが必要ない)

    この状態では横8ピク内2色の違反が全くありません!円の形状を変形する必要もなく、新たなオブジェクトを書き加えるときに大変に便利です。

    境界エッジがガタつかない

    最初のタイリング内の円の例ですが。下記のように円を塗る色をタイリング構成色から拝借して代替する事もよくあります。印象は変わるもののルール違反はおきません。

    画像
    円ぽくなくなった

    しかし、アウトラインがガタガタしがちです。影色をタイリング中間色で塗る場所にもこのような現象がよく見られます。肌の影に適用した場合、肌荒れして見えたりするので注意が必要です。

    画像
    肌のハイライトや影を模したもの

    この現象はファミコンでもPCエンジンでもPC88でもPC98でもドット絵である限り起こるのですが、解像度が高い機種の場合は目立たないためあまり問題になりません。

    同じことを横ライン塗りで行うと以下のようになります。

    画像
    比較的エッジ形状がきれい

    少し形が崩れてはいるものの、そこまで気にならないのがわかるかと思います。

    中間色同士が隣接できる

    横ライン塗りでは3色目が追加できるという事を最初に書きましたが、さらに追加した塗りのエリアに横ライン塗りを配置しても8ピク内2色ルールを犯しません。タイリングでは中間色同士を隣接させるのは難しいです。

    画像

    綺麗な色の少ないMSX1パレットにおいて、これは重要ポイントとなります。

    後から配色を変えられる

    タイリングを多用して絵を描き進めた場合、周辺の色と巧みな配置の関係になってしまい、色味を容易に変更できないような事が出てきます。タイリングの構成色が周辺でも利用されているような時です。身動きが取れない状態に。

    しかし、横ライン塗りなら、いつでも(※A)中間色塗りを別の中間色に置き換える事が可能です。先の影とハイライト表現の場合の例で、

    画像

    タイリングの構成色を置き換えたのが上の画像です、ルール違反箇所が多々確認できますが、

    画像

    横ライン塗りの構成色を置き換えたこちらはエラー個所がありません。横ライン塗りであれば、作品制作の最後に全体の調整で全く別の色に置き換えても問題が起こらないわけです。これは強い。

    ※A 中間色を2色合成ではなく単色として考え、横8ピクセル内に3色が初めから存在する場合を除く。この状況はそもそも作らないようにする。そのためのワークフローについてはそのうち詳しく解説します。

    調整作業が速い

    使うツールにもよりますが、1ドット単位のポチポチとした修正をする場合、タイリングの調整よりも、ライン塗りの調整のほうがずっと楽に行う事が出来ます。

    MSX1ぽい

    MSX1のゲーム画面は(横8px内2色制限の元で綺麗な絵を描こうとした結果)横のラインを強く感じる見た目になっている事がよくあります。特にグラデーション系ですね。MSX1風のCGを描く際は中間色表現に積極的に横ライン塗りを使う事でMSX1らしさを強調する事が出来ます。

    画像
    ガリウスの迷宮 ©1987 KONAMI

    2020年代中盤の今MSX1風のCG絵を描く場合、当時は無理だった美しいCGに仕上げたいという気持ちが強かったりするのですが、同時にMSX1らしさは残したいところです。つたない表現(色がはみ出すなど)であることも含めてMSX1風と言えるのですが、それをあえてやりたくはない。このようなジレンマの中で、横方向を強くを感じる美しいCGに仕上げるというのは良い落としどころに思えます。

    走査線表現に見えてかっこいい(かも

    ドット絵にCRT風エフェクトとして走査線が施される事がよくあります。CGに横ライン塗りを多用する事で、走査線的なクールな雰囲気がかもし出る気がします。

    画像
    走査線の例:YS2 1988 © 日本ファルコム

    黒いアウトラインにチャレンジ

    マイコン初期ADVゲームで典型的だった絵の描き方で黒いアウトラインに中間色を塗っていく作りがあります。これはMSX1の8ピク内2色制限と致命的に相性が悪いです。塗り2色の間に黒という3色目が強制的に入り込んできてしまうからです。

    画像
    デゼ二ワールド 1983 © ハドソン

    MSX版のサラトマやデゼニランドが青と白の2色画面だったりしたのは他機種と同じ方法でいわゆるバケツ塗りを行う事が難しかったからでしょう。続編のデゼニワールドは発売さえされてませんね(絵を描くのが難しい事が未発売の理由ではないかもしれませんが。beeカード?の容量制限と採算性とか?)

    この黒いアウトライン+塗り表現という難敵に横ライン塗りを駆使して臨んでみます。無謀な戦いでしょうか。

    画像

    まず上の画像の塗り方では横8ピクセル内2色ルールを犯しているところがたくさん存在してしまっているのですが、

    画像

    このように調整した場合、ルール違反箇所が無くなります。2つの中間色の構成要素に共通な色を持たせ、その境界には黒ドットを配置、構成要素が異なる部分の境界にはどちらか(暗いほうが良い)の色を配置します。この絵を引いた目線で確認すると普通にアウトラインが置かれているように感じられます。色味が限定されるのでいつでもこの手法が使えるわけではないですが、小さなエリアでのごまかしとして適用できることはそこそこあります。

    さて、最初に紹介したザースのミリカのMSX1リライトCGは、黒のアウトラインを描きたい場所にスプライトを配置した、というテイで仕上げた物です。

    画像
    ワクで囲った部分がスプライト

    このようにスプライト動員も併用すれば、黒アウトライン+塗りのADV絵もそこそこMSX1で再現できそうです。サラトマ描きたいです。

    横じまタイリングの弱点

    すでに少し言及していますが、横ライン塗りはある程度大きいエリアをに割り当てられないと中間色にみえず、単なる横じまの模様に感じてしまいます。対してタイリングの場合はエリアが狭くても割と中間色に見えます。

    市松模様・縦じま・横じまではどれが中間色として美しいか?

    このトピックも途中まで書いたのですが、MSX1以外の機種にも通じる(ファミコン、PCエンジン、メガドライブ、スーパーファミコン…)話になるので別投稿に分けることにしました。結構奥深いです。

    タイリング表現が好ましい場合

    ここまで横ライン塗りを推してきましたが、横じまを使わないほういい場合もたくさんあります。いくつか例を出します。

    小さい絵をかくとき

    繰り返しですが、ゲーム用のパーツなど小さいドット絵を描く場合は横ライン塗りを避けたほうが良い、というか効果がないですし細かい形の変化が表現しづらくなります。ドット絵は巧みな計算のもとに1つ1つのピクセルを置いていかないといけないので、どの中間色ディザリング手法がいいという話ではなくなりますね。

    自然物を表現する時

    岩や地面など自然風景を表現する際はランダム感やゴツゴツ感が出せるタイリングの方が適しています。横ラインの場合は人工的なものに見えてしまいます。

    荒れた表面を表現したいとき

    上と似ていますが、汚し表現を入れたい場合などはやはりタイリングの方が向いています。クリーチャーの絵や渋いおじさんの肌の影色などの表現ではタイリングをメインに使いたいですね。

    温かみのある絵を描きたいとき

    光が広がっているような表現の場合は段階を持ったタイリングでぼかしていくのが望ましいです。横ライン塗りだと方向性が強く出てしまいますし、固い・冷たい感じがします。

    画像全体にメリハリを出したいとき

    画面全体が横ライン塗りで表現されていると単調になるので、メリハリを出すためタイリングを差し込める部分には積極的に差し込むといいと思います。メリハリを出すという目的では、たとえ本来の色味からずれてしまっても基本色ベタ塗り部分も併用したほうがいいですね。

    ディザパターン適用のワークフロー

    これだけタイリングが適切な状況を羅列すると、タイリングメインにした方がいいんじゃないか?感が出てきますが、すでに述べた通りMSX1の横8px制限的には横ライン塗りのほうが扱いやすく都合がいいのです。

    ワークフローとして、CG作成の序盤から中盤まではベタ塗りや横ライン塗り中心で作業を進めて、後半の調整フェーズで置き換えるべき場所をタイリングにしていく、という手順を採用すると手戻りや失敗が少なく修正も速いです。クオリティも高め安定します。思い切ってタイリングはしない作風としてしまえば、納期の短い受注仕事(そんな仕事はない)にも対応できます!

    ディザなしで進めよう

    と、ここまで説明しつつもなんですが、自分はMSX1風CG制作の序盤ではライン塗りもタイリング無しでMSX1では出せない中間色をあえてベタ塗りしておく(横8px内に2色ルールは意識する)を推奨しています。なんやそれ。

    これまた作成中(とはいえもう実用段階)のPhotoshop用MSX1風CG作成ツールキットでMSX1では利用できない中間色が拾えるようになっているのは、その理由からです。これの考察についてはまたいつか。

    ヘッダー画像のグラII

    横ライン塗りを強く適用して描かれた妄想版MSX1版グラIIタイトル絵です。グラ2ではないです。

    画像

    PhotoShop上で既存画像のレタッチや切り貼り・色彩調整して作った元絵を自作コンバーターでMSX1色+横ライン塗りに変換し、タイトルロゴと白く飛んでいる部分だけ手作業で書き加えて完成させました。作業1日弱くらい。作業時間の3割はロゴを描いていた気がします(笑)。無茶な構成の絵もけっこうきれいに完成してくれますね。

    次回は作例か色のウソの付き方についてまとめるつもりです。

     
     
    Blender/Photoshop/Substance/After Effects/Premier PRO/Python/AI関連の人です。MSXドット絵関連は息抜き投稿のはずが現状事実上のメインコンテンツに。

    あなたへのおすすめ