cub3d → DOOM Game

OpenGL 기반으로 3d 게임 만들어보기 (cub3d)

manual 열람법

# 예제 : man ./man/man3/(파일명).3
$> man ./man/man3/mix.3
$> man ./man/man3/mix_pixel_put.3

• mlx_new_window : 윈도우 제어

• mlx_pixel_put : 윈도우 내부에 뭔가를 그림

• mlx_new_image : 윈도우 내부에 이미지를 그림

• mlx_loop : 키보드, 마우스 입력을 다룸

링킹 방법

# 맥OS에서
-lmlx -framework OpenGL -framework AppKit -lz -L(라이브러리 경로)
# 유닉스나 리눅스에서
-lmlx -lXext -lX11 -L(라이브러리 경로)

환경 구성 해보기 및 창 띄워보기

MMSPATH = ./libs/minilibx_mms_20200219
CLFLAGS = -lmlx -framework OpenGL -framework AppKit -lz

$(NAME): $(OBJS)
	make clean -C ${MMSPATH}
	make all -C ${MMSPATH}
	$(COMPILER) $(CFLAGS) $(OBJS) -I$(HEADERPATH) -L$(MMSPATH) $(CLFLAGS) -o $(NAME)

$> ./cub3d
dyld: Library not loaded: libmlx.dylib
  Referenced from: /Users/joohongpark/Documents/code/42/42cursus/cub3d/./cub3d
  Reason: image not found
zsh: abort      ./cub3d

#include "cub3d.h"
int				main(void)
{
	void		*test;
	void		*test1;

	test = mlx_init();
	test1 = mlx_new_window(test, 300, 300, "hello");
	mlx_loop(test);
	return (0);
}

키 입력 받기

int				ft_key_press(int code, char *str)
{
	printf("code : %02x at %s\n", code, str);
	return (0);
}

int				ft_mouse_press(int code, int x, int y, char *str)
{
	printf("code : %02x(%d, %d) at %s\n", code, x, y, str);
	return (0);
}

int				ft_test(char *str)
{
	printf("code : X at %s\n",  str);
	return (0);
}

int				main(void)
{
	void		*test;
	void		*test1;

	test = mlx_init();
	test1 = mlx_new_window(test, 300, 300, "hello");
	mlx_key_hook(test1, &ft_key_press, "key");
	mlx_mouse_hook(test1, &ft_mouse_press, "mouse");
	mlx_expose_hook(test1, &ft_test, "expose");
	mlx_loop_hook(test1, &ft_test, "loop");
	mlx_loop(test);
	return (0);
}

윈도우에 무언가를 출력하기

#include "cub3d.h"
int				main(void)
{
	void		*test;
	void		*test1;
	void		*img;
	void		*img_xpm;

	int			*img_data;
	int			bits_per_pixel;
	int			size_line;
	int			endian;

	int			xy[2];

	test = mlx_init();
	test1 = mlx_new_window(test, 600, 600, "hello");

	/* 1. 픽셀을 직접 지정해서 출력 */// 이미지의 가로 세로 크기만큼 메모리를 할당한다.
	img = mlx_new_image(test, 256, 256);
	// 생성된 이미지의 픽셀 정보를 가져온다.
		// bits_per_pixel 에는 픽셀 하나당 차지하는 비트수가 들어가며 (32bit)
		// size_line 에는 이미지의 한 줄을 저장하는 데 사용되는 바이트 수가 들어간다.
		// endian에는 해당 픽셀 컬러가 저장될 때 리틀 인디안인지 빅 인디안인지 여부를 나타낸다.
		// mlx_get_data_addr 함수는 char 형 포인터를 리턴하지만 int 형 포인터로 캐스팅해야 한다.
	img_data = (int *)mlx_get_data_addr(img, &bits_per_pixel, &size_line, &endian);
	for (int i = 0; i < 256 * 256; i++)
		img_data[i] = i;
	printf("%d, %d, %d\n", bits_per_pixel, size_line, endian);

	/* 2. xpm 파일을 불러와서 출력 */
	img_xpm = mlx_xpm_file_to_image(test, "./test.xpm", &xy[0], &xy[1]);

	mlx_put_image_to_window(test, test1, img, 0, 0);
	mlx_put_image_to_window(test, test1, img_xpm, 256, 256);
	mlx_loop(test);
	return (0);
}

mlx_get_data_addr

	img_data = (int *)mlx_get_data_addr(img, &bits_per_pixel, &size_line, &endian);
	for (int i = 0; i < 256; i++)
		for (int j = 0; j < (size_line / 4); j++)
			img_data[i * (size_line / 4) + j] = 0x00FFFFFF;

벡터 구현

벡터 자료형 구현

typedef	struct		s_vector
{
	double			x;
	double			y;
	double			z;
}					t_vector;

벡터 초기화 함수

t_vector		ft_vinit(double x, double y, double z)
{
	t_vector	rtn;

	rtn.x = x;
	rtn.y = y;
	rtn.z = z;
	return (rtn);
}

벡터 연산 함수

삼각함수

printf("sin(pi/6) = %f\n", sin(M_PI / 6));

Cub3d 요구사항

• 보너스 받기 위해선 make bonus 추가

• libft 사용시 libft 내의 makefile로 컴파일 할 수 있게

• 벽 동서남북 서로 다른 질감 표현

• 벽 말고도 아이템 표시할 수 있게

• 바닥과 천장 서로 다르게

• wasd 키로 시점 이동

• esc 키로 프로그램 종료

• 닫기 버튼 누르면 프로그램이 종료되어야 함.

• 지도에 표시된 화면 크기가 디스플레이 해상도보다 크면 디스플레이 해상도에 따라 윈도우 크기 자동 설정?

• .cub 파일 파싱 (추후에 다시 작성)

지도 그리기

	char		map[10][10] = {
		{1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 1, 1, 1, 1, 1, 1, 1, 0, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
		{1, 1, 1, 1, 1, 1, 1, 1, 1, 1}
	};

void			ft_draw_map_proto(t_canvas *area, t_map map)
{
	for (int i = 0; i < area->img.height; i++)
	{
		for (int j = 0; j < (area->img.size_line / 4); j++)
		{
			if (map.map[((map.y * i) / area->img.height)][((map.x * j) / area->img.width)] == 1)
				area->img.data[i * (area->img.size_line / 4) + j] = 0x000000FF;
			else
				area->img.data[i * (area->img.size_line / 4) + j] = 0x00000000;
		}
	}
}

int				ft_draw(t_canvas *obj)
{
	if (obj->draw == 1)
	{
		mlx_clear_window(obj->window, obj->canvas);
		mlx_put_image_to_window(obj->window, obj->canvas, obj->img.img, obj->img.x, obj->img.y);
		mlx_put_image_to_window(obj->window, obj->canvas, obj->player.img, obj->player.x, obj->player.y);
		obj->draw = 0;
	}
	return (0);
}

선 그어보기

• DDA 알고리즘
• DDA의 약자는 Digital Differential Analyzer이다.
• DDA 알고리즘은 두 점 사이의 기울기를 구해서 차등 방정식에 대입해서 점을 찍는 것이다.
• 부동 소수점 연산을 하기 때문에 별도의 최적화를 하지 않으면 느릴 수 있다.

• 브레젠함 알고리즘
• DDA 알고리즘처럼 1차 방정식을 이용하지만 기울기에서 발생되는 소수점을 없애 정수로만 연산하게 한다.
• 대신 1차 방정식을 변형하여 판별식을 만든다.
• 가로 혹은 세로로 종료 점까지 1씩 가산해 가며 점을 찍는 것이다.
• 그릴 점이 직선보다 위에 혹은 밑에 있는지 판별식을 이용해서 판별한다.

레이캐스팅 (광선 투사)

광선 방향 구하기

광선이 부딪히는 벽 찾기

X축과 Y축

t_vector			ft_xstart(t_vector player, t_vector ray)
{
	t_vector		rtn;

	// 광선의 방향에 따라 y 절편에 닿는 방향?이 달라짐. (광선의 x방향 증분에 따라 변하므로)
	rtn.x = (int) player.x + (ray.x > 0 ? 1 : 0);
	// 직선 방정식을 이용해 y 점을 구함.
	rtn.y = (rtn.x - player.x) * (ray.y/ray.x) + player.y;
	return (rtn);
}

t_vector			ft_xwall(t_vector xstart, t_vector ray)
{
	t_vector		rtn;
	// x가 1 증가할 때에 대한 y의 증분
	double			dy;
	int				_tmp;

	dy = ray.y/ray.x;

	rtn = xstart;
	_tmp = 0;
	while (_tmp++ < 10)
	{
		if (ray.x > 0)
		{
			rtn.x += 1;
			rtn.y += dy;
		}
		else
		{
			rtn.x -= 1;
			rtn.y -= dy;
		}
		printf("[debug](%f, %f)\n", rtn.x, rtn.y);
	}

	return (rtn);
}

벽 찾기

int					ft_checkspace(t_vector v, t_map map)
{
	int				x;
	int				y;

	if (isnan(v.x) || isnan(v.y) || isinf(v.x) || isinf(v.y)
		|| v.x < 0 || v.y < 0 || map.x <= v.x || map.y <= v.y)
		return (0);
	x = (int)v.x;
	y = (int)v.y;
	if ((x * 1.0 == v.x) && map.map[y][x - 1] != 0)
		return (0);
	if ((y * 1.0 == v.y) && map.map[y - 1][x] != 0)
		return (0);
	if (map.map[y][x] != 0)
		return (0);
	return (1);
}

x절편(x = 자연수인 축과 만나는 점)과 y절편(y = 자연수인 축과 만나는 점)에 대한 좌표

대충 레이캐스팅 해보기

// 카메라 벡터 구하는 구간 ((i - 500) / 500.0이 plane 카메라 평면 벡터를 -1부터 1까지 크기를 조정한다.)
ray = ft_vadd(tcam, ft_vscala(tplane, (i - 500) / 500.0));

// 벽 그리는 함수
void			ft_draw_wall_proto(t_img *img, int x, double y)
{
	int			h;

	h = (int)(y * (img->height / 2));
	for (int iy = 0; iy < img->height; iy++)
	{
		if (iy > ((img->height / 2) - h) && iy < ((img->height / 2) + h))
			img->data[iy * (img->size_line / 4) + x] = 0x0000FFFF;
		else
			img->data[iy * (img->size_line / 4) + x] = 0x00000000;
	}
}

어안렌즈 보정

스크린 시점

벽 동서남북 구분하기

벽에 스트라이프 그려보기

사진 스케일링

			cx = j * w.tmp[0].width / w.tmp[1].width;
			cy = i * w.tmp[0].height / w.tmp[1].height;

x의 위치?

int					ft_makewall(t_vector w, unsigned char r, unsigned char g, unsigned char b)
{
	double			ratio;

	if (((int)w.x) * 1.0 != w.x)
		ratio = w.x - ((int)w.x) * 1.0;
	else
		ratio = w.y - ((int)w.y) * 1.0;
	r = (r < ratio * 255) ? 0 : r - ratio * 255;
	g = (g < ratio * 255) ? 0 : g - ratio * 255;
	b = (b < ratio * 255) ? 0 : b - ratio * 255;

	return (ft_rgba(r, g, b, 0x00));
}

상하좌우 이동 보완하기

벽 가로질러서 가지 못하게 하기

스프라이트 출력

LIFO

스프라이트 레이캐스팅

스프라이트의 위치와 형태

스프라이트는 어떻게 보여야 하는가?

벽/스프라이트를 출력하는 반복문을 하나의 함수로 합침

• 현재 출력할 화면의 특정 x 좌표에 y를 화면의 y축 길이만큼 그린다.

• 그리는 대상의 원본은 특정 그림으로부터 가져오지만 어느 부분을 가져오는지는 다른 알고리즘에서 정한다.

• 어느 부분을 가져올지는 가져올 그림의 width/height가 각각 다를테니 0~1 사이의 실수 (비율)로 표기하는게 좋을거 같아서 비율로 표기하기로 했다.

• 예를 들어 0.5, 0.5라면 그 그림의 정중앙의 픽셀을 가져오는 식이다.

• 만약 저 비율이 1을 초과한다면 그 그림을 확대해야 한다.

인수 입력

• "--save"

• ".cub 파일 경로"

get_next_line 활용

사진파일 열기

유효한 지도 판별

• 플레이어가 존재해야 함

• 플레이어가 존재할 수 있는 공간이 최소한 1 이상이어야 함

• 플레이어가 존재하는 공간이 닫힌 공간이어야 함

백트래킹

백트래킹의 종류

DFS

BFS

가지치기