BabylonJS - การเล่นเสียงและดนตรี
หากไม่มีเสียงและดนตรีแสดงว่าเกมไม่สมบูรณ์ เครื่องเสียง BabylonJS มาพร้อมกับ API ที่ช่วยเพิ่มเอฟเฟกต์เสียงให้กับเกม เมื่อมีการต่อสู้ที่เห็นในเกมคุณต้องได้รับการยิงกระสุนปืนสิ่งเดียวกันนี้สามารถทำได้ด้วยเครื่องเสียงของ babylonjs คุณสามารถรับเอฟเฟกต์เสียงตามเอฟเฟกต์การควบคุมแป้นพิมพ์ / เมาส์ของเกม เครื่องเสียงให้เสียงรอบข้างเสียงพิเศษและเสียงทิศทาง เครื่องยนต์รองรับรูปแบบเสียง. mp3 และ. wav
ไวยากรณ์
var music = new BABYLON.Sound(
"Music", "sound.wav", scene, null, {
loop: true,
autoplay: true
}
);พารามิเตอร์
พิจารณาพารามิเตอร์ต่อไปนี้ที่เกี่ยวข้องกับเอ็นจิ้นเสียง -
Name - ชื่อของเสียง
URL - url ของเสียงที่จะเล่น
Scene - ฉากที่ต้องเล่นเสียง
Callbackfunction- ฟังก์ชั่นการโทรกลับซึ่งจะเรียกเมื่อเสียงพร้อมที่จะเล่นปัจจุบันเป็นโมฆะ เราจะดูตัวอย่างบางส่วนและเรียนรู้วิธีการใช้งาน
Json object - วัตถุนี้มีรายละเอียดพื้นฐานของสิ่งที่ต้องทำ
sound.autoplay - ด้วยสิ่งนี้เสียงจะเล่นโดยอัตโนมัติเมื่อดาวน์โหลดไฟล์
loop:true - ซึ่งหมายความว่าเสียงจะเล่นแบบวนซ้ำอย่างต่อเนื่อง
สร้างโฟลเดอร์เสียงในไดเร็กทอรีโปรเจ็กต์ของคุณและดาวน์โหลดไฟล์เสียงตัวอย่างเพื่อทดสอบเอาต์พุต
ตอนนี้ให้เราเพิ่มเสียงให้กับฉากที่เราสร้างไว้แล้ว
การสาธิต
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, {
loop: true,
autoplay: true
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>เอาต์พุต
บรรทัดโค้ดด้านบนสร้างผลลัพธ์ต่อไปนี้ -
ให้เราตรวจสอบว่าไฟล์ callbackฟังก์ชันใช้งานได้ หากคุณไม่ต้องการให้เสียงเล่นอัตโนมัติหรือคุณต้องการเล่นเสียงเมื่อคุณต้องการเท่านั้นคุณสามารถทำได้โดยใช้ฟังก์ชันโทรกลับ
ตัวอย่างเช่น,
Var music = new BABYLON.Sound ("Music", "music.wav", scene, function callback() {music.play();});การสาธิต
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true)
var music = new BABYLON.Sound(
"sound", "sounds/scooby.wav", scene, function callback() { setTimeout(function() {music.play();}, 5000)});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>ในการโทรกลับเราจะใช้ setTimeout ซึ่งหมายความว่าเราต้องการให้เล่นเสียงหลังจากเวลาที่กำหนดเท่านั้น เราได้เพิ่ม 5s เป็นตัวจับเวลาดังนั้นเสียงจะเล่นเมื่อดาวน์โหลดไฟล์ Scooby.wav และ 5s เสร็จสมบูรณ์
เล่นเสียงด้วยการคลิกและปุ่มบนแป้นพิมพ์
เมื่อคลิกที่ใดก็ได้ในฉากคุณจะได้ยินเสียงเอฟเฟกต์ระเบิดและหากคุณกดปุ่มลูกศรใด ๆ - ซ้ายขวาขึ้นหรือลงมันจะเล่นเอฟเฟกต์เสียงระเบิด
สำหรับคลิกเรากำลังแนบเหตุการณ์ onmousedownไปที่หน้าต่างและสำหรับคีย์เราจะใช้เหตุการณ์คีย์ดาวน์ เสียงจะเล่นตามรหัสคีย์
การสาธิต
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true)
var sound = new BABYLON.Sound("gunshot", "sounds/explosion.wav", scene);
window.addEventListener("mousedown", function (evt) {
if (evt.button === 0) { // onclick
sound.play();
}
});
window.addEventListener("keydown", function (evt) { // arrow key left right up down
if (evt.keyCode === 37 || evt.keyCode === 38 || evt.keyCode === 39 || evt.keyCode === 40) {
sound.play();
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>เอาต์พุต
บรรทัดโค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -
คุณสามารถควบคุมระดับเสียงในวัตถุ json ที่เราพบในตอนแรก
ตัวอย่างเช่น,
Var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, {
loop: true,
autoplay: true,
volume:0.5
});หากต้องการทราบเมื่อไฟล์เสียงเสร็จสิ้นมีเหตุการณ์ที่สามารถใช้ได้ดังนี้ -
music.onended = function () {
console.log("sound ended");
//you can do the required stuff here like play it again or play some other sound etc.
};คุณสมบัติ SetVolume ยังพร้อมใช้งานในกรณีที่คุณต้องการควบคุมเสียงนอกเหนือจากตัวสร้าง
ตัวอย่างเช่น,
music.setVolume(volume);หากคุณกำลังเล่นเสียงมากกว่าหนึ่งเสียงในฉากของคุณคุณสามารถตั้งค่าเสียงส่วนกลางสำหรับเสียงทั้งหมดที่สร้างขึ้น
ตัวอย่างเช่น,
BABYLON.Engine.audioEngine.setGlobalVolume(0.5);การสร้างเสียง 3 มิติเชิงพื้นที่
หากคุณต้องการแปลงเสียงเป็นเสียงเชิงพื้นที่ (เสียงคล้ายกับเสียงอวกาศ) คุณต้องเพิ่มตัวเลือกให้กับตัวสร้างเสียงของคุณ
ตัวอย่างเช่น,
var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, {
loop: false,
autoplay: true,
spatialSound: true
});ต่อไปนี้เป็นตัวเลือกต่างๆสำหรับเสียงเชิงพื้นที่ -
DistanceModel- มันใช้สมการ "เชิงเส้น" ตามค่าเริ่มต้น ตัวเลือกอื่น ๆ ได้แก่ "ผกผัน" หรือ "เลขชี้กำลัง"
MaxDistance - ตั้งค่าเป็น 100 ซึ่งหมายความว่าเมื่อผู้ฟังอยู่ห่างจากเสียงมากกว่า 100 หน่วยความดังจะเป็น 0 คุณจะไม่ได้ยินเสียงอีกต่อไป
PanningModel- ตั้งค่าเป็น“ HRTF” ข้อกำหนดระบุว่าเป็นอัลกอริธึมการจัดพื้นที่เชิงพื้นที่ที่มีคุณภาพสูงขึ้นโดยใช้ Convolution พร้อมการตอบสนองแรงกระตุ้นที่วัดได้จากอาสาสมัครที่เป็นมนุษย์ หมายถึงเอาต์พุตสเตอริโอ
MaxDistance - ใช้เฉพาะเมื่อ distanceModel เป็นเชิงเส้นไม่ใช้กับผกผันหรือเลขชี้กำลัง
การสาธิตด้วยเสียงเชิงพื้นที่
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var music = new BABYLON.Sound(
"music", "sounds/explosion.wav", scene, null, {
loop: false, autoplay: true, spatialSound: true, distanceModel: "exponential"
}
);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>การแนบเสียงกับตาข่าย
ใช้เสียง BABYLON คุณสามารถแนบเสียงกับตาข่ายของคุณได้ ถ้าตาข่ายขยับเสียงก็จะเคลื่อนที่ตามไปด้วยAttachtoMesh (mesh) เป็นวิธีการที่จะใช้
การสาธิต
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
var box = BABYLON.Mesh.CreateBox("box", '2', scene);
box.material = materialforbox;
materialforbox.ambientColor = new BABYLON.Color3(1, 0, 0.2);
var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, {
loop: false,
autoplay: true,
spatialSound: true,
distanceModel: "exponential"
});
music.attachToMesh(box);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>เอาต์พุต
บรรทัดโค้ดด้านบนสร้างผลลัพธ์ต่อไปนี้ -
