midas+son의 크리에이티브(creative) 이야기

맵툴에 이미지 추가하고
길찾기 알고리즘을 적용해보았습니다.

- 타일 추가 후 가상 스크롤 적용
- 타일 적용한 공간에 이동가능 속성적용
- 길찾기 알고리즘 적용
  1. 이동 가능 지역 체크(연하늘색)
  2. 시작점(빨간색), 목표(노란색)
  3. 이동경로 체크(파란색)
- 디버그를 위한 라인작업




[영상 - 길찾기 테스트]


길찾기 알고리즘 자체는 어렵지 않았는데

디버그를 위해서 라인을 그리고

색 추가한것이 문제를 일으켜서

4시간 넘게 계속 처다 봤습니다.


결국 해결했는데 문제가 뭐였냐면

HPEN변수로 Create 해주고나서

DeleteObject 를 실수로 안해줬더니

3번 연달아 길찾기 시도할때마다

색이 하나씩 안나오고 사라지는 것이었습니다.

이런 사소한 것으로 시간을 많이 잡아먹었지만 

역시 깨달음의 하루였습니다.

만들면 처리하자....입니다.


* 내일 할일 - 인게임에서 캐릭터가 길찾기 따라 이동

길찾기 알고리즘을 적용해 보려고 하였으나
순서상 타일의 정보를 가지고 있는 맵이 있어야 하므로
맵툴을 먼저 만드는게 순서라 생각해서
제작에 들어갔습니다.

- 샘플 타일 이미지(bmp) 생성
- 총 맵사이즈는 윈도우 창(1024px)보다 크게
 + 카메라 적용 하여 이동
- 카메라 안(윈도우 사이즈)만 그려주므로
 프레임 저하 최저
- 하나의 타일 32 * 32 픽셀
- 이미지 하나는 256 * 256 이므로
  가상으로 가로세로 각각 8등분 
- 이미지 클릭 후 맵 클릭시
  64개의 타일정보를 입력
- 맵 정보를 저장
- 인게임에서 로드

기본적인 맵툴의 Base는 짰으니
내일 부족한 부분 채워 넣으면서
구체적으로 디테일하게 만들겠습니다.

그게 끝나야지 맵타일마다의 정보로
길찾기알고리즘 적용이 되겠네요.

오늘은 여기까지~



[영상 - 맵툴 기본]


* 내일 할일 - 맵툴 디테일

맵에 대한 타일과 
길찾기 알고리즘으로
A*(에이스타) 알고리즘에 대해 공부를 했는데
가야될 경로와 
캐릭터를 아직 연결하는 과정에서 
원하는데로 움직이지 않아서 
제대로된 움직임이 나오지 않았습니다.
내일 다시 시도 해보겠습니다.

오늘 마무리된 작업은
기본적으로 캐릭은 맵의 중간에 위치하지만
움직여도 맵이 움직이는 것처럼 보이게 하고
캐릭이 화면 밖으로 나가지 않게 처리하였습니다.
맵 상하좌우 끝자락에 오면 
맵은 움직이지 않고 
캐릭 좌표가 움직이게 처리했습니다.

어떤 방식인지 자세히 얘기 하자면
맵 전체 이미지에 대해 캐릭의 좌표를 지정합니다.
맵에 대한 render(그리는 함수)는 
맵 전체를 그려버리면 리소스가 커지므로
맵 그리기 시작 좌표를
{캐릭 x좌표 - WINSIZEX / 2, 캐릭 y좌표 - WINSIZEY /2}
부터 시작하여
width = WINSIZEX 
height = WINSIZEY
만큼만 그려줍니다.

그러면 일단 캐릭을 움직여도 
맵은 캐릭 좌표 기준으로 상하좌우 반씩만 보이므로
중앙에 있는 것처럼 
이동하게 됩니다.
 
캐릭 x좌표 - WINSIZEX / 2 가 0보다 작아지면 
0으로 치환

캐릭 y좌표 - WINSIZEY / 2 가 0보다 작아지면 
0으로 치환

캐릭 x좌표 + WINSIZEX / 2 가 맵 가로사이즈 보다 커지면
맵가로사이즈 -  WINSIZEX 로 치환

캐릭 y좌표 + WINSIZEY / 2 가 맵 세로사이즈  보다 커지면
맵세로사이즈 -  WINSIZEY 로 치환

하여 맵 그리기 좌표 시작 하면 
맵이에서 윈도우 창에서 벗어 나지 않게
컨트롤 할수 있게 됩니다.

이를 카메라 라고 칭합니다.

영상은 내일자로 같이 보여드리는 걸로 하고 
오늘은 영상 없습니다.

* 내일 할 일 - A* 알고리즘(길찾기 알고리즘)대로 캐릭터 움직이기

이제 인게임(inGame)을 처리 해야 되는데

우선적으로 맵을 만들어야 되고

그 맵에서 플레이어 캐릭이 

이동 할 수 있게 적용해야 됩니다.


근데 맵에서 캐릭터 이동하는 방식을 크게보면

1. 픽셀 충돌을 이용한 이동

- 픽셀 충돌을 이용한 대부분 직선 이동(특정 색상에서만 방향 전환)

[그림1]

2. 맵 타일 속성에 따라 이동

- 길찾기 알고리즘을 적용하여 타일단위 이동

[그림2]


대략 위 2가지 방법 중 하나를 사용해야 하는데

전 2가지 다 적용할 생각입니다.


원작 게임을 보면 

플레이어 이동 방식은

그림 2와 같은 타일단위 이동이고

몬스터들이 이동하는건

그림 1과 같은 픽셀충돌 이동입니다.


그러하므로 일단 플레이어 처리를 해야하니

그림 2와 같은 방법을 적용하고

이후에 몬스터 클래스를 만들어 적용 할때 

픽셀 충돌 이동을 적용하도록 하겠습니다.


오늘은 이론적인 것을 생각해 보면서 공부를 했습니다.

이번주는 맵과 길찾기 알고리즘에 대해 작업하겠습니다.


* 내일 할일 - 맵 관련, 길찾기 알고리즘 적용 시작

캐릭터 생성 후 정보 로드 기능 고도화 및 삭제 기능 추가

- Data 파일로 저장된 데이터 로드
- 각 캐릭에 맞는 이미지 로드
  (머리스타일, 칼라, 직업 => 현재는 남,녀 각각 1종) 
- LoadGame에서 3배수로 로드 데이터 분할
- 3개의 캐릭마다 각각의 페이지를 할당
- 캐릭 3개 생성 이상부터 좌우 페이지 이동 버튼 표시
- 페이지 이동버튼, 삭제, 확인 버튼은 
  각각 마우스에 대한 out, over, press 이미지 별도 구성
- 슬롯 클릭하지 않을 시에는 
  삭제, 확인 버튼은 disable 버튼 별도 표시
- 캐릭터 슬롯 클릭 시 Data파일에서 정보 로드하여 표시
- 캐릭터 삭제 기능 추가
- 삭제 버튼 클릭시 
  캐릭터 슬롯 및 페이지 자동 재 정렬(Data도 재정렬)
- 확인 버튼 클릭시 
  선택된 슬롯의 캐릭 정보로 인게임 적용

[캐릭터 선택 및 삭제 / 인게임 접근]

===

캐릭터 이름 작성하는 부분이 현재 없어 삭제나 정보 로드에 대한 것을 보여주기 위해 영상 중간에 보시는 바와 같이 데이터 파일을 직접 수정하여 알아 볼 수 있게 바꾸었습니다. 이름 지정도 추후에 추가할 예정 입니다.

===


* 한주간 작업 감상평 : 
첨에는 게임에서 기본적인 부분이니까 쉽게 생각 했는데
의외로 손이 많이 가는 작업이었습니다.
세세하게 버그 없이 데이터를 주고 받고 삭제하고 정렬해야되고 
슬롯 페이지 구성도 다 따로해야 되고
자잘한 작업이 많았지만
그래도 보람이 느껴지는 작업이었습니다.
나중에 캐릭터들 헤어스타일 추가해주면서
이름도 지을수 있게 하면 
더 멋진 메뉴페이지(캐릭 생성, 로드)가 될거 같은데
이건 추후에 퀄리티 높이는 후반 작업때 진행 해야겠습니다.

이제 담주(내일)부터는 드디어 인게임 작업으로 들어갑니다.
플레이어 동작과 맵 작업이 기대되네요.

오늘은 & 이번주는 여기까지!! 
                


모작을 시작한 지 첫 주말

어제 만든 캐릭터 생성에 대한 INI파일에서 
정보를 로드 하는 부분을 LoadGame에 설정

캐릭터 이미지 부분을 제외한 
정보 로드까지 작업

불러온 정보를 Char[] 변수에 담고
CreateFont로 폰트를 설정한 뒤에 각각의 위치에 담아 렌더

오늘은 여기까지...

[그림 - 정보로드]

* 내일 할 일 - 캐릭터 선택 부분에 캐릭터 이미지를 불러오고 선택한 캐릭터 정보를 가지고 인게임으로 체인지


캐릭터 생성 작업


버튼 모션 추가(각각 버튼 마다 out, over, press)

머리, 몸통 스프라이트 구성

걷기 애니메이션 추가

남자 1종, 여자 1종 헤어 및 몸통


성별, 헤어 스타일, 헤어 칼라 고를 수 있게 소스 작업은 다 해놓았으나

헤어에 대한 스프라이트 작업이 

꽤 오래 걸려 추후에 천천히 추가

일단 남자, 여자 성별만 고를 수 있게 작업


생성 버튼을 클릭하면 INI파일로 생성 정보 저장


오늘은 여기까지...


[캐릭터 생성]



* 내일 할 작업 - 해당 INI파일을 로드하여 LoadGame에서 inGame으로 넘어가는 로직 추가 예정


인트로, 타이틀 씬 제작


이미지는 실제 게임 라그나로크 온라인을 설치하여

캡쳐하여 사용하였습니다.

지금이 2016년 1월 이니까 

원숭이와 한복입은 캐릭터들이

새해 분위기 물씬 풍기고 좋네요.


텍스트는 제가 포샵으로 심플하게 만든겁니다.


New Game의 캐릭터 생성 컨트롤이나 Load Game은 아직 미처리 입니다.

오늘은 저녁 약속이 있어서 여기까지



[인트로, 타이틀 씬]


* 내일 할 작업 - 캐릭터 생성 창 구성 및 실제 캐릭 생성까지

일반적인 마우스 커서를 

ShowCursor(false);

안보이게 하고

실제 게임에서 사용하는 이미지를 적용해 보았습니다.


씬마다 별도로 마우스 컨트롤 하는 것이 번거롭다고 생각하여

Singleton으로 하나의 매니져를 만들었고

mainGame에서 별도로 update와 render하여

로딩이든 타이틀이든 인게임이든 

이미지로 대체된 마우스 커서 컨트롤이 쉽게 하였습니다. 

[커서 이미지 샘플]


[커서 동작 영상]

이미지 등록을 위한 

로딩씬 제작


겉멋을 위해서 GDI+를 이용하여

 마법진 이미지를 Rotate하고

progressbar로 진행표시를 하였습니다.

로딩이 끝나면

 inGameScene으로 넘어가게 됩니다.


[로딩씬 영상]