Hello Guest

Author Topic: Round corners  (Read 6921 times)

ivomarel

  • 2D Toolkit
  • Newbie
  • *
  • Posts: 13
    • View Profile
Round corners
« on: April 09, 2014, 11:04:30 pm »
Hi all,

I am trying to create a tiled sprite with round corners with a dynamic width. See image.

The challenge here is the fact that the tiling goes on until the corner itself. Here's the thoughts I have so far:

1 - Mask shader http://wiki.unity3d.com/index.php/TextureMask . But this doesn't work because I want to stretch my image. Somehow I'd like to 9-slice the shader... If that were possible.

2 - Round-corner shader. I'm no shader expert but I guess I could draw/not draw pixels based on the y-coordinate, using a sine-function to make it round. That's what I'll try to figure out now.

Any idea which way would be better? Or is there a third way?ß

Cheers

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Round corners
« Reply #1 on: April 10, 2014, 03:05:13 am »
You will probably want to modify the tiled sprite script to generate the appropriate geometry, basically generating a combination of tiled and sliced sprites. Making rounded edges in a shader will result in aliased edges...

ivomarel

  • 2D Toolkit
  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: Round corners
« Reply #2 on: April 10, 2014, 03:34:06 am »
Thanks for the response.

The downside of creating a SlicedTiledSprite, will be that the corners still have a fixed texture and will therefore only connect properly if  the platform is exactly 1,2,3 etc. tiles wide. I'd love to come up with a solution that works around this.

ivomarel

  • 2D Toolkit
  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: Round corners
« Reply #3 on: April 14, 2014, 11:59:58 pm »
Ok so I finally went with the solution of importing a quarter circular object from Cinema4D, which I used for the top left and top right corner. Then I simply changed the offset of the corner material based on the width of the object.

Code: [Select]
float textureWidth = middle.renderer.sharedMaterial.mainTexture.width;
float offsetX = -0.5f + (middle.localScale.x % textureWidth) / textureWidth;
corner.renderer.material.mainTextureOffset = new Vector2 (offsetX, -1);

Then wrote my own simple sliced sprite script and done. Still, a lot of work for just round corners haha