#bevy #ninepatch


Displays 9-Patch UI elements in Bevy

5 releases

0.3.0 Nov 4, 2020
0.1.3 Oct 8, 2020
0.1.2 Sep 24, 2020
0.1.1 Sep 22, 2020
0.1.0 Sep 22, 2020

#75 in GUI

Download history 43/week @ 2020-09-19 53/week @ 2020-09-26 109/week @ 2020-10-03 134/week @ 2020-10-10 86/week @ 2020-10-17 8/week @ 2020-10-24 46/week @ 2020-10-31 19/week @ 2020-11-07 7/week @ 2020-11-14

148 downloads per month

MIT license

603 lines

Bevy 9-Patch plugin

License: MIT Doc Crate

Implementation of 9-patch images in Bevy. Let you have a UI that scale only the right parts of your images.

9 patch example

See the examples for what can be done.

Simple usage

After adding the NinePatchPlugin plugin, spawning an Entity with the NinePatchComponents component bundle will add a 9-patch UI element.

A simple builder based on Godot's NinePatchRect is available.

// Texture for the base image
let panel_texture_handle = asset_server.load("assets/glassPanel_corners.png").unwrap();

// Create a basic 9-Patch UI element with margins of 20 pixels
let nine_patch_handle = nine_patches.add(NinePatchBuilder::by_margins(20, 20, 20, 20));

// This entity will be placed in the center of the 9-Patch UI element
let content_entity = commands.spawn(...).current_entity().unwrap();

    NinePatchComponents {
        style: Style {
            margin: Rect::all(Val::Auto),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            size: Size::new(Val::Px(500.), Val::Px(300.)),
        nine_patch_data: NinePatchData::with_single_content(

See plugin.rs example for a complete example.

Changing element size

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.

Specify content to use

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.

More flexible definition

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.


~319K SLoC