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

[Frustma..(youhk40)]

[1] 게임 소개

[2] 몬스터 알고리즘

[3] 맵 생성 알고리즘

[4] 대화 창 및 맵 템플릿

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

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

안녕, 오랜만에 개발일지 쓰러왔어.

이번에 구체적인 플레이 흐름이나 캐릭터, 플레이 형태 같은 부분 기획도 끝났어.

근데, 기획 끝내고 보니까 지금까지 만든 것들중에 다시 만들어야 되는 것들이 꽤 되더라고.

이번에 작업했던 내용들 소개할게.

 - 탑다운 슈터 -> 탑다운 플랫포머

기존에는 탑다운 슈터 게임이었는데, 퍼즐과 액션이 중심이 되는 젤다라이크로 장르가

바뀌면서 새롭게 높이 개념을 게임에 넣기로 했어.

결과는 위 사진처럼 완성됐어.

점프를 통해 넘어갈 수 있는 지형이 생겨서 더 입체적인 퍼즐을 활용할 수 있게 됐어.

gif 따놓는걸 까먹었는데 위에 사진처럼 높이 공중에 떠 있는 다리같은 지형도 구현이 돼.

이렇게 높이 시스템을 넣고나니까 오브젝트들 드로잉 순서가 많이 꼬이더라고.

기존에는 그냥 depth = -y 넣으면 알아서 잘 작동했었는데, 이제 z축이 생겼다보니까

z축을 기준으로 먼저 정렬하고 y축에 맞추어서 정렬하다보니까 작업량이 많아져서 렉이 조금 생기더라고.

그래서 새롭게 도입한 기능이 Z - Tilting 이라는 기능이야.

사진 클릭하면 Z-Tilting에 대해서 잘 설명해준 게시글로 바로 이동돼. 관심 있는 사람은 쭉 읽어봐.

나처럼 겜스 쓰는 사람은 한 번쯤은 꼭 읽어보길 권해.

내용도 길고 쉐이더에 대한 배경 지식도 필요하다보니까 잘 이해가 안될 수도 있겠다 생각해.

그래서 간단하게 설명할게.

그림판으로 그린거니까 양해해줘ㅋㅋㅋ

평소에 2D 게임은 위에 그림처럼 화면을 위에서 바라보는 뷰를 가지는 경우가 대부분이야.

이 화면 내에서 중력을 주거나 말거나 해서 횡스크롤, 탑뷰가 갈리는 거고.

여기서 그림을 그리는 순서를 주려면,

이렇게 여러 투명한 화면에 오브젝트를 두는 방식을 사용할 수 있어.

이게 겜스에서 사용하고 있는 레이어 개념이야.

지금까지는 이 레이어 기능을 적절하게 써서 그리는 순서를 정했지만,

Z-Tilting은 조금 달라.

Z-Tilting 에서는 기존에 사용하던 x, y축과 별개로 z축을 추가로 사용해서 오브젝트들을 그려.

이 때 오브젝트들은 그림에 있는 빨간색 펭귄 처럼 기울어져서(Tilting) 그려지는 덕분에

z축에 평행하게 화면을 바라보는 우리 눈에는 검정색 펭귄의 모습 그대로 그려지게 돼.

그리고 이 기울어져서 그려지는 방식 덕분에 y축에 따른 드로잉 순서를 자연스럽게 만들 수 있어.

이 그림에서 검정색 사각형과 파란색 사각형은 화면상 겹치는 부분이 생겼어.

기존에 depth = -y 방식을 채택하면 이 둘의 y 좌표를 비교해야 하지만,

Z-Tilting을 사용해서 빨간색 사각형처럼 오브젝트들을 그렸다면 시선의

방향으로 인해 자연스럽게 왼쪽에 있는 사각형이 오른쪽에 있는 사각형 보다

위에 그려지게 돼.

무엇보다 Z-Tilting이 좋은 이유는 이 모든 과정이 CPU가 아닌 GPU에서 이루어진다는 점이야.

드로잉 순서를 건든 것이 아니라 드로잉 방식을 바꾼거라 기존 방식보다는 훨씬 마음에 들더라고.

물론, 이렇게 만들어도 Z축에 따라 깊이값을 추가로 조정해줘야돼서 드로잉 순서도 건들 수 밖에 없긴 했지만.

 - 카메라

그리고 Z-Tilting을 적용하기 위해서 여러가지 건들다 보니까 이때다 싶어서

카메라를 좀 손 봤어.

이런식으로 오브젝트를 기울어지게 그린 김에 3D 공간에서 카메라를 움직이듯이

화면을 바라보는 시점을 달리해서 색다른 연출을 만들면 좋겠다고 생각했어.

이 사진은 포켓몬스터 블랙 화이트 시리즈인데, 이런 느낌을 살리고 싶었어.

결과적으로 완성된 건 이런 느낌이야.

만들면서 타일맵에 쉐이더가 적용이 안돼서 Z-Tilting이 적용 안되고 저렇게

납작하게 그려지는 거 때문에 여러가지 찾아봤는데, 아직은 해결 못 했어.

많이 왜곡시키면 이런 뷰도 가능해. 이거 쓰면 여러가지 연출 컷씬 만들 수 있겠다고 생각해.

 - Bloom 쉐이더

원래 개발일지 처음 때 부터 Bloom 쉐이더는 있었어.

이 Bloom 쉐이더는 약간 뽀샤시한 느낌 줄 때도 좋고, 전체적인 분위기를 잡아주는 데 도움을 줘.

근데 gif 색 제한 때문에 그냥 끄고 개발했었는데 이번에 다시 생각나서 제대로 다듬었어.

이런식으로 컨트롤 패널에서 쉐이더 설정을 건드릴 수 있어.

미세한 조정도 가능하고 내가 지정해놓은 오브젝트 그룹, 레이어 별로 조절이 돼.

구체적으로 이런 식으로 사용한다고 보면 돼.

신비스러운 느낌이나 불빛 연출에 쓸거 같아.

맵을 예쁘게 꾸미기에 좋은 쉐이더니까 다들 관심있으면 찾아서 구현해봐.

궁금한 점 있으면 댓글에 남겨주면 나중에 확인하고 도울 수 있는 선 안에서 도와줄게.

나중에 개발일지 쓸 내용 생기면 다시 올게~~~

읽어줘서 고마워.

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[Frustman(youhk40)]

고마워!! - dc App

[고물보블린(222.109)]

귀엽군

[익명(61.255)]

사진클릭했는데 하이퍼링크 동작안되는거같은데

[Frustman(youhk40)]

https://www.yoyogames.com/en/blog/z-tilting-shader-based-2-dot-5d-depth-sorting
난
잘 되는데 뭘 실수했는지 잘 모르겠네 - dc App

[와따콤(ssanna2)]

펭귄 커엽네

[익명(220.94)]

펭귄이 귀엽고 게임이 개쩐다.

[GMP(growy920)]

개추

[시린하늘(hanvit0510)]

좋은 정보글 잘 봤습니다. 질문이 하나 있어서 남겨봅니다. 만약 카메라 각도를 조정한다면 이미지의 y길이가 높아지거나 하지 않을까요?

[Frustman(youhk40)]

그래서 나는 각 오브젝트들의 알파값을 (이미지 높이 / 255)로 설정한 뒤에 쉐이더로 받아서 기울이는 정도를 조정했었어.

[익명(183.97)]

z축을 저렇게 기울이면 총알이랑 적이랑 충돌할 때 z축이 달라서 충돌처리가 안되지 않을까?

[Frustman(youhk40)]

z축 기울이는건 표시상으로만 기울이는거고 실제 충돌처리하는 z축은 그대로라 문제 없어!