[cub3D] 구현 과정을 정리

cub3d 구현 과정을 정리.

 

github

GitHub - moaoh/cub3D

 

입력값에 유효성 검사 진행하기.

mlx를 사용하여 맵을 표현 해보기.

mlx를 포함하여 컴파일하기

 

[ 2021. 01. 23 ]

1. img 파일을 받아서 맵에 표현하기.

2. 동서남북 각각 다른 값들을 줘보기.

 

[ 1. img 파일을 받아서 맵에 표현하기. ]

void *mlx_png_file_to_image(void *xvar, char *file, int *width, int *height)

void *mlx_xpm_file_to_image(void *xvar,char *file,int *width,int *height)

2개 모두 이미지를 data로 바꿔주는 함수여서 2개 중 편한 것을 사용.

 

 [ 2. 동서남북 각각 다른 값들을 줘보기. ]

while (1)
{
	if (info->sideDist.Y < info->sideDist.X)
	{
		info->sideDist.Y += info->deltaDist.Y;
		info->map.Y += info->step.Y;
		info->side = 0;
	}
	else
	{
		info->sideDist.X += info->deltaDist.X;
		info->map.X += info->step.X;
		info->side = 1;
	}
	if (ray_info->map[info->map.Y][info->map.X] == '1')
		break ;
}

main_loop에서 사용하였던 side 값은 레이 트레이싱이 x축에 부딪쳤는지 y축에 부딪쳤는지 판단이 가능하다.

그래서 side 값을 통하여. 동서와 남북으로 나눌 수 있다.

마찬가지로 main_loop에서 사용을 했던 플레이어의 현재 위치와 광선의 위치를 어느 쪽이 더 큰지를 비교하여
동, 서, 남, 북으로 쪼개어 볼 수 있다.

 

 

[ 2021. 01. 25 ]

1. 동서 남북으로 나눈 것을 기준으로 벽에 xpm 적용시키기.

 

[ 1. 동서 남북으로 나눈 것을 기준으로 벽에 xpm 적용시키기. ] 

void	*mlx_xpm_file_to_image(void *xvar,char *file,int *width,int *height)
char	*mlx_get_data_addr(void *img_ptr, int *bits_per_pixel, int *size_line, int *endian);

xpm 값을 벽에 적용시켜보려면 일단 mlx_xpm_file_to_image 함수와 mlx_get_data_addr 함수를 아는 것이 중요하다.

void	*mlx_xpm_file_to_image(void *xvar,char *file,int *width,int *height)

mlx_xpm_file_to_image 반환 값 :  img 그 자체(?)

xvar : mlx 값.

file : 열어서 사용하려고 하는 texture의 위치와 파일명 ( ex../texture/test.xpm)

width : 열은 xpm 파일에 x축 값 (반환 값)

height : 열은 xpm 파일에 y축 값 (반환 값)

char	*mlx_get_data_addr(void *img_ptr, int *bits_per_pixel, int *size_line, int *endian);

mlx_get_data_addr 반환 값 : img의 data값. 1차원 배열 값으로 반환이 된다.

img_ptr : mlx_xpm_file_to_image에서 구한 img 값.

bits_per_pixel :  픽셀 1개 (색상)을 표현하는데 필요한 비트수 / 비트에 따라 색상의 구조 및 방식도 다름 (반환 값)

size_line : data에 1줄의 길이. 1차원 배열로 값이 반환되기 때문에 벽에 값을 적용시키려면 사용해야 하는 값. (반환 값)

endian : 사용하지 않았음 (반환 값)

 

이 2개의 함수를 사용하여 각각 img에 해당하는 데이터들을 저장해준다.

 

p-eye/cub3d_texturing

필자는 로데브 씨에 코드를 참조하고 공부하여 작성하였다.

받아온 xpm값이 [64][64]인데, 벽에 적어야 하는 값이 [300][300]이라고 할 때 벽에 그대로 적용할 수가 없으니 

상대적인 적용방법이 필요하다.

그래서 상대적인 적용 공식을 알아보던 중 로데브 씨의 상대적 텍스쳐 적용방법이라는 글을 참고하여 작성하였다.

 

[ 2021. 01. 27 ]

1. img가 제대로 적용되도록 고치기.

2. 현재 디스플레이 해상도에 따라서 최대 해상도 제한 두기.

 

[ 1. img가 제대로 적용되도록 고치기. ]

 

필자 같은 경우에는 유저가 바라보는 값에 맞춰서 제대로 된 벽 모양이 안 나오는 오류가 있었어서 

그것을 고치기 위해 디버깅도 계속하고 삽질을 계속했었는데.

간단하게 img에 사용하는 변수를 초기에 초기화해주지 않아서 값에 쓰레기 값이 들어가 오류가 발생했었었다.

그래서 그러한 부분을 해결하니. 제대로 나오는 것을 확인할 수 있었다.

 

[ 2. 현재 디스플레이 해상도에 따라서 최대 해상도 제한 두기. ]

int	mlx_get_screen_size(void *mlx_ptr, int *sizex, int *sizey);

mlx_ptr : 출력하고자 하는 mlx의 값.

sizex : 최대 해상도 x축 (반환 값)

sizey : 최대 해상도 y축 (반환 값)

 

어떻게 최대 해상도의 값을 받아올 수 있는가 고민이 많이 있었는데. mlx관련 함수를 살펴보다가

screen size를 받아올 수 있는 함수가 있는 것을 발견하였다. 

sizex 값과 sizey값을 가지고 현재 받아온 해상도가 이 값보다 큰지 작은 지를 비교하여 값이 크다면
프로그램을 종료시켜버리거나 받아온 스크린 값을 최대 해상도로 값을 수정하는 방식으로 택할 수 있는 거 같다.

 

[ 2021.01.28 ]

1.  맵 벗어난 경우에 반례 처리해주기.

 

[ 1.  맵 벗어난 경우에 반례 처리해주기. ]

 

크게 2가지로 나누어지는 부분인 거 같다. 

1. 맵을 벗어나도 오류가 나지 않고 계속 유지가 되는 경우.

2. 맵을 못 벗어나게 제한을 두는 경우.

필자의 경우 두 번째 방법이 더 쉬운 거 같아서 2번째 방법을 선택하였다.

key w, s에 제한을 두어 1번(벽)에 경우 아예 통과하지 못하도록 제한을 두어 설계를 하였다.

 

[ 2021.01.29 ]

1. sprite 해결하기.

 

[ 1. sprite 해결하기. ]

기존에 벽을 표현할 때 사용하는 함수를 그대로 사용하면 splite가 4개의 면으로 표현이 되고 png파일에서 표현이 안되어있는

부분은 검은색으로 표현이 된다.

 

검은색으로 표현된 부분의 색깔 값은 0이기에 반례로 처리를 하면 임시로 처리를 할 수가 있었다.

하지만 뒤에 배경을 참고로 만들어진 값이 아니므로 사용은 할 수 없는 방법인 거 같다.

 

[ 2021.01.30 ]

1. --save에 대해서 알아보기.

 

[ --save에 대해서 알아보기. ]

 

--save라는 값이 들어오게 되면 화면은 실행시키기 않고, 현재 출력해야 할 이미지를. bmp형식으로 된 파일에 적어 넣어야 한다.

그래서 argv [2] 값이 있는지, "--save"와 같은지 확인하는 작업을 진행하고, 

기존에 화면을 출력할 때 사용했던 screen값을 그대로 가져와서 그 내용을 바탕으로 bmp 파일을 작성하기로 하였다.

 

[ 2021.01.31 ]

1. --save 사용해보기.

 

[ 1. --save 사용해보기. ]

 

C 언어 코딩 도장: 81.1 비트맵 파일 포맷 알아보기

bmp 파일을 어떻게 사용해야 할지 알아보던 도중 bmp 파일은 그 정해진 형식이 있다고 하여 코딩 도장을 바탕으로
그 형식대로 식 작성을 진행하였습니다.

int		fd;

fd = open("cub3d_save.bmp", O_RDWR);

위와 같은 형식으로 파일을 열어주고,

//
2		bf type (BM)
4		bf size
2 + 2		bfReserved
4		start dir
4		header byte : (40).
4		screen_X
4		screen_Y
4		color num (1)
4		bpp (biBitCount)
4 * 6
n		arr
//

write(fd, buf, byte);

이와 같은 형식으로 bmp 파일에 작성을 진행하였습니다.

 

원하던 목표는 위와 같은 이미지를 bmp 파일에 저장하는 것을 목표로 하고 있었는데.

byte값이 잘못된 것인지 원하는 대로 bmp 파일에 적히지 않은 것을 볼 수 있었다.

 

[ 2021.02.01 ]

1. --save 이어서 진행해보기.

 

[ 1. --save 이어서 진행해보기. ]

오랜 시간 동안 삽질을 진행해도 모르겠어서 다른 카뎃분에게 도움을 받아서 해결을 하게 되었습니다.

문제가 생겼었던 이유는 cub3d라는 프로젝트를 진행할 때에는 <mlx.h>라는 헤더를 사용해야 과제를 진행할 수 있었습니다.

그 헤더는 42 subject에서 받을 수가 있는데. 구버전인 opengl과 mms의 차이로 오류가 있었던 것을 찾을 수 있었습니다.

 

기본적으로 bmp 파일을 작성하는 방식은 bpp (biBitCount)에 맞춰서 알맞은 값을 할당하고,

할당한 값에 맞게 픽셀을 찍은 것으로 bmp 파일을 사용할 수가 있습니다.

bbp(biBitCount) = 32
950 x 600

(screen_X) * bpp / 8 = 3800
950 x 32 / 8 = 3800

mms	: mlx_get_data_addr \ size_line = 3840
opengl	: mlx_get_data_addr \ size_line = 3800

bbp(biBitCount)이 32bit이고 950 x 600이라고 하는 화면을 출력하려고 할 때 저는 3800이라는 값을 원하고 있었는데.

mms : mlx_get_data_addr 함수에서의  size_line은 3840이라는 값을 반환하더라라고요.
그래서 한 줄 비트수에 맞는 값이 할당이 되지 않아 bmp 파일의 값이 제대로 나오지 않는 모습이 확인할 수 있었습니다.

그래서 제가 원하는 가로의 비트수를 구하기 위해서 변수를 새롭게 만들어서 사용을 하니 bmp 파일에 원하는 대로
모습이 찍히는 것을 확인할 수 있었습니다.

 

 

[ 2021.02.03 ]

1. key a, d 해결하기.

 

[ 1. key a, d 해결하기. ]

key_A or key_D 라는 값이 들어오게 되면 플레이어가 바라보고 있는 방향을 기준으로 시선은 고정한 상태로
왼쪽 혹은 오른쪽으로 이동을 해야 하더라고요.

어떻게 해야 할까 고민을 많이 했었는데, 해결하고 보니 의외로 방법은 간단하더라고요.

 

시선은 기본적으로 고정이 되어있으니, 시야에 따른 방향 값을 건드릴 필요가 없고,

플레이어의 위치 값만 수정을 해주면 되는데.

직진을 할 때는 (y) : 플레이어 위치 + (y)방향 * 속도, (x) : 플레이어 위치 + (x)방향 * 속도로 이동을하고

후진을 할때는 (y) : 플레이어 위치 - (y)방향 * 속도,(x) : 플레이어 위치 - (x)방향 * 속도로 이동을 하니 

A D를 누를 때에는 x값과 y값을 서로 엮어서 y가 + 이면 x가 - 인 형식으로 바꾸고,

y방향 값에 (x)방향 * 속도 형식으로 식을 바꾸면 원하는 대로 이동이 가능하더라고요. 

그래서 그러한 형식으로 값을 대입하여

왼쪽으로 이동할 때에는 (y) : 플레이어 위치 + (x)방향 * 속도,(x) : 플레이어 위치 - (y)방향 * 속도로 대입하고

오른쪽으로 이동할 때는 (y) : 플레이어 위치 - (x)방향 * 속도,(x) : 플레이어 위치 + (y)방향 * 속도로 대입하니

원하는 대로 되는 것을 확인할 수 있었습니다.

 

[ sprite 해결하기. ]

 

sprite를 진행하기 전에 어떠한 조건들을 생각해봐야 하는지 생각을 해봤었습니다.

1. sprite 물체는 항상 플레이어를 바라봐야 한다.

2. sprite 물체가 2개 이상 겹쳐있다면 뒤에 있는 물체가 가려져야 한다.

3. 벽이 있는 경우에도 2번에 조건을 충족해야 한다.

 

그래서 어떻게 스프라이트를 그릴까 생각을 해보다가

1. 그림을 계속해서 그리고 중간에 스프라이트를 그려야 하는 파트가 나온다면 sprite의 색깔 값을 토대로 색 전환을 진행해서 그린다.

2. 일단은 벽에 그림을 진행해서 그리고 덮어 씌우는 방식으로 진행하여 sprite를 그린다.

 

이렇게 크게 2가지 방법이 나왔었는데.

1번 전자에 경우에는 저는 그려야 하는 부분에 정보를 가지고 구조체에 저장해서 코드에 마지막 부분에서 그리기를 진행했었는데.

1번째 방법으로 하려면 sprite가 나오는 코드에 중간에서 그리기를 진행해야 해서 기존에 방식을 갈아엎어야 하는 방법이라고 생각이 들어
포기를 하게 되었습니다. 

2번째 방법보다 추가적으로 그리기를 진행하지 않으니 효율적이기는 하겠지만 기존에 방식을 갈아엎어야 해서 신경 쓸 것들이 너무 많아져서

조금 비효율적 이기는 하지만 2번째 방법을 선택하여 그리게 되었습니다.

 

그래서 저의 방법은 로데브 씨의 코드를 참조하여 진행하게 되었습니다.

2번과 3번에 해결방법은

기본적으로 sprite에 위치 값을 배열에 저장을 하고, 그 값들을 정렬해서 플레이어의 위치를 기준으로 멀리 있는 sprite들이

먼저 그려지도록 진행을 하였습니다. 그러면 2번 하고 3번에서 sprite가 겹치는 경우나 벽에 sprite가 어느 정도 가려지는 경우는

거리에 따라서 덮어 씌워져 그려지니 해결할 수 있었고,

1번에 경우에는

로데브 씨에 방법에 카메라 행렬이라는 수학적 개념이 있어서  그 개념을 사용해서 항상 저를 보도록 설계하였습니다.

transform sprite with the inverse camera matrix (sp->inv_det)
[ planeX   dirX ] -1                               [ dirY      -dirX ]
[               ] =  1/(planeX*dirY-dirX*planeY) * [                 ]
[ planeY   dirY ]                                  [ -planeY  planeX ]

 

1. 플레이어의 위치를 기준으로 sprite에 위치 값을 저장한다.

2. sprite의 위치 값을 거리가 멀수록 먼저 그려지도록 설계한다.

( 이후에 그려지는 값들은 덮어씌워진 수 있도록 여러 번 반복 )

3. 카메라 행렬을 통해서 sprite들이 항상 플레이어를 바라보도록 설정한다.

 

 

저의 생각대로 적은 글이라 틀린 부분이 있을 수도 있습니다.

틀린 부분이 발견된다면 사소한 부분들이라도 꼭 알려주시면 감사하겠습니다!