Tüm sistemlerde tüm tarayıcılarda JavaScript animasyonu aynı hızda nasıl oynatabilirim?

Question

Hem X hem de Y ekseninde hareket eden çeşitli nesnelerin bir animasyonunda bir sonraki kareyi hesapladığım bir fonksiyon var [bunu frameRender() olarak adlandırıyorum] ve sonuçta meydana gelen kareyi nesnelere uygulayan bir işlev [frameDisplay() olarak adlandırıyorum]. Nesneler sadece A noktasından B noktasına gitmez, sürekli olarak hareket ederler, daima yeni hedef koorları alırlar.'u 1000/frameRate aralıkla kullanıyorum, ancak tarayıcıların doğru zamanlamaları olmadığı için hiç işe yaramıyor.

Sorun: Animasyonun sabit bir kare hızına sahip olduğundan nasıl emin olabilirim ve tüm sistemlerde tüm tarayıcılarda aynı hızda çalışır mı? Her şeyi denedim ve sadece farklı tarayıcılarda bile doğru bir sonuç elde edemiyorum (Firefox ve Chrome'da test ediyorum, Chrome genellikle çok daha hızlı görüntüler).

Sonuç şöyle olmalıdır: Yavaş oynatıldığında, animasyon aralığı ilk önce düşmeli ve daha sonra doğru oynatılıncaya kadar DOM yavaş görünüyorsa bazı kareleri atlamaya çalışın [frameDisplay()'u atlayarak]. Hızlı oynatıldığında, animasyon aralığı artar, bu da animasyonun doğru hızda oynamasını sağlar.

Ancak, bunların hepsinde tutarlılığı nasıl korursunuz, çünkü tarayıcıların ne zaman yavaşlayacağından veya hızlı performans göstereceğinden her zaman emin olamazsınız. Örneğin, devasa büyük hareketler varsa ve kare hızını sabit tutmak için aralığı düşürüyoruz ve sonra aniden hareketli nesnelerin çoğu durur ya da çok fazla hareket etmez, aniden hızlıca gerçekleşir!

Herhangi bir fikrin var mı?

Answer 1

Glenn Fiedler'in harika bir makalesi olan is here cevabının Javascript'e dönüştürülmesi için küçük bir düzeltmeye ihtiyacı var ancak ilkeler aynı. Temel olarak, delta zamanlamaları ekleyen bir akümülatör kullanmanız ve buna dayanan adımları uygulamanız gerekir. Herhangi bir fizik matematiğini veya herhangi bir şeyi değiştirmeye gerek yok, çözüm tak çalıştır. Ayrıca, kekemeliği gideren ve aynı zamanda süper yavaş pürüzsüz hareket (tekrarlar vb. Için) yapmanıza izin veren bir serin enterpolatöre sahiptir. Bu harika, fizik için çalışıyor ve herhangi bir adım tabanlı hareket üzerinde çalışmalıdır. Temel olarak, doğru zamanlama oyunu için gereken tüm hareketler vardır.

Answer 2

Sorun: Animasyonun sabit bir kare hızına sahip olduğundan ve tüm sistemlerde tüm tarayıcılarda aynı hızda çalışacağından nasıl emin olabilirim?

Kare kare hakkında hiçbir şey yapamazsınız. Kontrol edebileceğiniz tek şey, uygulamanızın geçen süreye göre nasıl güncellendiğidir. Bu, tarayıcıların dışında da geçerli ve oyun geliştirmede ortak bir konu.

Yapılacak en iyi şey, güncellemeler arasındaki deltayı (okuma: zaman farkı) takip etmektir.

(function() { 
    function getTime() { 
     return new Date().getTime(); 
    } 
    var last = getTime(); 

    function update(delta) { 
     // Update your application state on delta (ms of time passed) 
    } 

    (function loop() { 
     update(last = getTime()-last); 
     render(); 
     setTimeout(loop, 20); // 20 = attempt 50fps 
    }()); 
}()); 

Burada setTimeout kullanımına dikkat edin. Bu, loop() 'un senkronizasyon dışı çağrılmasını engellemektir. setInterval, önceki bir çağrı bitmemiş olsa bile ateşlemeye devam edecektir.

Answer 3

Animasyonunuzu sistem saatiyle eşzamanlayabilirsiniz.

Geçerli sistem zamanını değişken olarak kaydedin. Tüm kareler üzerinde o zaman resminizi yeniden çizmek istediğinizde, eğer mevcut zamanın değiştiğini kontrol edin - değişkeniniz bir delta süresine eşittir. sonra animasyonunuzu yeniden çizin. başka bir deyişle bu farkı bekle