Canvas 아이소 메트릭 게임 엔진 -지도 이동

Question

저는 아이소 메트릭 게임 엔진을 만들기 위해 튜토리얼 (http://glacialflame.com/category/tutorial/)을 사용해 왔지만,지도를 초점 포인트로 이동하고 싶습니다.

그래서 이동하면지도가 문자 중심에 배치됩니다.

여기 좀 페이스트 빈을 가지고 http://pastebin.com/U75Pz4Yy

여기에 직접보기 : http://www.wikiword.co.uk/release-candidate/canvas/newEngine/index.html

요청에 의해, 바이올린 되세요! http://jsfiddle.net/neuroflux/vUxYg/2/

참고 : IE6을 사용하는 경우에만 HTML5와 캔버스 브라우저입니다 는 신음하지 않는다

모든 아이디어와 도움을 주시면 감사하겠습니다)는, 나는 그것을 할 수 있다고 생각 배열의 각 "타일"을 각각 +1 또는 -1로 업데이트하지만 이미 캔버스에있는 타일 이미지에 ForEach 루프를 수행 할 수 없습니다.

미리 환호하십시오!

Answer 1

지도 이동은 플레이어 위치별로 컨텍스트를 번역하는 것처럼 간단해야합니다.

X 또는 Y에 의해 플레이어의 이동으로

, 그래서 캔버스

난의 중심에 항상 토끼를 만들기 위해 오프셋 권리를 찾는 귀찮게 didnt는 (양 또는 음으로) 같은 양으로 번역한다 화면, 그러나 그것은 당신에게 어떻게 완료의 아이디어를 제공해야합니다.

Answer 2

하나의 캔버스 만 가질 필요없이 캔버스 3 개를 관리하고 절대 위치 지정을 사용하여 3 개의 div로 설정할 수 있으므로 각 div가 이전 배경 위에 투명한 배경으로 구성됩니다. 선수지도에 개체에 대한

하나 (즉, 중복 수있는 플레이어)

이 캔버스는 눈에 보이는 놀이터보다 큰 것이 배경

하나

• 일 (수 오버플로 CSS 설정으로 관리). 플레이어는 항상 놀이터의 중심에있게됩니다. 움직일 때 배경과 최상위 레이어를 다시 그리는 대신 div 위치 만 처리하면 브라우저가 그래픽 작업을 수행합니다.

  그런 다음 숨겨진 캔버스 미리로드로 처리 할 수있는 새로운 배경 타일을로드하는 문제가 있습니다. 그리고이 방법으로 캔버스를 다른 레이어 (활성 마커 레이어, 다른 플레이어 레이어 등)에 적용 할 수 있습니다. 브라우저 그래픽 엔진이 대부분의 최종 화면 그림 렌더링을 수행하는 '스프라이트 레이어 인 div'입니다.

Answer 3

이 공격 방법에는 여러 가지가 있습니다 :

1. 당신은 보이지 않는 (결국)이 된 요소를 삭제, 전체 캔버스를 이동할 수 있습니다. 그러면 왼쪽 상단 구석이 -257467,374672에 있다면? 렌더러에 추가 된 기능 중 하나입니다.

2. 캔버스를 움직이는 대신 시간의 이미지를 이동할 수 있습니다. 따라서 맵 조각의 모든 스타일 요소에 대한 배열을 만든 다음 루프에서 background-image 스타일을 주위로 이동하십시오. 지도 요소는 그대로 유지되고 이미지 만 변경됩니다.

3. DOM 노드를 생성/삭제하고 기존 노드를 이동할 수 있습니다.하지만 내 경험으로 볼 때 브라우저가 변경된 내용을 파악한 다음 DOM 트리를 업데이트하고 렌더링 캐시를 플러시하고 다시 변경 한 부분을 렌더링하고 많은 개체가 만들어지고 파괴되어야하기 때문에 비용이 많이 듭니다.