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

From Castle Game Engine: link to original post

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

   • An image (TCastleImageControl) with alpha channel. Be sure to set TCastleImageControl.AlphaChannel to acTest.

   • A viewport (TCastleViewport), maybe even with something animated and/or 3D. Be sure to set TCastleViewport.Transparent to true.

   • A shape (like TCastleRectangleControl, TCastleShape).

   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.