koobas.hobune.stream
Drawing 2D rectangles with rounded corners
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?
Why? It looks like all you need are some textures with alpha channel.
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.
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
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.
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.
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.
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
