Chrome'da (30 fps) bir masaüstü veya dizüstü bilgisayarda harika çalışan bir HTML5 Canvas ve JS oyunu oluşturdum, ancak mobil Safari'de yalnızca 8 fps elde ediyorum. Kare hızını artırmak için basit ipuçları veya püf noktaları var mı?
Chrome'da (30 fps) bir masaüstü veya dizüstü bilgisayarda harika çalışan bir HTML5 Canvas ve JS oyunu oluşturdum, ancak mobil Safari'de yalnızca 8 fps elde ediyorum. Kare hızını artırmak için basit ipuçları veya püf noktaları var mı?
Yanıtlar:
Ne yazık ki, cevap daha az çekmek. Tuval tabanlı uygulamalarla (gerçekten herhangi bir platformda) darboğaz buldum, aslında piksel çizmek için gereken zaman.
İşte denemeniz gereken bazı şeyler:
Birkaç tuval katmanı kullanın. Nesnelerinizi başka bir katmana çizerken arka planınızı bir katmana çizin (kesinlikle arka plan katmanının üstüne konumlandırılmıştır). (Not: Bunu mobil safari'de denemedim, ancak diğer platformlarda yardımcı olabilir)
Yalnızca değişen sprite'lar değişti. Bu zor ama kesinlikle performansı artırır. Fikir, bir hareketli grafiğin yeniden çizilip çizilmemesi gerekip gerekmediğini depolamak ve sadece arka planla birlikte ihtiyacı olan spriteları yeniden çizmektir. (Bunun, hareketli grafiğin çakıştığı diğer nesnelere de basamaklanması gerekir.)
Chrome'da geliştirme ile ilgili olan şey, a) JavaScript motorunun (V8) cehennem kadar hızlı olması ve b) en yeni sürümlerin (7,8,9) tuval oluşturma söz konusu olduğunda GPU hızlandırması olması. Bu, mobil donanımın masaüstü / dizüstü bilgisayarınız kadar güçlü olmadığı gerçeğiyle birleştiğinde, mobil safaride aynı performansa yakın bir yere gitmenin gerçekten zor olacağı anlamına gelir.
Şimdilik en iyi yaklaşım, oyununuzu mobil safari'de en başından hedeflemek ve yeniden çizme kadar yoğun olmayan bir oyun oluşturmak ve denemek olabilir.
Bu biraz uzun bir atış, ancak oyununuz bunun yerine CSS dönüşümleriyle DIV spritelarında çalışabilir mi? Bunu söylüyorum çünkü CSS dönüşümleri ve geçişleri olan iOS cihazlarda bazı şeyleri hareket ettirerek harika bir performans elde ediyorum.
Bunlar, donanımın hızlandırıldığı anlaşılıyor, hızlanmanın devreye girmesi için dönüşümler için 3B formunu (yani, çevirmek yerine translate3D) kullanmanız gereken tuhaf uyarıyla. Gerçekten çok pürüzsüz ve iOS tarayıcı uygulaması doğrudan benim için çok uygun olan 16 element şamandıra matrisini ayarladığınız form.
Ne kadar pürüzsüz olduğu konusunda çok etkilendim, bu şekilde yazılmış basit bir oyun projesini denemeyi kastediyorum.
Çizgi çizme durumunda, kontur çağırmadan önce birçok lineTo komutunu birleştirin.
Bu ve diğer bazı ipuçları: http://dt.deviantart.com/blog/38471599/
@Gosub herşey artı dedi:
hangi matematiği yaptığınıza bakın, daha verimli algoritmalar kullanmak için herhangi bir şey olup olmadığına bakın.
daha küçük resimler kullanın. 2 görüntü kuvvetinin boyutlarını yapmayı deneyin
tuval üzerinde alfa harmanlamasından kurtulup kurmayacağınızı veya CSS opaklık özelliğini kullanmadığınızı görün.
lütfen sonuçlarınızı geri gönderin. en çok neyin yardımcı olduğunu bilmek ilginç olurdu.
Eski bir konuya cevap eklemek istemem - ama kimsenin bundan bahsetmediğine şaşırdım.
İlk oyunlarınızı yazarken, performans açısından akıllıca çalışmalarını nasıl bekleyeceğinizi yazın. Yukarıdaki teknikler performansı yüksek tutmak için iyi bir başlangıç noktasıdır - ancak asıl hil profilerdir. Uygulamanızı Chrome veya Firefox'ta profillendirirseniz (ipucu: tam darboğazları görebilmeniz için birçok yöntem kullanın; böylece daha sonra bir şeyleri taşımak zorunda kalmazsınız - bunu yine de yapmalısınız.), kesin zamanlama sonuçları. Benim durumumda sürekli arka plan yeniden tarayıcı gördüm% 80 aldı gördüm. Bunu yoldan çıkardıktan sonra, diğer çağrıların sırasıyla% 40 ve daha fazla sürdüğünü gördüm. Bir iki saat sonra, önemli bir FPS kazancı gördüm.
Sonuçlarınızdan da haber almak isterim. Aynı şeyi yapmaya çalışıyordum. Çok fazla matematik yapmanın iyi olduğunu gördüm ama içine bir tuval koyar koymaz zihinsel gider ve kare hızları düşer.
Etkileri gösteren bir ön plan yer paylaşımım vardı. Çok yüksek kaliteli bir görüntüydü, ancak alfa şeyler o kadar yavaşladı ki saniyede daha fazla kare karşılığında tamamen düşürdüm.
Yaptığım başka bir şey de bazı ağır matematik çalışmalarında PHP kullanmaktı. Büyük veri kümeleri vardı, ancak verileri hesaplamak ve göstermek için JavaScript almak yerine, PHP'nin işi yapmasına ve JavaScript'in sonuçları göstermesine izin vermeye karar verdim. JavaScript çok fazla matematikten "sehr gut" olduğu için bu zamandan tasarruf etmedi.
Tüm sitenizin HTML5'te olduğunu düşünüyorum, bu yüzden arka plan çalışanıyla oynamayı deneyin.
Umarım yardımcı oldum ve lütfen sonuçlarınızı paylaşın.