マップスクロール表示テストに画像と音声のリソースを組み込んでみました。画像はファンタジー風のゲームを意識して作成した地形と戦士(?)キャラクタ、32*32ピクセルのpngファイルです。

ネット上から画像(png)ファイルをダウンロードしてImageオブジェクトに読み込みマップチップとキャラクタとして表示、さらに音声(ogg/mp3)ファイルをaudioタグでBGMとして再生します。

Imageで扱うpngファイルの方は、透過処理も含め特に問題はないようですが、Audioは現状では色々と問題を抱えていますね。

環境(Webブラウザ)によってはJavaScriptからAudioオブジェクトをnewできない、loop属性によるループ再生ができない、メソッド呼び出しができない……など。さらに、音声ファイルの形式も環境依存なので、複数の音声形式でエンコードし配置しておく必要があります。

とりあえず、今回はaudioのcanPlayType()で再生可能なファイルを選択し、ループ再生も再生終了時のイベントで再度play()する形にしました。ただ、私の環境ではSafari5で再生できなかったりしますが……。

地形やキャラクタが(下手なドット絵ですが)画像リソースで表示され、少しは「ゲーム画面」らしくなってきたでしょうか。

Canvas対応ブラウザで開始ボタンをクリックするとマップ画面が表示され、カーソルキーでキャラクタ移動(マップのスクロール)ができるようになります。

ソース(JavaScript、UTF-8)

「BGM再生」を選択状態にして開始ボタンをクリックすると、音声が再生されるのでご注意ください。


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