본문 바로가기

[Mobile]isometric map 만들기

사각형의 Map으로만 작업을 하다, 현재 개발 중인 게임의 맵과 관련이 있어서, 정리하게 되었어요.

이게, isometric 인지도 모르고 작업을 하다. ㅡㅡ;; 알게 되었습니다.



isometric view는 간단히 설명하자면, 화면에 멀어질수록, 점점 작아져 보이는 효과가 없이, 전체가

균일한, 형태의 마름모로 이루어져 있습니다.


이 맵의 장점이라면, 2D에서 표현할 수 없었던, 깊이를 표현할 수 있다는데 있습니다.


사각형이 더 정확하게 말씀드리면, 세로의 길이가 가로의 길이의 1/2인 마름모로 이루어져 있어서

오브젝트의 높이 혹은 깊이를 표현 할 수가 있어요.


 

 
 
 

 위 swf에 표시된 좌표 값을 유심히 살펴 보시면, isometric view를 표현 하는데, 필요한 단서를

잡으 실 수 있을 거에요.


스크립으로 표현 하자면,


가로 * 세로 5 * 5 인 맵을 만든다면,


가로 길이 타일 한개가 가로width, 세로 height  가정하에



for( var i = 0 ; i < 5 ; i++){ // 세로 길이 Y축

   for( var j = 0 ; j < 5 ; j++){ // 가로 길이 X축

       

      mc._x = width/2 *(j - i);

      mc._y = height/2 *(j + i);


 }

}



로 표현 할 수 있어요. 제가 생각하기에 위 에 파란색으로만 표시된 부분이 이해가 된다면,

다음 맵을 구현 하는 것은 반 이상은 해결이 된거라고 생각됩니다.



위 값을 trace() 이용해서 찍어보면,


(0, 0), (1,1), (2,2) 이런식으로  위 에서 부터 아래로 차례로 맵이 만들어진다는 것을 알수 있어요.

펌 : http://blog.naver.com/goople?Redirect=Log&logNo=150003158559