Quick and easy auto-scaling nine slice/patch material for bevy ui nodes implemented as Fragment Shader.
- Sprite sheet animation support
- Wasm support
- Blend colors / tinting
- Color lookup gradients
Making hover effects a breeze.
Nince Slice | Bevy |
---|---|
0.7 | 0.14 |
0.6 | 0.13 |
0.5 | 0.12 |
cargo add bevy_nine_slice_ui
It's a single component.
The plugin as has a sync_rate_ms
parameter, which is the minimum time between updates in milliseconds. This is to prevent the material from updating too often. The default is 100ms.
app.add_plugin(NineSliceUiPlugin::default());
fn spawn_ui(mut cmd: Commands, server: Res<AssetServer>) {
commands.spawn(NineSliceUiMaterialBundle {
style: Style {
width: Val::Percent(100.),
height: Val::Percent(50.),
display: Display::Flex,
..default()
},
nine_slice_texture: NineSliceTexture::from_image(server.load("panel_atlas.png")),
..default()
});
}
Also added atlas capabilities. Instead of from_image
, use from_slice
method and pass the texture bounds.
nine_slice_texture: NineSliceTexture::from_slice(
server.load("panel_atlas.png"),
Rect::new(32., 0., 32. + 48., 48.),
),
You can also add a nine slice material to an existing bundle, like a button. Just beware, this might not always work. Just in the recent 12.1 update, the background color component broke the material. The background color component will now be removed from elements where the material is added.
.spawn(ButtonBundle {
style: Style {
width: Val::Px(150.),
height: Val::Px(50.),
display: Display::Flex,
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
},
..default()
})
.insert(NineSliceTexture::from_slice(
server.load("panel_atlas.png"),
Rect::new(0., 0., 32., 32.),
));
You can modify the texture component to change the texture or the texture bounds. This enables simple sheet style animations.
// add a blend color
NineSliceTexture::from_image(server.load("panel_atlas.png"))
.with_blend_color(Color::RED)
.with_blend_mix(0.5);
// or why not a whole palatte gradient?
// A 1D texture to use as color lookup, the grayscale value of the original color is used as UV
// dark to light, left to right
NineSliceTexture::from_image(server.load("panel_atlas.png"))
.with_lookup_gradient(server.load("4-color-palette.png"))
.with_gradient_mix(1.0);
Check out the example, there is everything you need to know.
cargo run --example ui
result: