UI Texture Atlas support #3792

ManevilleF · 2022-01-28T13:07:01Z

Objective

Adds support for texture atlas in bevy_ui Nodes

Solution

I created a custom UiTextureAtlas component with a simple texture index and a Handle<bevy_sprite::TextureAtlas>
I plugged a new extraction system in the render pipeline
I added new UI Bundles using UiTextureAtlas
I added an example
I added an extra system for the ImageMode support

Removed logging and added custom panic messages instead

alice-i-cecile · 2022-05-16T19:11:58Z

crates/bevy_ui/src/entity.rs

@@ -54,6 +55,29 @@ pub struct ImageBundle {
 pub visibility: Visibility,
 }

+/// A UI node that is an image with texture sheet


Suggested change

/// A UI node that is an image with texture sheet

/// A UI node that displays an image stored in a texture sheet

alice-i-cecile · 2022-05-16T19:12:27Z

crates/bevy_ui/src/entity.rs

+ pub image_mode: ImageMode,
+ /// The calculated size based on the given image
+ pub calculated_size: CalculatedSize,
+ /// The color of the node


This should describe how the blending is done.

alice-i-cecile · 2022-05-16T19:13:32Z

crates/bevy_ui/src/entity.rs

@@ -132,6 +156,48 @@ impl Default for ButtonBundle {
 }
 }

+/// A UI node that is a button with a texture sheet
+#[derive(Bundle, Clone, Debug)]
+pub struct ButtonSheetBundle {


I don't like the creation of a dedicated bundle here: this should be done compositionally.

alice-i-cecile · 2022-05-16T19:14:34Z

crates/bevy_ui/src/entity.rs

+ pub visibility: Visibility,
+}
+
+impl Default for ButtonSheetBundle {


Shouldn't the derive work fine here?

alice-i-cecile · 2022-05-16T19:15:47Z

crates/bevy_ui/src/render/mod.rs

@@ -82,12 +82,22 @@ pub fn build_ui_render(app: &mut App) {
 .add_system_to_stage(RenderStage::Extract, extract_ui_camera_phases)
 .add_system_to_stage(
 RenderStage::Extract,
+ // This system is the first of `RenderStage::Extract` it is responsible for both:


This should be on doc strings for extract_uinodes and RenderUiSystem instead.

alice-i-cecile · 2022-05-16T19:16:53Z

crates/bevy_ui/src/render/mod.rs

@@ -172,6 +184,61 @@ pub fn extract_uinodes(
 }
 }

+pub fn extract_atlas_uinodes(


This is public, and thus needs doc strings.

alice-i-cecile · 2022-05-16T19:20:02Z

crates/bevy_ui/src/ui_node.rs

+/// The texture atlas of the node
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component)]
+pub struct UiTextureAtlas {


This doesn't feel UI specific at all. Why can't we just use TextureAtlasSprite + Handle<TextureAtlas>?

Whenever possible, we should try to avoid duplicated structures between UI and 2D to avoid divergence and confusion.

alice-i-cecile · 2022-05-16T19:21:30Z

examples/ui/button_with_atlas.rs

@@ -0,0 +1,80 @@
+use bevy::prelude::*;
+
+/// This example illustrates how to create a button that changes color and text based on its


This should be a module-style comment: see #4438.

alice-i-cecile · 2022-05-16T19:22:24Z

examples/README.md

@@ -243,6 +243,7 @@ Example | File | Description
 Example | File | Description
 --- | --- | ---
 `button` | [`ui/button.rs`](./ui/button.rs) | Illustrates creating and updating a button
+`button_with_atlas` | [`ui/button_with_atlas.rs`](./ui/button_with_atlas.rs) | Illustrates creating and updating a button with a texture atlas


I'd prefer if we could roll this into the button.rs example, and just create two different buttons there.

alice-i-cecile

Some nits, and one major objection: I think that whenever possible we should try to reuse and unify code between UI and 2D.

I agree with the direction here and think it's quite useful. Can you add more context to the Objective section of your PR explaining what end users might use this feature for in practice?

My instinct was that you could use this for animated buttons (including changes on e.g. hover), and @inodentry pointed out that you could use this to enable reuse of texture atlases across the game content and UI, like in menus.

ManevilleF · 2022-05-17T15:42:45Z

Thanks for the review, I completely forgot about this PR.

I think I'll redo it completely from the main branch following your remarks.

About the use cases I see both:

Animated buttons (and anything really)
Global texture mapping for UI

ManevilleF · 2022-06-22T09:58:40Z

@alice-i-cecile I'm closing this in favor of #5070

github-actions bot added the S-Needs-Triage This issue needs to be labelled label Jan 28, 2022

ManevilleF changed the title ~~UI Texture Atlas support~~ Draft: UI Texture Atlas support Jan 28, 2022

ManevilleF changed the title ~~Draft: UI Texture Atlas support~~ UI Texture Atlas support Jan 28, 2022

ManevilleF added 8 commits January 29, 2022 10:18

UI Texture Atlas support

4b24b3c

Added example and image size system

b1884f1

Fixed doc

18fd64e

Added example to README

a2b24f9

Fixed extraction issue

dcb965f

Fixed example

f8c16e1

Added annotation for the extraction stage

98b9933

Removed logging and added custom panic messages instead

Clipy fixes

1cc7bd2

ManevilleF force-pushed the feat/bevy_ui_improvements branch from ceb555a to 1cc7bd2 Compare January 29, 2022 09:19

NiklasEi added A-UI Graphical user interfaces, styles, layouts, and widgets and removed S-Needs-Triage This issue needs to be labelled labels Jan 29, 2022

rparrett mentioned this pull request Feb 8, 2022

Using sprite atlas with the UI #1169

Closed

alice-i-cecile added the C-Feature A new feature, making something new possible label May 16, 2022

alice-i-cecile reviewed May 16, 2022

View reviewed changes

alice-i-cecile requested changes May 16, 2022

View reviewed changes

ManevilleF mentioned this pull request Jun 22, 2022

Feat/UI texture atlas #5070

Closed

ManevilleF closed this Jun 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Texture Atlas support #3792

UI Texture Atlas support #3792

ManevilleF commented Jan 28, 2022 •

edited

Loading

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022 •

edited

Loading

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022

alice-i-cecile May 16, 2022

alice-i-cecile left a comment

ManevilleF commented May 17, 2022

ManevilleF commented Jun 22, 2022

	/// A UI node that is an image with texture sheet
	/// A UI node that displays an image stored in a texture sheet

		@@ -0,0 +1,80 @@
		use bevy::prelude::*;

		/// This example illustrates how to create a button that changes color and text based on its

UI Texture Atlas support #3792

UI Texture Atlas support #3792

Conversation

ManevilleF commented Jan 28, 2022 • edited Loading

Objective

Solution

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alice-i-cecile May 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alice-i-cecile left a comment

Choose a reason for hiding this comment

ManevilleF commented May 17, 2022

ManevilleF commented Jun 22, 2022

ManevilleF commented Jan 28, 2022 •

edited

Loading

alice-i-cecile May 16, 2022 •

edited

Loading