vleue / bevy_ninepatch Goto Github PK
View Code? Open in Web Editor NEWBevy plugin to displays 9-Patch UI elements
Bevy plugin to displays 9-Patch UI elements
Is there an easy way to change the texture of the nine patch?
I'm trying to make a UI button which has nine patch states for normal, hover & pressed
Here are the things I've tried:
nine_patch_data.texture
in a system but this doesn't appear to workdespawn(nine_patch_bundle)
but this doesn't remove the child objectsdespawn_recursive
, but then spawning a new NinePatchBundle under the same parent (a ButtonBundle) doesn't result in it getting drawn, not sure why?I'm also finding after (3.) is run a number of times, my FPS grinds quickly down to a few frames a second.
Do you have any tips on debugging / improving the performance of the UI? Perhaps I can cache the 3 nine patches I need for the button in some way? Still very new to Bevy!
Great tool, very excited to be trying it out ๐
Here's what I'm toying with:
use bevy::prelude::*;
use bevy_ninepatch::*;
pub struct ButtonResource {
option: Option<ButtonTextures>,
}
impl FromResources for ButtonResource {
fn from_resources(_resources: &Resources) -> Self {
ButtonResource { option: None }
}
}
pub struct ButtonTextures {
pub normal: Handle<Texture>,
pub hover: Handle<Texture>,
pub pressed: Handle<Texture>,
}
pub fn button_system(
commands: &mut Commands,
button_resource: Res<ButtonResource>,
mut nine_patches: ResMut<Assets<NinePatchBuilder<()>>>,
mut interaction_query: Query<
(Entity, &Interaction, &Children),
(Mutated<Interaction>, With<Button>),
>,
) {
if let Some(textures) = &button_resource.option {
for (entity, interaction, children) in interaction_query.iter_mut() {
if let Some(child) = children.get(0) {
commands.despawn_recursive(*child);
let texture = match *interaction {
Interaction::Clicked => textures.pressed.clone(),
Interaction::Hovered => textures.hover.clone(),
Interaction::None => textures.normal.clone(),
};
let nine_patch = nine_patches.add(NinePatchBuilder::by_margins(20, 20, 20, 20));
let nine_patch_data = NinePatchData {
texture,
nine_patch,
..Default::default()
};
commands
.spawn(NinePatchBundle {
nine_patch_data,
..Default::default()
})
.with(Parent(entity));
}
}
}
}
pub fn setup_buttons(
commands: &mut Commands,
mut button_textures: ResMut<ButtonResource>,
asset_server: Res<AssetServer>,
mut materials: ResMut<Assets<ColorMaterial>>,
mut nine_patches: ResMut<Assets<NinePatchBuilder<()>>>,
) {
let normal = asset_server.load("button.png");
let nine_patch = nine_patches.add(NinePatchBuilder::by_margins(20, 20, 20, 20));
button_textures.option = Some(ButtonTextures {
normal: normal.clone(),
hover: asset_server.load("button-hover.png"),
pressed: asset_server.load("button-pressed.png"),
});
commands
.spawn(ButtonBundle {
material: materials.add(Color::NONE.into()),
style: Style {
size: Size::new(Val::Px(100.), Val::Px(32.)),
margin: Rect::all(Val::Auto),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..Default::default()
},
..Default::default()
})
.with_children(|parent| {
let nine_patch_data = NinePatchData {
texture: normal,
nine_patch,
..Default::default()
};
parent.spawn(NinePatchBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
..Default::default()
},
nine_patch_data,
..Default::default()
});
})
.current_entity()
.unwrap();
commands.spawn(CameraUiBundle::default());
}
I am trying to upgrade a bevy 0.10 project that depends on this plugin to bevy 0.11.3 and I'm getting the following error:
error[E0063]: missing fields `grid_auto_columns`, `grid_auto_flow`, `grid_auto_rows` and 5 other fields in initializer of `taffy::prelude::Style`
--> /Users/jacques/.cargo/registry/src/index.crates.io-6f17d22bba15001f/bevy_ui-0.10.1/src/flex/convert.rs:99:5
|
99 | taffy::style::Style {
| ^^^^^^^^^^^^^^^^^^^ missing `grid_auto_columns`, `grid_auto_flow`, `grid_auto_rows` and 5 other fields
The error goes away when I remove bevy_ninepatch
from my dependencies in my Cargo.toml
.
Crosslink to discord discussion here: https://discord.com/channels/691052431525675048/1166920953901633646
I'm just starting out with bevy and testing things out, seems that the tiles have weird gaps when the final size is uneven.
Here is the code:
use bevy::prelude::*;
use bevy_ninepatch::{NinePatchBuilder, NinePatchBundle, NinePatchData, NinePatchPlugin};
fn main() {
App::build()
.add_plugins(DefaultPlugins)
.add_plugin(NinePatchPlugin::<()>::default())
.add_startup_system(setup.system())
.run();
}
fn setup(
mut commands: Commands,
asset_server: Res<AssetServer>,
mut nine_patches: ResMut<Assets<NinePatchBuilder<()>>>,
) {
let panel_texture_handle = asset_server.load("gui8.png");
// load the 9-Patch as an assets and keep an `Handle<NinePatchBuilder<()>>`
let nine_patch_handle = nine_patches.add(NinePatchBuilder::by_margins(32, 32, 32, 32));
commands.spawn_bundle(
// this component bundle will be detected by the plugin, and the 9-Patch UI element will be added as a child
// of this entity
NinePatchBundle {
style: Style {
margin: Rect::all(Val::Auto),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
size: Size::new(Val::Px(256.), Val::Px(257.)),
..Default::default()
},
nine_patch_data: NinePatchData {
nine_patch: nine_patch_handle,
texture: panel_texture_handle,
..Default::default()
},
..Default::default()
},
);
commands.spawn_bundle(UiCameraBundle::default());
}
Assets used:
gui8.png
when height is less than width, it seems like the height is set equal to the width. this is from the change_size
example with the size being output to console:
this is on 0.10 - i couldn't see a main-tracking branch. i tried to dig into it but couldn't see where the issue came from. may be bevy's UiImage looking to aspect ratio before container size?
thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.