Giter Club home page Giter Club logo

bevy_ninepatch's Issues

Bevy 0.11.3 support

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

bevy_ninepatch weird gaps

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

Screenshot of the issue:
20211126194225

Can't change nine patch texture

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:

  1. Changing the nine_patch_data.texture in a system but this doesn't appear to work
  2. Using despawn(nine_patch_bundle) but this doesn't remove the child objects
  3. Using despawn_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());
}

height < width doesn't work correctly

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:

image

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.