transparency_ui/
transparency_ui.rs

1//! Demonstrates how to use transparency with UI.
2//! Shows two colored buttons with transparent text.
3
4use bevy::prelude::*;
5use bevy::ui_widgets::Button;
6
7fn main() {
8    App::new()
9        .insert_resource(ClearColor(Color::BLACK))
10        .add_plugins(DefaultPlugins)
11        .add_systems(Startup, setup)
12        .run();
13}
14
15fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
16    commands.spawn(Camera2d);
17
18    let font_handle = FontSource::from(asset_server.load("fonts/FiraSans-Bold.ttf"));
19
20    commands
21        .spawn(Node {
22            width: percent(100),
23            height: percent(100),
24            align_items: AlignItems::Center,
25            justify_content: JustifyContent::SpaceAround,
26            ..default()
27        })
28        .with_children(|parent| {
29            parent
30                .spawn((
31                    Button,
32                    Node {
33                        width: px(150),
34                        height: px(65),
35                        justify_content: JustifyContent::Center,
36                        align_items: AlignItems::Center,
37                        ..default()
38                    },
39                    BackgroundColor(Color::srgb(0.1, 0.5, 0.1)),
40                ))
41                .with_children(|parent| {
42                    parent.spawn((
43                        Text::new("Button 1"),
44                        TextFont {
45                            font: font_handle.clone(),
46                            font_size: FontSize::Px(33.0),
47                            ..default()
48                        },
49                        // Alpha channel of the color controls transparency.
50                        // An alpha value of 0.2 means that the color is mostly transparent,
51                        // but a little bit of the RGB color is still visible.
52                        // (The color is white in this case since RGB values are all 1.0)
53
54                        // An alpha value of 1.0 means that the color is not transparent at all.
55                        // An alpha value of 0.0 means the color is completely transparent.
56                        TextColor(Color::srgba(1.0, 1.0, 1.0, 0.2)),
57                    ));
58                });
59
60            // Button with a different background color,
61            // to demonstrate that the same color text looks different due to its transparency.
62            parent
63                .spawn((
64                    Button,
65                    Node {
66                        width: px(150),
67                        height: px(65),
68                        justify_content: JustifyContent::Center,
69                        align_items: AlignItems::Center,
70                        ..default()
71                    },
72                    BackgroundColor(Color::srgb(0.5, 0.1, 0.5)),
73                ))
74                .with_children(|parent| {
75                    parent.spawn((
76                        Text::new("Button 2"),
77                        TextFont {
78                            font: font_handle.clone(),
79                            font_size: FontSize::Px(33.0),
80                            ..default()
81                        },
82                        // Alpha channel of the color controls transparency.
83                        TextColor(Color::srgba(1.0, 1.0, 1.0, 0.2)),
84                    ));
85                });
86        });
87}
transparency_ui/transparency_ui.rs

transparency_ui/
transparency_ui.rs
