docs/bevy/examples/ui/styling/transparency_ui.rs 3.3 K · 87 lines · raw · history

1 //! Demonstrates how to use transparency with UI.
2 //! Shows two colored buttons with transparent text.
3
4 use bevy::prelude::*;
5 use bevy::ui_widgets::Button;
6
7 fn main() {
8 App::new()
9 .insert_resource(ClearColor(Color::BLACK))
10 .add_plugins(DefaultPlugins)
11 .add_systems(Startup, setup)
12 .run();
13 }
14
15 fn 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 }