僕が初めて買ったパソコン雑誌は、Oh!X 1990年5月号でした。
Oh!シリーズは、ソフトバンクから出ていた機種別専門誌で、Oh!X(旧Oh!MZ)は、シャープ系のパソコンを対象としていた雑誌です。
他の主な同シリーズとしては、NEC系のOh!PC、富士通系のOh!FM等。
今回は、そのOh!X 1990年5月号の中に載っている「SCRAMBLE」というゲームについて取り上げてみます。
SCRAMBLE
ゲームの動画は、こんな感じ。
シンプルな表示ですが、1ページの半分に収まる短いプログラムなので、そういうものです。
このプログラムの特徴は、「3D風のスクロール」と、「背景の回転」にあります。
X68000上のX-BASICという、説明すると長くなるので省きますが処理速度の遅い環境で、どうやって実現しているのかが、今回の主題です。
3D風のスクロール
かつてのパソコンの表示機能には、「パレット機能」というものがありました。
SCRAMBLEでは、「65536色の中から一度に16色まで選んで表示できる画面モード」が使われています。
画面上の各ピクセルに、0から15までの番号を割り当てることができて、番号ごとに色を指定することができる、というのが、パレット機能。
一度に限られた数の色しか表示できないかわりに、例えば「番号が3のピクセルの色は白」と指定すれば、画面内の番号が3のピクセルの色をいっぺんに白に変えることができます。
このプログラムでは、各ピクセルに1から12までの番号を割り当てた、4ピクセル×3ピクセル=12ピクセルのタイルを並べ、12個のパレットを2色に塗り分けるようなイメージで、3D風のスクロールを実現しています。
説明だけでは分かりにくいので、デモンストレーションを用意しました。
1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 | ||
5 | 6 | 7 | 8 | 5 | 6 | 7 | 8 | ||
9 | 10 | 11 | 12 | 9 | 10 | 11 | 12 | ||
1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 | ||
5 | 6 | 7 | 8 | 5 | 6 | 7 | 8 | ||
9 | 10 | 11 | 12 | 9 | 10 | 11 | 12 | ||
内容は同じだけど中身がちょっと別方式のデモンストレーションも用意。
1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 | ||
5 | 6 | 7 | 8 | 5 | 6 | 7 | 8 | ||
9 | 10 | 11 | 12 | 9 | 10 | 11 | 12 | ||
1 | 2 | 3 | 4 | 1 | 2 | 3 | 4 | ||
5 | 6 | 7 | 8 | 5 | 6 | 7 | 8 | ||
9 | 10 | 11 | 12 | 9 | 10 | 11 | 12 | ||
このサンプルでは、4ピクセル×3ピクセル=12個のピクセルを持つタイルを4つ並べていますが、どの時点でも同じ番号のピクセルは同じ色 ― 例えば1番のピクセルは、4つとも常に同じ色 ― であることに注目しましょう。
つまり、この方法を使えば、4ピクセル×3ピクセルのタイルをどれだけ並べても、1度にたった12個のデータを書き換えるだけで、スクロールが実現できる、ということです。
もし、スクロールするたびに画面を書き換えるのであれば、SCRAMBLEのプログラムでは256ピクセル×256ピクセルの画面モードを使っているので、その半分としても、256ピクセル×128ピクセル=32768ピクセルをいちいち書き換える必要があります。
少ない処理で大きな効果を得る優れた方法です。
背景の回転
背景も、そのつど回転させて描く、というのは、なかなか大変です。
なのでSCRAMBLEでは、背景は予め全部描いておいて、表示だけ切り替える、という形で、回転を実現しています。
このプログラムで使われている画面モードは、「1024ピクセル×1024ピクセルの仮想画面を用意して、その中のどこでも256ピクセル×256ピクセルを表示できる」というものです。
1024ピクセルの中の256ピクセルなので、4×4で最大16画面分を、予め描いておける、ということですね。
実際に使われているのは、左右各7パターンと真ん中の計15画面分です。
こちらも、言葉だけでは分かりにくいかと思うので、デモを用意しました。
![]() ![]() |
こちらも上と同様に、別方式を用意。
![]() ![]() |
真ん中の窓になっている箇所が表示部分で、それ以外の薄くなっている部分は、表示されていない部分です。
左右のボタンを押すと、表示部分がアニメーションになっているのが見えるかと思います。
このテクニックは、現在使われている「CSSスプライト」という技術に通じるものがあります。
CSSスプライトというのは、例えばWebページでアイコンがたくさんある場合に、1個1個別々の画像ファイルにすると、いちいちファイルをWebサーバーに要求するために、表示が遅くなってしまう可能性があります。
そこで、アイコンを全部一枚の画像にまとめてしまって、そこから必要な部分だけを切り抜いて表示させることで、処理の効率を上げよう、というのが、CSSスプライト。
今回取り上げたような昔のテクニックも、例えばHTMLでゲームを作ろうと思った時など、意外と参考になったりするのです。