1. @agatestudio
Technical UI
Aryo
Knight
Agate Studio

2. Agustinus Arya Adhinugraha

3. Introduction
Multiple Resolution
Multiple Aspect Ratio
Atlas
Patch 9
Compression
Unity & NGUI
References

4. Multiple platform & device
Multiple resolution
Multiple aspect ratio

5. Scale down
• Lost image quality
Scale up
• Lose performance
SD – HD
• Best Approach
• Different image

6. Virtual Viewport

7. Anchor

8. Anchor

9. Many Textures -> Many Draw Call
• Reduce Performance
Non power of two textures
• 550x330 -> 1024x1024
• Waste all extra space

10. Pack all textures into one texture
• Single Draw Call -> Increase Rendering Speed
Power of two atlas
• Efficient

11. Stretchable
• Without losing quality

12. 9 Parts
• 4 Parts Unscaled
• 2 Parts Scaled inY axis
• 2 Parts Scaled in X axis
• 1 Part Scaled in both axis

13. PVRTC (iOS)
DXTC (desktop)
ETC (android)
RGBA16 (all)

14. Unity support texture compression
• PVRTC 2bpp/4bpp
• DXT1/5
• ETC 4bpp / etc2 4bpp/8bpp
NGUI
• Anchor (top, left, right, bottom)
• Atlas package
• 9 Sliced sprite
• Sprite Fill & Color Tint

15. http://v-play.net/doc/vplay-different-
screen-sizes/
http://blog.gemserk.com/2013/01/22/ou
r-solution-to-handle-multiple-screen-
sizes-in-android-part-one/
http://withimagination.imgtec.com/inde
x.php/powervr/pvrtc2-taking-texture-
compression-to-a-new-dimension
http://blog.wolfire.com/2010/03/Using-
texture-atlases

16. Thank you!