Creating an NGUI background image
Rather than adding a panel image behind every menu, it can be easier just to add an NGUI background image that’s used by the entire menu system.
While it sounds easy, it is complicated by the need to maintain the image’s aspect ratio, no matter what the screen resolution is on a device.
Designing an NGUI background Image
There are many different devices running at many different screen resolutions. For simplicity, it is best to create an image that will fit the widest or tallest screen, but still look good if cropped to fit a shorter or narrower screen.
For more information on factors to consider when designing an image, check out Unity splash screen for Indies.
Import the texture into Unity
Import it into Unity. In this example, I’ve chosen a landscape 1280×720 pixel image of a city scape. This is a 16:9 aspect ratio, so it is wide enough to fill the screen on a typical Android device.
Select your image in the Unity inspector. By default Unity will compress it and adjust the size so that it is square, which will make it appear distorted. This won’t look very good on a high resolution screen. For a background image, I’d recommend changing the type to GUI, and Format to Automatic Truecolor. This forces Unity to keep the original image’s aspect ratio and leaves it uncompressed. It may not be the most efficient way to store a texture, but for a large image on a largely static screen, quality beats efficiency.
Create the NGUI background image gameobject
Add a gameobject to your NGUI root object. Ensure that it is positioned at (0, 0, 0) and its scale is (1, 1, 1).
Next, add a UITexture component to the gameobject, and drag your background image to the Texture field.
If your app is landscape, then you’ll need to set the Aspect to “BasedOnHeight”. Set the value to the width of the image divided by the height. In my example, I’ve entered 1.777, which is 1280 divided by 720.
For a portrait app, set the Aspect to “BasedOnWidth” and the value to the height divided by width.
Using your NGUI background image
So long as you design your image keeping aspect ratios in mind, it’s quite easy to add a universal NGUI background image to your app.
This same technique can be used for creating a splash screen. The only difference between background and splash is that the splash screen is on top of everything, while a background image is behind everything.
photo credit: Almond Butterscotch via photopin cc