유니티 Sprite / UI OverDraw 최적화

 

#. OverDraw?

---

 2D 혹은 UI에서 가장 고심해서 최적화해야하는 것은 OverDraw이다.

 

 

 예를들어 위의 이미지는 아웃라인을 그리는 고리 형태의 스프라이트 인데,

고리 안쪽과 고리 바깥쪽은 투명 텍스쳐라서 실제로는 아무것도 그리지 않지만 사각형을 차지한다.

 

이 스프라이트를 그리기 위해서 유니티가 이미지파일 전체의 사각형 박스만큼 화면에 그리게(Draw) 되는데,

이런 스프라이트가 여러개 있으면 화면 한 픽셀에 '여러번' 그리게 된다. 이를 'OverDraw'라고 부른다.

 

투명한 스프라이트가 중첩되면 중첩될수록 OverDraw가 더욱 겹쳐지기 때문에 화면은 디바이스 해상도지만 

유니티가 한 화면을 그릴때마다 OverDraw를 해서 디바이스 해상도의 몇배가 되는 픽셀 수를 그려야하는 것이다.

(파티클이 부하가 심한것도 수많은 투명 텍스쳐들의 OverDraw때문이라 할 수 있다.)

 

 

#. 유니티에서 Sprite Outline설정하기

---

 다음의 스프라이트 4개가 UI상에 배치되어 있다.

 

 

 ViewPort의 OverDraw다음의 스프라이트 4개가 UI상에 배치되어 있다.

 

 

   

 

Scene 뷰 셋팅을 OverDraw로 하면 위와 같이  현재 OverDraw상황을 볼 수 있다.

지금은 스프라이트 당 네모 크기를 차지하고있는 상황.

 

 

 

각각의 스프라이트는 따로 설정해줘야한다. 스프라이트 에디터로 가서

 

 

Custom OutLine 의 OtlineTolerance를 적당한 값으로 설정한 뒤, Generate 한다.

좀 더 정확하게 아웃라인을 설정하려면 손수 수정할 것.

이후 Apply를 눌러준 뒤,

 

 

 

 

ui 이미지의 셋팅 중 Use Sprite Mesh를 눌러주면

 

 

위와 같이 OverDraw가 최적화 된 것을 확인할 수 있다.

 

일반 Sprite는 outline을 설정하고, Simple 이면 최적화되지만,

Image에서는 Use SpriteMesh를 체크해야한다.

 

 

위의 예는 크게 차이가 없는 수준이지만,

캐릭터 일러스트같이 알파 면적이 큰 스프라이트라면

위의 세팅으로 큰 오버드로우 최적화가 될 수 있을 것이다.