Pixel Art Shader for VFX

a-a·2024년 6월 28일

UnityShader

목록 보기
6/6
post-thumbnail

서론

현재 진행중인 프로젝트에서 VFX도 만들어야 하다보니, 컨셉을 맞춰주기 위해서 픽셀 VFX를 만들어야 했다.
그래서 래퍼런스를 찾다보니..

두 가지 방식으로 나뉘었다.

  1. 직접 다 도트로 찍기
  2. Unity 파티클 시스템으로 만들기

[1]번 방법같은 경우는 아트의 역량이 크기도 하고, 작업량이 많기 때문에 배제됐다.
1번 방법이 만들기만 한다면 진짜 느낌이 좋긴하다. 나중에 스몰 프로젝트를 진행한다면 이 방법으로도..
[2]번 방법으로 결정을 하고, 그 전의 사전 작업으로 파티클에 나오는 텍스처를 Pixel화 시켜주는 작업이 필요했다.

픽셀 게임인데, 캐주얼 VFX가 나오면 그것대로 웃기니까..


본론

원래라면.. 참고 유튜브가 없는게 과제였지만, 모르겠어서 결국 찾아봤다. 미약하고 미약하다..
그래서 보고 만든 유튜브 링크 딱 마침 나에게 필요한 영상 그 자체였다!

이제는 어렴풋이 어떤 값이 나올지 추측 정도는 가능해졌다.
수학을 어렵게만 생각하지 않고, "언어의 함수"의 느낌으로 다가가니 오히려 쉬웠다.
그리고 추가적인 수학적인 이론을 따로 찾아 공부하는 방식이 나에게는 맞는 듯 하다.

사용된 외부 변수 Bits는 Float형의 변수이다. 결론적으로, 픽셀 하나의 크기를 정하는 변수이다.
크면 클수록 원본에 가깝게, 작으면 작을수록 픽셀화의 강도가 세진다.

=1=

Floor(내림) 노드로 값의 구간을 확실하게 구별했다.
아마 Multiply 노드를 사용하지 않고 Floor 노드로 바로 연결했다면,
UV의 각 요소는 0~1의 사이의 값을 가지므로 0이 되었을 것이다.
그래서 그냥 검정색으로 결과물이 출력이 되었을 것이다.

그리고 Divide 함수를 통해, Floor로 범주화된 것의 값들을 반복 시켜줄 수 있도록 했다.
추가로 타일링 노드로 오프셋을 약간 조정해, 텍스처의 Pivot에 맞춰주는 작업을 했다.

=2=

텍스처를 픽셀화를 한 다음, 오프셋을 맞춰주는 작업을 통해 이미 원하는 느낌을 낼 수 있었다.
여기서 Color를 수정할 수 있는 기능까지 넣어 쉐이더를 완성했다.


결론

영상에 따르면 해당 쉐이더를 활용해서 VFX를 만들면 아래와 같은 사진의 느낌을 낼 수 있다고 한다.
VFX 능력치도 거의 0에 가깝기 때문에 미리 결제해둔 강의를 토대로 학습을 해보고 기록을 할 생각이다.
이 쉐이더의 활용은 개발일지에 올라갈 것 같다.

profile
게임 개발자

0개의 댓글