Crop part of gui node

I made a custom gui and I need to crop part of an element (picture with bitmap text) when it crosses some border on screen. How to do that? Because there is nothing in documentation about it.

It depends. Does the area beyond the border have some static color (eg. black)? Because in that case, you can simply make that area appear above the object you want to crop.

If it doesn’t have color (is transparent), I’d say that’s a bit more difficult.

I thought about this, but… No, area beyond the border is transparent, so no one gui object must be shown there.

Then I honestly don’t know how I would do it.

Maybe write a shader for that effect?

Can you give us more details about your gui and how you’re setting this up? The effect you want is called “clipping,” and the GPU does it en masse on the main scene already. Probably the easiest way to achieve the effect you want is to set up a viewport for the node(s) you want clipped, add them to that viewport, and then render it to a texture that gets applied to a rectangle with the size/shape/position of the clipping border. I believe @pspeed’s Lemur GUI library does something like this.

Lemur doesn’t have built in clipping… (yet)

But it’s pretty easy to setup a viewport that only covers part of the screen. You don’t even have to do any render-to-texture stuff or anything like that. Just set a smaller viewport.

First: it isn’t a lemur. Second: unfortunately I have to cut it on only one viewport.


1 Like

Because I use dynamic camera object from another library and I can’t create viewports

Or put example code with viewport here, please.