Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Clip sprite to parent bounds/masking? — Gideros Forum

Clip sprite to parent bounds/masking?

snookssnooks Member
edited September 2017 in General questions
I want to clip a List View to a rounded rectangle without using any overlay image. Is this possible with Gideros?

Comments

  • 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.
  • hgy29hgy29 Maintainer
    I would do it with new Stencil ops... I'll post something here if I find the time to give it a try
  • Thanks very much, that would be great if you could demo the new functionality for OpenGL ES virgins like me!
  • hgy29hgy29 Maintainer
    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
    }
    +1 -1 (+4 / -0 )Share on Facebook
  • Cool, thanks very much for this - I look forward to the new release!
  • snookssnooks Member
    edited September 2017
    It's working perfectly, I have attached a gif of it in action with a menu.

    Nice one!

    masking.gif
    325 x 579 - 217K

    Likes: pie, antix

    +1 -1 (+2 / -0 )Share on Facebook
  • edited 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.

    Likes: totebo

    Coming soon
    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.