[Thiocomaster]

Robię grę multiplayer w js na canvas i mam problem z wydajnością. Mam jeden canvas na mapę, nad nim canvas, w którym jest wyświetlany tylko gracz i nad nim canvas do wyświetlania elementów mapy, które mają przysłaniać gracza. Mapa jest dużo większa od canvas gracza, który znajduje się na środku i po prostu wraz z ruchem gracza tj. 32px renderuję od nowa mapę co 2px, żeby płynnie wszystko się przesuwało. Problem jest z wyświetleniem innych graczy, bo jeśli renderuję ich na canvas gracza to podczas ruchu gracza przesuwają się o 2px w kierunku przeciwnym do kierunku gracza i potem znowu są rysowani przez co wygląda jakby lekko skakali w miejscu. Kiedy rysuję innych graczy na canvas mapy to problem nie występuje, ale wydajność drastycznie spada i po prostu zaczyna się zacinać. Czy powinienem wyrzucić innych graczy do osobnego canvas, czy może jest jakiś sposób na przesunięcie mapy bez jej ponownego rysowania? Oczywiście przy przesunięciu za każdym razem renderuję tylko kratki w polu widzenia gracza.
#naukaprogramowania #javascript

[janekbrzechwa]

@Thiocomaster dlaczego robisz to na osobnych canvasach w ogóle?

[magic96]

@Thiocomaster: obczaj sobie jak to zrobiłem tutaj - generalnie w żadnym przypadku nie korzystasz z więcej niż jednego canvasa, a przeusnięcie i rysowanie obrazków względem elementów liczysz sobie na poziomie JS.

[Thiocomaster]

@janekbrzechwa: jak próbowałem na jednym to mapa była ok, ale coś mi gracz migał, ale możliwe, że coś źle to napisałem
@magic96: oo dzięki za przykład, ale chyba muszę mieć dodatkowy canvas na elementy, które przysłaniają gracza kiedy pod nimi przechodzi? chodzi mi o przejście przez bramę jak tutaj https://youtu.be/mdpCz7ncrNg?t=14

[magic96]

@Thiocomaster: nie musisz, w canvasie przed renderowaniem elementów zachowujesz po prostu kolejność - na danych koordynatach stawiasz po prostu nachodzące elementy wraz z ich grafikami, możesz też sortować te elementy dając im np. z-index.

I mean z-index interpretowany przez ciebie :) docelowo - chodzi o kolejność context.drawImage.

[Thiocomaster]

@magic96: no to super, dzięki za pomoc

[magic96]

@Thiocomaster: swego czasu @rezoner rozwijał fajnego libka do gierek z 2D, może jego wrapper akurat będzie przydatny do czegoś takiego ( ͡° ͜ʖ ͡°)

[Thiocomaster]

@magic96: nie celuję raczej, żeby gierka była dostępna dla szerszej publiczności, tylko na początku nauki miałem taki pomysł, że odtworzę margonem i wtedy wiadomo odbiłem się strasznie, więc robię sobie takie podejście co jakiś czas, żeby zobaczyć progres