地形パーツから構成されるスクロール表示マップ上にイベントを配置するためのJavaScriptゲームシステムのテストです。

32*32ピクセルのマップ構成(地形)パーツを13*13並べたマップ上をカーソルキーでスクロール移動し、マップの特定の場所に接触・進入するとイベント(メッセージ表示などの特殊処理)が発動するようにします。マップ移動タイプのアドベンチャーやRPGのイベント処理ですね。

今回は、イベントとして「人物を表示し人物に接触したらメッセージ(会話)を表示」するようにしてみました。開始ボタンでテスト開始後、初期位置の上の方にいる人物に接触してみてください。

メッセージは、メッセージ表示ウインドウで表示します。三角マークが表示されたらリターンキーで次のページを表示、メッセージの表示が終わったらリターンキーでウインドウを閉じます。

テスト画面(JavaScriptを有効にしたCanvas対応ブラウザで実行可能)

ソース(JavaScript、UTF-8)

実行するイベントの情報は、以下のようなイベント情報クラスに格納します。

// イベント情報クラス
var EventItem = function(chr, x, y, passFlag, script){

	// 表示するキャラクタ番号
	this.chr = chr;

	// イベント位置
	this.x = x;
	this.y = y;

	// 通過フラグ
	this.passFlag = passFlag;

	// イベントで実行するスクリプト
	this.script = script;

}

このイベント情報を、イベント格納配列eventListに格納し、マップ移動時には移動(接触)した場所にイベントが配置されていないか調べ、イベントがあれば(ゲーム状態をイベント処理に移行し)スクリプトの内容を処理するわけです。

スクリプトには、各種のコマンドを記述することになるでしょうが、とりあえず今回はここに指定された文字列をメッセージ表示するようにしてみました。

イベントキャラクタの描画は、画面に描画するCanvasへの描画処理時に可視範囲にあるイベントのキャラクタ描画処理を行います。今回のような固定(アニメ、ゲーム中の切り替えなし)イベントだと、地形パーツと同様の描画処理でもよいのですが、毎回描画するようにしておいた方が今後いろいろな効果を加えやすそうですから。


創作プログラミングの街 > ゲーム開発室 > Webゲーム開発室