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 :
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 :
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.
Finally, I have done all my sprites with slice information on this only one file :
And the magic appear : All those sprites are see as sub-sprites but can be used everywhere like “Image” in the new Unity UI :
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 :
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]