Madness of 2D assets in Unity3D

How to export sprites and textures and not get crazy

Size of your export is too big? Too many transparent pixels? Dimensions of an image are not dividable by 2? Problems… problems… and once again complaints about exports from our programming friends. What can we do about it? Is there any way to make it stop? Yes, indeed!

In this post I am going to explain the core basics of exporting 2D assets to make developers satisfied and your life easier. Not to bore you with dry theory, I’ve created sample popup with my friend Marta.

As you can see, it allows players to customize their sticker. Even though this popup looks very basic, it contains most cases that you are going to deal with in your work. In this article I am going to cover sprite slicing and exporting icons for repeatable elements. Ok then… let’s get into details.

9-slicing

If you are a graphic designer and you’ve never heard about 9-slicing, reading this article will definitely improve the way you think about your exports. Let’s say that you need 2 popups in your game, but one of them is bigger than the other. Obviously, you want them to be similar to keep consistent style. Do you really have to export backgrounds for these popups separately to fit their sizes? Fortunately, the answer is no! Using 9-slicing you can not only make exports very small, but also reuse them in other elements. Further changes in color or shape will be extremely easy because you will need to make adjustments on just one sprite.

In the picture below you can see a sliced sprite in Unity Editor. There are 9 different slices and each of them is going to be used for different parts of your background:

  • Slices 2 and 8 will be stretched horizontally
  • Slices 4 and 6 will be stretched vertically
  • Slice with number 5 will be stretched both horizontally and vertically to cover middle of your background
  • Slices 1, 3, 7, 9 will be placed in the corners of your popup. They do not change, which means that they are not going to be stretched at all.

These are examples of backgrounds that can be created with this sliced sprite.

How to adjust my sprite to make using 9-slicing possible?

First of all, get your sprite and split it into 9 areas like in the picture above. When it comes to the corners, the way you prepare them usually depends on their shape. 9-slicing does not modify or stretch elements placed in areas 1, 3, 7 and 9 (corners), so if you want your popup to be curved in the corners, you have to put your slicing lines right behind their curve end in the corners. Unlike corners, slices with numbers 2, 4, 5, 6 and 8 (marked with scissors in the picture below ) are going to be stretched. They are supposed to be small, but you still need them to be at least 1 pixel wide (or tall). When you get rid of all the areas marked with scissors, bring other parts together and your export is ready!

Advanced 9-slicing

Ok, 9-slicing seems to be very helpful. It allows making smaller exports possible by appointing pixels which can be reproduced in the middle and sides of my background. Great! But wait… What if my background is going to use vertical gradient? What now? It’s not possible to appoint pixel which will be used to reproduce gradient. Well… you can’t stretch it vertically, but it doesn’t mean that you can’t do it horizontally! Height of your export is going to be equal to your gradient height, but you can reduce its width by cutting off the middle. You can proceed accordingly when it comes to horizontal gradient.

You may ask yourself why do I write about ‘some kind of backgrounds’ when I could actually say something about background we have in our customization popup. Well… this export is a little bit tricky too. At first glance, it looks like a texture which can be easily sliced, but when you look at the top left corner, there is a ‘thing’, which is a background for the logo and the title. Since we want it to have a specific width and offset on the left side, we can’t put it between the slicing lines (if we did, it would be stretched in the middle). Instead, we place it in the corner of the sliced sprite. As I mentioned before, things placed in the corners do not change, so it is not going to be stretched. With this only difference in our mind, we proceed with the rest of texture just like in the previous examples.

Repeatable Elements

The other tricky part in exporting are icons for repeatable elements in your game like equipment slots, store items, achievements sections etc. As you can see on the right side of the popup, there is a group of mouths which you can put on your character. All these elements look quite similar, like they were created using the same template. The only differences between them are icons and names. Obviously, developers do not create cells like these manually, one by one. Instead, they create some kind of a template. In Unity, they are called prefabs. Well then… seems like it makes our work faster, just like in a factory right? Indeed it does, but to make it possible you have to create all your exports, which are going to be used in these prefabs, the same size and anchored to a certain point. Why? Because usually the only thing developers do is swap sprites and not care about its position inside of a rectangle. It is your job as a graphic designer to position it correctly in your export, so when they swap them everything looks as it should.

Dimensions of exports

Last but not least, we have to focus on dimensions of things you export. Most texture compression formats in Unity are based around 4x4 blocks of pixels. Even though it is possible to have arbitrary dimensions of these textures, to make compression work, you should keep them at a multiple of four in size. There are compression formats which may put on your textures other restrictions like having size which is power of two. To make sure that your exports can be compressed, ask your Unity guy 👨‍💻 (or girl 👩‍💻) what kind of compression you use and what restrictions it involves.

Conclusion

I hope this article clarified a little how to make your exports better and easier to work with. Obviously there are many other cases which I did not cover here, but those you have found here are definitely the most popular ones. In case you want to get into details of our customization popup, you can fork project on our GitHub. Remember that every time you feel confused about exporting, you can always ask your developers how they imagine an export of their dreams or you can work together on a perfect solution that suits your project. I believe that from now on, everything will go much smoother!

Don’t forget to tap and hold 👏 and to follow DaftMobile Blog (just press “Follow” button below)! You can also find us on Facebook and Twitter.