HTML 캔버스 요소의 "카메라"이동하기

Question

캔버스 요소의 "카메라 이동"을위한 명확한 방법을 찾으려고합니다.

내 프로토 타입 게임 (사이드 스크롤러) 용입니다. 나는 주위에 움직이는 "카메라"를 시뮬레이션하기 위해 전체 노드 세트를 움직이는 것보다 나은 해결책이 있다고 생각하고 싶습니다.

간단한 방법 (오프셋을 사용합니까?)을 읽었을 때 거의 확실하지만 의심을 불러 일으키기 시작한 사실을 발견하지 못했습니다 ... 나는 그것을 읽는 것을 상상해보십시오.? 저를 명확히하는 데 도움

감사합니다 ... J

Answer 1

아마도 당신이 당신의 전체 게임 장면 다시 그리기 30 회 초 (다소) 당신은 당신의 전체 게임의 장면을 다시 그릴 필요가

하지만 첫을 Canvas 컨텍스트를 일부 오프셋으로 변환합니다.

정확히 원하는 것입니다. 당신은 그뿐만 아니라 save() 및 restore() 방법의 사용법을 읽고 싶어 할 것입니다.

컨텍스트를 변환하면 이후에 그려지는 모든 내용이 그만큼 이동합니다.

그래서 여러분은 drawImage(badguy,50,50)을 사용하여 50,50에 무언가 (아마 적)를 그립니다. 그러면 플레이어가 움직입니다. x이 translate으로 변경됩니다 (플레이어가 오른쪽으로 움직이기 때문에 플레이어가 오른쪽으로 움직이기 때문에). drawImage(badguy,50,50) 명령을 사용하여 여전히 적의 스프라이트를 그립니다.하지만 그릴 때 적을 context.translate(-1,0) 명령이 그려지기 전에 모든 것을 이동시키기 때문에 49,50에있었습니다.

물론 성능에 올랐을 때 실제로 화면에서 볼 수있는 것을 그리는 것만을 확실히하고 싶을 것입니다! 너의 레벨이 context.translate(-2000,0)으로 훨씬 내려 간다면, 더 이상 50,50의 객체를 볼 수없고, 볼 수있는 영역을 가로 지르는 객체 만 필요하다.