enchant.jsのサウンド機能で、ゲームをさらにカッコよく！

こんにちは、wise9編集部のリョウヘイです。

shi3z編集チョからも告知がありましたが、今月も「9leap 9Days Challenge #3」がはじまりました。

9leapでのメインコンテストは25歳以下の学生だけが対象なんですが、26歳以上or社会人の、大人げないオトナでも参加できるコンテストがほしい！ということで企画されたのが「9Days Challenge」。毎回テーマを決めてゲームを募集しているんですが、今回のテーマはサウンドをつかったゲームです。

この記事では、enchant.jsのサウンド機能について解説しよう、と思ったんですが、その前にみなさんにお伝えしたいニュースがあります。このブログで紹介している、JavaScriptゲームエンジン「enchant.js」の公式サイトがついにリリースされたんですが、このサイトについて詳しいお知らせ。

http://enchantjs.com/jp/

たくさんのサンプルやプラグインの機能解説、チュートリアル記事のまとめ・紹介に加え、近日中にライブラリ作者による詳しいチュートリアルをアップロードする予定です。

中でも注目なのはこのページ。http://enchantjs.com/jp/material.html

今までenchant.jsのパッケージに同梱していた素材に加え、いくつかの素材が配布されています。もちろんこれらの素材も、enchant.jsを用いたゲームへの利用は自由！これらの素材をゲーム作りのきっかけに生かしてみてください。

今回追加されたのは「背景画像パック」と「サウンドエフェクトパック」の2種類。「背景画像パック」はゲームの背景に使える320×320のjpg画像素材。いろんなシーンに合わせて60種類も用意しています！

そして今回のアップデートの目玉は「サウンドエフェクト」。効果音が32種類揃っています。

あまり知られていないのですが、enchant.jsには強力な「サウンド再生機能」がついており、音声ファイルをプリロードし、好きなタイミングでサウンドを鳴らすことができます。

Webサイトで音を鳴らす…となると、よく話題になるのは、HTML5という新規格で導入された<audio>タグ。しかし、実はaudioタグを使うとしても、今のところすべてのWebブラウザで同じように再生できるファイル形式は、存在しないんです。(参考: audio要素が対応しているコーデック – 存在しないはずのコミュニケーションなど)

ではどうすればいいか…? 本当はブラウザごとに音声ファイルを対応している形式に変換したり、音声を再生するswf (Adobe Flash) 形式のファイルを用意したりしてする必要があるのですが、enchant.jsのサウンド機能はめんどくさい処理を全てライブラリ側で対応しています。

つまり、誰でも簡単にクロスプラットフォームで遊べる、サウンド入りのゲームを作れる！ってことです。便利な世の中ですねー。

百聞は一見に…ってことで、サンプルのゲームを用意しました。

バナナを取ると音が鳴る！というシンプルなゲームです。

enchant();
var game;

window.onload = function() {
game = new Game(320, 320);
game.fps = 24;
game.preload(['chara1.gif','icon0.gif','se6.mp3']);
game.rest = 10;
game.time = 0;
game.onload = function() {
for(var i = 0; i < 10; i ++)addBanana();
addDokuro();
game.rootScene.addEventListener('enterframe',function(){
game.time ++;
});
}
game.start();
}

function addDokuro(){
var dokuro = new Sprite(16, 16);
dokuro.x = rand(260)+20;
dokuro.y = rand(260)+20;
dokuro.image = game.assets['icon0.gif'];
dokuro.frame = 11;

dokuro.addEventListener('touchstart', function(e) {
game.end(0,"Game over");
});
game.rootScene.addChild(dokuro);
}

function addBanana(){
var banana = new Sprite(16, 16);
banana.x = rand(260)+20;
banana.y = rand(260)+20;
banana.image = game.assets['icon0.gif'];
banana.frame = 16;

banana.addEventListener('touchstart', function(e) {
game.rootScene.removeChild(this);
var sound = game.assets['se6.mp3'].clone();
sound.play();
game.rest --;
if(game.rest == 0){
game.end( 1000000-game.time ,(game.time / game.fps).toFixed(2) + "秒でクリア!");
}
});
game.rootScene.addChild(banana);
}
function rand(num){
return Math.floor(Math.random() * num);
}

基本的には、preloadで画像ファイルと同じように読み込んで (このサンプルでは「se6.mp3」というファイルを再生しています)、

game.preload(['chara1.gif','icon0.gif','se6.mp3']);

サウンドを鳴らしたいところで以下のようなコードを実行するだけ。

var sound = game.assets['se6.mp3'].clone();
sound.play();

以上おわり！スプライトの表示よりずっとカンタンですね。

ちなみに、ここのコードにおける game.assets['xxx.mp3'] にはSoundオブジェクトが格納されており、 clone はそれを複製する処理です。soundオブジェクトを複製しなくても以下のようなコードで再生することができますが、この場合同じ音声を重ねて鳴らすことができません。

var sound = game.assets['se6.mp3'].play();

また、AndroidやiOSに関しては、まだaudioタグの実装が追いついていなかったり、特殊な仕様を採用していたり、という事情がありますので、すべてのプラットフォーム/バージョンをサポートできているわけではありません。

特に、iOS上のブラウザ (Mobile Safari) については、「プレイヤーが画面にタップしたとき以外、音声が再生できない！」という大きな制限があるため、暫定的に、デフォルトでは以下のようなコードを実行しフラグを立てない限り再生されないという仕様になっています。・・・が、いまのところバグがあるらしくiOSで正しく再生されません!目下修正中です!

enchant.Sound.enabledInMobileSafari = true;

enchant.jsはこっそりアップデートされていたりしますので、時々最新版に入れ替えてみてくださいね！現在の最新版は、昨日リリースされた「v0.4」です。ダウンロードはこちらから。(github.com)

それでは、いろんなゲームの投稿お待ちしてますね！