Implementation of 9-patch images in Bevy. Let you have a UI that scale only the right parts of your images.
See the examples for what can be done.
After adding the NinePatchPlugin plugin, spawning an Entity with the NinePatchBundle component bundle will add a 9-patch UI element.
A simple builder based on Godot's NinePatchRect is available.
```rust // Texture for the base image let paneltexturehandle = assetserver.load("assets/glassPanelcorners.png").unwrap();
// Create a basic 9-Patch UI element with margins of 20 pixels let ninepatchhandle = ninepatches.add(NinePatchBuilder::bymargins(20, 20, 20, 20));
// This entity will be placed in the center of the 9-Patch UI element let contententity = commands.spawnbundle(...).current_entity().unwrap();
commands.spawnbundle( NinePatchBundle { style: Style { margin: Rect::all(Val::Auto), justifycontent: JustifyContent::Center, alignitems: AlignItems::Center, size: Size::new(Val::Px(500.), Val::Px(300.)), ..Default::default() }, ninepatchdata: NinePatchData::withsinglecontent( paneltexturehandle, ninepatchhandle, contententity, ), ..Default::default() }, ); ```
See plugin.rs example for a complete example.
The component Style can be changed to update the size of the 9-Patch UI element, by changing the size attribute.
See change_size.rs example for a complete example.
You can specify the content to be used inside the 9-Patch UI element. When creating a 9-Patch by specifying the margins, a content zone will be available by default for the center of the 9-Patch UI element. This can be set with the NinePatchContent component.
See multi_content.rs example for a complete example.
It is possible to set any number of patches for an image, the only constraints is that all patches in a line must have the same height. Using this methods, different parts of the image can grow at different rates, and several content zones can be created.
See full.rs example for a complete example.