Podwójne buforowanie w grze HTML5 Canvas?

23

Moja prosta gra na płótnie wydaje się działać dobrze na Chrome i FF na Mac / Linux. Nie miałem jeszcze okazji przetestować go na smartfonach lub środowiskach Windows. Nie używa podwójnego buforowania, ale widziałem kilka przykładów JS Canvas z niego korzystających.

Kiedy zaleca się stosowanie podwójnego buforowania? Czy robi to różnicę tylko w przypadku określonych przeglądarek? Czy jest znaczący spadek wydajności?

Dzięki!

javascript html5 html-canvas double-buffering Petteri Hietavirta
źródło
2
OT: ta gra rządzi, jest bardzo obiecująca, dobra robota (często musisz dużo więcej pracować nad interfejsem, niektóre rzeczy nie są jasne itp.)
o0 '.
To jest naprawdę całkiem słodkie. Zalecenie: przełącz poziom mapy na coś innego niż kosmos. To trochę denerwujące, że moje okno przeglądarki przewija się za każdym razem.
michael.bartnett,
też nie używaj klawiszy strzałek do sterowania. Jestem obecnie w trybie awaryjnym i na małym ekranie przewija się wszędzie ... fyi: p
Tor Valamo
Myślę, że można przechwytywać klucze, aby okna przeglądarki na nich nie działały.
AttackingHobo
Dzięki! A, W, D i powrót również działają teraz. Wyślij tweet na momentumracer lub napisz [email protected] w celu uzyskania dalszych komentarzy lub pomysłów, aby nie stał się on forum czatu :-).
Petteri Hietavirta

Odpowiedzi:

15

Podwójne buforowanie gry opartej na kanwie z pewnością będzie hitem wydajności. W każdej klatce rysowałbyś dodatkową liczbę pikseli równą rozmiarowi obszaru roboczego. W grach opartych na kanwie rysowanie na kanwie jest w większości przypadków największym wąskim gardłem i chcesz je maksymalnie ograniczyć, szczególnie na urządzeniach mobilnych.

Chrome ma przyspieszenie GPU (od najnowszych wersji), a także niesamowity szybki silnik JavaScript (V8), którego nie zobaczysz w środowisku mobilnym. Nawet w Chrome zobaczysz spowolnienie poprzez wdrożenie podwójnego buforowania.

Krótko mówiąc, korzyść z podwójnego buforowania (radzenia sobie z „łzawieniem”) nie jest warta wydajności, którą najprawdopodobniej wybierzesz.

Geoff
źródło
1
Jednak gdy zauważysz migotanie lub coś podobnego, podwójny bufor najprawdopodobniej to naprawi. Aby odpowiedzieć na twoje pytanie: Jeśli zauważysz migotanie, sugeruję użycie podwójnego bufora. W przeciwnym razie nie ma też powodu. Pamiętaj, że podwójny bufor można łatwo wdrożyć lub usunąć (w przypadku zauważenia spadku wydajności przewyższającego migotanie).
user8363
1

Zauważyłem, że używając podwójnego buforowania w ten sposób:

  1. narysuj wszystko na niewidzialnym płótnie
  2. skopiuj niewidzialne płótno na prawdziwe płótno

faktycznie spowalnia renderowanie (niższe fps), zamiast go przyspieszać

Srebrny księżyc
źródło