Bevy 九宫格/补丁材质插件

快速简单的自动缩放九宫格/补丁材质，适用于Bevy UI节点，通过片段着色器实现。

功能

• 精灵图动画支持
• Wasm支持
• 混合颜色/着色
• 颜色查找渐变

轻松实现悬停效果。

兼容性

cargo add bevy_nine_slice_ui

使用方法

这是一个单个组件。

插件有一个sync_rate_ms参数，这是两次更新之间的最小时间（毫秒）。这是为了防止材质更新过于频繁。默认值是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()
    });
}

使用图集而不是单个图像

还增加了图集功能。不是使用from_image，而是使用from_slice方法并传递纹理边界。

nine_slice_texture: NineSliceTexture::from_slice(
    server.load("panel_atlas.png"),
    Rect::new(32., 0., 32. + 48., 48.),
),

向现有Bundle添加材质

您还可以将九宫格材质添加到现有bundle中，如按钮。请注意，这可能并不总是有效。在最近的12.1更新中，背景颜色组件破坏了材质。现在将移除添加了材质的元素中的背景颜色组件。

.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.),
));

修改纹理组件

您可以修改纹理组件以更改纹理或纹理边界。这可以实现简单的图集动画。

// 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);

查看示例，那里有您需要知道的一切。

cargo run --example ui

结果