[📜일지] Frostory 특수효과 발전과정

[특수한발가락(seobyeongky)]

안녕하세요!

게임을 만들면서 비주얼적인 부분을 구현하면서 정말 많은 시간을 썼던 것 같은데요,

이번에는 그 중에서 특수효과를 다듬었던 과정에 대해서 써봤습니다.

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

1. 힐 이펙트

저희 게임에 등장하는 꼬마 요정을 붙잡고 힐 마법을 쓸 수가 있습니다

그런데 이 때 원형의 범위 이펙트가 뜨게 됩니다.

첫 구현에서는 보시다시피 모서리에서 어색하게 꺾이는 지점이 생겼습니다.

그리고 저 점들의 간격도 부자연스럽게 짧았다가 길어집니다. 

레이케스트를 해서 벽과의 충돌 지점을 구하는 방식이였기 때문에, 이런 문제가 발생했죠.

레이케스트의 비용을 생각해야 하기 때문에 충분하게 촘촘하게 쏠 수가 없었습니다.

몇달간 신경쓰지 않다가 최근에야 수정한 버전입니다.

레이케스트 대신에 OverlapCircle 함수로 근처의 벽 정보를 얻어와서 충돌 지점을 구했습니다.

충돌 지점을 아예 기하학적으로 계산했기 때문에 좀 더 정확해졌습니다.

하지만 저 라인렌더러 특유의 꺾이는 지점에서 튀는 문제는 여전히 발생했습니다.

다른 라인렌더러 에셋을 구매해서 테스트해봤지만 저 문제만큼은 해결이 안됐습니다.

그렇게 헤매던 중에 예전에 Celeste라는 게임에서 빛을 구현할 때 텍스쳐를 활용했었다는 글이 떠올랐습니다.(https://medium.com/@NoelFB/remaking-celestes-lighting-3478d6f10bf)

그래서 거기서 아이디어를 얻어서 아예 조그만 텍스쳐를 만들고 SetPixel로 하나하나 찍는 방식으로 구현해봤습니다.

구현을 해보니 다행스럽게도 꺾이는 부분에서 튀는 문제가 사라졌습니다.

문제를 고치고 나니 상당히 만족스러웠습니다.

중간에 포기하고 그냥 통짜 이미지로 그릴려고 했는데, 친구가 짠 코드를 지우고 만든 거라 좀 미안해서 계속 작업한 거였는데, 결과적으로는 좋았습니다.

2. 안개 효과

초창기에 플레이어는 적을 얼려서 공으로 만들어서 던질 수 있었습니다.

그 때 공에 안개를 만드는 효과를 붙였었습니다.

안개 텍스쳐를 만들고, 픽셀마다 상하좌우를 계산해서 퍼뜨리는 방식이였습니다.

하지만 모바일에서 텍스쳐를 clear하지 않으면 문제가 된다는 것을 알게 돼서 일단 폐기하게 됐습니다.

그러던 중에 안개가 필요한 장면이 생겨서 D2Fog라는 에셋을 구매하고 약간 수정해서 쓰게 됐습니다.

이건 카메라 후처리로 안개 텍스쳐 몇개를 겹쳐서 그리는 방식인데, 플레이어와 상호작용하지는 못하지만 상황에 맞게 자주 쓰고 있습니다.

3. 얼리기 효과

저희 게임을 얼리는 게임으로 처음 기획을 했습니다.

그래서 얼리기 효과는 꾸준히 개선이 되어왔습니다.

맨 처음 프로토타입에서는 단순히 인터넷 리소스를 가져와서 일일히 덧붙였습니다.

두 번째 버전은 공 모양의 얼음입니다.

세 번째부터는 약간의 코딩작업이 들어갔습니다.

캐릭터 스프라이트 마다 얼음 텍스쳐를 미리 만들어놓고, 그걸 이용해서 얼어붙는 효과를 구현했습니다.

    

마지막 버전은 외곽선 부분이 살짝 빛이 나도록 수정했습니다.

그리고 녹는 걸 표현하기 위해 두께별로 알파값을 다르게 해서 cutout 시켰습니다.

4. 절벽의 안개 및 구름

절벽을 표현하는데, 절벽이 끝없이 있는 것보다 뭔가 안개같은 걸 넣어보고 싶었습니다.

그래서 그냥 흰색 타일맵을 위에 덧대서 쓰고 있었습니다.

그런데 대각선지형이 추가되면서 저런식으로 끊어지게 됐습니다.

그래서 대각선용 안개타일을 추가를 하려고 했었는데, 때마침 함께 잠시 작업했던분께서 다른 아이디어를 주셨습니다.

이런식으로 구름을 이용해서 절벽 끝을 처리하는 거였습니다.

  

처음에는 좀 긴가민가했지만, 속도나 여러 움직임을 조정하면서 괜찮아졌습니다.

구름의 움직임이 마음에 들어서 자주 쓰게 됐습니다.

그러다가 구름을 좀 더 눈에 안들어오고 부드러운 버전으로 수정을 했습니다.

기존의 도트 느낌도 좋았지만, 비교를 해보니 바꾸는 게 좀 더 낫다고 생각했습니다.

하지만 이렇게 바뀌면서 구름끼리 소팅문제로 flip되는 현상이 두드러지게 보였습니다.

이걸 해결하기 위해 구름의 방향을 항상 올라가거나 내려가게 한다던가, 꺾일 수밖에 없으면 fade시켜서 flipping을 눈치못채게 하게 수정을 했습니다.

그런데 손이 너무 많이 가서 그냥 최대한 구름은 안넣고 있습니다.

읽어주셔서 감사합니다!

-------------이전글---------------

1편 소개

2편 괴물

3편 약탈자

4편 파편시스템

5편 대쉬퍼즐

6편 브금소개

7편 스프라이트 순서 처리

8편 레벨 에디팅 툴

9편 대화 시스템

10편 그래픽 리소스 제작과정

11편 레벨 프로토타입 영상

12편 지형 시스템

13편 버려진 레벨들

14편 무기 시스템

15편 룬 시스템

16편 폭탄 퍼즐 레벨

17편 몬스터 제작 과정

18편 모바일 최적화 삽질기

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

[리슬링?(lucid74)]

곧 완성되겠네 파이팅

[특수한발가락(seobyeongky)]

곧... 완성되면 좋겠지만... 사실 아직 해야할 게 많이 남았습니다ㅋㅋ

[익명(114.206)]

일지추

[특수한발가락(seobyeongky)]

[김메가(scw973108)]

[특수한발가락(seobyeongky)]

ㅋㅋㅋㅋ 감사합니다

[리버티_(tlatjagks123)]

[특수한발가락(seobyeongky)]

[진벽절벽(mizukikawaii)]

정보공유 넘좋아 킹직히 모바일 최적화 잘 읽었었음 ㄱㅅㄱㅅ

[특수한발가락(seobyeongky)]

[:V(raon444)]

열정진짜대단하심 국