Hi there! I would like to clip some UI Sprite which I’m moving and displaying in code. It’s part of a scrolling map, which sits inside a UI.Panel, so I don’t want the Sprites to draw beyond the borders of a rectangle. On OpenGL this used to be called scissoring I think - and it’s a pretty standard operation in 2D.
Maybe UI.Sprites simply aren’t suitable for this kind of thing or course.
just to clarify, over the years this has also been called a sprite window - maybe it requires a shader (can Sprites select a shader?) or some horribly complex use of a second camera (which would be mammoth overkill).
Hi there Simon - thanks very much for your reply! That certainly looks like it’s the right avenue for me to investigate. The video and help side is pretty sparse, but I am slowly getting somewhere with your suggestion.
For anybody else looking into the same problem - the best approach for a scrolling map seems to involve creating a standard UI element - for instance a panel, then Add Component a Scroll Rect to it. Also add an Image and a Mask - the image doesn’t need to contain anything if you just want a rectangular box. If you use an image - ie a Sprite - it sort of works opposite to expectation. Transparent areas are where the masking happens, so the edges of the image should be masked. Opaque areas become transparent. I then added a Panel as a child of this object, and I’m adding all my map sprites to that panel. Have a fair way to go, but it does seem to be the right direction.
When you are using a mask that has a Sprite attached to its Image component, watch out for the type of Sprite you are using. If there is anything that has transparency in your Sprite, the mask will make it opaque. Mask component doesn’t know how to deal with alpha. If a pixel is there, event at 1% alpha, it will consider it a valid pixel and will mask using it.
A way to see how this works is to set the Sprite image to the default Checkmark Sprite that comes with the UI. The mask will be a bit bigger then the actual checkmark, because it has some kind of glow effect on it (transparent pixels around it).
Yeah - it seems sort of counter-intuitive. I wonder if the sprite is actually meant to be a greyscale sprite or something - although the colour information doesn’t seem to be used either - I’m only seeing masked on or masked off without subtle graduations. I could understand 2-bit - black on, white off or similar, for memory reasons. As it stands it’s a tad weird.