X, Y 그리드 좌표를 Crafty.js로 변환합니다. 등각 투영 좌표

Question

우리는 2D 보드 좌표를 기반으로 개발되고 정의 된 자바 스크립트 게임을 진행하고 있습니다.

우리는 현재 가지고있는 X, Y 좌표 (즉, 0,0)를 crafty.js와 함께 사용하기 위해 해당 ISO 좌표로 변환하려고합니다.

우리가이 작업을 수행하는 이유는 전통적인 15x15 그리드 공간 인 게임 보드를 무작위로 생성하기 때문에 우리는 아이소 메트릭 3D로 렌더링하고 싶습니다. 그러나 교활한 JS는 다음과 같이 시작되는 이상한 좌표계를 사용합니다. 화면의 왼쪽 상단.

2D 그리드를 다음 이미지에 매핑하는 방법은 무엇입니까? 왼쪽 상단 보드 공간을 (0,6) 또는? 특수 효과?

Answer 1

나는 17x17 보드를 만들기 위해 교활한 작업을하고 있습니다. 현재는지도를 사용하여 모든 위치를 해당하는 교역 위치로 감추고 있습니다. 믿을 수 없을 정도의 해키, 아마도 느린 걸 알지만 솔직히 시간이 없습니다.

위의 이미지에서 숫자가 약간 떨어져 있음을 발견했습니다. 이 상황에서 Crafty가 어떻게 작동하는지 좀 더 시각적으로 보여줍니다.흰색 숫자는 내가 서버에서 얻은 원시 데이터이고, 검은 숫자는 Crafty가이 보드를 렌더링하는 데 필요한 것입니다.

저는 기본적으로 다소 유용한 공식으로 작성했습니다 지도) :

Even rows (starting at 0) 
- y (row) = starting at row number (base 0) then increment by 1 for each x (column) 
- x (col) = previous odds's first x, then follow pattern: +0, +0, +1, +1, +2, +2... 
Odd rows (starting at 0) 
- y (row) = starting at row number (base 0) then increment by 1 for each x (column) 
- x (col) = +1 to previous even's first x, then follow pattern: +0, +1, +1, +2, +2, +3... 

그래서 나는 그 아래의지도를 (이것은 rawToCrafty지도입니다) 작동하는 것 같다 있습니다

//Row 0 
"00.00": { "y": 0, "x": 8 } 
"01.00": { "y": 1, "x": 8 } 
"02.00": { "y": 2, "x": 9 } 
"03.00": { "y": 3, "x": 9 } 
"04.00": { "y": 4, "x": 10 } 
"05.00": { "y": 5, "x": 10 } 
"06.00": { "y": 6, "x": 11 } 
"07.00": { "y": 7, "x": 11 } 
"08.00": { "y": 8, "x": 12 } 
... 

예를 더 나은 방법이있다, 그러나 이것은 무력 방법입니다. 행운을 빕니다!

Answer 2

이 일반적인 개념의 이름은 Projection입니다.

게임 보드를 화면에 그리려면 게임 보드 좌표에서 화면 좌표로 투사합니다.

마우스 클릭 위치를 가져 와서 보드의 어떤 위치를 클릭했는지 확인하려면 화면 좌표에서 게임 보드 좌표로 투영합니다.

이 두 가지 투영법은 서로 반대입니다.

게임 프로그래밍에서 이러한 예측을 수행하는 일반적인 방법은 매트릭스를 사용하는 것입니다. 내가 제대로 이해했다면

Answer 3

다음과 같은 출력에 다음과 같은 입력을 매핑 할 :

입력 :

0,0 0,1 0,2 0,3 0,4 0,5 
1,0 1,1 1,2 1,3 1,4 1,5 
2,0 2,1 2,2 2,3 2,4 2,5 
3,0 3,1 3,2 3,3 3,4 3,5 
4,0 4,1 4,2 4,3 4,4 4,5 
5,0 5,1 5,2 5,3 5,4 5,5 

출력 :

0,6 0,5 1,4 1,3 2,2 2,1 
0,7 1,6 1,5 2,4 2,3 3,2 
1,8 1,7 2,6 2,5 3,4 3,3 
1,9 2,8 2,7 3,6 3,5 4,4 
2,10 2,9 3,8 3,7 4,6 4,5 
2,10 3,10 3,9 4,8 4,7 5,6 

내 행렬이 매우 녹슨 있습니다. 나는 이것을 사용하기 위해 그들을 사용하는 깔끔한 방법이있을 것이라고 확신하지만, 나는 당신에게 나의 해커 답을 줄 것이다.

이것은 당신이 뭔가를 할 수있는 일반적인 문제의 인스턴스가되지 않는 가정 :

function mapCoords(xIn,yIn){ 
    return { 
     x:Math.floor((xIn+yIn)/2), 
     y:6+xIn-yIn 
    } 
} 

그러나 나의 이해, 수 있도록 일반화, 그리고 그 일을 더 우아한 방법이있을거야이 당신의 본보기를 해결합니다.

Answer 4

// 직교 등축 :

isoX = cartX - 카티

isoY = (cartX 카티 +)/2

// 사시에 직교 :

cartX = (2 * isoY + isoX)/2

카티 = (2 * isoY - isoX)/2