A tutorial on how to create flexible UI Image/Button/… elements which uses sprites.

Using 9 sliced image makes UI elements look better and reduce size of sprites that needs to be used.

The sprite that will be used:

After using this image without proper import settings it gets disorted, unless UI image is of the multiplied size of the used image.

To fix that change sprite import settings to the following:

After that open sprite editor and change default border: 

to this:

It can be done either by draging green pivots (marked in first image with red border) or changing values in fields in Border settings.

After that change Image Type settings in image settings to Sliced:

In the end the image should not be disorted and should look like this:

 

Unity UI 9 Sliced Image
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *

This website stores some user agent data. These data are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to opt-out of any future tracking, a cookie will be set up in your browser to remember this choice for one year. I Agree, Deny
504

By continuing to use the site, you agree to the use of cookies. You can read more about it the Cookies&Privacy Policy Section Above. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. You can read more about it the Cookies&Privacy Policy Section.

Close