[📜일지] Frostory 동적인 픽셀 오브젝트 효과

[특수한발가락(seobyeongky2)]

안녕하세요!

오늘은 게임에 적용된 동적으로 계산되는 픽셀 효과를 만들었던 과정을 써보려 합니다.

  

최초 구현은 저희 게임에 등장하는 거대 새 괴물을 위해서였습니다.

자유롭게 머리를 움직여야하는 조건이 있었기에, 목 부분에 특수처리가 들어갔습니다.

기본적으로 렌더 텍스쳐에 픽셀을 그립니다.

1. 베지어 곡선으로 외곽 라인을 따고

2. pivot을 정하고 안쪽의 픽셀을 채움 (페인트통)

최초 구현에는 하드코딩이 많이 되어있었고, 알고리즘이 불안정하게 동작하기도 했습니다.

하지만 다른 곳에 적용할 대상도 없었기에 적당히 작업을 마무리했습니다.

그러다가 새로운 몬스터를 구상하게 되었습니다.

목 효과를 다시 사용할 필요성이 생겼고, 기존 알고리즘의 불안정성을 보완할 목적으로 모듈을 만들기로 했습니다.

  

새 방식에서는 매쉬 렌더링을 하기로 했습니다.

목이 꺾이는 상황에서도 픽셀 채우기를 할 때 좀 더 안정적이기 때문입니다.

이를 위해 렌더텍스쳐에 픽셀화된 도형을 그리는 기능을 만들기로 했습니다.

첫 번째로 시도한 방법은 픽셀마다 삼각형 내부인지 체크하는 방법인데요

구현은 간단했지만 매우 느렸습니다.

매 픽셀마다 내부인지 체크하기 때문에 연산량이 어마어마하더라고요.

두 번째로는 ComputeShader를 시도해봤습니다.

연산량이 많으니 GPU에서 하면 어떨까하는 발상이였는데 오히려 더 느렸습니다.

아마 오버헤드 문제일 것 같은데 자세히 알아보지는 못했네요.

세 번째로는 구글링해서 나온 스캔라인 알고리즘입니다.

삼각형을 윗 부분과 아랫 부분으로 쪼갠 다음, 기울기값을 이용해서 고속으로 돌리는 방식입니다.

적용해보니 확실히 퍼포먼스에서는 문제가 없었습니다.

다만 중간중간에 픽셀 구멍이 생기게 됐습니다.

알고리즘의 계산 오차로 픽셀이 밀리는 문제였습니다.

    

다양한 케이스에서 안정화될 때까지 계속 알고리즘을 수정했습니다.

  

그리고 마침내 안정적인 버전까지 도달했습니다. (혹시 궁금하신 분은 코드 링크)

이밖에도 멀티스레딩, 렌더링 영역 최소화등 추가적으로 모듈을 최적화하였습니다.

완성된 몬스터입니다.

그리고 모듈화를 잘 해놓았기 때문에 다른 시스템에도 적용할 수 있게 되었습니다.

  

먼저 에디터에서 오래 걸렸던 쉐도우맵, 배경 매핑 계산이 많이 빨라졌습니다.

그리고 게임에 구현되어 있던 불타는 효과도 새 모듈로 교체하고 퍼포먼스가 개선됐습니다.

  

마지막으로 새 모듈을 기반으로 픽셀 로프 효과도 만들 수 있었습니다.

읽어주셔서 감사합니다.

[개발 일지 링크 모음]

[ㅇㅇ 1(211.200)]

씹고수

[ㅇㅇ 2(211.241)]

캬 개추 !

[ㅇㅇ 3(222.101)]

다 애니메이션인 줄 알았는데 저렇게 처리할 수 있었네요

[정연동(untie9730)]

[ㅇㅇ 4(112.153)]

이욜 대다네!!

[순수프로젝트(penpaper0204)]

와 개고수 ㄷㄷ 목 늘어나는 역동성 미쳤 - dc App

[카퍠인(happys96)]

[익명(121.185)]

진짜 10지리네 ;;

[침팬치(vivid5477)]

진짜 개고수다 - dc App

[211214(tomatoss)]

[익명(61hmyrsdn3lp)]

[ㅐㅐㅋㄷ(ooze86)]

갤의보배

[ㅇㅇ 5(121.128)]

와 미쳤네... 그래픽 너무 내취향이다

[WWS(clip1446)]

[얀테이(lose7560)]

왕고수ㄷㄷ..

[얀테이(lose7560)]

[익명(14.38)]

근데 저런 기능들 생각보다 필요한 경우가 많을텐데 다른 오픈소스 에셋 이런걸로는 없었던거임?

[특수한발가락(seobyeongky2)]

저도 제대로 찾아보지 않아서 잘은 모르겠네요, 뭔가 있을 것 같기도 하고요

[ㅇㅇ 6(211.217)]

님아 이거 렌더텍스처사용하면 일반적으로 업스케일하는 픽셀레이트 방법이 더 낫지않음? 픽셀 크기만 유추하는기능만 넣으면 될거같은데

[특수한발가락(seobyeongky2)]

따로 카메라를 두고 저해상도 텍스쳐에 렌더링하는 방법의 경우 퍼포먼스적으로 더 빠르다는 장점이 있을 것 같습니다. 다만 외곽선을 그릴 때 특정한 알고리즘을 쓰고 있고 저희 프로젝트에 구현된 다른 모듈과의 호환성적 측면에서 직접 그리는 식으로 구현했습니다.

[매미허물(shedinja)]

[ㅇㅇ 7(211.241)]

개발일지 다 읽어봤습니다. 2년 전에 인디비버에서 체험해봤던 사람인데 정말 대단하시네요. 2인으로 장기간 개발 쉽지 않으실텐데 꼭 잘 되시길바라겠습니다 파이팅

[특수한발가락(seobyeongky2)]

응원해주셔서 감사합니다!