音を鳴らす
このページのサンプルコードをダウンロード
効果音と BGM
Akashic Engine のゲームで音を鳴らす場合は、一つの効果音や音楽につき次のいずれかの組み合わせのファイルを用意する必要があります。 これは、Web ページで音を再生する際に、利用可能な形式がブラウザごとに異なっているためです。
- Ogg Vorbis 形式 (.ogg) と M4A 形式 (.m4a)
- Ogg Vorbis 形式 (.ogg) と AAC 形式 (.aac)
ファイルが用意できたら se1.ogg
と se1.m4a
を audio
ディレクトリに配置して、 akashic scan
コマンドでアセットとして追加します。
akashic scan asset
音声アセットはアセットの play()
メソッドを呼び出して再生します。例えばファイルパスが "/audio/se1"
の場合は、以下のコードで再生できます。 オーディオアセットの場合は拡張子抜きのファイルパスを指定することに注意してください。
scene.asset.getAudio("/audio/se1").play();
INFO
アセット ID で指定する場合は、以下のコードで再生できます。
scene.asset.getAudio("se1").play();
シーンで効果音を利用するには、他のアセットと同じようにシーンオブジェクトのパラメータオブジェクトにアセットのファイルパスを指定します。以下は画像のタップまたはクリックで効果音を再生する例です。
function main() {
const scene = new g.Scene({
game: g.game,
assetPaths: ["/audio/se1"]
});
scene.onLoad.add(() => {
const sprite = new g.Sprite({
... // 必要なプロパティ
]);
sprite.onPointDown.add(() => {
scene.asset.getAudio("/audio/se1").play();
});
});
g.game.pushScene(scene);
}
module.exports = main;
Akashic Engine では音声を自動的にループ再生させることで BGM を実現します。 BGM をループ再生させるには、game.json
を編集して該当アセットの systemId
プロパティの値を music
に変更します。
例えば BGM として利用したいアセットの ID が bgm
の場合、 akashic scan
直後は game.json
の対応箇所は次のようになっています。
"bgm": {
"type": "audio",
"path": "audio/bgm",
"systemId": "sound",
"duration": 8000
}
この部分を編集して以下のように "systemId": "music"
を指定します。
"bgm": {
"type": "audio",
"path": "audio/bgm",
"systemId": "music",
"duration": 8000
}
BGM も play()
メソッドで再生を開始します。 BGM は自動的にループ再生されるので、play()
メソッドはシーンロード時に一度だけ呼び出します。
以下のプログラムは上で出てきた効果音再生プログラムに BGM を追加したものです。
TIP
Google Chrome や iOS 上の Safari ではユーザ操作 (クリックなど) があるまで音が鳴らないという仕様があります。ゲームの開始直後から BGM を再生するような場合は最初に一度以上ユーザ操作 (クリックなど) をさせるような作りにしてください。詳細は Tips » よくある落とし穴 » 一部の環境でゲーム開始時に自動的に音声が再生されない を参照してください。
function main() {
const scene = new g.Scene({
game: g.game,
assetPaths: ["/audio/**/*"]
});
scene.onLoad.add(() => {
const sprite = new g.Sprite({
... // 必要なプロパティ
]);
sprite.onPointDown.add(() => {
scene.asset.getAudio("/audio/se1").play();
});
scene.onPointDownCapture.add(() => {
scene.asset.getAudio("/audio/bgm").play();
});
});
g.game.pushScene(scene);
}
module.exports = main;