僕が初めて買ったパソコン雑誌は、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でゲームを作ろうと思った時など、意外と参考になったりするのです。