初めてのenchant.js 006音を鳴らす[JavaScript]

前回の「初めてのenchant.js 005文字の表示[JavaScript]」では、
シーン上に文字を表示しました。
今回は音を鳴らしてみます。

完成サンプル

まず音声ファイルを準備します。
enchant.jsをダウンロードしてできたディレクトリからコピーしましょう。
今回は、ダウンロードのディレクトリにある以下のの2つのファイルを

examples/action/gameover.wav
examples/action/jump.wav

soundsフォルダを作りそこにコピーしました。

sounds/gameover.wav
sounds/jump.wav

HTMLの方は特に変更なしです。
[index.html]

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>enchant.js example 006</title>
	<script type="text/javascript" src="js/enchant.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div id="enchant-stage"></div>
	<h1>enchant.js example 006</h1>
</body>
</html>

次にmain.jsのmain()メソッド内に音を鳴らするプログラムを追加します。
assetsを指定してplay()するだけなので簡単です。

[main.js]

enchant();
window.onload = initGame;
var game;
var scene;
var bear;
var score;
function initGame(){
	game = new Game(320,320);
	game.preload(
		'images/chara0.gif',
		'images/chara1.gif',
		'sounds/jump.wav',
		'sounds/gameover.wav'
	);
	game.onload = main;
	game.start();
}
function main(){
	game.scale = 1;
	scene = new Scene();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	score = new Label("0123456");
	score.color = "#FC9";
	score.font = "normal normal 15px/1.0 monospace";
	score.text = "00990";
	scene.addChild(score);	
	game.assets['sounds/gameover.wav'].play();
	game.assets['sounds/jump.wav'].play();
}

コード解説

	game.preload(
		'images/chara0.gif',
		'images/chara1.gif',
		'sounds/jump.wav',
		'sounds/gameover.wav'
	);

プリロードに音声ファイルを追加しました。

	game.assets['sounds/gameover.wav'].play();
	game.assets['sounds/jump.wav'].play();

音を鳴らしています。
ここでは2音は同時に鳴らないようです。
なにか方法があるかもしれません。

次回は「初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]」です。

初めてのenchant.js 一覧

こちらもオススメ(別サイト)

enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。

ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です