Images in UI: Regions (subset of image) and visual editing of both region and 9-slices

Posted on by michalis

Image regions
Image regions
Image 9-slices borders

With big thanks to Freedomax PR, our images in user interface are now much more powerful:

  1. Every image has a region which defines a subset of the image to render. This allows to use a big atlas image to define a whole user interface like in this example UI on OpenGameArt and for each component just choose a suitable region of this atlas.

    “Every image” here means every TCastleImagePersistent component, as the new property is TCastleImagePersistent.Region.

    This is used for images in TCastleImageControl, TCastleButton (for custom button backgrounds), TCastleScrollView (for scrollbar frame and slider). Going forward, 100% of UI should be customizable using TCastleImagePersistent subcomponents.

  2. Moreover, our CGE editor gets a nice visual way to edit both regions (TCastleImagePersistent.Region) and borders for 9-slices algorithm (TCastleImagePersistent.ProtectedSides). Just click on the “…” button in the Object Inspector at them to fire a comfortable form to define a region / borders. Within the form, you can pan and zoom the image, to adjust them perfectly.

Start the discussion at Castle Game Engine Forum