Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Join us on Dec 8, 2022, between 7 am & 7 pm EST, in the DOTS Dev Blitz Day 2022 - Q&A forum, Discord, and Unity3D Subreddit to learn more about DOTS directly from the Unity Developers.
    Dismiss Notice
  3. Have a look at our Games Focus blog post series which will show what Unity is doing for all game developers – now, next year, and in the future.
    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.
     
    jdrandir, Novack, YaroslavSm and 2 others like this.
  3. bibbis

    bibbis

    Joined:
    Dec 5, 2016
    Posts:
    54
    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.
     
    jdrandir likes this.
  4. PixelLifetime

    PixelLifetime

    Joined:
    Mar 30, 2017
    Posts:
    88
    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.
     
    Novack and ranch000 like this.
  5. SweatyChair

    SweatyChair

    Joined:
    Feb 15, 2016
    Posts:
    140
    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:
    2,592
    Last edited: Sep 9, 2020
    hbguler, ksf000, wallis2xk and 28 others like this.
  8. grimmy

    grimmy

    Joined:
    Feb 2, 2009
    Posts:
    408
    This looks great but when I add it nothing appears. I played with all the settings but nothing. I have an object with just this component and a canvas renderer as an object within my canvas. Any ideas? Does the object need some other component as well? Maybe it doesnt work anymore in Unity 2021.3.3f1 ?
     
    Last edited: Jun 14, 2022
  9. yasirkula

    yasirkula

    Joined:
    Aug 1, 2011
    Posts:
    2,592
    It works on 2021.3.1f1. You must assign a sprite to Source Image if it's null.
     
  10. grimmy

    grimmy

    Joined:
    Feb 2, 2009
    Posts:
    408
    Got it working in the end. Thanks!
     
    yasirkula likes this.
  11. LokoSolo

    LokoSolo

    Joined:
    Aug 3, 2018
    Posts:
    4
    On top of the SlicedFilledImage created by yasirkula, I have also added an option to preserve the sliced border at the tail of the fill image, instead of a straight vertical/horizontal cut of the image.
    https://gist.github.com/LokoSoloGames/4a2d570e3b1c7f13873c334c8bfcb3c9
     
    Last edited: Jul 19, 2022
    wallis2xk likes this.
  12. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    14,967
    The Slider actually does let you use the Image's internal masking for its bar if set up appropriately, but it's not clear in the UI and as far as I can tell is undocumented. I just reported the relevant manual page.

    Anyway, if you create a Slider, then set the Fill Rect's Image component to use Image Type = Filled, the Slider will use the Fill Amount to animate the bar instead of moving its anchors. This allows you to effectively avoid the weird artifacting with sliced sprites displayed at small sizes, but of course is only appropriate for certain image types.
    Fill Amount Driven By Slider.jpg

    I found this out completely by accident. I changed the Image Type on one of my Sliders to "Filled" as I was just about to write a replacement, as others here have done, and saw the UI change as above.
     
    Last edited: Nov 14, 2022
  13. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    155
    Sounds very promising, but I was not able to reproduce it. Could you please show how Fill Rect's Image looks like? In our case it's 9 sliced image of rectangle with rounded corners. When I changed Type to Filled, the whole rectangle was displayed stretched. May be your use case is a bit different. Thanks!
     
  14. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    14,967
    That is correct. It is a filled image, not a sliced image, and just uses the Filled Image's internal masking. So if it won't display correctly as a Filled Image in the first place then this unfortunately won't help you.

    But I see I miscommunicated above, so I'll correct that.
     
    andrew_pearce_ likes this.
  15. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    155
    angrypenguin likes this.