20250125 CRT효과 적용하기

게임에 CRT효과를 적용했다.

 

게임에 CRT효과를 적용한 이유로는 여러 게이머들이 CRT효과가 적용된 것이 더 예쁘다는 주장이 있었기 때문이다. 언뜻 들으면, 더 옛날 디스플레이에서 보이는 화면이 더 예뻐보인다는 게 이상할 수 있으나 실제로 비교 이미지를 보니 납득이 돼었다. 궁금하다면 아래 영상을 보는 걸 추천한다.

https://youtu.be/aqmAxs9QlSE?si=R4O5At1_R7B3rfFp

나는 다른 것 보다는 물 관련 이미지에서 물결이 자연스럽게 보이는게 가장 CRT효과로 그래픽이 오히려 좋아보이는 게 극대화 되는 것 같았다. 그렇게 된 이유로는 애초에 예전 개발자분들이 CRT로 그래픽이 변하는걸 고려해서 작업해서 옛날 스타일의 게임은 CRT효과에서 더 예쁘게 보이는 것 같다.

 

두번째 이유로는 우리 게임에서 TV화면이 나오는 게 있어서 TV처럼 보이면 좋겠다 생각했기 때문이다.

 

어쨌든 그래서 게임에 CRT효과를 적용하기로 했고 생각보다 꽤 많은 우여곡절이 있었다.

 

일단 내가 참고한 CRT적용방법은 다음이다.

https://github.com/Cyanilux/URP_RetroCRTShader?tab=readme-ov-file

사실 다른 여러 tutorial이 있었는데, 이걸 참고한 이유는 다른 tutorial들은 다 fullscreen 용이여서 마음에 들지 않았다. 일단 기존 그래픽이 나오다가 crt효과를 적용할 때 전환하는 거도 어떻게 만들지 생각하기 귀찮았고 TV화면의 테두리 그러니까 TV를 그래픽을 만들 수도 있다고 생각했다. 그러면 TV는 CRT효과가 없어야 할테니까 특정 gameobject에만 crt효과를 적용할 수 있는 위 방법이 좋아보였다.

 

첫째로 내가 보여줄 TV이미지는 animator가 달려있고, sprite sheet를 잘라 animation으로 만들었는데, CRT효과를 적용해야 하는 material이 실제로 보이는 이미지 영역에만 적용되는 게 아니라 sprite sheet 전체에 적용되고 그 중 원래 보여야 하는 영역을 잘라 보여주는 것 처럼 보이는 문제가 있었다.

 

이를 해결하기 위해 여러가지 시도를 했는데, 일단 shader graph에서 UV를 조절해서 material이 적용되어야 할 영역을 개별 sprite로 제한하는 것이었다. 그런데 이유는 몰라도 아무튼 안됐다. 추측으로는 animator가 UV값을 계속 초기화하는 것 같다.

 

두번째로는 sprite sheet에서 개별 sprite를 따로 빼내 texture로 만들고 shader graph의 MainTex로 넣어주는 것이었다. 이건 뭔가 내가 잘못한건지 경고가 뜨기도 하고 아무튼 계속 sheet 전체에 적용된다.

 

세번째로 material같은 걸 포기하고 그냥 full screen에 적용하는 방법을 사용했다. 그런데 일단 full screen shader로 만든 게 UI에는 적용이 안되는 문제가 있었다. 그리고 적용된다 하더라도 그러면 TV이미지 뿐 아니라 다른 이미지도 CRT효과가 적용될거라 문제가 있었다.

 

그래서 사실 원래도 알고 있었지만 귀찮아서 안했던 sprite sheet를 개별 sprite로 분리하는 작업을 했다. 진작 sprite분리를 했다면 벌써 다 적용하고도 남았을텐데 상당한 시간손해를 봤다.

 

그 이후로도 문제가 몇가지 있었는데, 일단 shader graph를 canvas에 적용하려면 shader graph의 setting에서 canvas용으로 바꿔줘야 한다. 사실 이건 해결하려다 해결한 게 아니고, 어떻게 고쳐야하는지 모르고 헤메고 있었는데, 유튜브에서 crt효과를 적용하느라고 shader관련 영상들을 봤더니 shader관련 영상이 추천으로 뜨면서 해결책을 알게 됐다. shader graph에서 alpha관련 작업을 하면 여러 문제가 있다고 하니 비슷한 문제가 있다면 shader graph setting을 canvas로 바꿔주자.

 

어쨌든 우여곡절 끝에 crt효과를 적용했다.