16
@agatestudio Technical UI Aryo Knight Agate Studio

Technical UI in Mobile Games by Aryo

Embed Size (px)

Citation preview

Page 1: Technical UI in Mobile Games by Aryo

@agatestudio

Technical UI

Aryo

Knight

Agate Studio

Page 2: Technical UI in Mobile Games by Aryo

Agustinus Arya Adhinugraha

Page 3: Technical UI in Mobile Games by Aryo

Introduction

Multiple Resolution

Multiple Aspect Ratio

Atlas

Patch 9

Compression

Unity & NGUI

References

Page 4: Technical UI in Mobile Games by Aryo

Multiple platform & device

Multiple resolution

Multiple aspect ratio

Page 5: Technical UI in Mobile Games by Aryo

Scale down• Lost image quality

Scale up• Lose performance

SD – HD• Best Approach

• Different image

Page 6: Technical UI in Mobile Games by Aryo

Virtual Viewport

Page 7: Technical UI in Mobile Games by Aryo

Anchor

Page 8: Technical UI in Mobile Games by Aryo

Anchor

Page 9: Technical UI in Mobile Games by Aryo

Many Textures -> Many Draw Call• Reduce Performance

Non power of two textures• 550x330 -> 1024x1024

• Waste all extra space

Page 10: Technical UI in Mobile Games by Aryo

Pack all textures into one texture• Single Draw Call -> Increase Rendering Speed

Power of two atlas• Efficient

Page 11: Technical UI in Mobile Games by Aryo

Stretchable• Without losing quality

Page 12: Technical UI in Mobile Games by Aryo

9 Parts• 4 Parts Unscaled

• 2 Parts Scaled in Y axis

• 2 Parts Scaled in X axis

• 1 Part Scaled in both axis

Page 13: Technical UI in Mobile Games by Aryo

PVRTC (iOS)

DXTC (desktop)

ETC (android)

RGBA16 (all)

Page 14: Technical UI in Mobile Games by Aryo

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

Page 15: Technical UI in Mobile Games by Aryo

http://v-play.net/doc/vplay-different-screen-sizes/

http://blog.gemserk.com/2013/01/22/our-solution-to-handle-multiple-screen-sizes-in-android-part-one/

http://withimagination.imgtec.com/index.php/powervr/pvrtc2-taking-texture-compression-to-a-new-dimension

http://blog.wolfire.com/2010/03/Using-texture-atlases

Page 16: Technical UI in Mobile Games by Aryo

Thank you!