뷰포트가있는 HTML5 등각 투영 캔버스 - 매우 열악한 성능

kinetic-viewport 라이브러리를 수정하여 scrollable 맵을 만들었지 만 성능 관련 문제가 발생했습니다. 나는 30x20 직사각형을 만들었고 그들은 120*에 의해 회전되었습니다. 그것은 당신이 볼 수 있듯이 매우 간단하지만 많이 뒤떨어집니다, 나는 그들에 이미지를 넣고 스프라이트와 애니메이션을 만들면 어떻게 될지 궁금합니다. 게임은 내가 상상할 수 없을 것이다.뷰포트가있는 HTML5 등각 투영 캔버스 - 매우 열악한 성능

내가 뭘 잘못하고있어? 전에 상용 사이트를 작성한 적은 한 번도 없었습니다. 게임을 만들 때 다르게 생각해야할까요?

데모 - RMB을 눌러 스크롤하십시오. 확대 Mousewhell를 사용 - http://godlike.hekko.pl/kinetic-viewport/demo.html

소스 - 당신이하여 setInterval을 사용하고 참조 http://godlike.hekko.pl/inne/kinetic-viewport.7z

감사

출처

2012-10-22 user1697180

: 당신이 더 사용할 수있는 requestAnimationFrame API를 사용하는 것, 그것은 특히 애니메이션에 대한 생각 그리고 줄 것이기 때문에 프레임 율을 높이고 CPU 사용률을 낮추십시오 (따라서 모바일 장치를 타겟팅하는 경우 배터리 사용량이 적습니다).

스크롤링 게임을 만들 계획이라면 게임에 대해 특별히 생각한 것을 시도해 볼 수도 있습니다. 나는 또한 참여하고있는 Canvace을 권하고 싶습니다. :)

출처

2012-10-22 15:03:48 jmc

나는 html5 캔버스에 관한 책을 사서 requestAnimationFrame과 몇 가지 기능을 사용하여 코드를 다시 작성했습니다. 너무 무거웠 기 때문에 kineticJS도 제거했습니다. – user1697180

뷰포트가있는 HTML5 등각 투영 캔버스 - 매우 열악한 성능

답변

관련 문제