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

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.

 

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.

 

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.

 

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.

 

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

 

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

 

Since Sliced images look bad when the borders start scaling down at small sizes, I've created a component that combines Sliced+Filled features together: https://gist.github.com/yasirkula/391fa12bc173acdf5ac48c466f180708

Note that it doesn't support radial Fill mode.

 

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 ?

 

It works on 2021.3.1f1. You must assign a sprite to Source Image if it's null.

 

Got it working in the end. Thanks!

 

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

 

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.


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.

 

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!

 

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.

 

Thanks for reply and clarification @angrypenguin!