- Home /
Box selection border
I'd like to make a box selection graphic that has (1) a transparent fill and (2) an opaque border.
Example: http://i.imgur.com/56ZgQ.png
Currently, I have it looking like this, using a RectTransform and an Image:
http://www.legiontd2.com/community/attachments/20170530004404_1-jpg.801/
How can I make it look like the first image? I tried using a Sliced image with a border, but it just resulted in a green border (but no transparent fill).
Answer by FM-Productions · Jun 01, 2017 at 01:37 PM
Look up how to draw lines on the screen for the border of your selection rectangle. You may want to use the line renderer. Here is a little tutorial I have found for drawing lines: http://www.thegamecontriver.com/2015/05/how-to-draw-line-on-screen-in-unity-csharp.html
But I think it is possible with what you already have. The idea is to have more images like the one you already have (one for each border). When you draw the recttransform on the screen, retrieve or calculate the vertices of that rectangle. You use those vertices coordinates to draw the same image again on the screen, but now scale it so that it looks like a border of your base rectangle.
Let's say you have the coordinates for the left edge of your rectangle, (0, 1) for the lower left corner and (0, 6) for the upper left corner. So you place another image on the screen with the position of (0, 1) and then scale it on the y axis, so that it has the y-length of 5 in the end (going from (0,1) to(0,6). Then simply scale it on the x-axis so that you have your desired width of the borderline.
The procedure is the same for the edges of your base rectangle along the x-axis. But now you want to use the y-axis for the width of the border image/line and the x-axis for the length of the edge when you scale your border image.
To make it look exactly like in the image you linked, I would make the base rectangle even more transparent and the border images more opaque.
Answer by Tu-Le · Jun 01, 2017 at 10:46 AM
never do it before but i think you can do it with a LineRenderer
Your answer
