[📜일지] 1인개발 인붕이의 그래비티 캐슬개발일지 5 + 스마게인디고 후기

[멩멩한돌멩이(mengdol00)]

오랜만이야 인붕이들아

시험기간도 끝나고 이런저런 일들도 좀 정리가 돼서, 개발 어떻게 돼 가고 있는지 얘기하러 왔음

이번 개발일지에선 게임이 크게 개선된건 없지만, 대신 한가지 어려운 문제를 해결했어

혹시 인붕이들한테도 도움이 될까 해서 자세하게 풀어 쓰려고 해

위 영상이 이번에 새로 추가한 스테이지3 이고, 저 돌아가는 톱니바퀴들이 이번 개발일지 주제임

스테이지 3은 기계실 컨셉이라, 배경에 막 톱니바퀴랑 기계장치들이 돌아가는 모습을 구현하고 싶었음. 

머 그냥 다른 애니메이션 그리듯이 픽셀 찍으면 되는거 아님? 이라고 생각할 수 있지만,

회전하는 픽셀 아트를 찍는건 생각보다 골때리는 문제임. 특히 해상도가 크고 프레임 개수가 많다면 더더욱 어려움.

아마 도트 게임 개발하는 인붕이들은 공감할거라고 생각해

일반적인 이미지는 회전시킨다고 해서 형태가 망가지지 않지만 도트 이미지는 회전시키면 이미지가 보기 싫게 깨져버림.

따라서 회전하는 도트 애니메이션은 매 프레임을 새로 그려줘야 함.

당연히 엄청 귀찮기 때문에, 더 나은 방법이 없을지 아래의 여러가지 시행착오를 거치며 실험해 봤음.

1. 그냥 픽셀이고 뭐고 무시하고 돌려버린다.

딱 봐도 택도 없는 방법.

스프라이트가 회전하는 동안 윤곽선이 일그러지면서 이상하게 보임.

아예 블러 효과 넣고 배경에 묻어갈까도 생각해 봤지만, 의도했던 느낌이 아니었음.

2. 쉐이더를 이용한다

스프라이트를 픽셀화 시켜주는 쉐이더를 적용하고, uv 값에 rotation 노드를 넣어서

회전하는 동안에도 픽셀의 형태를 유지하도록 만들어 봄.

결과는 보다시피 써먹을 만 한게 못 됨.

이전 방법처럼 픽셀 자체가 망가지지는 않지만, 노이즈처럼 윤곽선이 계속 지직거려서 보기싫음.

3. 그냥 하나하나 그린다

결과물을 비교해 보면 알겠지만, 사실 이게 정답이긴 함.

문제는 생산성이지. 톱니바퀴 종류가 하나도 아니고, 각각의 프레임 개수가 적은 것도 아닌데 이걸 도저히 다 그릴 수가 없다고 생각했음.

그래서 스프라이트 애니메이션을 이용하면서도 생산성을 높일 방법에 대해서 생각해봤음.

그래서 시도한 방법이, 블렌더를 이용하는 거임.

블렌더를 키고 위의 사진처럼 적당한 톱니바퀴를 하나 만들어줌

카메라를 orthographic 으로 설정하고(원근감 없앰), 정중앙에 가져다 놓으면 3d 모델을 2d로 투사하게 됨.

적당히 채색을 해줌. 디테일한 명암묘사는 나중에 다시 손봐야 하니까, 그림자나 명암표시 없이 단색으로 채색했음

이제 계획한 프레임 개수에 맞게 애니메이션 넣고, 렌더링하면 됨

픽셀 그래픽이 필요한거니까 해상도를 원하는 픽셀값에 맞추고, 렌더링 품질을 최저로 설정해서

안티에일리싱 기능을 꺼버리자.

이렇게 주르륵 렌더링돼서 나왔다.

하나하나 손으로 찍어야 했다면 정말 한세월이 걸렸겠지만 블렌더 덕분에 한시간 컷 했음.

이제 에이스프라이트로 가져와서 색감 보정하고, 윤곽선을 그리는 등 마감 작업을 함.

최종 결과물.

사실 맨 위에 만든 결과물은 디자인이 안이뻐서 폐기했고, 이게 두 번째 작업한 톱니바퀴임.

작업 프로세스는 똑같았고, 30분 ~ 1시간정도 걸렸음.

여담으로, 왜 에이스프라이트에 스프라이트 회전 기능을 안쓰냐고 할 수 있음.

사실 에이스프라이트 픽셀 회전 기능은 상당히 쓸 만 하고 결과물도 예쁘게 나오긴 해.

근데 내가 정확한 각도를 지정해서 돌리는 게 아니다 보니까, 정교한 컨트롤이 어렵다는 문제가 있음.

불규칙한 형태의 이미지라면 크게 상관없지만, 톱니바퀴처럼 완전한 등속 회전을 그려야 할 때는 부적합하지.

3d 툴을 이용한 픽셀 렌더링은 쉽게 생각할 수 있고, 실제로도 매우 널리 쓰이는 요령임.

하지만 막상 내가 실제로 적용해 보려고 하면 생각처럼 잘 되지는 않는 것 같음.

인붕이들도 도트 찍다가 막히는 부분이 있으면 한번 찍먹해보면 좋을 것 같다.

펀딩 디지털 리워드인 HD 배경화면이 곧 배송될 예정임.

만드는건 며칠 전에 완성했는데 그 메일 주소 취합하는게 늦어져가지고 선물 배송기간을 좀 오버했음.

나도 쓰고 있는데 생각보다 이쁘다!

개발 근황을 얘기하자면, 그래비티 캐슬이 스마일게이트 인디고에서 리퓨엘상을 받았음.

어제 스마일게이트 인디고 시상식 갔다왔는데 재밌었다.

그냥 시상식만 진행하는게 아니라, 끝나고 네트워킹 데이라 해가지고 다른 참가자 분들하고 얘기하고 밥먹는 시간이 있었음.

1인 개발하는 사람들은 개발 도중 자기만의 세계에 갇혀버릴 위험이 있는데, 다른 개발자들하고 접점을 만들어 두면 중심을 잡는 데 큰 도움이 되는 것 같다. 밥도 맛있었고.

그리고 오늘 하루동안 '인갤에서 개발일지 잘 보고 있어요' 네번 들음

생각보다 많은 사람들이 보는 중이니까 커뮤티니에서 행실을 더욱 조심하도록 하자...!

그럼 다들 게임 개발 잘하자구~

[카퍠인(happys96)]

[카퍠인(happys96)]

블랜더 굉장히 좋네요.. 얼마나 공부하신거에요? - dc App

[멩멩한돌멩이(mengdol00)]

공부한건 4,5개월 정도고 그 이후로는 게임 개발하는 중간중간 가끔씩 취미로만 건드렸어요

[카퍠인(happys96)]

[익명(125.128)]

PixelOver도 한번 해보세요. 3d모델이랑 컴포지트도 지원하는 툴인데 스팀에 검색하면 나옵니다. 쉐이더에서 아웃라인도 지원해주고 보정도 생각보다 잘해줍니다.

[멩멩한돌멩이(mengdol00)]

오 한번 써보겠읍니다

[잠둥이(fcrow)]

[테트라스(p5q8xj8y42gk)]

저는 UI만들때 블렌더써용 블렌더는 2d 이미지만드는데도 너무좋음요

[익명(61.98)]

코드로 돌릴때 실시간 회전하지 말고 애니메이션 회전하는것처럼 9도씩 회전해도 이상하게 보임?

[익명(61.98)]

가운데 원이미지만 분리해서 상위레이어에 놔두고 나머지 부분만 9도씩 회전시키면 비슷할꺼 같은데

[멩멩한돌멩이(mengdol00)]

그 생각은 못해봤네. 그것도 방법이 될 수 있을듯

[ㅐㅐㅋㄷ(ooze86)]

인갤에서 개발일지 잘 보고있어요

[에뚜(ssss4610)]

[자블(indipia)]

[매미허물(shedinja)]

[코코팜요구르트성애자(sona7630)]

어떻게 연락을 드려야 할 지 모르겠어서 댓글로 남깁니다. 현재 대학교 창업 프로그램의 일환으로 인터뷰 진행하고 있는데 인디게임 개발 환경과 관련해서 스튜디오 레프님의 경험을 듣고 싶습니다. 혹시 관심이 있으시다면 [e-mail]으로 연락주실 수 있을까요?