Javascript, niska jakość zdjęć

Question

Dokonałem grę snake w javascripcie, niestety użyte zdjęcia powiedzmy 100 na 100 w px po zminiaturyzowaniu do powiedzmy 20 na 20 w px są kompletną pikselozą i aż oczy bolą. Robiłem kiedyś podobną gierkę ale w Javie, i tam tego problemu rysując na canvasie nie miałem więc zakładam że jest jakiś sposób by ominąć ten problem w js tylko za bardzo nie wiem jaki - jakich używacie bibliotek/frameworków by ominąć takie efekty?

Answer 1

Do robienia gier w canvasie polecam biblioteke PixiJS. To moje kilka gier z tą biblioteką:
http://fx-team.fulara.com/team/adam/pixi2/
http://fx-team.fulara.com/team/adam/asteroids/
http://fx-team.fulara.com/team/adam/gra/
https://tim-bunnyhug-29539.herokuapp.com/ (multiplayer)

Prawdopodobnie twój obrazek jest rozmyty bo współrzędne twojego sprite'a nie są liczbą całkowitą przez co canvas używa antialiasingu i rozmywa twój obrazek. Rozwiązaniem jest użycie Math.round() lub innej funkcji do zaokrąglania.
Więcej o tym:
https://www.html5rocks.com/en/tutorials/canvas/performance/#toc-avoid-float

Comments

Dziękować :D