Creating a unit selection box in Unity (2D)

Question

I've been trying to get my head around how to create a selection box for a selected unit in a 2D top-down type game. When you click on a unit, a small box would appear around that unit based on some sort of box-size.

I do not know/understand how to either calculate the size that box needs to be, draw the box (have an object under the game object that is sized appropriately with the selection box texture?) or how to make the selection box adjust it's size/shape like in this gif: http://i.imgur.com/xY7XW6C.gif

I don't expect anyone here to hand feed me what I need to use, but some idea of how to go about doing this in Unity (starting from the smallest, and most simple thing, like just making the box) would be very much appreciated.

Thanks!

Answer 1

I have done something like this just today. The key idea here is to use the new Unity UI and a world space canvas. Here are the general steps needed to make this work:

1. Create a new canvas, set it to world space. (The size should not matter, but I have only started using the new UI system recently, so I am not 100% sure of that. It works with a size of 0 though.)
2. Create an UI image as a child of the canvas. Make sure that its source image is set to 'Background' (i.e. the background image coming with Unity's new UI. If this is not listed, first create a UI panel. That should add that texture). Now set the image type to 'sliced', uncheck 'Fill Center' and set the color to whatever color you need. You should store this image as a prefab, let's call it 'Selection Box'.
3. Whenever a unit is created, create a new selection box in the world space canvas and set it to be inactive. Store a reference to this selection box in the unit. (Okay, this is the most straightforward approach to this, but associating each unit with its own box may be wasteful. You can do this any other way, just make sure to have a Selection Box available when the unit is selected.)
4. For as long as the unit is selected, set its selection box to be enabled. Update the size of the selection box by getting the RectTransform component and setting the 'sizeDelta' value. I myself am using the 'bounds' field of a Collider2D to get the extents of the rotated sprite, but you can also use the 'bounds' field of the SpriteRenderer.

Good Luck!

Answer 2

Make the texture that you want and attach it to the game object you want it to appear on, size it and everything so it looks how you want. Then uncheck its renderer.

Then in the code for the game object add

public GameObject selectionBox;

and then drag and drop the box onto the area in the script of the parent so you have a reference to it.

Then in your code for the parent just enable or disable it through code using the reference.

This is essentially the same as Justin Markwell's answer except his doesn't use a direct reference. That will be fine if the selection box is the only sprite renderer, but if you have multiple it might not select the correct one.

Answer 3

Make a texture like this in Paint or Photoshop or something. you can turn this into a sprite and add it as a child of your unit, size it and uncheck spriterenderer then prefab the unit and then add something like this to a OnSelected or OnMouseDown event.

SelectedUnit.gameObject.GetComponentInChildren<SpriteRenderer>().enabled=true;

there is a bunch of ways to accomplish but this is a very simple way hope it helps

note that the image is just a shape with a transparent center