A way to create a panel system?

[iSora]

Hello everyone,

I've been searching around the UI libraries for a sort of panel system that would hide the content which is out of bounds of that said panel, but I can't find anything. I was wondering if there is a way to achieve this?

To give an idea of what I need: https://answers.unity.com/questions/995 ... f-pan.html which would work for Unity.

Thanks!

[CogentInvalid]

Not sure if any UI libraries support what you're talking about, but you can use stencils to make the effect yourself; see love.graphics.stencil and love.graphics.setStencilTest.

Here's an example from the wiki of drawing circles on top of a rectangle, hiding the parts of the circles that lie outside the rectangle:

Code: Select all

local function myStencilFunction()
   love.graphics.rectangle("fill", 225, 200, 350, 300)
end
 
function love.draw()
    -- draw a rectangle as a stencil. Each pixel touched by the rectangle will have its stencil value set to 1. The rest will be 0.
    love.graphics.stencil(myStencilFunction, "replace", 1)
 
    -- Only allow rendering on pixels whose stencil value is greater than 0.
    love.graphics.setStencilTest("greater", 0)
 
    love.graphics.setColor(1, 0, 0, 0.45)
    love.graphics.circle("fill", 300, 300, 150, 50)
 
    love.graphics.setColor(0, 255, 0, 0.45)
    love.graphics.circle("fill", 500, 300, 150, 50)
 
    love.graphics.setColor(0, 0, 255, 0.45)
    love.graphics.circle("fill", 400, 400, 150, 50)
 
    love.graphics.setStencilTest()
end

[zorg]

Or, if you don't plan to rotate the panels ever, you can use a scissor on your main panel so that anything outside of it is cut out.

Alternative solutions also include having separate canvases for each "main" panel/window, whatever terminology you want to use...

or even simpler, just checking against the bounds of the parent container, and if an inner element would be outside of it completely, don't draw it at all, but that'd need more effort if an element is only partially outside.