Quick Links: Gideros Home | Download Gideros | Developer Guide
Clip sprite to parent bounds/masking?
  • I want to clip a List View to a rounded rectangle without using any overlay image. Is this possible with Gideros?
  • 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 +1 -1
    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 +1 -1 (+3 / -0 )
    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
    }

    Likes: talis, snooks, antix

  • Cool, thanks very much for this - I look forward to the new release!
  • snooks +1 -1 (+2 / -0 )
    Member
    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

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with OpenID

In this Discussion

Top Posters