Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice
  2. Ever participated in one our Game Jams? Want pointers on your project? Our Evangelists will be available on Friday to give feedback. Come share your games with us!
    Dismiss Notice

Unity UI Sliced and Filled Image Type at the same time?

Discussion in 'UGUI & TextMesh Pro' started by Mison, Jun 29, 2017.

  1. Mison

    Mison

    Joined:
    Jan 20, 2014
    Posts:
    19
    I want to have a button, which changes color over time from left to right. To achieve this I can use a Image (Script) component with Image Type set to Filled and Fill Method to Horizontal. But when I apply this to UISprite as Source Image, the image gets distorted, because the this image is meant to be used as Sliced Image Type. Is there any way to fill Sliced image from one side? Thanks in advance.
    screenshot 2017-06-29 11.33.56.png
     
  2. tperezstolfa

    tperezstolfa

    Joined:
    Oct 22, 2016
    Posts:
    3
    I know it is an old post, but for anyone that comes searching for an answer to this:
    To achieve it use a slider, not a filled image - set it to be not interactable, remove the Handle image, and remove the fill spacing and you're ready to go. Just set the slider.value and slider.maxValue in code. You can increase the width of the slider as the maxValue increases.
     
    Eloren, nogaskater and ModLunar like this.
  3. bibbis

    bibbis

    Joined:
    Dec 5, 2016
    Posts:
    26
    Hello,
    I actually find the sliders incredibly frustrating to work with when disabling the handle.
    The way that the fill refuses to perfectly match the background is just so damn frustrating.
    Even after adjusting all the sizes, all the anchors, everything, to make it match, there will still be that final warping that occurs when the sliders goes all the way down to 0.
    Or do you avoid that warping and instead just live with that small part of the bar never truly getting empty?
    Unless you mask it in both ends.
    Which is not hard to do, but adds more work and much further customization of your sprites.

    In the end, what do you really have?
    A value calculation for 0-1 and a patch-work of sprites?
    It's a whole lot of hoops to jump through just for that.

    This is the whole reason why I'm looking for another solution, and to be honest I don't need a slider.
    I just need 2 images set to both Sliced and Filled and then I can make my own system.
     
  4. PixelLifetime

    PixelLifetime

    Joined:
    Mar 30, 2017
    Posts:
    64
    Actually it won't fix it. Slider uses Anchors to change the size of image while filled type let's you mask the image. To achieve this effect it's probably best to use masking in some way.
     
  5. SweatyChair

    SweatyChair

    Joined:
    Feb 15, 2016
    Posts:
    124
    For anyone still looking for solution, I can achieve this by putting a mask as parent:

    Mask object has Image with filled, a Mask:

    Child object has Image with sliced
     
  6. InfoNowhere

    InfoNowhere

    Joined:
    Oct 21, 2019
    Posts:
    1
    This works perfectly , but it need some explanation. The image i want to show as filled and sliced is the child objects image. The object image with mask , i used 10x10 full white image and untick the ShowMaskGraphic option
     
  7. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    1,469
unityunity