![unity change color ui image unity change color ui image](https://forum.unity.com/proxy.php?image=https:%2F%2Fi.postimg.cc%2F4dzPJ8vY%2F1.jpg)
Minimaps (or radars) are known for displaying information about our surroundings.
![unity change color ui image unity change color ui image](https://developerfreaks.com/unity/U/ui-pack-nightmare-49146/ui-pack-nightmare-49146-006-scaled.jpg)
#UNITY CHANGE COLOR UI IMAGE HOW TO#
If you try to switch the Image Type to “Sliced” directly, you’ll see that you have a little warning telling you: “This image doesn’t have a border”.What does it take to create a mini-map for a Unity game? You most probably would be surprised to hear that it’s easier than you think, and that it does not even require any programming skills! Here I will try to explain how to make one step by step. The “Sliced” Image Type allows you to adapting one image to multiple sizes without needing multiple assets… but to deal with this specific case, you need to use a little Unity trick: the 9-slicing sprites! Similarly, my orange and blue borders are a bit too large on the X axis.Ĭlearly, this Image Type is valid as long as you don’t scale your images too much… but it is limited otherwise! This means that, for example, if you prepare an image like this one which is square and want to use it as a background for a wider panel in your Unity game, it won’t display properly!Īn obvious solution would be to also import a second version of your image for the wide panel, with a 2:1 aspect ratio… but then, what if I want something with a 4:3 ratio? Or a 16:9 ratio? Should I just create endless copies of my sprite for all these ratios, just to keep the border size consistent? The “Sliced” Image Typeĭon’t worry: there’s a better solution. Well – the problem is that if you start and change the dimensions of your UI element to get a different aspect ratio, then the sprite will get stretched in a weird and unpleasant way:Īs you can see, the borders of my sprites get really scaled up and our yellow squares aren’t very square anymore. So you instantly get a basic display of your image:
![unity change color ui image unity change color ui image](https://forum.unity.com/proxy.php?image=https:%2F%2Fi.imgur.com%2Ff9dHRS7.png)
Basically, this mode just copies and pastes the image as-is, without any clever cut and slicing. Now, for most of your assets, the Image Type will be set to “Simple” by default. More precisely, the image has four yellow squares in each corners, four borders each of a different colour and a pink zone with a visible “F” mark in the middle. I know, it’s not pretty – but it is divided in several areas that will be important further down the road. In this post, I’ll be working with a non-artistic but (hopefully!) readable image asset that looks like this: So let’s rather focus on the “Simple”, “Sliced” and “Tiled” types! ? The “Simple” Image Type We’ll leave the “Filled” Image Type aside in this article, because it is actually quite close to the “Simple” one, except that you have an additional slider to set the “Fill Amount”, and have the rest of the display be clipped out to transparent. This property can take four values: “Simple”, “Sliced”, “Tiled” or “Filled”. This determines how your image is displayed and in particular stretched in the UI if you change the size of the UI element itself… Once your asset is ready, you can add it to your UI Canvas by creating a new “Image” object (that automatically gets added an Image component):Īs you can see, this component has several options but, among those, there is one called the “Image Type”. To make sure you don’t consume too much memory, however, you can reduce the max size of the asset if you know it is not going to be added to your UI with a higher resolution ? Those sprites can be configured with quite a lot of parameters, but the default ones are usually pretty okay. To change the image asset type, just choose the right “Texture Type” at the top of the Inspector: This UI system provides you with lots of built-in components to create texts, buttons, toggles… and of course images! But when you use this technique, you usually don’t import your images as textures anymore: instead, you use sprites.
![unity change color ui image unity change color ui image](https://i.stack.imgur.com/gv5zN.png)
So, today, let’s see how you can tweak the “Image Type” of your UI images to re-use your sprites in a more clever way! ? A quick note on the Unity UI and images But to make the most out of your UI components, and in particular your images, there are some options you can play around with… In fact, there are now three UI systems available in the framework: the UI Toolkit, the Unity (Canvas-based) UI, the IMGUI.ĭespite having some subtleties in terms of optimisation, the Canvas-based UI is usually the best choice for designing slick and responsive UIs. Unity, like all major game engines, has really neat tools to create user interfaces quickly and easily. In a recent article, I discussed how we can extend our Unity editor and its interface to make our lives easier as developers or designers – but, of course, another key thing when making games is designing interfaces for the players! This article is also available on Medium. Let’s discover some Unity tricks to scale images nicely without stretching… and without multiplying the number of assets!