समस्या: मैंने Three.js का उपयोग करके एक फ्लैपी-बर्ड जैसा गेम बनाया है। जब भी मैं स्क्रीन पर टैप करता हूं, एक "फ्लैप" -साउंड बजाया जाता है। हालाँकि इस ऑडियो को चलाने से एक छोटा सा लैग होता है, जो गेम को कम स्मूथ बनाता है। अगर मैं आवाज हटा दूं, तो सारा लैग गायब हो जाता है। लैग केवल तब दिखाई देता है जब ऑडियो चलाया जाता है, न कि ऑडियो चलने के दौरान।

ऑडियो सेट-अप: पहले मैंने ऑडियो को इस तरह सेट किया:

var soundFly = new Audio();
soundFly.src = "https://dl.dropbox.com/s/tj7mxg26egzo4zx/flap.wav?dl=0";
soundFly.preload = "auto";

आगे मैं खेल शुरू करने पर सभी ऑडियो लोड करता हूं (बटन क्लिक पर):

function loadAudio()
{
soundFly.play().then(function () {
   soundFly.pause()
   }).catch(function (e) {
            console.log("soundFly - " + e)
            });           
};

फिर, जब भी मैं स्क्रीन को छूता हूं, मैं ध्वनि बजाता हूं:

this.soundFly.play().catch(function (e)     {
    console.log("soundFly - " + e)
})

यह बहुत अच्छा काम करता है, लेकिन छोटा अंतराल दिखाई देता है।

रेंडरिंग: इस प्रकार मैंने दृश्य का प्रतिपादन स्थापित किया:

var clock = new THREE.Clock();
var delta=0;
clock.start(); //makes rendering timedependent

var render = function ()
{

delta = clock.getDelta();

//All movement is set using speed*delta

requestAnimationFrame(render);
renderer.render(scene, camera);
};

एफपीएस: मैंने यह भी जांचा है कि कैसे audio.play() FPS को प्रभावित करता है। मेरा एफपीएस लगभग 59 पर स्थिर है। लेकिन जब मैं ऑडियो चलाता हूं, तो एफपीएस 20-30 के बीच गिर जाता है, जो शायद छोटे अंतराल का कारण बनता है (चित्र देखें):

ऑडियो.प्ले () एफपीएस को प्रभावित करता है

मैंने इसका उपयोग करके एफपीएस की जाँच की:

console.log(1/delta);

और स्क्रीन को टच करते समय कंसोल पर "फ्लैप" आउटपुट भी करता है।

मुझे आशा है कि किसी के पास इसका स्पष्टीकरण होगा!

सादर, जोआकिमो

3
JoakimNyland 4 नवम्बर 2018, 12:49

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि आप इंटरैक्टिव ध्वनि प्रभावों के लिए HTML5 ऑडियो का उपयोग करते हैं। एपीआई इस उद्देश्य के लिए अभिप्रेत नहीं है। इसके बजाय, वेब ऑडियो आधारित कक्षाओं जैसे THREE.Audio या THREE.PositionalAudio का उपयोग करें जो बिना देरी और उचित समय के ध्वनि प्रभाव की अनुमति देते हैं।

https://threejs.org/examples/#webaudio_timeing

अधिक जानकारी के लिए निम्न गाइड भी पढ़ें। इसे कहते हैं:

समय को उच्च परिशुद्धता और कम विलंबता के साथ नियंत्रित किया जाता है, जिससे डेवलपर्स को कोड लिखने की अनुमति मिलती है जो घटनाओं पर सटीक प्रतिक्रिया देता है...

4
Mugen87 4 नवम्बर 2018, 12:04