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

**URL:** https://forum.castle-engine.io/t/images-in-ui-regions-subset-of-image-and-visual-editing-of-both-region-and-9-slices/820
**Category:** News
**Created:** [June 3, 2023, 1:15pm UTC](https://forum.castle-engine.io/t/images-in-ui-regions-subset-of-image-and-visual-editing-of-both-region-and-9-slices/820 "2023-06-03T13:15:44Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![michalis](https://forum.castle-engine.io/user_avatar/forum.castle-engine.io/michalis/32/3_2.png) [@michalis](https://forum.castle-engine.io/u/michalis)
#### Post date: [June 3, 2023, 1:15pm UTC](https://forum.castle-engine.io/t/images-in-ui-regions-subset-of-image-and-visual-editing-of-both-region-and-9-slices/820/1 "2023-06-03T13:15:44Z")

</div>

| [![Image regions](https://forum.castle-engine.io/uploads/default/original/2X/b/be0e1b1f0bb9f7cce4ecd303069be64514ecf23b.png)](https://castle-engine.io/wp/wp-content/uploads/2023/06/Zrzut-ekranu-z-2023-06-03-14-56-03.png "Image regions") |
| [![Image regions](https://forum.castle-engine.io/uploads/default/original/2X/e/e2831e64fe3f8ed4b94fc46db8608dfb949ab041.png)](https://castle-engine.io/wp/wp-content/uploads/2023/06/Zrzut-ekranu-z-2023-06-03-14-55-12-1.png "Image regions") |
| [![Image 9-slices borders](https://forum.castle-engine.io/uploads/default/original/2X/8/89e6db3dd6e66d948881e5c7577f7c02002f7693.png)](https://castle-engine.io/wp/wp-content/uploads/2023/06/Zrzut-ekranu-z-2023-06-03-15-05-12.png "Image 9-slices borders") |

With big thanks to [Freedomax PR](https://github.com/castle-engine/castle-engine/pull/442/), 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](https://opengameart.org/content/golden-ui-bigger-than-ever-edition) and for each component just choose a suitable region of this atlas.

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.