bevy/crates
Alice Cecile 336fddb101
Make default behavior for BackgroundColor and BorderColor more intuitive (#14017)
# Objective

In Bevy 0.13, `BackgroundColor` simply tinted the image of any
`UiImage`. This was confusing: in every other case (e.g. Text), this
added a solid square behind the element. #11165 changed this, but
removed `BackgroundColor` from `ImageBundle` to avoid confusion, since
the semantic meaning had changed.

However, this resulted in a serious UX downgrade / inconsistency, as
this behavior was no longer part of the bundle (unlike for `TextBundle`
or `NodeBundle`), leaving users with a relatively frustrating upgrade
path.

Additionally, adding both `BackgroundColor` and `UiImage` resulted in a
bizarre effect, where the background color was seemingly ignored as it
was covered by a solid white placeholder image.

Fixes #13969.

## Solution

Per @viridia's design:

> - if you don't specify a background color, it's transparent.
> - if you don't specify an image color, it's white (because it's a
multiplier).
> - if you don't specify an image, no image is drawn.
> - if you specify both a background color and an image color, they are
independent.
> - the background color is drawn behind the image (in whatever pixels
are transparent)

As laid out by @benfrankel, this involves:

1. Changing the default `UiImage` to use a transparent texture but a
pure white tint.
2. Adding `UiImage::solid_color` to quickly set placeholder images.
3. Changing the default `BorderColor` and `BackgroundColor` to
transparent.
4. Removing the default overrides for these values in the other assorted
UI bundles.
5. Adding `BackgroundColor` back to `ImageBundle` and `ButtonBundle`.
6. Adding a 1x1 `Image::transparent`, which can be accessed from
`Assets<Image>` via the `TRANSPARENT_IMAGE_HANDLE` constant.

Huge thanks to everyone who helped out with the design in the linked
issue and [the Discord
thread](https://discord.com/channels/691052431525675048/1255209923890118697/1255209999278280844):
this was very much a joint design.

@cart helped me figure out how to set the UiImage's default texture to a
transparent 1x1 image, which is a much nicer fix.

## Testing

I've checked the examples modified by this PR, and the `ui` example as
well just to be sure.

## Migration Guide

- `BackgroundColor` no longer tints the color of images in `ImageBundle`
or `ButtonBundle`. Set `UiImage::color` to tint images instead.
- The default texture for `UiImage` is now a transparent white square.
Use `UiImage::solid_color` to quickly draw debug images.
- The default value for `BackgroundColor` and `BorderColor` is now
transparent. Set the color to white manually to return to previous
behavior.
2024-06-25 21:50:41 +00:00
..
bevy_a11y Update accesskit and accesskit_winit (#13841) 2024-06-17 15:08:53 +00:00
bevy_animation Remove unnecessary compute for rotation interpolation (#14019) 2024-06-25 21:14:37 +00:00
bevy_app feat(bevy_app): expose an API to perform updates for a specific sub-app. (#14009) 2024-06-25 14:04:31 +00:00
bevy_asset Add a test asserting that reflected cloning a Handle increments strong count (#13961) 2024-06-24 20:54:54 +00:00
bevy_audio Fix a few "repeated word" typos (#13955) 2024-06-20 21:35:20 +00:00
bevy_color Allow bevy_color use without bevy_reflect support (#13870) 2024-06-16 15:47:30 +00:00
bevy_core Don't show .to_bits in Display impl for Entity (#14011) 2024-06-25 17:08:24 +00:00
bevy_core_pipeline Fix meshlet interactions with regular shading passes (#13816) 2024-06-21 19:06:08 +00:00
bevy_derive Deprecate dynamic plugins (#13080) 2024-05-20 20:01:28 +00:00
bevy_dev_tools Fix lints introduced in Rust beta 1.80 (#13899) 2024-06-17 17:22:01 +00:00
bevy_diagnostic Poll system information in separate tasks (#13693) 2024-06-10 19:06:22 +00:00
bevy_dylib Add README.md to all crates (#13184) 2024-05-02 18:56:00 +00:00
bevy_dynamic_plugin Deprecate dynamic plugins (#13080) 2024-05-20 20:01:28 +00:00
bevy_ecs Don't show .to_bits in Display impl for Entity (#14011) 2024-06-25 17:08:24 +00:00
bevy_encase_derive Add README.md to all crates (#13184) 2024-05-02 18:56:00 +00:00
bevy_gilrs Add README.md to all crates (#13184) 2024-05-02 18:56:00 +00:00
bevy_gizmos Use u32 for all resolution/subdivision fields in bevy_gizmos (#13927) 2024-06-19 17:28:10 +00:00
bevy_gltf Add labels to Gltf Node and Mesh assets (#13558) 2024-06-05 23:10:33 +00:00
bevy_hierarchy Fix EntityCommands::despawn docs (#13774) 2024-06-09 17:59:19 +00:00
bevy_input Fix a few "repeated word" typos (#13955) 2024-06-20 21:35:20 +00:00
bevy_internal Upstream CorePlugin from bevy_mod_picking (#13677) 2024-06-15 11:59:57 +00:00
bevy_log Document use of NO_COLOR in LogPlugin (#13984) 2024-06-24 21:04:55 +00:00
bevy_macro_utils Add README.md to all crates (#13184) 2024-05-02 18:56:00 +00:00
bevy_math Fix a few "repeated word" typos (#13955) 2024-06-20 21:35:20 +00:00
bevy_mikktspace Fixed a link to Blender's mikktspace docs (#13924) 2024-06-19 12:37:10 +00:00
bevy_pbr Fix MeshletMesh material system ordering (#14016) 2024-06-25 18:17:52 +00:00
bevy_picking Upstream CorePlugin from bevy_mod_picking (#13677) 2024-06-15 11:59:57 +00:00
bevy_ptr add Debug for ptr types (#13498) 2024-05-24 21:25:11 +00:00
bevy_reflect bevy_reflect: Improve reflection serialization error messages (#13867) 2024-06-17 18:13:46 +00:00
bevy_render Make default behavior for BackgroundColor and BorderColor more intuitive (#14017) 2024-06-25 21:50:41 +00:00
bevy_scene Fix lints introduced in Rust beta 1.80 (#13899) 2024-06-17 17:22:01 +00:00
bevy_sprite bug: Fix 9-slice textures with asymmetric borders. (#13921) 2024-06-19 17:30:18 +00:00
bevy_state Move StateTransitionSteps registration to states plugin (#13939) 2024-06-20 00:57:40 +00:00
bevy_tasks fix: upgrade to winit v0.30 (#13366) 2024-06-03 13:06:48 +00:00
bevy_text Fix lints introduced in Rust beta 1.80 (#13899) 2024-06-17 17:22:01 +00:00
bevy_time Make time_system public (#13879) 2024-06-16 18:07:41 +00:00
bevy_transform Fix lints introduced in Rust beta 1.80 (#13899) 2024-06-17 17:22:01 +00:00
bevy_ui Make default behavior for BackgroundColor and BorderColor more intuitive (#14017) 2024-06-25 21:50:41 +00:00
bevy_utils Fix parameter name of all_tuples's document (#13896) 2024-06-17 15:17:24 +00:00
bevy_window apply window scale to window size when creating it (#13967) 2024-06-21 18:04:57 +00:00
bevy_winit Have WindowPosition::Centered take scale_factor_override into account (#13949) 2024-06-24 20:56:46 +00:00