조회 수 1613 추천 수 4 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

 


 


오늘은 그동안 알려드린 내용을 얼버무려 지형을 만들어내는 과정을 알려드리도록 하겠습니다.


 


지형을 아주 간단하게 표현할 수 있는 방법으로 높이맵(Height Map)이라는 기법이 있습니다.


 


이 기법은 평면 타일을 배열하고, 각각의 높이값만을 변화하면서 지형을 표현하는 방법입니다.


 


 


 


GPG Study의 pinewood 님의 스크린샷이 도움이 될것 같아 이것의 예제그림으로서 첨부하겠습니다.



 


이 스크린샷을 통해 거리에따라 폴리곤의 수를 다르게 사용하는 LOD 기법을 적용한 스크린샷이지만,


 


어떻게 높이를 이용해 지형을 표현하는지 알 수 있으실 것입니다.


 


 


 


일반적으로는 디자인의 편리성을 위하여 높이값을 저장한 그림을 사용하지만, 여기에선 순수하게 코드를 설명하기위해 배열을 이용하겠습니다.


 


 


 


우선 높이를 저장할 수 있는 2중 배열을 만들어 냅니다.


 


float Height[10][10] = {0,}; // 10*10크기의 맵


 


이 배열에 높이 값을 변화하여 지형을 디자인한 후,


 


그 후, 위 배열을 우리가 사용할 버텍스 배열에 정확하게 옮겨주면 됩니다.


 


 


 


CUSTOM_VERTEX map[100]; // 10*10= 100


 


for (int i = 0; i < 10; i++)


{


    for (int j = 0; j < 10; j++)


    {


        map[(i*10)+j].x = i;


        map[(i*10)+j].y = j;


        map[(i*10)+j].z = Height[j][j]; // (i*255)+j 는 1차배열이 256개인 경우의 [i][j]와 같은 기능을 합니다만, 1차원 배열에서 사용하기위한 변환입니다.


    }


}


 


간단하게 커스텀 버텍스배열에 좌표를 입력하였습니다.


 


이때 텍스쳐의 좌표(u,v) 값이나 정점 특유의 색(diffuse) 값 등을 함께 입력하시는 것이 좋습니다.


 


그럼 x, y 좌표는 배열의 순서에 맞게 평면 배치가 될 것이며, 높이는 Height값이 될 것입니다.


 


 


 


이 버텍스들을 그대로 출력한다고 삼각형이 그려지는 것이 아니니, 이제 그림을 그릴 순서를 정해주어야 합니다.


 


인덱스 버퍼를 만들어주는 것이지요.


 


정점들은 (i*255)+j 공식을 이용하여, 좌표 접근이 가능하므로, 자유롭게 그림을 그려줄 수 있습니다.


 


즉 배열의 인덱스를 다음과 같이 생각하시면 됩니다.


 


 0   1   2   3    4   5   6   7  ...


10  11 12  13  14  ...


...


90 ........................... 99


 


이런 인덱스들을 선으로 엮어 하나의 판을 만들어 주는것이 목적입니다.


 


 


 


이때 사각형을 그리는데 사용하는 방식은 다음과 같습니다.


 


1 3 5 ...


2 4 6 ...


 


1부터 순서대로 선을 이어주는 방식으로 TRIANGLE_STRIP을 걸어주시면, 계속 이어지는 사각형을 구성할 수 있지요.


 


이 방식으로 1,2라인의 높이값 사이부분을 채워주시고 (256번째까지), 이것이 끝나면, 다음줄로 이동합니다.


 


   1   3   5  // 1라인


   2   4   6  // 2라인


     - 라인 구분-


   11  9   7  // 2라인


   12 10  8  // 3라인


 


숫자 순서대로 각 라인의 인덱스를 호출해주시면 됩니다. 짝수번째 라인에서는 그리는 방향이 역순이 되는군요.


 


이런 방식으로 라인변환을 하면서 전체의 맵을 구성할 수 있을 것입니다.


 


 


이것을 코드로 구현하면 다음과 같이 됩니다.


 


WORD index[180]; // 20*9 = 180


 


int count = 0;


for (int i = 0; i < 10; i++)


{


    for (int j = 0; j < 10; j++)


    {


         index[count++] = i*10+j;


         index[count++] = (i+1)*10+j;


    }


}


 


여기부터 헷갈리실 것 같네요. 20*9라는 숫자가 어째서 튀어나왔는가 부터 그 밑의 대입까지,,


 


20*9라는 숫자는 다음과 같습니다. 우선 그림을 그리려면 위 아래 두줄을 참조해야 합니다.


 


따라서 1줄당 20개의 인덱스가 필요하지요.


 


그리고 총 10개를 이용하여 그리는 사각형 라인은 9개입니다. (10개의 점 사이 공간이 9개 인것을 생각하세요.)


 


따라서 총 인덱스가 180개가 필요하게 된 것이지요.


 


 


밑에서는 index 배열에 2개씩 순차적으로 접근하면서 1,2 라인의 인덱스 값을 순서대로 적어주게 됩니다.


 


이런 방식으로 0번부터 9번까지 사각형 라인을 그려나갑니다.


 


아주 간단하게 위에서 말한 순서대로 정점 배치가 끝났습니다


 


 


 


이 부분은 저도 실제로 사용하고 있는 부분이지만, 실제로 진행되는 과정을 보여드릴 수 없는 것이 안타깝습니다.


 


이해가 안가는 부분에 대해서 질문해주시면 성심성의를 다하여 답변해드리도록 하겠습니다.


 


 

?

  1. 물체 밀어서 움직이는 이벤트 조금 더 쉽게 하는 법

  2. [마지막 3명 모집] [취업연계무료교육] VR/AR 게임 콘텐츠 전문가 양성 과정 교육생 모집

  3. rpg vxa 로 겜만들때 데미지 설정 공식[링크]

  4. [꿀팁] 간단하게 만들 수 있는 실시간 전투 시스템

  5. JSON parser 변환데이터 저장시 생기는 Object Too Deep 해결하기

  6. 앙뜨프리너십에서 해커톤 부트캠프 모집중이네요

  7. RPG MV에서 플러그인 오류의 원인에 대하여

  8. RPG MV 게임 도중에 윈도우 스킨 파일 자체를 통째로 바꿔버리는 방법 (출처: HIME)

  9. 게임의 버전을 짜 보자! - 유의적 버전 2.0.0

  10. 텍스트 대화 도중 메뉴 여는 방법을 알아냈습니다!

  11. rpgmv 마우스 지원과 터치 지원이 되니.

  12. RPG Maker MV 와 AJAX를 이용한 웹통신 관련 영상.

  13. RPG게임 뻔한요소들.

  14. 자바스크립트와 관련해서 참고할 만한 사이트들

  15. 꿀잼이군요!

  16. [RPG2000/3 팁] 간편한 이벤트 단축키

  17. [RPG2000/3 팁] 간편한 이벤트 단축키

  18. [강의링크] 대비법칙-색상대비-밀당의 재미 약한 반대색 설계

  19. 오다 주웠습니다.

  20. 무료 이미지 사이트 Pixabay!

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 51 Next
/ 51


[개인정보취급방침] | [이용약관] | [제휴문의] | [후원창구] | [인디사이드연혁]

Copyright © 1999 - 2016 INdiSide.com/(주)씨엘쓰리디 All Rights Reserved.
인디사이드 운영자 : 천무(이지선) | kernys(김원배) | 사신지(김병국)