One problem we'll have when scaling up our UI is that the images' quality will be decreased. A 256 x 256 pixels sprite scaled up to 512 x 512 will look blurry.
In order to avoid having blurry sprites, we could simply have all our assets in high-definition sizes. On the one hand, they will always look good, even on high-resolution displays. On the other hand, displaying a 1024 x 1024 sprite on a small screen with an effective final size of 128 x 128 will result in a waste of the device's memory.
Hence, it is useful to create, for example, three atlases for different resolution ranges:
SDAtlas
: This is for screens up to 800 x 480. Example devices include:HDAtlas
: This is for screens from 800 x 480 to 1600 x 1200. Example devices include:SHDAtlas
: This is for screens from 1600 x 1200 and above. Example devices include:The preceding three atlases will contain the same sprites of different resolutions. We can then switch the used atlas at runtime depending on the device's screen resolution. If you are using bitmap fonts, they also have to be created with different sizes so that we don't end up with aliased and blurry text for large titles.
We will now create three atlases: SDAtlas
, HDAtlas
, and
SHDAtlas
. They will contain the Button
sprite in its appropriate resolution: standard definition, high definition, or super high definition.
A fourth, ScreenAtlas
, which we call a reference atlas, will also be created. ScreenAtlas
will simply point to the correct atlas depending on the screen's resolution.
Remember that an atlas should:
Remember to use the UITexture
component to display backgrounds or large textures instead of adding them to atlases.
Let's start by creating the standard definition atlas. Follow these steps to create it now:
Assets/Resources/Textures
folder:ButtonSD
texture fileAssets/Resources/Atlas
:Okay. We have SDAtlas
with the button's sprite in standard definition. We can do the same for the high-definition atlas.
Assets/Resources/Textures
folder:ButtonHD
texture fileAssets/Resources/Atlas
HDAtlas
for the new atlas's name
HDAtlas
has been created, containing the button sprite in high definition. Let's finally create the super high definition atlas.
Follow these steps to create SHDAtlas
:
Assets/Resources/Textures
folder:ButtonSHD
texture fileAssets/Resources/Atlas
SHDAtlas
for the new atlas's name
SHDAtlas
is ready and has the button sprite in super high definition. We can now create the last ScreenAtlas
reference atlas.
This fourth atlas is special; it isn't at atlas, really. It only points to the desired atlas. We'll use that to change the selected atlas to use through code. Let's create it now:
Assets/Resources/Atlas
folder.SDAtlas 1
to ScreenAtlas
.The Inspector view displays the following content:
The ScreenAtlas prefab's Atlas Type (1) value is currently set to Normal. Switch it to Reference now. The Inspector panel now looks like this:
You might notice that all atlas information has disappeared; it's currently empty and points to nothing. Let's make it point to SDAtlas
by default:
Good. Now, when we configure our widgets in the editor, we'll use ScreenAtlas
instead of any other. By default, it will point to SDAtlas
, and we'll need to make sure that it points to HDAtlas
or SHDAtlas
depending on the device's screen resolution.
We can create a test button right now and see how it works by changing the reference manually.
Follow these steps to create a button using the button sprite through ScreenAtlas
:
UI Root
GameObject in the Hierarchy view:Control – Simple Button
to Button
.UI Root
| Button
GameObject.UISprite
GameObject's Atlas button:UISprite
GameObject's Sprite button:0
, 0
, 0
}.Good. You should now have our button centered on the screen as shown in the following screenshot:
Good! We can now see what happens when the reference atlas points to another one.
Let's change the ScreenAtlas
reference atlas so that it points to HDAtlas
instead of SDAtlas
:
Assets/Resources/Atlas
.ScreenAtlas
prefab.Now that the reference atlas points to HDAtlas
, our button should automatically change to the button's high-definition sprite.
If you look at your Game view, you'll see that our button has disappeared! Why is that? In SDAtlas
, the button sprite is called ButtonSD
, whereas it is called ButtonHD
in the HDAtlas
sprite.
The reference atlas is trying to retrieve the ButtonSD
sprite that doesn't exist within HDAtlas
. In order to fix that, we must rename our sprites so that they have the same name throughout all three atlases.
We have added our different files for each atlas. If we want the reference atlas to find the sprites within all atlases, we must make sure that they have the same name. Let's do it for our button sprite now:
Assets/Resources/Atlas
.SDAtlas
prefab, and look for Sprite Details in the Inspector panel.Button
(1) and hit the Rename button (2), as follows:Now, let's do the same for the HDAtlas
prefab's ButtonHD
sprite:
Assets/Resources/Atlas/HDAtlas
prefab.Button
and hit the Rename button.Finally, we can follow the same steps for the SHDAtlas
prefab's ButtonSHD
sprite:
Now that our Button
sprite has the same name within all atlases, we can change our button to display it instead of the previous ButtonSD
sprite:
UI Root
| Button
GameObject.The displayed Button
sprite in the pop-up window was actually the sprite from HDAtlas
, since we have set ScreenAtlas
to point to it instead of SDAtlas
.
In the game view, we now have the HD button of 442 x 264 pixels, as follows:
Now, we can test the manual atlas switching to check whether it works:
Assets/Resources/Atlas
.ScreenAtlas
prefab.Good. If you look at the Game view, you'll notice that with the changing of the reference atlas to point to SHDAtlas
, the button sprite has been updated and now displays a 588 x 351 sprite instead of the previous 442 x 264 version:
This means that by simply changing the atlas the ScreenAtlas
points to, we can display different sprites depending on the screen resolution.
We can now work on a script to automatically switch atlases at runtime.
3.139.86.18