Multiple sprite: Complete Unity UI in one PNG

All sprites are properly imported from my only one PNG

After some research and testings I finally made a technical choice to help me making UI fast for my Unity games. I used to make one sprite for each button, each icon, and every Sliced (9-Patch) things. This method have tree major issues :

  • I couldn’t apply the same update in one time for all my buttons
  • I couldn’t easily have a global look of my UI before mixing things in Unity
  • It was necessary to configure all sprite import one by one

In Unity 4.6, I played with the “Multiple” mode of a sprite and the sprite Editor.
As a short result : It’s easy, powerful and fast !

1. Understand the method

What do you need generally for a UI ?

  • Lots of icons
  • Various text buttons (regular, disabled, ON, OFF, …)
  • Various icon buttons (regular, disabled, ON, OFF, …)
  • Multiple “Panel” aspect (popup title, popup background …)
  • Some sliders
  • And whatever you’ll need …

The idea is to have every button, popup, texture of your UI in one and only png file.

Here is my pattern for all my UI  :

Screen Shot 11-23-14 at 06.26 PM

My pattern to add all my needed UI elements

I just have to export it in PNG (without text, obviously) and prepare the sub-sprite in Unity Editor.

To do that be sure to configure your import like this :

Screen Shot 11-23-14 at 06.40 PM

Configure your sprite import : Texture type : Sprite (2D and UI) Sprite mode : Multiple

Then, open the Sprite Editor. Zone after zone I set up the sprite size and eventually borders for sliced ones.
Beware to name them properly to be able to find them after in editor.

Screen Shot 11-23-14 at 06.35 PM

Define each sub-sprite and name them

 

Finally, I have done all my sprites with slice information on this only one file :

Screen Shot 11-23-14 at 06.33 PM

All subsprites are done in the Sprite Editor !

And the magic appear : All those sprites are see as sub-sprites but can be used everywhere like “Image” in the new Unity UI :

All sprites are properly imported from my only one   PNG

All sprites are properly imported from my only one PNG

With this very simple pattern, I made a simple Title scene with :

  • Simple text buttons
  • Icon buttons
  • Various Popups (simple or with scroll zone)

I recorded it and it’s the first part of the conclusion video

2. Adapting the pattern

Now, with this starting point, I made a simple second UI sheet for the purpose of this little tutorial :

Screen Shot 11-23-14 at 11.49 PM

A fatastic UI ! Ahem… Ok, I’m kidding…

I just had to adjust the slice informations and I replay the same Title scene.

I recorded it and the result is the second part of this conclusion video :

[youtube https://www.youtube.com/watch?v=DS5xcm0dIso]

 

 

Flavien

Making Android Games

You may also like...