บทนำ
เกมบนเว็บมักเล่นเสียงสั้นๆ หลายสิบเสียง การโหลดแต่ละเสียงเป็นไฟล์แยกกันหมายถึงการร้องขอหลายสิบครั้ง และบนมือถือ เบราว์เซอร์บางตัวอนุญาตให้โหลดเสียงได้ครั้งละหนึ่งเสียงเท่านั้น ออยล์สไปรต์ช่วยแก้ปัญหาทั้งสองอย่างได้: ไฟล์เดียวบรรจุเสียงทั้งหมด และไฟล์แมนิฟอสเตอร์จะระบุตำแหน่งของแต่ละไฟล์
โดยปกติแล้ว สไปรท์จะถูกสร้างขึ้นด้วยเครื่องมือบรรทัดคำสั่งที่ต้องใช้ FFmpeg แต่โปรแกรม Audio Sprite Creator ของ ToolBuddy สามารถสร้างสไปรท์เหล่านั้นได้ในเบราว์เซอร์ของคุณ คู่มือนี้จะแนะนำขั้นตอนตั้งแต่คลิปเสียงแบบแยกส่วนไปจนถึงสไปรท์ Howler.js ที่ใช้งานได้
แพ็กเกจสไปรท์ประกอบด้วยอะไรบ้าง
แพ็กเกจประกอบด้วยไฟล์เสียงหนึ่งไฟล์ที่มีคลิปเรียงต่อกัน คั่นด้วยช่องว่างสั้นๆ และไฟล์ manifest ชื่อ เจสัน ในไฟล์ manifest ของ Howler แต่ละคลิปจะมีค่า offset และระยะเวลาเป็นมิลลิวินาที พร้อมด้วยแฟล็กการวนซ้ำ โดยชื่อคลิปจะมาจากชื่อไฟล์ต้นฉบับ
โหลดและเรียงลำดับคลิป
เลือกไฟล์เสียงของคุณ: MP3, WAV, M4A, AAC, OGG/Opus, FLAC หรือ WebM ไฟล์เหล่านั้นจะปรากฏในแท็บ Clips ตามลำดับที่คุณเพิ่มเข้าไป
จัดเรียงตามชื่อหรือขนาด หรือเลื่อนคลิปขึ้นลง การรีเซ็ตในส่วนหัวของแผงควบคุมจะคืนค่าลำดับที่คุณเพิ่มไว้ ลำดับจะมีผลเฉพาะตำแหน่งที่คลิปอยู่ในไฟล์เท่านั้น โค้ดของคุณจะเล่นคลิปตามชื่อ
ตัดแต่งและจัดทรงคลิปแต่ละอัน
เลือกคลิปเพื่อดูตัวอย่าง การตัดแต่งจะแสดงเป็นตัวจัดการบนรูปคลื่น ในแผงควบคุม ให้ตั้งค่าจุดเริ่มต้นและจุดสิ้นสุดที่แน่นอน ระดับเสียง การเฟดเข้าและเฟดออก แฟล็กการวนซ้ำสำหรับดนตรีประกอบ และการตัดแต่งความเงียบที่ขอบ
| การตั้งค่าคลิป | พิสัย | ทำไม |
|---|---|---|
| เริ่ม/สิ้นสุด | ภายในคลิป | ตัดเสียงเงียบหรือเสียงคลิก |
| ได้รับ | -24 ถึง +24 dB | ปรับสมดุลเสียงดังและเสียงเบา |
| เฟดเข้า/เฟดออก | 0 ถึง 5 วินาที | หลีกเลี่ยงเสียงคลิกที่ขอบ |
| วนลูป | เปิด/ปิด | เพลงประกอบและบรรยากาศ |
| ตัดความเงียบ | เปิด/ปิด | ลบส่วนนำและส่วนท้ายที่เงียบ |
ตั้งค่าตัวเลือกสไปรท์
เลือกไฟล์ Howler manifest สำหรับ Howler.js ตั้งค่าอัตราการสุ่มตัวอย่าง (44.1 kHz เหมาะสำหรับเกมส่วนใหญ่; 22.05 kHz สำหรับไฟล์ขนาดเล็กกว่า), โมโนหรือสเตอริโอ, ช่วงเวลาระหว่างคลิป (ค่าเริ่มต้นคือ 0.05 วินาที เพื่อป้องกันไม่ให้เสียงซ้อนทับกัน), การเฟดเสียงแบบเลือกได้ และรูปแบบเอาต์พุต: MP3 หรือ OGG สำหรับขนาดไฟล์, WAV สำหรับการแก้ไข
สร้าง ดูตัวอย่าง ดาวน์โหลด
เลือก Build sprite การแสดงตัวอย่างจะเปลี่ยนเป็นสไปรท์ทั้งหมด โดยแต่ละคลิปจะแสดงเป็นแถบที่มีหมายเลขกำกับ คลิกที่แถบเพื่อเลือกคลิปนั้น หรือสลับไปที่ Clip เพื่อฟังเสียงเดียว
ดาวน์โหลด ZIP ที่มีเสียงและ เจสัน พร้อมกัน หรือดาวน์โหลด เจสัน เพียงอย่างเดียวหากคุณแก้ไขเฉพาะไฟล์ manifest เท่านั้น
ใช้ใน Howler.js
โหลดสไปรท์ด้วย new Howl({ src: ['audio-sprite.mp3'], sprite: manifest.sprite }) และเล่นเสียงด้วย sound.play('coin') จัดเตรียมไฟล์ OGG ควบคู่ไปกับไฟล์ MP3 หากคุณต้องการใช้สำหรับเบราว์เซอร์รุ่นเก่า สร้างสไปรท์สองครั้งด้วยสองรูปแบบนี้
- ตั้งชื่อคลิปให้ไม่ซ้ำกัน: ชื่อเหล่านี้จะกลายเป็นคีย์ในแผนที่สไปรท์
- ปล่อยช่องว่างเริ่มต้นไว้ตามเดิม เพราะมันแทบจะไม่เสียค่าใช้จ่ายใดๆ และช่วยหลีกเลี่ยงการทับซ้อนกัน
- ใช้แฟล็ก loop สำหรับการวนซ้ำในพื้นหลัง ไม่ใช่สำหรับเอฟเฟกต์แบบเล่นครั้งเดียว
ค่าชดเชยที่คุณวางใจได้
ตัวเข้ารหัส MP3 จะเพิ่มการหน่วงเวลาสั้นๆ ที่จุดเริ่มต้นของไฟล์ ซึ่งใช้ในการเลื่อนค่าออฟเซ็ตของสไปรต์แต่ละตัว ToolBuddy จะเขียนส่วนหัวแบบไม่มีช่องว่างที่บอกให้ตัวถอดรหัสข้ามไป และการทดสอบของมันจะถอดรหัสสไปรต์และตรวจสอบว่าแต่ละคลิปเริ่มต้นที่ตำแหน่งที่ระบุไว้ใน manifest
เขียนโดย
Ankit Kumar
วิศวกรซอฟต์แวร์อาวุโสและผู้ก่อตั้ง ToolBuddy
วิศวกรรมยูทิลิตี้เน้นเบราว์เซอร์เป็นหลักโดยไม่มีข้อกำหนดในการอัปโหลดโดยใช้เทคโนโลยี WebAssembly, Web Audio และ Canvas