Stworzyłem grę HTML5 Canvas i JS, która działa świetnie na komputerze stacjonarnym lub laptopie w Chrome (30 klatek na sekundę), ale na mobilnym Safari mam tylko około 8 klatek na sekundę. Czy są jakieś proste wskazówki lub sztuczki, aby zwiększyć szybkość klatek?
Odpowiedzi:
Niestety odpowiedzią jest rysowanie mniej. Znalazłem wąskie gardło związane z aplikacjami opartymi na kanwie (naprawdę na dowolnej platformie), to czas potrzebny na rysowanie pikseli.
Oto kilka rzeczy do wypróbowania:
Użyj kilku warstw płótna. Narysuj tło na jednej warstwie podczas rysowania obiektów na innej warstwie (absolutnie umieszczonej na wierzchu warstwy tła). (Uwaga: nie próbowałem tego na mobilnym safari, ale może pomóc na innych platformach)
Odśwież tylko sprity, które się zmieniły. Jest to trudne, ale zdecydowanie zwiększa wydajność. Chodzi o to, aby zapisać, czy duszek musi być przerysowany, i przerysuj tylko duszki, które tego potrzebują, wraz z tłem za nimi. (Musi to również kaskadować do innych obiektów, które mogą się nakładać.
Problemem związanym z tworzeniem w Chrome jest to, że a) jego silnik JavaScript (V8) jest szybki jak diabli ib) wszystkie najnowsze wersje (7,8,9) mają pewne przyspieszenie GPU, jeśli chodzi o renderowanie na płótnie. To w połączeniu z faktem, że sprzęt mobilny nie jest tak wydajny, jak komputer stacjonarny / laptop, oznacza, że naprawdę trudno będzie uzyskać prawie taką samą wydajność podczas mobilnego safari.
Myślę, że na razie najlepszym rozwiązaniem może być ukierunkowanie gry na mobilne safari od samego początku i próba zbudowania gry, która nie wymaga tak intensywnego przerysowania.
To trochę długa szansa, ale czy Twoja gra może działać na duszkach DIV z transformacjami CSS? Mówię to, ponieważ uzyskuję wspaniałą wydajność dzięki przenoszeniu rzeczy na urządzeniach z iOS z transformacjami i przejściami CSS.
Wydaje się, że są one odpowiednio przyspieszane sprzętowo, z dziwnym zastrzeżeniem, że musisz użyć formularza 3D do przekształceń (tj. Translate3D, a nie tłumacz), aby przyspieszyć. Jest naprawdę bardzo gładkie, a implementacja przeglądarki iOS obsługuje forma, w której ustawiłeś bezpośrednio 16-elementową macierz zmiennoprzecinkową, co jest dla mnie bardzo wygodne.
Jestem pod takim wrażeniem, jak gładko się to kończy, że zamierzałem wypróbować prosty projekt gry napisany w ten sposób.
W przypadku rysowania linii połącz tyle poleceń lineTo przed wywołaniem obrysu.
Ta i kilka innych wskazówek: http://dt.deviantart.com/blog/38471599/
wszystko, co powiedział @Gosub plus:
spójrz na jakąkolwiek matematykę, zobacz, czy jest jakiś sposób na użycie bardziej wydajnych algorytmów.
używaj mniejszych zdjęć. spróbuj zrobić wymiary mocy obrazu 2
sprawdź, czy możesz pozbyć się mieszania alfa na kanwie lub nie używaj właściwości krycia CSS.
prześlij z powrotem swoje wyniki. byłoby interesujące wiedzieć, co najbardziej pomogło.
Nie chciałbym dodawać odpowiedzi do starego wątku - ale jestem zaskoczony, że nikt o tym nie wspominał.
Kiedy piszesz swoje pierwsze gry, po prostu napisz je w sposób, w jaki oczekujesz, że będą działać wydajnie. Powyższe techniki stanowią dobry punkt wyjścia do utrzymania wysokiej wydajności - ale prawdziwą sztuczką jest profilowanie. Jeśli profilujesz swoją aplikację w przeglądarce Chrome lub Firefox (wskazówka: użyj wielu metod, aby zobaczyć dokładne wąskie gardła; abyś nie musiał później przenosić żadnych rzeczy - i tak powinieneś to zrobić). dokładne wyniki pomiaru czasu. W moim przypadku ciągłe przerysowanie tła zajmowało 80% czasu przeglądarki. Po tym, jak usunąłem to z drogi, zobaczyłem, że inne połączenia zajmują odpowiednio 40% i więcej. Po godzinie lub dwóch zauważyłem znaczny wzrost liczby klatek na sekundę.
Chciałbym również usłyszeć od twoich wyników. Próbowałem zrobić to samo. Przekonałem się, że robienie dużej ilości matematyki jest w porządku, ale gdy tylko włożysz płótno, robi się to mentalnie, a liczba klatek spada.
Miałem nakładkę na pierwszym planie, która wyświetlała efekty. To był obraz bardzo wysokiej jakości, ale materiał alfa spowolnił go tak bardzo, że upuściłem go całkowicie w zamian za więcej klatek na sekundę.
Inną rzeczą, którą zrobiłem, było użycie PHP do opracowania niektórych ciężkich matematyki. Miałem duże zbiory danych, ale zamiast JavaScript wyliczać i wyświetlać dane, postanowiłem pozwolić PHP na wykonanie pracy i pozwolić JavaScript wyświetlać wyniki. Nie oszczędzało to dużo czasu, ponieważ JavaScript to „sehr gut” z matematyką.
Rozumiem, że cała twoja strona jest w HTML5, więc spróbuj zagrać w tle.
Mam nadzieję, że pomogłem i podziel się swoimi wynikami.