모바일에서 현재 사용되는 미니맵은 다음과 같습니다.
오른쪽의 저 스나이퍼의 크로스 헤어 같은 것이 모바일의 미니맵. 뭔가 동서남북을 표현하려고 한 것 같지만 전혀 그렇게 보이지 않습니다.
일단 보기에 별로인 것은 둘째치고, 기능적으로도 전혀 아닙니다. 누르면 자동이동 기능을 하긴 하는데 배경 그림이 저러니까 동작하는 데가 있고 안하는 데도 있고요.
그래서 알아보니 용량문제 같은 것이 걸리더군요. 하긴 지금 모바일의 용량제한은 심각하니까요.
그렇지만 아무리 그래도 저걸 그냥 두기엔 좀 걸립니다. 그래서 한번 연구해 봤습니다.
일단 팩트 수집부터...
- 현재 들어간 저 크로스헤어 마크의 크기는 약 90*90 픽셀.
- 미니맵중에 가장 큰 것은 낙양성
- 모바일에서의 미니맵은 약 20여개 +- 가 필요함.
넵 일단 90*90 픽셀을 확대해서 찍으면 저렇게 나오는군요.
그래서 저는 일단 128*128로, 가장 크다는 미니맵인 낙양성 맵을 준비해 보았습니다.
작은 사이즈입니다.
그럼 이게 모바일 기기에 들어가면 어떻게 보이게 될까요?
이 정도가 이쁘겠군요. 미니맵이 옆에다 항상 띄워 놓을 것도 아니니 투명도는 상당히 양보해도 될 것 같고, (그렇다고 완전 불투명은 답답하긴 하네요 ) 128 사이즈를 안드로이드 표준 해상도에 맞춰 놓으니 저정도 느낌이 됩니다.
즉 가장 큰 맵이 저 정도니까 나머지 맵들은 더 선명하겠죠. 저건 제일 안이쁘고 뿌연 맵이 될겁니다.
1. 즉 128 정도면 미니맵으로 충분히 사용가능
결과 하나 나왔습니다.
그럼 이번엔 ... 20개를 준비해 보겠습니다. 미니맵이 그정도 될 테니까요.
대충 이 정도...
모바일 데이터이지만 압축해도 이미지의 별 차이가 없음을 발견했습니다. 그러므로 RGBA Compressed DXT5 가 맞겠죠. 341KB 라는 저렴한 용량이 나옵니다.
물론 지금 16개밖에 안들어간다는게 함정....
20개 정도만 되면 두 장을 쓰거나 1024를 써줘야 하는 문제가 생깁니다.
크기도 이 정도는 되어야 미니맵이 시원시원하겠죠. 엔진에 직접 셰이더 짜서 구현해 봤습니다.
뒤집힌 것은 무시무시.
2. 따로 한 장 혹은 두 장을 넣는다면 512 두 장 (341K *2) 혹은 1024 1장이 될 듯. 압축해서.
그런데 이렇게 텍스쳐를 따로 쓰면 아시다시피 콜수도 꽤 증가할 수 있고, 용량은 크리티컬한 정도는 아니지만 어쨌건 좀 더 줄여보고 싶단 말입니다.
그래서 생각한 방법이 RGBA 각 채널별로 이미지를 따로 쓰는 방법입니다.
그렇게 만들면 기존 용량의 1/4만 사용할 수 있게 되는 거지요.
어차피 흑백이니까 한 채널씩만 사용하면 충분합니다.
이 부분은 Shader로 처리하면 되고, 구현해 보니 잘 되네요. 모바일 기기에서도 별 문제 없어 보입니다.
float4 frag (v2f i) : COLOR
{
i.color = tex2D(_MainTex,i.texcoord);
return half4(i.color.ggg , _Alpha) ;
}
에서 i.color를 r,g,b,a 로 4종류로 쓰면 되고, 투명도는 숫자로 강제지정하면 위의 그림과 똑같은 결과가 나옵니다.
이건 예전에 아이폰에서 폰트용으로 만들어 본 적이 있던 그 방식입니다.
즉
3. Shader로 용량을 1/4로 줄일 수 있다.
그렇지만 이것 가지고도 불안합니다. 역시 텍스쳐가 한 장 더 되면 드로우콜에 문제가 일어날 수도 있지요..
게다가 기존에 있던 UI 텍스쳐의 위치가 좀 남아 있지요.여기다가 넣을 수만 있다면 1call 처리도 가능할텐데요.
여기다가 넣는다고 했을 때...
6장만 넣으면 4개의 채널을 쓸 수 있으므로 6*4 = 24장의 미니맵을 넣을 수 있습니다.
즉 6장 위치만 사용하면 됩니다.
그렇게 만든다면
여기 구석에 이 정도의 부분만 차지하면 됩니다. 남아있더라고요.
즉 텍스쳐 하나도 추가 안하고 미니맵 24장을 넣을 수 있습니다. 이렇게 하면요.
그러므로 최종 결론은 다음과 같습니다.
4. 텍스쳐를 더 추가하지 않고 24장의 미니맵을 넣을 수 있다.
Shader만 하나 만들면 된다.
이렇게 하면 현재 모바일에서도 미니맵을 충분히 쓸 수 있을 것 같습니다.
보고 끝...
댓글