Search Unity

Panel: How to get rounded corners? Also gradient

Discussion in 'UGUI & TextMesh Pro' started by Nanako, May 17, 2015.

  1. Nanako

    Nanako

    Joined:
    Sep 24, 2014
    Posts:
    1,047
    So i'm trying to create a squareish menu panel, with slightly rounded off corners. I made a UI Panel for this, and it comes with a rounded-square texture by default.




    That... doesn't look right. The resolution is horribly low, far too little for my purposes. Also a bit too rounded
    I could make a bigger image, but i feel this would be a hackish and very bad solution, i might have to go to pointlessly absurd lengths to prevent aliasing.

    Is there a more systematic way to do this?

    Without a souce image, and with an outline added, i managed this: http://i.gyazo.com/55c24546fe9571e28ce27501de6a0e42.png

    It's very clean-edged, but its also completely square. I'd like to round it off a bit

    I'd also love to make it a gradient from one corner to another, instead of a solid colour. How might i do that?

    What i'd like to achieve, at least for testing purposes, is something like these menu panels:
     
    Nanako, May 17, 2015
    #1

  2. karl_jones

    karl_jones

    Unity Technologies

    Joined:
    May 5, 2015
    Posts:
    8,292
    you need to use a sliced sprite for your image. Go into the sprite editor and you can define the border pixels on your sprite so it doesn't stretch. You should be able to get what you need with a low resolution sprite.
     
    karl_jones, May 18, 2015
    #2
    Nanako likes this.

  3. keraj37

    keraj37

    Joined:
    Nov 25, 2011
    Posts:
    28

    Exactly.
     
    keraj37, May 18, 2015
    #3

  4. Nanako

    Nanako

    Joined:
    Sep 24, 2014
    Posts:
    1,047
    so sliced sprites seem pretty amazing
    what about the gradient, must i use an image for that tpoo? is there any more systematic way to accomplish it before i break out my custom tinting shader for a ui panel?
     
    Nanako, May 19, 2015
    #4

  5. karl_jones

    karl_jones

    Unity Technologies

    Joined:
    May 5, 2015
    Posts:
    8,292
    I have done this in the past by applying the gradient to the centre of the sprite. If you use a greyscale gradient you can use a colour multiplier.
     
    karl_jones, May 19, 2015
    #5

  6. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,860
    Scaling the object is also worth playing with. Scaling gives a different appearance to setting the size. Not sure if its relevant for images, but its definitely useful for getting decent resolutions out of Text.
     
    Kiwasi, May 19, 2015
    #6