JavaScript｜素人のゲームプログラミング勉強

が、爺が考える“ゲーム”なんてのはポリゴンゴリゴリの3Dシミュレータではなく、せいぜいが下。

で、現在のパソコン性能を鑑みるに、そんなUnityやUnrealエンジンなど必要無く、JavaScriptで十分なことが判明しました。

昔見たゲームプログラミング講座のホームページを探し回ると現在は動画時代。詳細な作り方を説明したYoutube動画が4、5年前から既に存在していました。周回遅れで気付く、まさに爺。

プログラムを組める方は視聴してみると分かりますが、スプライト当たり前・スムーズスクロールなんぞ余裕で実現。大量のスプライトも平気な顔してブラウザ上でスルスル動きます。

JavaScriptなんぞページの挙動変えるだけ…とバカにしておりましたが、sprite実装・仮想画面やカンバス、classも当たり前に使えて名前空間まで定義可能と、爺から見ればぶり高級言語。

“ゲームの開発”を想定し、UnityやUnrealエンジンを念頭に置いてた方は本ページ内で紹介する動画を順番に見て頂くことを推奨します。（第何回とかのシリーズ動画になってるので）

マジで、

と言う訳で、JavaScriptでのゲーム製作に突入してみます。

一介のジジイが鳥山明してみたところで鳥山明できる訳無いのに、やはり愛嬌必須と鳥山明してみたイラスト。
モンスター描こうと思い立ったのは別理由ですが。

対して、ゲームのプログラミングとは人間の相手をする、つまりは楽しませるためのプログラム。なので、速過ぎる動きはNGだし入力に対し反応が悪いのもNG。

1秒間に60フレームでヌルヌルとかがそれを目的とした対応策となります。

ゲームのプログラム特徴＝割り込み処理

先の動画ではプログラムの構成を以下のように構築しております。

//ゲームスピード
const GAME_SPEED=1000/60;

	setInterval(gameLoop,GAME_SPEED);

function gameLoop(){
	//テスト
	updateAll();//←自機・敵・弾・背景の位置計算
	drawAll();//←自機・敵・弾・背景の表示
	putInfo();//←デバッグ情報表示
}

JavaScript命令setInterval(F,A)とは「期間A毎に関数Fを実行しろ。」

つまり、期間A毎に上記gameLoop()関数内の命令（updateAll()、drawAll()、putInfo()）を瞬時に実行するもの→その瞬間だけコンピュータが動くことに。

ハード設計の人間なのである時間条件に合致した瞬間だけ動くものを“割り込み処理”と表現していますが、ゲーム分野では“イベント何とか”と呼ぶらしいです←忘れた。

コンピュータは、ゲームのプログラム実行中はほとんど寝てる時間で、一定時間ごとの瞬時だけ仕事することで、人間にとってスムーズな・反応の良い動きを実現します。

昨今、イベント駆動型の開発環境が当たり前になり過ぎて忘れてしまいますが、大昔のN88-BASIC時代はすべてそうでした。

その“大昔面倒だったこと＝座標指定して何かする”がゲームのプログラムにおける第一関門。何をするにしてもまず座標を計算する必要があります。

その辺を分かりやすく、ゲーム製作の実例・具体例として公開してらっしゃるのがこちら。

上記動画梅澤嗣佳(T.Umezawa)さんのページがこちら。“ソース一式”内のpart23.zipをダウンロードし、解凍後のindex.htmlをブラウザにD&Dするとゲームが走ります。

画像データは透過PNGで座標指定

現在の当たり前は「キャラクターパターン・他キャラはデータ入力でなく画像読込で実現」。プログラムに対して教えられれば良いので1枚のPNGファイルにツラツラ並べて読込。

その時に必要になるのがPNGファイル画像内の座標。どのように読み込んでプログラム内の配列に納めているかがハッキリと分かります。

また、上記動画では主人公を上半身下半身の2ブロック構成とするための処理も見越し、主人公の縦を9ドットで説明する親切設計。

困るのはスムーズ移動とブロック制限

個人的に昔困った事例。シューティングなどとは異なるブロック表記のゲームでの話。キャラクターをスムーズに1ドット単位で動したいが、ブロック途中で停止してはいけない制限。

1ブロック丸ごとしか動けないのは大昔の倉庫番だし、ブロック途中で停止できるとフラッピーだし←操作性悪。

ロードランナーも質の良いバージョンはブロックの中間地点などの中途半端な位置に停止させないようにしてあります。

正面向き固定の主人公を思い通り動かすためだけに第10回/全23回の講座でやっと実現する訳ですが、これが先ほど書いた“大昔面倒だったこと＝座標指定して何かする”。

プロが先回りして骨格を構築してくれる動画

上記動画を見ると分かりますが、以下が分かりやすく解説されています。

これらはゲーム製作におけるまさに具体例。

プログラムを組む作業を知る方なら、リファクタリングや、クラスの使い所・関数に押し込める共通化など、何でそうするの？が分かるのでゲーム製作のキモがよく伝わります。

プログラムは一応組めるけど、ゲームのプログラミングて一体どうなってんだ！？と疑問を持つ方は是非どうぞ。爺も夢中になって視聴しております。

ゲーム制作に挑戦してみるよ

で、こんなことグダグダ書いてる理由は、爺も挑戦してみようかと。

例えば、上記RPGのゲームでは実現されてない、

を実装するとか。

こーいうインチキ臭いゲーム制作しか経験ない爺ですが、上手く実現させられるでしょうか、乞うご期待。ウェスタロス大陸を練り歩くRPGを目指して。