Clip sprite to parent bounds/masking?

snooks · September 2017

I want to clip a List View to a rounded rectangle without using any overlay image. Is this possible with Gideros?

snooks · September 2017

This is of course essential for drop down/pop up scrolling menus etc. I'm guessing that this is a feature request.

In the search for solutions I notice that RenderTarget'ing a full screen only gets from contentWidth/Height zero left/top position and not the full screen when elements are placed with negative co-ords.

hgy29 · September 2017

I would do it with new Stencil ops... I'll post something here if I find the time to give it a try

snooks · September 2017

Thanks very much, that would be great if you could demo the new functionality for OpenGL ES virgins like me!

hgy29 · September 2017

See below for an example of something that should have worked, but due to another bug in gideros won't work until 2017.8.2 (fixed it locally in my sources).

function roundedRect(arcsize,width,height)
 local rbox=Path2D.new()
 rbox:setConvex(true) --Ensure we use the convex draw mode (doesn't use stencil)
 rbox:setPath("MALALALAZ",
	arcsize,0,
	arcsize,arcsize,0,0,0,0,arcsize,
	0,height-arcsize,
	arcsize,arcsize,0,0,0,arcsize,height,
	width-arcsize,height,
	arcsize,arcsize,0,0,0,width,height-arcsize,
	width,arcsize,
	arcsize,arcsize,0,0,0,width-arcsize,0)
 rbox:setFillColor(0xE0E0C0,1)
 rbox:setLineColor(0,0)
 return rbox
end
 
--Build our content sprite, for this test draw stripes from black to gray
local content=Sprite.new()
for i=0,180,20 do
	local bar=Pixel.new((i<<16)|(i<<8)|i,1,100,20)
	content:addChild(bar)
	bar:setY(i)
end
 
-- Build our rounded rectangular mask
local mask=roundedRect(30,100,200)
mask:addChild(content) -- Our content must be a child of the mask for this to work
 
mask:setPosition(50,50)
stage:addChild(mask) -- Add the sprite tree to stage
 
--Stencil ops
mask:setStencilOperation({ --Impress stencil bit 0 with mask shape
	stencilClear=true, --clear stencil before processing this sprite
	stencilMask=1,	-- only read bit 0
	stencilWriteMask=1, -- only write bit 0
	stencilRef=1, -- not used
	stencilFunc=Sprite.STENCIL_NEVER, -- Always fail stencil test
	stencilFail=Sprite.STENCIL_INCR, -- Increment bit 0 on fail
})
 
content:setStencilOperation{ --Draw content only on parts where stencil bit 0 is set
	stencilClear=false, -- don't clear stencil, it will be exactly the same as left by parent sprite
	stencilMask=1,	-- only read bit 0
	stencilWriteMask=1, -- we don't write, but leave it to bit 0 only
	stencilRef=1, -- compare stencil with this value, that is bit 0 set
	stencilFunc=Sprite.STENCIL_EQUAL, -- stencil test will pass if stencil value equals ref value
	stencilFail=Sprite.STENCIL_KEEP, -- don't change stencil afterwise
	depthFail=Sprite.STENCIL_KEEP,-- don't change stencil afterwise
	depthPass=Sprite.STENCIL_KEEP,-- don't change stencil afterwise
}

snooks · September 2017

Cool, thanks very much for this - I look forward to the new release!

snooks · September 2017

It's working perfectly, I have attached a gif of it in action with a menu.

Nice one!

vitalitymobile · July 2018

@hgy29 Would you please update the example above? For some season the code is not completed
Thanks!
P/S: It is ok now.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Clip sprite to parent bounds/masking?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Clip sprite to parent bounds/masking?

Comments