I allow players to select buildings of different sizes in my game, in the image below is a building that is 30x30 units and one that is 10x10 units.

To indicate that the building is selected, I added a child called Selection indicator, this child is simply a texture dragged into the scene, which creates a plane. I activate/deactivate this on select/deselect.

So far so good, but as you can see in the image, in order to match the different sizes, I need to scale the Selection indicator, which distorts its edges. Simply using sprite editor here does not seem to change anything since it's in world space.

How could I approach this in a way that the frame for my Selection indicator does not stretch like in the image?

enter image description here


Instead of a plane, use the SpriteRenderer component. The reason is that the sprite renderer allows you to use 9-sliced images, like you might know them from the UI system.

First, go to the sprite renderer and set "Draw Mode: Sliced".

Then go to the import settings of the texture you use to represent the select indicator, set "Texture Mode: Sprite (2D and UI)", "Sprite Type: Single" and "Mesh Type: Full Rect". Then click on "Sprite Editor" and and enter the width in pixels for the left, right, top and bottom border like this:

9-sliced image

If you want to change the size of the indicator game object, do not use transform.scale, because that will also enlarge the edges and corners. Use the SpriteRenderer.size property instead. It will resize the center without changing the width of the border.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.