ブラウン管のドット絵Pixel Art on a CRT

同じ絵を、液晶とブラウン管でThe same picture on an LCD and on a CRT TV
液晶(ドットそのまま)LCD (pixels as they are)
ブラウン管CRT

絵Picture

ここから下の設定は、右のブラウン管にだけ効きます(左の液晶はドットのまま)。「ドットの形」だけは、見くらべやすいように左右そろえます。

The settings below change only the CRT on the right (the LCD on the left keeps the plain pixels). Only “Dot shape” is applied to both sides so they stay easy to compare.

画面Screen

光る点のならび方の3種類です(家庭のテレビにも3つともありました)。細かさは3つとも 14型くらいのテレビを想定した同じ推定です。光る点の形のちがいは、寄ったときに見えます。全体の大きさでは本物の点が画面のピクセルより細かいので、画面の3ピクセルに合わせて描いています(近似。本物より粗く、何倍の粗さかは画面の左下に出ます)。

Three ways the glowing dots were arranged (home TVs used all three). All three use the same estimated fineness for a TV of about 14 inches. The shapes of the glowing dots show up when you zoom in. At full view the real dots are finer than your screen's pixels, so they are drawn at 3 screen pixels (an approximation, coarser than real; the lower-left corner shows by how much).

つなぎ方Connection

ドットの形Dot shape

当時のテレビでは、1ドットは横長に映りました。横 256 ドット・240本の絵では、横がたての 8/7 倍です。1行の絵の部分(約 52.1 マイクロ秒)にこのドットの速さだと約 280 ドットが入り、それが 4:3 の画面の横はばになるためです(240×4/3÷280=8/7。NESdev Wiki「Overscan」)。自分の画像は、横のドット数と行の数から同じように計算します。液晶やエミュレータで正方形のまま映すと、絵は少し細長く見えます。描き手がこの横長に合わせて絵を描いたかは、ゲームによってちがい、はっきりしません。両側に同じ形を使うので、仕切りの左右はずれません。

On TVs of the time, each dot appeared wider than tall. For a picture 256 dots wide with 240 lines, it is 8/7 as wide as tall: at this dot rate, about 280 dots fit in the picture part of a line (about 52.1 microseconds), and that spans the width of the 4:3 screen (240×4/3÷280 = 8/7; NESdev Wiki “Overscan”). For your own image, it is worked out the same way from its width and number of lines. Shown as squares on an LCD or emulator, pictures look a little narrow. Whether artists drew with this stretch in mind varies from game to game and is not clear. Both sides use the same shape, so the two halves stay lined up.

しくみを1つずつOne effect at a time

効き目の大きい順。「だけ」で、そのしくみだけを入れて見くらべます。

Biggest effect first. “Only” turns on just that one effect so you can compare.

    細かい設定More settings

    走査線の本数Number of scan lines

    家庭用ゲームの多くは、同じ行を毎回なぞる 240本の描き方で、行のあいだに暗いすきまが残りました。テレビ放送は 480本を半分ずつ交互に描くので、すきまはほとんど見えません。右のボタンは、240 行の絵を 480i で映したらどうなるかで、同じ行を半行ずらして2回描きます(本物の 480 行の絵ではありません。1行だけの細い模様が 1秒に30回ちらつくことは省いています)。縦が 240 行をこえる自分の画像は、いつも 480本の描き方で計算します。

    Most home video games drew 240 lines, tracing the same lines every time, so dark gaps stayed between the lines. TV broadcasts drew 480 lines, half at a time in turns, so the gaps were hardly visible. The right button shows a 240-line picture as it would look in 480i: each line is drawn twice, shifted by half a line (it is not a real 480-line picture, and the 30-times-a-second flicker of one-line-thin patterns is left out). Your own images taller than 240 lines are always computed with 480 lines.

    ドットクロール(ビデオ端子・アンテナ線)Dot crawl (composite and RF)

    色の波は1コマごとにずれるので、模様のふちの細かい点が 60分の1秒ごとに入れかわり、1秒に30回くり返します(にじみのちらつき)。目にはまざって見えるので、ふだんは2コマの平均を出しています。1コマずつ切りかえて、ちがいを見られます。

    The color wave shifts every frame, so the tiny dots at pattern edges swap every 1/60 second, repeating 30 times a second (a crawling shimmer). Your eye blends them, so the app normally shows the average of the two frames. You can switch to each frame to see the difference.

    このアプリについて

    昔のゲームのドット絵は、ブラウン管のテレビで見られることを前提に描かれていました。同じ絵を液晶で見ると、チェック模様や角がそのまま見えます。このアプリは、ブラウン管の見え方をしくみごとに計算して、ちがいを見くらべます。

    計算していること: ①テレビの信号(明るさと色を1本の線にまぜ、テレビの中で分け直す。色副搬送波の周波数・YIQ の式は NTSC の値、時間の刻みは当時の機械の一例)②電子ビームの走査線(明るいほど太るガウスの帯)③赤・緑・青の光る点のならび ④明るさの曲がり(ガンマ)⑤光のにじみ ⑥画面のふくらみ ⑦1ドットの形(ドットの速さから)。

    簡単にしているところ: 色の波は理想の正弦波です。当時の機械の多くは、決まった明るさの「四角い波」で色を作っていました。四角い波でも計算して比べたところ、にせの色の強さのちがいは 1 割ほどまででした(機械ごとの明るさの段や色の表はまねていません)。ビデオ端子の明るさは、色の波のまわり(3.58MHz の ±1.0MHz。幅は推定)だけを落とす「トラップ」で取り出します(くし形フィルタなし)。色の帯域は、ビデオ端子 0.6MHz・アンテナ線 0.5MHz・S端子 1.0MHz で、どれも家庭のテレビを想定した推定です(放送の I 1.3・Q 0.4MHz は送る側の値で、受けるテレビの多くは同じ帯域で戻していました)。ビームが明るさで(たても横も)太る割合・光る点の大きさ(14型くらいのテレビを想定)・光のにじみ(光の 12% が散る)・ふくらみの強さは推定で、実機の写真の見え方と見くらべて決めました。全体表示など光る点が画面のピクセルより細かいときは、画面の3ピクセルに合わせて描いています(本物より粗くなります。何倍の粗さかを画面の左下に出しています)。光る点の明暗は、いまの画面がそこまで明るく光れないので弱めていて(すきまも少し光る)、白は光の量で液晶の約45%の明るさになります(1280×800 の全体表示で測った値)。中くらいの明るさは約9割(ガンマのちがいのぶん)。アンテナ線のノイズは演出に近いものです。左の液晶は、いま見ている画面に1ドットを四角く大きく写したものです。

    実在のゲームの絵は使っていません(絵はすべてこのアプリで描いたもの)。自分の画像は、この端末の中だけで計算し、どこにも送らず、保存もしません。

    おもな出どころ

    • Timothy Lottes「crt-lottes」(パブリックドメインの CRT シェーダー。走査線・ブルーム・マスク・ふくらみの考え方の土台)— libretro/glsl-shaders
    • NTSC: 色副搬送波 315/88 MHz(3.579545MHz)、放送の I 1.3MHz・Q 0.4MHz — Wikipedia「NTSC」
    • YIQ の式(FCC の NTSC の値。一次資料の FCC の基準は読めていないので、Wikipedia の引用で確かめた)— Wikipedia「YIQ」
    • ブラウン管に似せた明るさの曲がりの基準(ガンマ 2.4)— ITU-R BT.1886(2011)
    • 1ドット=色副搬送波の 8/12 周期、1行ごとに 4/12 ずれる(当時の機械の一例)— NESdev Wiki「NTSC video」
    • 1ドットの縦横比 8:7(同じ機械の例)— NESdev Wiki「Overscan」

    使っているもの

    WebGL2。フォント: Google Fonts(SIL Open Font License)。

    About this app

    Pixel art in old video games was drawn to be seen on CRT (cathode-ray tube) TVs. On an LCD, the same picture shows its checkerboard patterns and sharp corners as they are. This app calculates how a CRT shows the picture, one mechanism at a time, so you can compare.

    What it calculates: (1) the TV signal (brightness and color mixed into one wire, then separated again inside the TV; the subcarrier frequency and YIQ equations are NTSC values, and the timing is one example of a machine of the time), (2) the scan lines of the electron beam (Gaussian bands that widen when bright), (3) the pattern of red, green and blue glowing dots, (4) the brightness curve (gamma), (5) glow, (6) the curved glass, (7) the shape of a dot (from the dot rate).

    Simplifications: the color wave is an ideal sine wave. Many machines of the time made color with fixed-level “square waves”; computing it that way too, the false colors differed by about 10% at most (each machine's brightness steps and palette are not copied). On composite, brightness is taken out with a “trap” that removes only the band around the color wave (3.58 MHz ±1.0 MHz; the width is an estimate), with no comb filter. Color bandwidths are 0.6 MHz for composite, 0.5 MHz for RF and 1.0 MHz for S-Video, all estimates for home TVs (the broadcast I 1.3 / Q 0.4 MHz are the sender's values; most receiving TVs decoded both at the same bandwidth). How much the beam widens when bright (both up-down and sideways), the dot size (assuming a TV of about 14 inches), the glow (12% of the light scatters) and the curvature are estimates, chosen by comparing with photos of real CRTs. When the dots are finer than your screen's pixels (such as at full view), they are drawn at 3 screen pixels (coarser than real; the lower-left corner shows by how much). The bright/dark contrast of the dots is reduced because your screen cannot shine that brightly (the gaps glow a little), so white comes out at about 45% of the LCD brightness in amount of light (measured at full view, 1280×800); mid tones at about 90% (the gamma difference). The antenna noise is closer to a visual effect. The LCD side simply shows each pixel as a large square on your screen.

    No pictures from real games are used (all pictures were drawn by this app). Your own image is processed only on this device; it is never sent anywhere or saved.

    Main sources

    • Timothy Lottes, “crt-lottes” (a public-domain CRT shader; the basis for the scan lines, bloom, mask and curvature) — libretro/glsl-shaders
    • NTSC: color subcarrier 315/88 MHz (3.579545 MHz), broadcast I 1.3 MHz and Q 0.4 MHz — Wikipedia “NTSC”
    • YIQ equations (FCC NTSC values; we could not read the original FCC rules, so this was checked against Wikipedia's citation) — Wikipedia “YIQ”
    • Reference brightness curve modeled on CRTs (gamma 2.4) — ITU-R BT.1886 (2011)
    • One pixel = 8/12 of a color-subcarrier cycle, shifting 4/12 per line (one example of a machine of the time) — NESdev Wiki “NTSC video”
    • Dot aspect ratio 8:7 (same machine, as an example) — NESdev Wiki “Overscan”

    What it uses

    WebGL2. Fonts: Google Fonts (SIL Open Font License).