Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-24 21:53:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

UI Texture 9 slice (#11600)

Browse source 
> Follow up to #10588 
> Closes #11749 (Supersedes #11756)

Enable Texture slicing for the following UI nodes:
- `ImageBundle`
- `ButtonBundle`

<img width="739" alt="Screenshot 2024-01-29 at 13 57 43"
src="https://github.com/bevyengine/bevy/assets/26703856/37675681-74eb-4689-ab42-024310cf3134">

I also added a collection of `fantazy-ui-borders` from
[Kenney's](www.kenney.nl) assets, with the appropriate license (CC).
If it's a problem I can use the same textures as the `sprite_slice`
example

# Work done

Added the `ImageScaleMode` component to the targetted bundles, most of
the logic is directly reused from `bevy_sprite`.
The only additional internal component is the UI specific
`ComputedSlices`, which does the same thing as its spritee equivalent
but adapted to UI code.

Again the slicing is not compatible with `TextureAtlas`, it's something
I need to tackle more deeply in the future

# Fixes

* [x] I noticed that `TextureSlicer::compute_slices` could infinitely
loop if the border was larger that the image half extents, now an error
is triggered and the texture will fallback to being stretched
* [x] I noticed that when using small textures with very small *tiling*
options we could generate hundred of thousands of slices. Now I set a
minimum size of 1 pixel per slice, which is already ridiculously small,
and a warning will be sent at runtime when slice count goes above 1000
* [x] Sprite slicing with `flip_x` or `flip_y` would give incorrect
results, correct flipping is now supported to both sprites and ui image
nodes thanks to @odecay observation

# GPU Alternative

I create a separate branch attempting to implementing 9 slicing and
tiling directly through the `ui.wgsl` fragment shader. It works but
requires sending more data to the GPU:
- slice border
- tiling factors

And more importantly, the actual quad *scale* which is hard to put in
the shader with the current code, so that would be for a later iteration
This commit is contained in:
Félix Lescaudey de Maneville 2024-02-07 21:07:53 +01:00 committed by GitHub
parent ff77adc045
commit ab16f5ed6a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 414 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CREDITS.md
View file

@ -21,6 +21,7 @@
* Ground tile from [Kenney's Tower Defense Kit](https://www.kenney.nl/assets/tower-defense-kit) (CC0 1.0 Universal)
* Game icons from [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons) (CC0 1.0 Universal)
* Space ships from [Kenny's Simple Space Kit](https://www.kenney.nl/assets/simple-space) (CC0 1.0 Universal)
* UI borders from [Kenny's Fantasy UI Borders Kit](https://kenney.nl/assets/fantasy-ui-borders) (CC0 1.0 Universal)
* glTF animated fox from [glTF Sample Models][fox]
* Low poly fox [by PixelMannen] (CC0 1.0 Universal)
* Rigging and animation [by @tomkranis on Sketchfab] ([CC-BY 4.0])

11
Cargo.toml
View file

@ -2482,6 +2482,17 @@ description = "Illustrates how to use TextureAtlases in UI"
category = "UI (User Interface)"
wasm = true
[[example]]
name = "ui_texture_slice"
path = "examples/ui/ui_texture_slice.rs"
doc-scrape-examples = true
[package.metadata.example.ui_texture_slice]
name = "UI Texture Slice"
description = "Illustrates how to use 9 Slicing in UI"
category = "UI (User Interface)"
wasm = true
[[example]]
name = "viewport_debug"
path = "examples/ui/viewport_debug.rs"

30
assets/textures/fantasy_ui_borders/License.txt Normal file
View file

@ -0,0 +1,30 @@
Fantasy UI Borders (1.0)
Created/distributed by Kenney (www.kenney.nl)
Creation date: 03-12-2023
For the sample image the font 'Aoboshi One' was used, OPL (Open Font License)
------------------------------
License: (Creative Commons Zero, CC0)
http://creativecommons.org/publicdomain/zero/1.0/
You can use this content for personal, educational, and commercial purposes.
Support by crediting 'Kenney' or 'www.kenney.nl' (this is not a requirement)
------------------------------
• Website : www.kenney.nl
• Donate : www.kenney.nl/donate
• Patreon : patreon.com/kenney
Follow on social media for updates:
• Twitter: twitter.com/KenneyNL
• Instagram: instagram.com/kenney_nl
• Mastodon: mastodon.gamedev.place/@kenney

BIN
assets/textures/fantasy_ui_borders/panel-border-010.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 170 B

BIN
assets/textures/fantasy_ui_borders/panel-border-015.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 B

4
crates/bevy_sprite/src/bundle.rs
View file

@ -39,10 +39,13 @@ pub struct SpriteBundle {
/// - [`texture atlas example`](https://github.com/bevyengine/bevy/blob/latest/examples/2d/texture_atlas.rs)
#[derive(Bundle, Clone, Default)]
pub struct SpriteSheetBundle {
/// Specifies the rendering properties of the sprite, such as color tint and flip.
pub sprite: Sprite,
/// Controls how the image is altered when scaled.
pub scale_mode: ImageScaleMode,
/// The local transform of the sprite, relative to its parent.
pub transform: Transform,
/// The absolute transform of the sprite. This should generally not be written to directly.
pub global_transform: GlobalTransform,
/// The sprite sheet base texture
pub texture: Handle<Image>,
@ -50,6 +53,7 @@ pub struct SpriteSheetBundle {
pub atlas: TextureAtlas,
/// User indication of whether an entity is visible
pub visibility: Visibility,
/// Inherited visibility of an entity.
pub inherited_visibility: InheritedVisibility,
/// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
pub view_visibility: ViewVisibility,

5
crates/bevy_sprite/src/lib.rs
View file

@ -17,7 +17,7 @@ pub mod prelude {
bundle::{SpriteBundle, SpriteSheetBundle},
sprite::{ImageScaleMode, Sprite},
texture_atlas::{TextureAtlas, TextureAtlasLayout},
texture_slice::{BorderRect, SliceScaleMode, TextureSlicer},
texture_slice::{BorderRect, SliceScaleMode, TextureSlice, TextureSlicer},
ColorMaterial, ColorMesh2dBundle, TextureAtlasBuilder,
};
}
@ -124,7 +124,6 @@ impl Plugin for SpritePlugin {
/// System calculating and inserting an [`Aabb`] component to entities with either:
/// - a `Mesh2dHandle` component,
/// - a `Sprite` and `Handle<Image>` components,
/// - a `TextureAtlasSprite` and `Handle<TextureAtlas>` components,
/// and without a [`NoFrustumCulling`] component.
///
/// Used in system set [`VisibilitySystems::CalculateBounds`].
@ -137,7 +136,7 @@ pub fn calculate_bounds_2d(
sprites_to_recalculate_aabb: Query<
(Entity, &Sprite, &Handle<Image>, Option<&TextureAtlas>),
(
Or<(Without<Aabb>, Changed<Sprite>)>,
Or<(Without<Aabb>, Changed<Sprite>, Changed<TextureAtlas>)>,
Without<NoFrustumCulling>,
),
>,

18
crates/bevy_sprite/src/texture_slice/computed_slices.rs
View file

@ -31,17 +31,27 @@ impl ComputedTextureSlices {
sprite: &'a Sprite,
handle: &'a Handle<Image>,
) -> impl ExactSizeIterator<Item = ExtractedSprite> + 'a {
let mut flip = Vec2::ONE;
let [mut flip_x, mut flip_y] = [false; 2];
if sprite.flip_x {
flip.x *= -1.0;
flip_x = true;
}
if sprite.flip_y {
flip.y *= -1.0;
flip_y = true;
}
self.0.iter().map(move |slice| {
let transform =
transform.mul_transform(Transform::from_translation(slice.offset.extend(0.0)));
let offset = (slice.offset * flip).extend(0.0);
let transform = transform.mul_transform(Transform::from_translation(offset));
ExtractedSprite {
original_entity: Some(original_entity),
color: sprite.color,
transform,
rect: Some(slice.texture_rect),
custom_size: Some(slice.draw_size),
flip_x: sprite.flip_x,
flip_y: sprite.flip_y,
flip_x,
flip_y,
image_handle_id: handle.id(),
anchor: sprite.anchor.as_vec(),
}

15
crates/bevy_sprite/src/texture_slice/mod.rs
View file

@ -10,8 +10,9 @@ pub(crate) use computed_slices::{
compute_slices_on_asset_event, compute_slices_on_sprite_change, ComputedTextureSlices,
};
/// Single texture slice, representing a texture rect to draw in a given area
#[derive(Debug, Clone)]
pub(crate) struct TextureSlice {
pub struct TextureSlice {
/// texture area to draw
pub texture_rect: Rect,
/// slice draw size
@ -39,16 +40,19 @@ impl TextureSlice {
// Each tile expected size
let expected_size = Vec2::new(
if tile_x {
rect_size.x * stretch_value
// No slice should be less than 1 pixel wide
(rect_size.x * stretch_value).max(1.0)
} else {
self.draw_size.x
},
if tile_y {
rect_size.y * stretch_value
// No slice should be less than 1 pixel high
(rect_size.y * stretch_value).max(1.0)
} else {
self.draw_size.y
},
);
)
.min(self.draw_size);
let mut slices = Vec::new();
let base_offset = Vec2::new(
-self.draw_size.x / 2.0,
@ -81,6 +85,9 @@ impl TextureSlice {
offset.y -= size_y / 2.0;
remaining_columns -= size_y;
}
if slices.len() > 1_000 {
bevy_log::warn!("One of your tiled textures has generated {} slices. You might want to use higher stretch values to avoid a great performance cost", slices.len());
}
slices
}
}

21
crates/bevy_sprite/src/texture_slice/slicer.rs
View file

@ -199,12 +199,23 @@ impl TextureSlicer {
/// * `rect` - The section of the texture to slice in 9 parts
/// * `render_size` - The optional draw size of the texture. If not set the `rect` size will be used.
#[must_use]
pub(crate) fn compute_slices(
&self,
rect: Rect,
render_size: Option<Vec2>,
) -> Vec<TextureSlice> {
pub fn compute_slices(&self, rect: Rect, render_size: Option<Vec2>) -> Vec<TextureSlice> {
let render_size = render_size.unwrap_or_else(|| rect.size());
let rect_size = rect.size() / 2.0;
if self.border.left >= rect_size.x
|| self.border.right >= rect_size.x
|| self.border.top >= rect_size.y
|| self.border.bottom >= rect_size.y
{
bevy_log::error!(
"TextureSlicer::border has out of bounds values. No slicing will be applied"
);
return vec![TextureSlice {
texture_rect: rect,
draw_size: render_size,
offset: Vec2::ZERO,
}];
}
let mut slices = Vec::with_capacity(9);
// Corners
let corners = self.corner_slices(rect, render_size);

19
crates/bevy_ui/src/lib.rs
View file

@ -21,6 +21,7 @@ mod geometry;
mod layout;
mod render;
mod stack;
mod texture_slice;
mod ui_node;
pub use focus::*;
@ -39,6 +40,9 @@ pub mod prelude {
geometry::*, node_bundles::*, ui_material::*, ui_node::*, widget::Button, widget::Label,
Interaction, UiMaterialPlugin, UiScale,
};
// `bevy_sprite` re-exports for texture slicing
#[doc(hidden)]
pub use bevy_sprite::{BorderRect, ImageScaleMode, SliceScaleMode, TextureSlicer};
}
use bevy_app::prelude::*;
@ -162,10 +166,17 @@ impl Plugin for UiPlugin {
// They run independently since `widget::image_node_system` will only ever observe
// its own UiImage, and `widget::text_system` & `bevy_text::update_text2d_layout`
// will never modify a pre-existing `Image` asset.
widget::update_image_content_size_system
.before(UiSystem::Layout)
.in_set(AmbiguousWithTextSystem)
.in_set(AmbiguousWithUpdateText2DLayout),
(
widget::update_image_content_size_system
.before(UiSystem::Layout)
.in_set(AmbiguousWithTextSystem)
.in_set(AmbiguousWithUpdateText2DLayout),
(
texture_slice::compute_slices_on_asset_event,
texture_slice::compute_slices_on_image_change,
),
)
.chain(),
),
);

7
crates/bevy_ui/src/node_bundles.rs
View file

@ -13,7 +13,7 @@ use bevy_render::{
prelude::Color,
view::{InheritedVisibility, ViewVisibility, Visibility},
};
use bevy_sprite::TextureAtlas;
use bevy_sprite::{ImageScaleMode, TextureAtlas};
#[cfg(feature = "bevy_text")]
use bevy_text::{BreakLineOn, JustifyText, Text, TextLayoutInfo, TextSection, TextStyle};
use bevy_transform::prelude::{GlobalTransform, Transform};
@ -95,6 +95,8 @@ pub struct ImageBundle {
///
/// This component is set automatically
pub image_size: UiImageSize,
/// Controls how the image is altered when scaled.
pub scale_mode: ImageScaleMode,
/// Whether this node should block interaction with lower nodes
pub focus_policy: FocusPolicy,
/// The transform of the node
@ -307,6 +309,8 @@ pub struct ButtonBundle {
pub border_color: BorderColor,
/// The image of the node
pub image: UiImage,
/// Controls how the image is altered when scaled.
pub scale_mode: ImageScaleMode,
/// The transform of the node
///
/// This component is automatically managed by the UI layout system.
@ -343,6 +347,7 @@ impl Default for ButtonBundle {
inherited_visibility: Default::default(),
view_visibility: Default::default(),
z_index: Default::default(),
scale_mode: ImageScaleMode::default(),
}
}
}

36
crates/bevy_ui/src/render/mod.rs
View file

@ -17,8 +17,8 @@ pub use ui_material_pipeline::*;
use crate::graph::{LabelsUi, SubGraphUi};
use crate::{
BackgroundColor, BorderColor, CalculatedClip, ContentSize, DefaultUiCamera, Node, Outline,
Style, TargetCamera, UiImage, UiScale, Val,
texture_slice::ComputedTextureSlices, BackgroundColor, BorderColor, CalculatedClip,
ContentSize, DefaultUiCamera, Node, Outline, Style, TargetCamera, UiImage, UiScale, Val,
};
use bevy_app::prelude::*;
@ -62,7 +62,6 @@ pub const UI_SHADER_HANDLE: Handle<Shader> = Handle::weak_from_u128(130128470471
#[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)]
pub enum RenderUiSystem {
ExtractNode,
ExtractAtlasNode,
}
pub fn build_ui_render(app: &mut App) {
@ -86,10 +85,10 @@ pub fn build_ui_render(app: &mut App) {
extract_default_ui_camera_view::<Camera2d>,
extract_default_ui_camera_view::<Camera3d>,
extract_uinodes.in_set(RenderUiSystem::ExtractNode),
extract_uinode_borders.after(RenderUiSystem::ExtractAtlasNode),
extract_uinode_borders,
#[cfg(feature = "bevy_text")]
extract_text_uinodes.after(RenderUiSystem::ExtractAtlasNode),
extract_uinode_outlines.after(RenderUiSystem::ExtractAtlasNode),
extract_text_uinodes,
extract_uinode_outlines,
),
)
.add_systems(
@ -377,6 +376,7 @@ pub fn extract_uinode_outlines(
}
pub fn extract_uinodes(
mut commands: Commands,
mut extracted_uinodes: ResMut<ExtractedUiNodes>,
texture_atlases: Extract<Res<Assets<TextureAtlasLayout>>>,
default_ui_camera: Extract<DefaultUiCamera>,
@ -391,11 +391,22 @@ pub fn extract_uinodes(
Option<&CalculatedClip>,
Option<&TextureAtlas>,
Option<&TargetCamera>,
Option<&ComputedTextureSlices>,
)>,
>,
) {
for (entity, uinode, transform, color, maybe_image, view_visibility, clip, atlas, camera) in
uinode_query.iter()
for (
entity,
uinode,
transform,
color,
maybe_image,
view_visibility,
clip,
atlas,
camera,
slices,
) in uinode_query.iter()
{
let Some(camera_entity) = camera.map(TargetCamera::entity).or(default_ui_camera.get())
else {
@ -406,6 +417,15 @@ pub fn extract_uinodes(
continue;
}
if let Some((image, slices)) = maybe_image.zip(slices) {
extracted_uinodes.uinodes.extend(
slices
.extract_ui_nodes(transform, uinode, color, image, clip, camera_entity)
.map(|e| (commands.spawn_empty().id(), e)),
);
continue;
}
let (image, flip_x, flip_y) = if let Some(image) = maybe_image {
(image.texture.id(), image.flip_x, image.flip_y)
} else {

185
crates/bevy_ui/src/texture_slice.rs Normal file
View file

@ -0,0 +1,185 @@
// This module is mostly copied and pasted from `bevy_sprite::texture_slice`
//
// A more centralized solution should be investigated in the future
use bevy_asset::{AssetEvent, Assets};
use bevy_ecs::prelude::*;
use bevy_math::{Rect, Vec2};
use bevy_render::texture::Image;
use bevy_sprite::{ImageScaleMode, TextureSlice};
use bevy_transform::prelude::*;
use bevy_utils::HashSet;
use crate::{widget::UiImageSize, BackgroundColor, CalculatedClip, ExtractedUiNode, Node, UiImage};
/// Component storing texture slices for image nodes entities with a tiled or sliced [`ImageScaleMode`]
///
/// This component is automatically inserted and updated
#[derive(Debug, Clone, Component)]
pub struct ComputedTextureSlices {
slices: Vec<TextureSlice>,
image_size: Vec2,
}
impl ComputedTextureSlices {
/// Computes [`ExtractedUiNode`] iterator from the sprite slices
///
/// # Arguments
///
/// * `transform` - the sprite entity global transform
/// * `original_entity` - the sprite entity
/// * `sprite` - The sprite component
/// * `handle` - The sprite texture handle
#[must_use]
pub(crate) fn extract_ui_nodes<'a>(
&'a self,
transform: &'a GlobalTransform,
node: &'a Node,
background_color: &'a BackgroundColor,
image: &'a UiImage,
clip: Option<&'a CalculatedClip>,
camera_entity: Entity,
) -> impl ExactSizeIterator<Item = ExtractedUiNode> + 'a {
let mut flip = Vec2::new(1.0, -1.0);
let [mut flip_x, mut flip_y] = [false; 2];
if image.flip_x {
flip.x *= -1.0;
flip_x = true;
}
if image.flip_y {
flip.y *= -1.0;
flip_y = true;
}
self.slices.iter().map(move |slice| {
let offset = (slice.offset * flip).extend(0.0);
let transform = transform.mul_transform(Transform::from_translation(offset));
let scale = slice.draw_size / slice.texture_rect.size();
let mut rect = slice.texture_rect;
rect.min *= scale;
rect.max *= scale;
let atlas_size = Some(self.image_size * scale);
ExtractedUiNode {
stack_index: node.stack_index,
color: background_color.0,
transform: transform.compute_matrix(),
rect,
flip_x,
flip_y,
image: image.texture.id(),
atlas_size,
clip: clip.map(|clip| clip.clip),
camera_entity,
}
})
}
}
/// Generates sprite slices for a `sprite` given a `scale_mode`. The slices
/// will be computed according to the `image_handle` dimensions or the sprite rect.
///
/// Returns `None` if either:
/// - The scale mode is [`ImageScaleMode::Stretched`]
/// - The image asset is not loaded
#[must_use]
fn compute_texture_slices(
draw_area: Vec2,
scale_mode: &ImageScaleMode,
image_handle: &UiImage,
images: &Assets<Image>,
) -> Option<ComputedTextureSlices> {
if let ImageScaleMode::Stretched = scale_mode {
return None;
}
let image_size = images.get(&image_handle.texture).map(|i| {
Vec2::new(
i.texture_descriptor.size.width as f32,
i.texture_descriptor.size.height as f32,
)
})?;
let texture_rect = Rect {
min: Vec2::ZERO,
max: image_size,
};
let slices = match scale_mode {
ImageScaleMode::Stretched => unreachable!(),
ImageScaleMode::Sliced(slicer) => slicer.compute_slices(texture_rect, Some(draw_area)),
ImageScaleMode::Tiled {
tile_x,
tile_y,
stretch_value,
} => {
let slice = TextureSlice {
texture_rect,
draw_size: draw_area,
offset: Vec2::ZERO,
};
slice.tiled(*stretch_value, (*tile_x, *tile_y))
}
};
Some(ComputedTextureSlices { slices, image_size })
}
/// System reacting to added or modified [`Image`] handles, and recompute sprite slices
/// on matching sprite entities
pub(crate) fn compute_slices_on_asset_event(
mut commands: Commands,
mut events: EventReader<AssetEvent<Image>>,
images: Res<Assets<Image>>,
ui_nodes: Query<(
Entity,
&ImageScaleMode,
&Node,
Option<&UiImageSize>,
&UiImage,
)>,
) {
// We store the asset ids of added/modified image assets
let added_handles: HashSet<_> = events
.read()
.filter_map(|e| match e {
AssetEvent::Added { id } | AssetEvent::Modified { id } => Some(*id),
_ => None,
})
.collect();
if added_handles.is_empty() {
return;
}
// We recompute the sprite slices for sprite entities with a matching asset handle id
for (entity, scale_mode, ui_node, size, image) in &ui_nodes {
if !added_handles.contains(&image.texture.id()) {
continue;
}
let size = size.map(|s| s.size()).unwrap_or(ui_node.size());
if let Some(slices) = compute_texture_slices(size, scale_mode, image, &images) {
commands.entity(entity).insert(slices);
}
}
}
/// System reacting to changes on relevant sprite bundle components to compute the sprite slices
pub(crate) fn compute_slices_on_image_change(
mut commands: Commands,
images: Res<Assets<Image>>,
changed_nodes: Query<
(
Entity,
&ImageScaleMode,
&Node,
Option<&UiImageSize>,
&UiImage,
),
Or<(
Changed<ImageScaleMode>,
Changed<UiImage>,
Changed<UiImageSize>,
Changed<Node>,
)>,
>,
) {
for (entity, scale_mode, ui_node, size, image) in &changed_nodes {
let size = size.map(|s| s.size()).unwrap_or(ui_node.size());
if let Some(slices) = compute_texture_slices(size, scale_mode, image, &images) {
commands.entity(entity).insert(slices);
}
}
}

3
examples/2d/sprite_slice.rs
View file

@ -1,4 +1,5 @@
//! Showcases sprite 9 slice scaling
//! Showcases sprite 9 slice scaling and tiling features, enabling usage of
//! sprites in multiple resolutions while keeping it in proportion
use bevy::prelude::*;
fn main() {

1
examples/README.md
View file

@ -388,6 +388,7 @@ Example | Description
[UI Material](../examples/ui/ui_material.rs) | Demonstrates creating and using custom Ui materials
[UI Scaling](../examples/ui/ui_scaling.rs) | Illustrates how to scale the UI
[UI Texture Atlas](../examples/ui/ui_texture_atlas.rs) | Illustrates how to use TextureAtlases in UI
[UI Texture Slice](../examples/ui/ui_texture_slice.rs) | Illustrates how to use 9 Slicing in UI
[UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements
[Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates
[Window Fallthrough](../examples/ui/window_fallthrough.rs) | Illustrates how to access `winit::window::Window`'s `hittest` functionality.

88
examples/ui/ui_texture_slice.rs Normal file
View file

@ -0,0 +1,88 @@
//! This example illustrates how to create a button that has its image sliced
//! and kept in proportion instead of being stretched by the button dimensions
use bevy::{prelude::*, winit::WinitSettings};
fn main() {
App::new()
.add_plugins(DefaultPlugins)
// Only run the app when there is user input. This will significantly reduce CPU/GPU use.
.insert_resource(WinitSettings::desktop_app())
.add_systems(Startup, setup)
.add_systems(Update, button_system)
.run();
}
fn button_system(
mut interaction_query: Query<(&Interaction, &Children), (Changed<Interaction>, With<Button>)>,
mut text_query: Query<&mut Text>,
) {
for (interaction, children) in &mut interaction_query {
let mut text = text_query.get_mut(children[0]).unwrap();
match *interaction {
Interaction::Pressed => {
text.sections[0].value = "Press".to_string();
}
Interaction::Hovered => {
text.sections[0].value = "Hover".to_string();
}
Interaction::None => {
text.sections[0].value = "Button".to_string();
}
}
}
}
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let image = asset_server.load("textures/fantasy_ui_borders/panel-border-010.png");
let slicer = TextureSlicer {
border: BorderRect::square(22.0),
center_scale_mode: SliceScaleMode::Stretch,
sides_scale_mode: SliceScaleMode::Stretch,
max_corner_scale: 1.0,
};
// ui camera
commands.spawn(Camera2dBundle::default());
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
})
.with_children(|parent| {
for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] {
parent
.spawn(ButtonBundle {
style: Style {
width: Val::Px(w),
height: Val::Px(h),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text
align_items: AlignItems::Center,
margin: UiRect::all(Val::Px(20.0)),
..default()
},
image: image.clone().into(),
scale_mode: ImageScaleMode::Sliced(slicer.clone()),
..default()
})
.with_children(|parent| {
parent.spawn(TextBundle::from_section(
"Button",
TextStyle {
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
font_size: 40.0,
color: Color::rgb(0.9, 0.9, 0.9),
},
));
});
}
});
}