User interface features: render with mask (new TCastleMask component), better slider default look, new option ProtectedSidesScaling

  1. New component TCastleMask allows to define a mask (using an arbitrary UI control) and use this mask to limit rendering the children.

    The mask may be any UI control (or a composition of it). The colors do not matter, only which pixels are drawn by the mask. E.g. you can define a mask using

    The masked children, in turn, can also be any UI control. So you can filter rendering of anything, even if it’s interactive (like a button) or 3D (like a viewport).

    TCastleMask.MaskRendering determines if the children are rendered where the mask is visible or (on the contrary) where the mask is not visible.

    See the example examples/user_interface/mask for demonstration.

  2. I improved the default look of our sliders (TCastleFloatSlider, TCastleIntegerSlider).

    These sliders are quite useful, esp. for various demos and tools (view3dscene uses them to test animations and lights). Well, they no longer look ugly 🙂 and their design allows an optional label inside (useful to communicate to user exact numerical value behind the slider).

  3. I implemented a special way of treating protected sides for images. By default they do normal 9-slice scaling but a new option allows to scale corners horizontally to match the image height: TCastleImagePersistent.ProtectedSidesScaling, pssMatchHeight.

    Admittedly it’s a bit easier to see than to explain with words, so if you’re curious, just try it out with an image like SliderBackground that has exactly circular left and right endings. Thanks to the new option, they will stay circular, no matter how you resize the slider.

The rendering-Mask feature is a great add-on. It reminds me to some SNES Games i played, which use such technique for special purposes.

Is it possible to apply some kind of post-processing shader to it? Like a blur-filter … Or will there be some tweaking options for the mask ?

You can apply post-processing on any UI control (this includes ones using mask) by wrapping it in TCastleScreenEffects component, see examples/screen_effects_demo demo. This allows to apply post-processing like blur. You can write any effect using shader language, see Screen Effects | Castle Game Engine .

I plan to remake TCastleScreenEffects component API a bit to be more friendly to editor, and be able to expose some standard effects (like blur, changing colors in HSV, grayscale etc.).

Okay. Got it. This is perfect.

I plan to remake TCastleScreenEffects component API a bit to be more friendly to editor…

Awesome, just awesome. :slightly_smiling_face: