レトロゲーム(MSX/ファミコン他)のドット絵作品を公開する際にCRT効果を考えて拡大する。
前回の記事の続きです。前回はくっきりしたピクセルでのシェア画像サイズについて考察しました。
今回はブラウン管モニター（CRT）の特性を考えながら画像を拡大する考察をしてみます。
ブラウン管の解像度は
まずブラウン管の解像度はいくつなんでしょうか。正解を書くと自分が調査した情報では640x480です。しかし実際はもう少し複雑です。縦軸にも横軸にも考慮すべきことが色々あります。そもそも解像度はないとも言えます。
ブラウン管構造の構造を説明する事が自分にはできないので、先に詳しい非常に詳しい情報があるページを張っておきます。（ナムウィキ https://ja.namu.wiki/w/CRT ）読み応えありますが面白いです。
そのwikiページ記事内からリンクしているページにあるLCDとブラウン管のドット絵の見た目の違いをまとめたページ、ことらもとても面白いです。ファミコンやメガドライブ？やネオジオ？やスーパーファミコン？での画像比較がそろっています。https://www.dogdrip.net/372618326
インターレース表示
有名なところですが、一応これは解説します。CRTの縦解像度は480ですが、実際は1回に240ドットを1ラインずつ交互に、1回目は奇数行、2回目は偶数行のようにビームで発光させます（走査線）。MSX２には奇数ラインと偶数ラインで違う情報を割り当て、縦のドット解像度を2倍にする機能が存在しますが、ちらちらして見ずらいので広く使われはしませんでした。おおよそレトロゲーム機やレトロPCのCRTにおいては縦の解像度は240である、と考えていいと思います。
横のCRT解像度は実は幅がある
結果として画面表示は縦240ドットに対する４：３の比率で横640ドットの大きさに（左右に隠れて見えない部分がある事を考えなければ）なりますが、ここはアナログ回路なので解像度がないと理解するのが正しいようです。横方向にはよくにじみますし、CRTの性能によって実質的な内部解像度は330～440程度とします。情報ソースがありませんがCHAT GPTさんが何度もそう教えてくれました。（AIなので自信満々に間違っているかもしれませんが、この後のプログラムではその想定で処理がうまく行ったのでひとまず正しいとします。）
ゲーム機の縦の解像度とCRTのライン数のずれ
ここに少しweb等で集まる情報だけでは混乱する仕様があります。ファミコン・PCエンジンの場合縦のドット数は240でこれはCRTの走査線数（の半分）と一致しますが、実際に見えていたのは224ドット程度と言われます。この224ドットを240ラインに拡大してマップするのか、240ラインに240ドットをそのままマップしていて、隠れている部分をカウントしないと見えている部分224ドットになるのか。
先ほど紹介したdogdripのページのドット絵を（ファミコンではないですが）よく観察すると…かなりにじんでいるものの、CRTの縦のライン数はLCDでの縦のドット数と等しいことがわかります。
横へのにじみはかなりあります。商品によっては特に赤（ついで緑）のにじみが信号の特性上大きかったなどの情報もありましたが、確かにこのドラキュラ伯爵？の目は形が判別できませんし、グレーの部分にも赤みが染み出ている個所があるようにも見えます。
さらに画面全部のソニックの比較があったので（全体像はリンク先で）ライン数とドット数を数えたところ、???ｘ223ライン・320x223ドットとなりました。CRTの横ドットは不明瞭で数えるのが難しかったです。ファミコン以降もほとんどのゲーム機は縦224ドットの解像度であったようなので、計測された223ドットはまあ1ドット足りませんが元絵の224ドットをそのまま縦に2倍で拡大して最終640x448ドットしてCRT上での画像を考えて良さそうです。
さらにMSX1では縦のドット数が192でMSX2だと212だったりしますがこれをそれぞれ240ラインまたは224ラインにスケールするのか。もしもそれぞれのドット数をそのまま拡大するとすれば MSX1の１ドットはMSX2よりも縦に長いという事になります。MSX2でMSX1モードの画面を表示する際は上下に10ドット分の背景色の余白が入っていたと思いますが、MSX1実機はどうだったでしょう。所持したことがないのでよくわかりません。youtubeなどを見てもエミュレーター画面がほとんどで、実機映像こんどは正確に状態を把握しずく正解が見えづらいのです。
この後具体的にCRTの縦横解像度を考慮した拡大処理をプログラムで作りますが、見栄えのバランスでファミコンもMSXも1ドットの縦横比は同じ最終ドット数は640ｘ元ドット絵の高さの2倍とする事にしました。
ところでニンテンドーDSも256x192の解像度なんですね。何かのゲームが【上下片方の画面だけなら）MSXに移植できそうです。
MSXの縦192・212ドットの謎
MSXその他SEGAマーク3マスターシステムなどでは縦192または212ドットいう解像度が出てきます。これもシンプルに縦2倍にするだけでいいでしょうか。
MSX1他 192ライン
良い写真資料が見つかりませんでしたがブラウン管でのゲームの動画をアーカイブしておられるチャンネル（CRT Pro Monitor VIDEO GAME ARCHIVES）がyoutubeにありましたので、目視で数えてみます。業務用のCRTモニタを使っているらしく実際に家庭でユーザーが見た様子よりもずっとくっきりしていそうですが、画面構成を確認する良い資料になりました。
このMSX1グラディウスのタイトル画面ではおおよそ縦が190ライン、ゲーム中の画面では敵スプライトが縦16ラインで表現されているのがわかりました。ドット数と一致します。
このザナドゥの戦闘画面では8x8のキャラパターンが32x24並び解像度が256*192である事、余白は背景色で埋められること（魔法の効果で緑になっている、注目すべきことに画面右側にも余白のみどりが1ドットほど出ている）が確認できます。余白が黒でなくなる事がある事を考えるとMSX1のドット絵は上下に帯を持たせるのが正解かもしれません。エミュレーターではこの余白はカットされてしまってる気がします。上下の余白部分はライン数が確認しずらいですが、ともに15か16なので上下に32ライン＋192ライン＝224ラインで合っていそうです。
※ 今初めて気づきましたが、ザナドゥのフォントはMSX版も横6ドットなんですね。処理がめんどくさそうです。
MSX2以降 212ライン
こちらも CRT Pro Monitor VIDEO GAME ARCHIVES 様の動画から悪魔上ドラキュラを見てみます。こち画面形式なので16x16のマップパターンが確認しやすいのです。横は普通に16パターンで256ピクセルあるのが確認できます。縦はおおよそ210ラインあります。ボスのメデューサを倒した後画面が白く点滅しますが、その際に画面の上下に余白がある事が確認できます。（左側にも1ピクセルくらい余白があるかも？これらはCRT機種によるブレがあるのかと思われます。）
目視で数えて、上に6ライン下に8ライン余白があります。16x16ドットのマップチップを縦に並べると13個がMAXで208ドット。解像度212ドットから差し引くと4ドットあまるのでこれをどう割りふったか？ファミコン224ドットから212ドットを差し引くと12ドットです。上下に6ドットずつ振り分けるとしたの下側が2ドット余るので本来の4ドットとあいませんが、まあ目視なので、MSX1と同じく212ライン＝212ドットで、224ラインへのあまり分12ラインが補完されると考えて良さそうです。
こちらのEGG版では点滅が確認できません。やはり周辺色処理はカットされてしまっているんですね。1ピクセルの比率も横長でなく正方形に見えます。けっこう違いますね。
アレスタも見てみます。背景色が常時画面にいるので計測しやすいです。
暗い緑の枠以外のゲーム画面はおおよそ212ラインであると確認。上の余白は8ライン、下は6もしくは7ラインに見えます。やはり誤差はあるものの上下に6ライン足すで正しい処理になりそうです。ちなみにここでは左右の余白も広く表示されていますね。
拡大アルゴリズムを考える
以上を踏まえてスケーリングのアルゴリズムを考えます。
元画像に対して最終の縦ドット数は480ではなく448。残り32ドットは隠れているものと考える。元画像は単純に縦に2倍して、余白が欲しい場合は448になるまで埋める。ファミコンやPCエンジンの場合余白はない。
横最終ドット数は、前回の考察であるように7:8の横長ピクセル比率であることを考えて 256*2/7*8 =585.142…=585ドットだが奇数だと計算誤差が大きくなりそうなので586ドットと考える。
左右の余白をくわえる場合は縦サイズの４：３で割り出した横ドット数448/3*4=597.33…ドットから、586ドットを引くと11.3ドットとなる。左右に6ドットほど足すことになる。
つまりMSX2の場合上下左右それぞれに6ドット余白を（欲しいなら）持たせるといい。MSX1の場合は横が6ドット、縦が16ドットずつ。
ファミコンやPCエンジンの場合左右がかなりはみ出ていたという話もあり（MSXもそうなのかも？）上下左右とも余白がないのが正解。計算上横に6ドットの余りが出ているので、４：３か７：８のどちらかの計算が間違っているのかもしれない。CRTの機種差というところで４：３を疑うのがいいかもしれない。
さらに横幅を586ドットに拡大する前に、内部の解像度はもっと低かったという情報を考慮すると途中の各打率というものを持つことになる。
256->400とか→586の2段階で拡大すると劣化がシミュレートできそう。
プログラムで対応してみた
上記考察を取り入れたドット絵を拡大するプログラムを作って実際に使ってみました。
長々解説した割に普通です。まあ前回と同じく縦二倍、横を適切に伸ばしただけなので。ただトータルサイズは変わっています。
CRT内部の横の解像度という概念を作ったのでこれを強めにかけました。左右だけにボケが入ったのがわかるでしょうか。
この横幅586がCRTを考慮した画素データの基本なのであとは前回の考察のまま媒体に合わせてスケールを描ければOKです。MSX1画像の場合2.8125倍すると1080Pになります。同様にMSX2が 5.0943倍、ファミコンが 4.82143倍で1080Pです。
エフェクトを盛ってみた
この手の派手なプラグインは結構ありますが、元ドット絵がある前提で作っているものは少ないと思うので少し演出を盛ってみます。
スキャンライン
簡易的な物ですがもとのスケールがばっちりなので効果もばっちりです。あまりやると暗くなります。完全な黒を挟む場合ブルーム処理などを入れたほうがいいでしょうね。あまり好きではないです。
赤と緑チャンネルの左右ボケ
これはオーバーに入れてますが、RF入力かLINE入力でこんな色のしみだしが出ていた気がします。自分はこれが好きですね。
RGBサブピクセル
細かい模様が入ったように入ったように見えますが、
ブラウン管を近くで見たときのアレが入っています。でもこのエフェクト難しくて、RGBへの分解やればやるほど暗くなってしまうのとこの程度の最終ドット数だと正確なソレの形状まで作り出せないというのがあります。アレとかソレとか呼びましたがサブピクセルと呼ぶようです。そして頑張って作ったもののあまり好きではないです。
全部入り Noteヘッダー縦1006サイズ
発光フィルター的な処理をPhotoshopで施すので暗めに出ています。
うん、ここまでやればもりもりだと演出としてありかな...。
エフェクトとしてのCRT効果
CRTモニタ風であるとかVHS風であるとか言ったようなエフェクトは映像ソフト用にたくさん存在します。それらを使って派手派手に処理するのも言い出のですが、同時にドットをはっきり見せたいという気持ちもあるので、質のいいCRTモニタで見た雰囲気を出す、程度がドット絵作品としてはちょうどいいのかもしれません。
↑ エフェクト全部ほのかに入れました。拡大してじろじろ見てやっとわかるくらいがちょうどいい？
話は変わりますが、現物のCRTに実際にドット絵を映して写真撮影するっていう作品の作り方もやってみたいですね。部屋にでかいCRT置いとくのはちょっと嫌ですけど。
拡大エフェクトツールのダウンロード
何の説明もしていませんが、githubにあげておきました。コマンドラインツールです。参考にどうぞ。