보통 게임에서 체력 바를 만들 때는 삼각형 두 개로 된 사각형을 크기 조절해서 남은 정도를 표시합니다. 원형 게이지나, 쿨링 다운 남은 정도를 시계 모양으로 표시할 때는 삼각형 네, 다섯 개로 된 사각형을 모양을 조절해서 남은 정도를 표시합니다. 다음은 제가 만들어 사용 중인 UI 입니다.
위와 같이 간단한 경우라면 폴리곤을 직접 움직여서 표시하는 방법이 화면에 깔끔하게 나와서 좋습니다. 그런데 저런 간단한 경우가 아니라 바(bar)나 게이지의 모양이 일정치 않거나 범위가 일정치 않을 때나, 여러 바가 중첩되거나 겹쳐 있거나 하는 때처럼 단순 폴리곤으로 표시하기 어려운 경우에는 이미지를 사용하는 방법이 편합니다.
좀처럼 없을 것 같은 극단적인 예이긴 하지만 위와 같은 것을 만들 경우 포토샵에서 이미지에 그라디언트를 원하는 모양으로 그려서 이를 셰이더에서 계산하여 표시합니다. 다음은 제가 사용 중인 체력 게이지 이미지입니다.
위에 같은 이미지를 만들어서 원형 체력 표시기를 만든 경우 수치를 조정하면 다음과 같이 나올 겁니다.
잘 나오네요. (만약 0.5로 지정했는데 중간에 있지 않다면, 유니티 이미지 설정에 sRGB (color texture) 항목이 선택되어 있는지 확인해 봅니다) 그런데 수치를 조정하다 보니 뭔가 이상한 걸 발견합니다.
이건 아무리 봐도 왼쪽은 1/4이 아니고 오른쪽은 3/4이 아니네요. colour space 문제인가 싶어 포토샵의 RGB Profile 이나 Blend RGB Colors Using Gamma 같은 걸 아무리 만져봐도 결과는 똑같습니다. 이유는 진짜로 그라디언트가 왜곡되어 그려져 있어서 그렇습니다. 1/4, 3/4지점에 피커를 찍어보면 64, 192가 아니고 52, 203이라고 나옵니다.
포토샵 Gradient Editor에 들어가 보면 중간에 Smoothness라고 있고 아마 100%로 값이 들어가 있을 겁니다. 이걸 직접 만져보시면 100%일 때 색들이 중간으로 이동하는 걸 확인하실 수 있을 겁니다. 다른 프리셋들도 만져 보시면 어떤 느낌인지 아실 것 같네요. 이름대로 색이 급격히 변하지 않고 부드럽게 보이게 해줍니다.
그라디언트에 Method가 있는 포토샵 버전을 사용하고 계시다면 Classic으로 지정하고 그라디언트를 그리시길 바랍니다.
일반 이미지라면 아무 문제 없지만 데이터로서 정확한 값이 들어가야 하는 경우에는 위의 0.25/0.75 이미지와 같은 잘못된 상황이 생기므로 값을 0%로 놓고 그라디언트를 그려서 이미지를 작성하시면 됩니다.
수치 조정 시 결과물이 너무 지저분하게 나온다면 유니티의 이미지 Compression 낮추거나 아예 None으로 해서 최대한 원본 그대로 사용하게 지정합니다. 이미지가 밴딩(근접 색상 간 경계가 뚜렷이 보이는 현상)이 심한 경우 포토샵의 그라디언트 툴 옵션에 Dither를 선택해서 경계를 디더링해서 최대한 부드럽게 표시되게 합니다. 아래는 최종 결과물입니다.