Until now, we've used NGUI's default atlases to create all our widgets. In this chapter, you will learn how to create a new atlas and add our own assets. This chapter will cover the following topics:
- Understanding the atlases
- Creating a new atlas
- Adding sprites to the atlas (normal, sliced, and tiled)
- Understanding Dynamic and Bitmap fonts
- Importing new custom fonts in the project
- Displaying large textures on screen without storing them in atlases
We will use these new assets to add icons to our play, options, and exit buttons. We will also change our different windows' backgrounds and add new fonts to our UI.
At the end of this chapter, you will understand NGUI's atlas and font creation and know how to import your own assets.
A texture atlas is a large image containing a collection of sub-images. These sub-images are the actual textures for your 2D or 3D objects and can be rendered by editing the object's texture coordinates, telling which part of the texture atlas should be used.
The goal here is performance; storing 20 frequently used textures in a large one will require only one large texture to be treated by the Graphics Processing Unit (GPU), which is faster than treating these 20 textures separately. This method ensures that even for 20 different textures, rendering them will only require one single draw call.
These textures can have variable sizes, but keep in mind that using textures with the power of two sizes is easier for the GPU to process: 16 x 16, 32 x 32, 64 x 64, and so on. That's because the textures have to be arranged in a specific order before being sent to the GPU.
Unity's largest texture size is 4096 x 4096, thus the maximum size for an atlas with NGUI is 4096 x 4096 pixels. It's large enough for recurrent user interface elements such as buttons, icons, and so on.
Fonts can also be stored in an atlas; all characters are then stored in a bitmap texture, rendering them in the same draw call with all other sprites of the same atlas.
When you need large textures to be displayed, for example, an image background for your UI, it is recommended that you don't add it to your atlas and use the UITexture component instead, which we'll also discuss during this chapter.
With NGUI, an atlas prefab is used to contain sprites and fonts. It is composed of:
- A large texture file containing all sprites and fonts
Materialwith this texture file is assigned, with a specific shader
The atlas prefab has the UIAtlas component attached to it. Its purpose is to contain information about your sprites' positions and sizes within the large texture.
Thanks to this prefab, the same material and atlas (large texture) are used to hold all our sprites instead of using multiple materials and separate small textures.