8bitコンピュータ風コンソール画面をthree.jsに移植する。

以前WebGLで作って放置していた8bitコンピュータ風コンソール画面をthree.jsに移植してみた。

https://github.com/sfpgmr/3d_codes/tree/master/snapshot/00005/20161126

この画面は8bit時代のPC風の、8色カラーグラフィックのVRAMおよびパレット、キャラクター画面をエミュレートしている。

• 画面サイズは320X200ピクセル
• 画面バッファはR/G/Bの各プレーンに分かれており、1bit=1ピクセルとなっている。よって1Byte=8ピクセル。
• 画面バッファのビットをセットするとそのピクセルが描画される。
• 文字表示用のプレーンと文字装飾をするためのアトリビュート画面を用意。文字および、アトリビュート画面の仕様はMZ-700に倣っている。

画面バッファの内容を描画する部分はGLSLで書いた。

これを使うと8Bit時代でよく見られたグラフィック・アルゴリズムをJSで以下のように書ける。ただそれだけのための仕組みである。

  pset(x, y, color) {
    let offset = (y * this.bufferXSize + x / 8) | 0;
    let bitpos = x % 8;


    let b = (color & 1) << bitpos;
    let m = ~(1 << bitpos) & 0xff;
    let g = ((color >>> 1) & 1) << bitpos;
    let r = ((color >>> 2) & 1) << bitpos;

    this.bufferB[offset] = (this.bufferB[offset] & m) | b;
    this.bufferG[offset] = (this.bufferG[offset] & m) | g;
    this.bufferR[offset] = (this.bufferR[offset] & m) | r;
  }

WebGLだけで書くよりもコード量は少なくて済む。特にシェーダーで使うユニフォーム変数あたりのところ。

これを使ってグラフィックス・アルゴリズムの復習をしようかなと思ったけど、Rise of Tomb Raiderで遊んだせいか、またゲームを作りたくなってきたんだよね。。