[📜일지] 펭귄 게임 개발일지 -7-

[Frustma..(youhk40)]

[1] 게임 소개

[2] 몬스터 알고리즘

[3] 맵 생성 알고리즘

[4] 대화 창 및 맵 템플릿

[5] 기획 변경 및 트리거 시스템

[6] 카메라, 쉐이더등 잡다한 시스템

----------------------------------------------

저번 개발일지를 쓴지 거진 3주정도 지났네.

이번에는 게임 내 사용할 광원, 빛, 그림자를 구현해서 맵 디자인할 때

사용하려고 했어.

깔끔하게 9월 20일부터 10월까지 빛 관련 시스템들 완성하고

레벨 디자인이랑 스토리 컷씬, 전투 시스템을 개발해나갈려고 했는데..

이게 생각보다 많이 어렵더라고??

렉이 안걸리도록 최적화도 생각해야되고, 지금까지 그래픽 디자인이랑

어울리도록 색이나 분위기도 생각해야되고..

무엇보다 지금까지 만든 쉐이더들이랑 호환되게끔 만드는게 제일 어려웠어.

결과적으로 오늘 10월 10일이 돼서야 얼추 작업이 끝났어.

결과물은 이래.

마우스에 움직이는 빛을 설치해놔서 화면에서 움직이는 빛은 마우스가 움직이는거야.

여기까지 오는데 여러 시행착오를 거쳤는데, 먼저 참고한 영상들부터 소개할게.

https://youtu.be/8oy2R1OdXqQ

이 영상은 GMS2 로 광원 시스템 만든 사람이 올린 영상인데, 이 영상 덕분에 전체적인

방향을 잡을 수 있었어. 3D에서 광원은 현실의 빛이라는 좋은 예시가 있는 반면에

2D 쿼터뷰에서는 마땅히 쓸만한 예시가 없더라고.

이 사진은 위 영상에서 나오는 광원 샘플이야. 엄청 부드럽게 잘 만들었고 최적화도 잘 돼있어.

근데, 이 사진은 횡스크롤 플랫포머에서 쓰이는 광원이고 내 게임은 쿼터뷰 느낌의 탑뷰다 보니

이 방식을 그대로 사용하니 너무 이질감이 드는거야.

이게 내가 처음으로 만들었던 광원, 그림자 시스템이야.

단순하게 캐릭터랑 벽에만 그림자 판정을 넣어서 위 사진처럼 뭔가 이상한 결과가 나왔어.

근데 문제가, 이때는 벽 위에 있는 이상한 그림자만 잘 처리하면 괜찮게 나오겠다고 생각해버린거야ㅋㅋ

얼추 생각했던 방향대로 나오기도 했고 이미 정신이 반쯤 나가있던 시기라

제대로 된 판단이 잘 안서서 문제를 못 느끼고 그대로 진행했어.

그렇게 탄생한 끔찍한 무언가

이미 중간쯤부터 크게 잘못된 걸 예감했는데 이때 내가 생각했던 문제점들이 이래.

1. 벽에 생기는 그림자가 타일보다 아래에 있어야 하는데 타일보다 위에 그림자가 생긴다.

2. 벽은 엄청 울퉁불퉁한데 그림자가 생기는 기준은 직사각형이다.

그래서 이걸 해결하려고 건들다 보니까 기존에 만들어놓은 쉐이더들이랑 섞여서 문제가 생기더라고.

결론적으로 말하면 위에 두 가지 문제점 모두 해결 못 했어.

그래서 어쩔 수 없이 지금까지 완성한걸 갈아엎기로 했어.

더 다양한 빛 표현 방식을 찾아보기 시작했고, 그때 가장 괜찮다고 생각한게 노말맵이야.

https://youtu.be/gUkY8ZoRfuQ

여기는 유니티나 언리얼 같은 3D 엔진을 쓰는 사람들이 많을 테니까 낯익은 개념일텐데,

노말맵은 텍스쳐에 비치는 빛이 반사되는 방향을 RGB 값을 사용해 벡터로 바꿔주는

그래픽 리소스야. 이걸 2D 픽셀아트에 사용할 수 있겠다 생각했어.

흔히들 봤을 이런 텍스쳐들이 노말맵이야.

각 픽셀마다 갖고 있는 RGB값이 각각 XYZ 값에 대응돼서

그 픽셀이 바라보고 있는 방향을 나타낼 수 있어.

더 자세히 알고 싶은 사람은

https://youtu.be/SZBkSYelJcg

이 영상 한 번 보면 쉽게 이해될거야.

그래서 이걸 게임에 넣기 위해 우선 노말맵을 만들어야겠지.

처음에는 itch.io에서 노말맵을 구워주는 프로그램을 써봤어.

laighter라고 이런식으로 사용하는 프로그램을 써봤는데, 고해상도 파일에서는 괜찮은데

한 픽셀 한 픽셀이 갖는 의미가 큰 픽셀아트에서는 잘 안어울리더라고.

그래서 그냥 직접 그리기로 했어.

내가 사용하는 픽셀아트 툴인 aseprite에는 왼쪽 아래 처럼 노말맵을 그리는데 사용하는

팔레트가 기본적으로 있더라고. 그래서 내가 원하는 느낌대로 노말맵을 그려봤어.

중간에 뭔가 혼자 다른 타일이 내가 그린 노말맵이야.

나머지는 그냥 색만 파레트에 맞춰서 바꿔줬고.

나중에 진짜로 쓰게될 타일맵 그릴 때 하나하나 다 그려줄려고 해.

이렇게 원하는 노말맵을 그린 다음에

원래 사용하고 있던 타일맵을 복사해서 소스만 변경해주면 아래처럼 노말맵 레이어를 만들 수 있어.

이제 게임 화면과 다른 서피스에 노말맵을 그린 뒤에 텍스쳐로 사용해서

빛 세기에 값을 곱하고 반사광까지 고려한 값을 넣으면 이렇게 나와.

물론 사이사이에 지금까지 만들어놓은 시스템이랑 충돌일으키지 않게끔 여러 조정이 있긴 했지만

이런 흐름대로 개발해왔어. 참고할 사람들은 하면 좋을거 같아.

전에 만들었던 bloom 쉐이더랑 같이 쓰면 이런 느낌이야.

나름대로 원하던 만큼 나와서 만족해.

물론 아직도 고쳐야 되는 오류가 많아.

가장 큰 문제점이 전에 만들었던 3D 카메라랑 이 광원이랑 같이 쓰면 문제가 생겨.

ㅋㅋㅋ..

그림자나 광원, 노말맵은 GUI 레이어에 그려서 카메라를 움직여도 이것들은 안움직여서 생기는 문젠데

어떻게 해결해야될지 감이 안오네. 사실 3D 카메라를 써서도 자연스러운 빛을 만들려면 애초에 개념에서

3D를 기반으로 생각하는게 맞지 않나 싶기도 해. 정 안되면 빛이랑 3D 카메라는 가능하면 따로 사용하던가 하려고.

그래서 이번에는 광원이랑 그림자만 만들다 끝났어. 이제는 진짜 레벨 디자인이랑 스토리 진행하려고 해.

궁금한점 있으면 댓글로 남겨줘. 읽어줘서 고마워!

[익명(182.230)]

오 이거 전에 념글정독하다가 근황 궁금했는데

[익명(182.230)]

디시콘 차단됨

[익명(124.57)]

디시콘 차단됨

[익명(222.235)]

진짜 비주얼 너무 좋네요

[익명(ppukku999)]

와 신기하다. 확실히 노말맵이 있으면 2D에서도 면의 방향에 따라 빛을 받아야 하는지 아닌지 알수가 있겠네. 저 기둥 옆면은 노말에 위아래 방향은 없고 완전히 땅과 수직이라고 가정하고 계산한거야? 광원을 3D 카메라가 처리하는 레이어에 그릴수는 없어?

[Frustman(youhk40)]

맞아 기둥 옆면은 위아래 방향을 아주 조금만 넣었고 3차원 공간에서 수직으로 섰을때를 기준으로 그렸어. 광원 3D 카메라에 그리는 것도 생각해봤는데 지금 화면 후처리 쉐이더가 Bloom 쉐이더 -> 광원 쉐이더 순인데 Bloom 쉐이더를 GUI 카메라에 그려야 되다 보니까 광원 쉐이더에 쓰는 텍스쳐도 GUI 카메라에서 가져올 수 밖에 없더라고. 이건 동작 원리를 바꾸거나 해서 해결해보려고 해.

[스시스왑(pengsuo)]

개고수 ;

[COUNTER(ge3536)]

카메라를 한 개를 더 쓰면 되지 않을까여

[Frustman(youhk40)]

카메라를 하나 더 쓴다는게 광원을 그리는 서피스를 움직이게 만드는 카메라를 더 쓴다는거야? 이건 해봤다가 인스턴스들 depth 레이어 설정하는게 문제라서 포기했는데 다른 방법이면 자세히 알려주라.

[이 댓글은 게시물 작성자가 삭제하였습니다.]

이 댓글은 게시물 작성자가 삭제하였습니다.