Drawing 2D rectangles with rounded corners

Question

I am working on translating this prototype I built in HTML into Unity, but I cannot figure out how to draw the 2D rectangles that are the blocks. In HTML this was very simple: I would create an element, set its width/height, set it's border radius (rounded corners), set its fill and stroke. I know Unity uses meshes, but is there any way I can create and manipulate them to get this effect? Maybe I need to use something other than meshes? I have been playing with the idea of making them cubes instead of 2D planes, would this be easier?

Answer 1

Best Answer

Answer by s_guy · Nov 26, 2013 at 02:32 AM

If your app is strictly 2d, don't make your assets into cubes. Try to recreate your prototype with squares in Unity first. I recommend using the sprite pipeline. Then, with the textured squares, use the alpha channel to hide the curved corners.

If you are having trouble making a 2d app in Unity, post a new question about your specific issues.

Add comment · Show 4 · Share

saiato · Nov 26, 2013 at 02:51 AM 0

Share

Thank you for your reply! I apologize if my question sounds silly, I am still a beginner. That does make sense, but how would the texture handle scaling? The blocks in the game can be grouped into bigger blocks of different ratios, so how can I keep the rounded corners consistent if the block is scaled, say, 4x2y? Example: http://i.imgur.com/8ohTVtu.png

EDIT: I used the sprite material to create a block, and the alpha is working great! The scaling is still a problem, however... Screenshot: http://i.imgur.com/3$$anonymous$$ds$$anonymous$$Cd.png

Kiloblargh · Nov 26, 2013 at 04:34 AM 0

Share

So just make another texture for half a block... Or make separate corner, edge, and center tiles, then you can assemble them in any configuration you like. You're not going to run out of texture space, you can make the faces separate from the outlines and use a vertex colored shader to tint it all the different colors.

Excrubulent · Nov 26, 2013 at 04:51 AM 1

Share

Currently Unity doesn't do 2d vector graphics out of the box; only sprites. You may want to look into RageSpline: http://u3d.as/content/freakow-/rage-spline/1D$$anonymous$$ However, you could also create a corner sprite and edge sprites, then scale the edges to fill the gaps between corners. It's not as elegant as simply specifying roundness and size, and it's not as flexible, but that's a way you could do it without spending money.

s_guy · Nov 26, 2013 at 08:00 PM 0

Share

The technique $$anonymous$$iloblargh describes is sometimes called a "9 slice". $$anonymous$$nowing that should help you find more on google or find some related tools in the unity asset store that can automate the pipeline. 9 slicing can give pixel-perfect edges on arbitrarily large rectangles, with some constraints. It won't keep a face drawn in the middle of a rectangle from having artifacts as it scales up though.

For center detail that holds up on larger blocks like in your example, you'll need a bigger texture. If you have only a few sizes and only a few textures, you can probably afford a custom texture for each size. Experiment with the "pixels to units" texture scaling in the sprite pipeline.

Answer 2

Answer by andrii-shpak · Oct 14, 2015 at 01:12 AM

https://www.assetstore.unity3d.com/en/#!/content/46997 you can use this plugin to draw round rect, circle, tringle, polygon, curve in uGUI like image

Add comment · Share

Drawing 2D rectangles with rounded corners

2 Replies

Your answer

Follow this Question

Related Questions