html5 で脱出ゲームは作れるのか？html5 の可能性を模索する連載第二回目です。今回は大抵の脱出ゲームで使われる「効果音」を鳴らしてみました。
ブラウザごとの音声ファイルの対応
今まで html5 における音声ファイルはブラウザごとに対応状況がまちまちで、各ブラウザに対応するには複数形式のファイルを用意しなければならなかったのですが、最近では状況が変わってきたようでかなり対応が進んでいます。
- Internet Explorer 9以上 ： mp3, aac
- Google Chrome 25 以上 ： mp3, aac, ogg, wave, WebM
- Firefox 21 以上 ： mp3(winのみ),aac(winのみ), ogg, wave, WebM
- Opera 14 以上 ： mp3, aac, ogg, wave, WebM
- Safari 3.1 以上 ： mp3, aac, ogg, wave
おわかりでしょうか。注目は mp3 です。今までは mp3 に対応していないブラウザがあったのですが、2014年時点で Windows のみですが mp3 で全てのブラウザがカバーできるようになりました。html5 でオーディオも扱いやすくなりましたね。
今回は mp3 を使用して html5 で効果音を鳴らしてみます。
mp3 ファイルの事前ロード
効果音再生の際に遅延が発生してしまっては残念な事になってしまいますので、事前にロードします。
var audios = {"itemget": new Audio("sound/itemget.mp3")};
for(var i in audios){
audios[i].load();
}
これを onLoad イベントでページが読み込まれたら実行するようにします。また1行目はコンマで区切って複数のオーディオファイルを定義できます。
ダブルクオーテーションの中のように itemget の部分をどういう時に使う音か名前付けしておけば、便利です。
効果音を鳴らす
今回はアイテムを取得したら効果音を鳴らすようにしています。audios["itemget"].play();の部分が効果音を再生している部分です。
canvas.addEventListener("mousedown", mouseDownHandler, false);
function mouseDownHandler(e) {
var rect = e.target.getBoundingClientRect();
mouseX = Math.floor(e.clientX - rect.left);
mouseY = Math.floor(e.clientY - rect.top); //クリック位置の検出
if(itemGet == 0){ //アイテムを取得した時の処理
if(mouseX > 250 && mouseX < 300 && mouseY > 325 && mouseY < 354){
itemGet = 1; //アイテム取得変数を更新
audios["itemget"].play(); //効果音を鳴らす
backGround(cx,cx2,itemGet); //背景を更新
}
}
}
function backGround(cx,cx2,item){
var img = new Image();
if(item == 0){ //最初の背景
img.src = "image/itemview1.jpg";
img.onload = function(){
cx.drawImage(img, 0, 0);
itemBar(cx2,item);
}
}else if(item == 1){ //アイテム取得後の背景
img.src = "image/itemview2.jpg";
img.onload = function(){
cx.drawImage(img, 0, 0);
itemBar(cx2,item);
}
}
}
動作デモ
所感
html5 があれば FLASH なんて不要と思っているわけではありません。やっぱり脱出ゲームを作るには FLASH の方が簡単です。しかし、html5 なら FLASH 開発ソフトは不要でメモ帳だけで作れちゃいます。html5 オーディオも各ブラウザで対応も進んだことで、html5 でも作りやすくなったと思います。
プログラマ等を目指すのであれば、あえて html5 でゲームを作る事で知識は付くと思いますね。何より作ってみる事が習得の近道ですから。
