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

Migrate UI bundles to required components (#15898)

Browse source 
# Objective

- Migrate UI bundles to required components, fixes #15889

## Solution

- deprecate `NodeBundle` in favor of `Node`
- deprecate `ImageBundle` in favor of `UiImage`
- deprecate `ButtonBundle` in favor of `Button`

## Testing

CI.

## Migration Guide

- Replace all uses of `NodeBundle` with `Node`. e.g.
```diff
     commands
-        .spawn(NodeBundle {
-            style: Style {
+        .spawn((
+            Node::default(),
+            Style {
                 width: Val::Percent(100.),
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
             },
-            ..default()
-        })
+        ))
``` 
- Replace all uses of `ButtonBundle` with `Button`. e.g.
```diff
                     .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(),
+                        Button,
+                        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()
                         },
+                        UiImage::from(image.clone()),
                         ImageScaleMode::Sliced(slicer.clone()),
                     ))
```
- Replace all uses of `ImageBundle` with `UiImage`. e.g.
```diff
-    commands.spawn(ImageBundle {
-        image: UiImage {
+    commands.spawn((
+        UiImage {
             texture: metering_mask,
             ..default()
         },
-        style: Style {
+        Style {
             width: Val::Percent(100.0),
             height: Val::Percent(100.0),
             ..default()
         },
-        ..default()
-    });
+    ));
 ```

---------

Co-authored-by: Carter Anderson <mcanders1@gmail.com>
This commit is contained in:
VitalyR 2024-10-18 05:11:02 +08:00 committed by GitHub
parent 683d6c90a9
commit eb19a9ea0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
69 changed files with 1577 additions and 1730 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
crates/bevy_dev_tools/src/fps_overlay.rs
View file

@ -15,8 +15,8 @@ use bevy_ecs::{
use bevy_hierarchy::{BuildChildren, ChildBuild}; use bevy_hierarchy::{BuildChildren, ChildBuild};
use bevy_render::view::Visibility; use bevy_render::view::Visibility;
use bevy_text::{Font, TextColor, TextFont, TextSpan}; use bevy_text::{Font, TextColor, TextFont, TextSpan};
use bevy_ui::Node;
use bevy_ui::{ use bevy_ui::{
node_bundles::NodeBundle,
widget::{Text, TextUiWriter}, widget::{Text, TextUiWriter},
GlobalZIndex, PositionType, Style, GlobalZIndex, PositionType, Style,
}; };
@ -89,15 +89,13 @@ struct FpsText;
fn setup(mut commands: Commands, overlay_config: Res<FpsOverlayConfig>) { fn setup(mut commands: Commands, overlay_config: Res<FpsOverlayConfig>) {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
// We need to make sure the overlay doesn't affect the position of other UI nodes // We need to make sure the overlay doesn't affect the position of other UI nodes
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default()
},
// Render overlay on top of everything
..default() ..default()
}, },
// Render overlay on top of everything
GlobalZIndex(FPS_OVERLAY_ZINDEX), GlobalZIndex(FPS_OVERLAY_ZINDEX),
)) ))
.with_children(|p| { .with_children(|p| {

23
crates/bevy_ui/src/experimental/ghost_hierarchy.rs
View file

@ -170,8 +170,7 @@ mod tests {
}; };
use bevy_hierarchy::{BuildChildren, ChildBuild}; use bevy_hierarchy::{BuildChildren, ChildBuild};
use super::{GhostNode, UiChildren, UiRootNodes}; use super::{GhostNode, Node, UiChildren, UiRootNodes};
use crate::prelude::NodeBundle;
#[derive(Component, PartialEq, Debug)] #[derive(Component, PartialEq, Debug)]
struct A(usize); struct A(usize);
@ -182,22 +181,22 @@ mod tests {
// Normal root // Normal root
world world
.spawn((A(1), NodeBundle::default())) .spawn((A(1), Node::default()))
.with_children(|parent| { .with_children(|parent| {
parent.spawn((A(2), NodeBundle::default())); parent.spawn((A(2), Node::default()));
parent parent
.spawn((A(3), GhostNode::new())) .spawn((A(3), GhostNode::new()))
.with_child((A(4), NodeBundle::default())); .with_child((A(4), Node::default()));
}); });
// Ghost root // Ghost root
world world
.spawn((A(5), GhostNode::new())) .spawn((A(5), GhostNode::new()))
.with_children(|parent| { .with_children(|parent| {
parent.spawn((A(6), NodeBundle::default())); parent.spawn((A(6), Node::default()));
parent parent
.spawn((A(7), GhostNode::new())) .spawn((A(7), GhostNode::new()))
.with_child((A(8), NodeBundle::default())) .with_child((A(8), Node::default()))
.with_child(A(9)); .with_child(A(9));
}); });
@ -213,17 +212,17 @@ mod tests {
fn iterate_ui_children() { fn iterate_ui_children() {
let world = &mut World::new(); let world = &mut World::new();
let n1 = world.spawn((A(1), NodeBundle::default())).id(); let n1 = world.spawn((A(1), Node::default())).id();
let n2 = world.spawn((A(2), GhostNode::new())).id(); let n2 = world.spawn((A(2), GhostNode::new())).id();
let n3 = world.spawn((A(3), GhostNode::new())).id(); let n3 = world.spawn((A(3), GhostNode::new())).id();
let n4 = world.spawn((A(4), NodeBundle::default())).id(); let n4 = world.spawn((A(4), Node::default())).id();
let n5 = world.spawn((A(5), NodeBundle::default())).id(); let n5 = world.spawn((A(5), Node::default())).id();
let n6 = world.spawn((A(6), GhostNode::new())).id(); let n6 = world.spawn((A(6), GhostNode::new())).id();
let n7 = world.spawn((A(7), GhostNode::new())).id(); let n7 = world.spawn((A(7), GhostNode::new())).id();
let n8 = world.spawn((A(8), NodeBundle::default())).id(); let n8 = world.spawn((A(8), Node::default())).id();
let n9 = world.spawn((A(9), GhostNode::new())).id(); let n9 = world.spawn((A(9), GhostNode::new())).id();
let n10 = world.spawn((A(10), NodeBundle::default())).id(); let n10 = world.spawn((A(10), Node::default())).id();
let no_ui = world.spawn_empty().id(); let no_ui = world.spawn_empty().id();

2
crates/bevy_ui/src/focus.rs
View file

@ -39,7 +39,7 @@ use bevy_reflect::{ReflectDeserialize, ReflectSerialize};
/// ///
/// # See also /// # See also
/// ///
/// - [`ButtonBundle`](crate::node_bundles::ButtonBundle) which includes this component /// - [`Button`](crate::widget::Button) which requires this component
/// - [`RelativeCursorPosition`] to obtain the position of the cursor relative to current node /// - [`RelativeCursorPosition`] to obtain the position of the cursor relative to current node
#[derive(Component, Copy, Clone, Eq, PartialEq, Debug, Reflect)] #[derive(Component, Copy, Clone, Eq, PartialEq, Debug, Reflect)]
#[reflect(Component, Default, PartialEq, Debug)] #[reflect(Component, Default, PartialEq, Debug)]

116
crates/bevy_ui/src/layout/mod.rs
View file

@ -581,25 +581,25 @@ mod tests {
// spawn a root entity with width and height set to fill 100% of its parent // spawn a root entity with width and height set to fill 100% of its parent
let ui_root = world let ui_root = world
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
..default() ..default()
}, },
..default() ))
})
.id(); .id();
let ui_child = world let ui_child = world
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
..default() ..default()
}, },
..default() ))
})
.id(); .id();
world.entity_mut(ui_root).add_child(ui_child); world.entity_mut(ui_root).add_child(ui_child);
@ -624,7 +624,7 @@ mod tests {
let ui_surface = world.resource::<UiSurface>(); let ui_surface = world.resource::<UiSurface>();
assert!(ui_surface.entity_to_taffy.is_empty()); assert!(ui_surface.entity_to_taffy.is_empty());
let ui_entity = world.spawn(NodeBundle::default()).id(); let ui_entity = world.spawn(Node::default()).id();
// `ui_layout_system` should map `ui_entity` to a ui node in `UiSurface::entity_to_taffy` // `ui_layout_system` should map `ui_entity` to a ui node in `UiSurface::entity_to_taffy`
ui_schedule.run(&mut world); ui_schedule.run(&mut world);
@ -666,7 +666,7 @@ mod tests {
let camera_entity = world.spawn(Camera2d).id(); let camera_entity = world.spawn(Camera2d).id();
let ui_entity = world let ui_entity = world
.spawn((NodeBundle::default(), TargetCamera(camera_entity))) .spawn((Node::default(), TargetCamera(camera_entity)))
.id(); .id();
// `ui_layout_system` should map `camera_entity` to a ui node in `UiSurface::camera_entity_to_taffy` // `ui_layout_system` should map `camera_entity` to a ui node in `UiSurface::camera_entity_to_taffy`
@ -696,7 +696,7 @@ mod tests {
fn despawning_a_ui_entity_should_remove_its_corresponding_ui_node() { fn despawning_a_ui_entity_should_remove_its_corresponding_ui_node() {
let (mut world, mut ui_schedule) = setup_ui_test_world(); let (mut world, mut ui_schedule) = setup_ui_test_world();
let ui_entity = world.spawn(NodeBundle::default()).id(); let ui_entity = world.spawn(Node::default()).id();
// `ui_layout_system` will insert a ui node into the internal layout tree corresponding to `ui_entity` // `ui_layout_system` will insert a ui node into the internal layout tree corresponding to `ui_entity`
ui_schedule.run(&mut world); ui_schedule.run(&mut world);
@ -721,7 +721,7 @@ mod tests {
fn changes_to_children_of_a_ui_entity_change_its_corresponding_ui_nodes_children() { fn changes_to_children_of_a_ui_entity_change_its_corresponding_ui_nodes_children() {
let (mut world, mut ui_schedule) = setup_ui_test_world(); let (mut world, mut ui_schedule) = setup_ui_test_world();
let ui_parent_entity = world.spawn(NodeBundle::default()).id(); let ui_parent_entity = world.spawn(Node::default()).id();
// `ui_layout_system` will insert a ui node into the internal layout tree corresponding to `ui_entity` // `ui_layout_system` will insert a ui node into the internal layout tree corresponding to `ui_entity`
ui_schedule.run(&mut world); ui_schedule.run(&mut world);
@ -734,7 +734,7 @@ mod tests {
let mut ui_child_entities = (0..10) let mut ui_child_entities = (0..10)
.map(|_| { .map(|_| {
let child = world.spawn(NodeBundle::default()).id(); let child = world.spawn(Node::default()).id();
world.entity_mut(ui_parent_entity).add_child(child); world.entity_mut(ui_parent_entity).add_child(child);
child child
}) })
@ -828,40 +828,40 @@ mod tests {
let mut size = 150.; let mut size = 150.;
world.spawn(NodeBundle { world.spawn((
style: Style { Node::default(),
Style {
// test should pass without explicitly requiring position_type to be set to Absolute // test should pass without explicitly requiring position_type to be set to Absolute
// position_type: PositionType::Absolute, // position_type: PositionType::Absolute,
width: Val::Px(size), width: Val::Px(size),
height: Val::Px(size), height: Val::Px(size),
..default() ..default()
}, },
..default() ));
});
size -= 50.; size -= 50.;
world.spawn(NodeBundle { world.spawn((
style: Style { Node::default(),
Style {
// position_type: PositionType::Absolute, // position_type: PositionType::Absolute,
width: Val::Px(size), width: Val::Px(size),
height: Val::Px(size), height: Val::Px(size),
..default() ..default()
}, },
..default() ));
});
size -= 50.; size -= 50.;
world.spawn(NodeBundle { world.spawn((
style: Style { Node::default(),
Style {
// position_type: PositionType::Absolute, // position_type: PositionType::Absolute,
width: Val::Px(size), width: Val::Px(size),
height: Val::Px(size), height: Val::Px(size),
..default() ..default()
}, },
..default() ));
});
ui_schedule.run(&mut world); ui_schedule.run(&mut world);
@ -996,13 +996,11 @@ mod tests {
)); ));
world.spawn(( world.spawn((
NodeBundle { Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
top: Val::Px(0.), top: Val::Px(0.),
left: Val::Px(0.), left: Val::Px(0.),
..default()
},
..default() ..default()
}, },
MovingUiNode, MovingUiNode,
@ -1052,12 +1050,10 @@ mod tests {
let ui_entity = world let ui_entity = world
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
align_self: AlignSelf::Start, align_self: AlignSelf::Start,
..Default::default() ..default()
},
..Default::default()
}, },
ContentSize::fixed_size(content_size), ContentSize::fixed_size(content_size),
)) ))
@ -1080,11 +1076,9 @@ mod tests {
let content_size = Vec2::new(50., 25.); let content_size = Vec2::new(50., 25.);
let ui_entity = world let ui_entity = world
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
align_self: AlignSelf::Start, align_self: AlignSelf::Start,
..Default::default()
},
..Default::default() ..Default::default()
}, },
ContentSize::fixed_size(content_size), ContentSize::fixed_size(content_size),
@ -1121,26 +1115,26 @@ mod tests {
let (mut world, mut ui_schedule) = setup_ui_test_world(); let (mut world, mut ui_schedule) = setup_ui_test_world();
let parent = world let parent = world
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
grid_template_columns: RepeatedGridTrack::min_content(2), grid_template_columns: RepeatedGridTrack::min_content(2),
margin: UiRect::all(Val::Px(4.0)), margin: UiRect::all(Val::Px(4.0)),
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|commands| { .with_children(|commands| {
for _ in 0..2 { for _ in 0..2 {
commands.spawn(NodeBundle { commands.spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
width: Val::Px(160.), width: Val::Px(160.),
height: Val::Px(160.), height: Val::Px(160.),
..Default::default() ..default()
}, },
..Default::default() ));
});
} }
}) })
.id(); .id();
@ -1211,25 +1205,25 @@ mod tests {
); );
let ui_root = world let ui_root = world
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
..default() ..default()
}, },
..default() ))
})
.id(); .id();
let ui_child = world let ui_child = world
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
..default() ..default()
}, },
..default() ))
})
.id(); .id();
world.entity_mut(ui_root).add_child(ui_child); world.entity_mut(ui_root).add_child(ui_child);

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

@ -8,7 +8,7 @@
//! This crate contains Bevy's UI system, which can be used to create UI for both 2D and 3D games //! This crate contains Bevy's UI system, which can be used to create UI for both 2D and 3D games
//! # Basic usage //! # Basic usage
//! Spawn UI elements with [`node_bundles::ButtonBundle`], [`node_bundles::ImageBundle`], [`Text`](prelude::Text) and [`node_bundles::NodeBundle`] //! Spawn UI elements with [`widget::Button`], [`UiImage`], [`Text`](prelude::Text) and [`Node`]
//! This UI is laid out with the Flexbox and CSS Grid layout models (see <https://cssreference.io/flexbox/>) //! This UI is laid out with the Flexbox and CSS Grid layout models (see <https://cssreference.io/flexbox/>)
pub mod measurement; pub mod measurement;
@ -59,7 +59,7 @@ pub mod prelude {
ui_material::*, ui_material::*,
ui_node::*, ui_node::*,
widget::{Button, Label}, widget::{Button, Label},
Interaction, UiMaterialHandle, UiMaterialPlugin, UiScale, Interaction, MaterialNode, UiMaterialPlugin, UiScale,
}, },
// `bevy_sprite` re-exports for texture slicing // `bevy_sprite` re-exports for texture slicing
bevy_sprite::{BorderRect, ImageScaleMode, SliceScaleMode, TextureSlicer}, bevy_sprite::{BorderRect, ImageScaleMode, SliceScaleMode, TextureSlicer},

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

@ -1,9 +1,10 @@
//! This module contains basic node bundles used to build UIs //! This module contains basic node bundles used to build UIs
#![expect(deprecated)]
use crate::{ use crate::{
widget::{Button, UiImageSize}, widget::{Button, UiImageSize},
BackgroundColor, BorderColor, BorderRadius, ContentSize, FocusPolicy, Interaction, Node, BackgroundColor, BorderColor, BorderRadius, ContentSize, FocusPolicy, Interaction,
ScrollPosition, Style, UiImage, UiMaterial, UiMaterialHandle, ZIndex, MaterialNode, Node, ScrollPosition, Style, UiImage, UiMaterial, ZIndex,
}; };
use bevy_ecs::bundle::Bundle; use bevy_ecs::bundle::Bundle;
use bevy_render::view::{InheritedVisibility, ViewVisibility, Visibility}; use bevy_render::view::{InheritedVisibility, ViewVisibility, Visibility};
@ -15,6 +16,10 @@ use bevy_transform::prelude::{GlobalTransform, Transform};
/// ///
/// See [`node_bundles`](crate::node_bundles) for more specialized bundles like [`ImageBundle`]. /// See [`node_bundles`](crate::node_bundles) for more specialized bundles like [`ImageBundle`].
#[derive(Bundle, Clone, Debug, Default)] #[derive(Bundle, Clone, Debug, Default)]
#[deprecated(
since = "0.15.0",
note = "Use the `Node` component instead. Inserting `Node` will also insert the other components required automatically."
)]
pub struct NodeBundle { pub struct NodeBundle {
/// Describes the logical size of the node /// Describes the logical size of the node
pub node: Node, pub node: Node,
@ -59,6 +64,10 @@ pub struct NodeBundle {
/// - [`ImageScaleMode`](bevy_sprite::ImageScaleMode) to enable either slicing or tiling of the texture /// - [`ImageScaleMode`](bevy_sprite::ImageScaleMode) to enable either slicing or tiling of the texture
/// - [`TextureAtlas`](bevy_sprite::TextureAtlas) to draw a specific section of the texture /// - [`TextureAtlas`](bevy_sprite::TextureAtlas) to draw a specific section of the texture
#[derive(Bundle, Debug, Default)] #[derive(Bundle, Debug, Default)]
#[deprecated(
since = "0.15.0",
note = "Use the `UiImage` component instead. Inserting `UiImage` will also insert the other components required automatically."
)]
pub struct ImageBundle { pub struct ImageBundle {
/// Describes the logical size of the node /// Describes the logical size of the node
pub node: Node, pub node: Node,
@ -108,6 +117,10 @@ pub struct ImageBundle {
/// - [`ImageScaleMode`](bevy_sprite::ImageScaleMode) to enable either slicing or tiling of the texture /// - [`ImageScaleMode`](bevy_sprite::ImageScaleMode) to enable either slicing or tiling of the texture
/// - [`TextureAtlas`](bevy_sprite::TextureAtlas) to draw a specific section of the texture /// - [`TextureAtlas`](bevy_sprite::TextureAtlas) to draw a specific section of the texture
#[derive(Bundle, Clone, Debug)] #[derive(Bundle, Clone, Debug)]
#[deprecated(
since = "0.15.0",
note = "Use the `Button` component instead. Inserting `Button` will also insert the other components required automatically."
)]
pub struct ButtonBundle { pub struct ButtonBundle {
/// Describes the logical size of the node /// Describes the logical size of the node
pub node: Node, pub node: Node,
@ -174,6 +187,10 @@ impl Default for ButtonBundle {
/// Adding a `BackgroundColor` component to an entity with this bundle will ignore the custom /// Adding a `BackgroundColor` component to an entity with this bundle will ignore the custom
/// material and use the background color instead. /// material and use the background color instead.
#[derive(Bundle, Clone, Debug)] #[derive(Bundle, Clone, Debug)]
#[deprecated(
since = "0.15.0",
note = "Use the `MaterialNode` component instead. Inserting `MaterialNode` will also insert the other components required automatically."
)]
pub struct MaterialNodeBundle<M: UiMaterial> { pub struct MaterialNodeBundle<M: UiMaterial> {
/// Describes the logical size of the node /// Describes the logical size of the node
pub node: Node, pub node: Node,
@ -181,7 +198,7 @@ pub struct MaterialNodeBundle<M: UiMaterial> {
/// In some cases these styles also affect how the node drawn/painted. /// In some cases these styles also affect how the node drawn/painted.
pub style: Style, pub style: Style,
/// The [`UiMaterial`] used to render the node. /// The [`UiMaterial`] used to render the node.
pub material: UiMaterialHandle<M>, pub material: MaterialNode<M>,
/// Whether this node should block interaction with lower nodes /// Whether this node should block interaction with lower nodes
pub focus_policy: FocusPolicy, pub focus_policy: FocusPolicy,
/// The transform of the node /// The transform of the node

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

@ -65,6 +65,25 @@ pub mod graph {
} }
} }
/// Z offsets of "extracted nodes" for a given entity. These exist to allow rendering multiple "extracted nodes"
/// for a given source entity (ex: render both a background color _and_ a custom material for a given node).
///
/// When possible these offsets should be defined in _this_ module to ensure z-index coordination across contexts.
/// When this is _not_ possible, pick a suitably unique index unlikely to clash with other things (ex: `0.1826823` not `0.1`).
///
/// Offsets should be unique for a given node entity to avoid z fighting.
/// These should pretty much _always_ be larger than -1.0 and smaller than 1.0 to avoid clipping into nodes
/// above / below the current node in the stack.
///
/// A z-index of 0.0 is the baseline, which is used as the primary "background color" of the node.
///
/// Note that nodes "stack" on each other, so a negative offset on the node above could clip _into_
/// a positive offset on a node below.
pub mod stack_z_offsets {
pub const BACKGROUND_COLOR: f32 = 0.0;
pub const MATERIAL: f32 = 0.18267;
}
pub const UI_SHADER_HANDLE: Handle<Shader> = Handle::weak_from_u128(13012847047162779583); pub const UI_SHADER_HANDLE: Handle<Shader> = Handle::weak_from_u128(13012847047162779583);
#[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)] #[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)]
@ -823,7 +842,7 @@ pub fn queue_uinodes(
pipeline, pipeline,
entity: (*entity, extracted_uinode.main_entity), entity: (*entity, extracted_uinode.main_entity),
sort_key: ( sort_key: (
FloatOrd(extracted_uinode.stack_index as f32), FloatOrd(extracted_uinode.stack_index as f32 + stack_z_offsets::BACKGROUND_COLOR),
entity.index(), entity.index(),
), ),
// batch_range will be calculated in prepare_uinodes // batch_range will be calculated in prepare_uinodes

27
crates/bevy_ui/src/render/ui_material_pipeline.rs
View file

@ -60,9 +60,9 @@ where
Shader::from_wgsl Shader::from_wgsl
); );
app.init_asset::<M>() app.init_asset::<M>()
.register_type::<UiMaterialHandle<M>>() .register_type::<MaterialNode<M>>()
.add_plugins(( .add_plugins((
ExtractComponentPlugin::<UiMaterialHandle<M>>::extract_visible(), ExtractComponentPlugin::<MaterialNode<M>>::extract_visible(),
RenderAssetPlugin::<PreparedUiMaterial<M>>::default(), RenderAssetPlugin::<PreparedUiMaterial<M>>::default(),
)); ));
@ -363,18 +363,15 @@ pub fn extract_ui_material_nodes<M: UiMaterial>(
materials: Extract<Res<Assets<M>>>, materials: Extract<Res<Assets<M>>>,
default_ui_camera: Extract<DefaultUiCamera>, default_ui_camera: Extract<DefaultUiCamera>,
uinode_query: Extract< uinode_query: Extract<
Query< Query<(
( Entity,
Entity, &Node,
&Node, &GlobalTransform,
&GlobalTransform, &MaterialNode<M>,
&UiMaterialHandle<M>, &ViewVisibility,
&ViewVisibility, Option<&CalculatedClip>,
Option<&CalculatedClip>, Option<&TargetCamera>,
Option<&TargetCamera>, )>,
),
Without<BackgroundColor>,
>,
>, >,
render_entity_lookup: Extract<Query<RenderEntity>>, render_entity_lookup: Extract<Query<RenderEntity>>,
) { ) {
@ -652,7 +649,7 @@ pub fn queue_ui_material_nodes<M: UiMaterial>(
pipeline, pipeline,
entity: (*entity, extracted_uinode.main_entity), entity: (*entity, extracted_uinode.main_entity),
sort_key: ( sort_key: (
FloatOrd(extracted_uinode.stack_index as f32), FloatOrd(extracted_uinode.stack_index as f32 + stack_z_offsets::MATERIAL),
entity.index(), entity.index(),
), ),
batch_range: 0..0, batch_range: 0..0,

31
crates/bevy_ui/src/ui_material.rs
View file

@ -1,5 +1,6 @@
use core::hash::Hash; use core::hash::Hash;
use crate::Node;
use bevy_asset::{Asset, AssetId, Handle}; use bevy_asset::{Asset, AssetId, Handle};
use bevy_derive::{Deref, DerefMut}; use bevy_derive::{Deref, DerefMut};
use bevy_ecs::{component::Component, reflect::ReflectComponent}; use bevy_ecs::{component::Component, reflect::ReflectComponent};
@ -10,7 +11,7 @@ use bevy_render::{
}; };
use derive_more::derive::From; use derive_more::derive::From;
/// Materials are used alongside [`UiMaterialPlugin`](crate::UiMaterialPlugin) and [`MaterialNodeBundle`](crate::prelude::MaterialNodeBundle) /// Materials are used alongside [`UiMaterialPlugin`](crate::UiMaterialPlugin) and [`MaterialNode`]
/// to spawn entities that are rendered with a specific [`UiMaterial`] type. They serve as an easy to use high level /// to spawn entities that are rendered with a specific [`UiMaterial`] type. They serve as an easy to use high level
/// way to render `Node` entities with custom shader logic. /// way to render `Node` entities with custom shader logic.
/// ///
@ -58,17 +59,16 @@ use derive_more::derive::From;
/// ///
/// // Spawn an entity using `CustomMaterial`. /// // Spawn an entity using `CustomMaterial`.
/// fn setup(mut commands: Commands, mut materials: ResMut<Assets<CustomMaterial>>, asset_server: Res<AssetServer>) { /// fn setup(mut commands: Commands, mut materials: ResMut<Assets<CustomMaterial>>, asset_server: Res<AssetServer>) {
/// commands.spawn(MaterialNodeBundle { /// commands.spawn((
/// style: Style { /// MaterialNode(materials.add(CustomMaterial {
/// width: Val::Percent(100.0),
/// ..Default::default()
/// },
/// material: UiMaterialHandle(materials.add(CustomMaterial {
/// color: LinearRgba::RED, /// color: LinearRgba::RED,
/// color_texture: asset_server.load("some_image.png"), /// color_texture: asset_server.load("some_image.png"),
/// })), /// })),
/// ..Default::default() /// Style {
/// }); /// width: Val::Percent(100.0),
/// ..Default::default()
/// },
/// ));
/// } /// }
/// ``` /// ```
/// In WGSL shaders, the material's binding would look like this: /// In WGSL shaders, the material's binding would look like this:
@ -157,22 +157,23 @@ where
Component, Clone, Debug, Deref, DerefMut, Reflect, PartialEq, Eq, ExtractComponent, From, Component, Clone, Debug, Deref, DerefMut, Reflect, PartialEq, Eq, ExtractComponent, From,
)] )]
#[reflect(Component, Default)] #[reflect(Component, Default)]
pub struct UiMaterialHandle<M: UiMaterial>(pub Handle<M>); #[require(Node)]
pub struct MaterialNode<M: UiMaterial>(pub Handle<M>);
impl<M: UiMaterial> Default for UiMaterialHandle<M> { impl<M: UiMaterial> Default for MaterialNode<M> {
fn default() -> Self { fn default() -> Self {
Self(Handle::default()) Self(Handle::default())
} }
} }
impl<M: UiMaterial> From<UiMaterialHandle<M>> for AssetId<M> { impl<M: UiMaterial> From<MaterialNode<M>> for AssetId<M> {
fn from(material: UiMaterialHandle<M>) -> Self { fn from(material: MaterialNode<M>) -> Self {
material.id() material.id()
} }
} }
impl<M: UiMaterial> From<&UiMaterialHandle<M>> for AssetId<M> { impl<M: UiMaterial> From<&MaterialNode<M>> for AssetId<M> {
fn from(material: &UiMaterialHandle<M>) -> Self { fn from(material: &MaterialNode<M>) -> Self {
material.id() material.id()
} }
} }

69
crates/bevy_ui/src/ui_node.rs
View file

@ -1,4 +1,4 @@
use crate::{UiRect, Val}; use crate::{widget::UiImageSize, ContentSize, FocusPolicy, UiRect, Val};
use bevy_asset::Handle; use bevy_asset::Handle;
use bevy_color::Color; use bevy_color::Color;
use bevy_ecs::{prelude::*, system::SystemParam}; use bevy_ecs::{prelude::*, system::SystemParam};
@ -7,8 +7,10 @@ use bevy_reflect::prelude::*;
use bevy_render::{ use bevy_render::{
camera::{Camera, RenderTarget}, camera::{Camera, RenderTarget},
texture::{Image, TRANSPARENT_IMAGE_HANDLE}, texture::{Image, TRANSPARENT_IMAGE_HANDLE},
view::Visibility,
}; };
use bevy_sprite::BorderRect; use bevy_sprite::BorderRect;
use bevy_transform::components::Transform;
use bevy_utils::warn_once; use bevy_utils::warn_once;
use bevy_window::{PrimaryWindow, WindowRef}; use bevy_window::{PrimaryWindow, WindowRef};
use core::num::NonZero; use core::num::NonZero;
@ -25,6 +27,18 @@ use smallvec::SmallVec;
/// - [`Interaction`](crate::Interaction) to obtain the interaction state of this node /// - [`Interaction`](crate::Interaction) to obtain the interaction state of this node
#[derive(Component, Debug, Copy, Clone, PartialEq, Reflect)] #[derive(Component, Debug, Copy, Clone, PartialEq, Reflect)]
#[reflect(Component, Default, Debug)] #[reflect(Component, Default, Debug)]
#[require(
Style,
BackgroundColor,
BorderColor,
BorderRadius,
ContentSize,
FocusPolicy,
ScrollPosition,
Transform,
Visibility,
ZIndex
)]
pub struct Node { pub struct Node {
/// The order of the node in the UI layout. /// The order of the node in the UI layout.
/// Nodes with a higher stack index are drawn on top of and receive interactions before nodes with lower stack indices. /// Nodes with a higher stack index are drawn on top of and receive interactions before nodes with lower stack indices.
@ -883,7 +897,7 @@ pub enum Display {
/// Use no layout, don't render this node and its children. /// Use no layout, don't render this node and its children.
/// ///
/// If you want to hide a node and its children, /// If you want to hide a node and its children,
/// but keep its layout in place, set its [`Visibility`](bevy_render::view::Visibility) component instead. /// but keep its layout in place, set its [`Visibility`] component instead.
None, None,
} }
@ -1955,22 +1969,20 @@ impl Default for BorderColor {
/// The [`Outline`] component adds an outline outside the edge of a UI node. /// The [`Outline`] component adds an outline outside the edge of a UI node.
/// Outlines do not take up space in the layout. /// Outlines do not take up space in the layout.
/// ///
/// To add an [`Outline`] to a ui node you can spawn a `(NodeBundle, Outline)` tuple bundle: /// To add an [`Outline`] to a ui node you can spawn a `(Node, Outline)` tuple bundle:
/// ``` /// ```
/// # use bevy_ecs::prelude::*; /// # use bevy_ecs::prelude::*;
/// # use bevy_ui::prelude::*; /// # use bevy_ui::prelude::*;
/// # use bevy_color::palettes::basic::{RED, BLUE}; /// # use bevy_color::palettes::basic::{RED, BLUE};
/// fn setup_ui(mut commands: Commands) { /// fn setup_ui(mut commands: Commands) {
/// commands.spawn(( /// commands.spawn((
/// NodeBundle { /// Node::default(),
/// style: Style { /// Style {
/// width: Val::Px(100.), /// width: Val::Px(100.),
/// height: Val::Px(100.), /// height: Val::Px(100.),
/// ..Default::default()
/// },
/// background_color: BLUE.into(),
/// ..Default::default() /// ..Default::default()
/// }, /// },
/// BackgroundColor(BLUE.into()),
/// Outline::new(Val::Px(10.), Val::ZERO, RED.into()) /// Outline::new(Val::Px(10.), Val::ZERO, RED.into())
/// )); /// ));
/// } /// }
@ -2032,6 +2044,7 @@ impl Outline {
/// The 2D texture displayed for this UI node /// The 2D texture displayed for this UI node
#[derive(Component, Clone, Debug, Reflect)] #[derive(Component, Clone, Debug, Reflect)]
#[reflect(Component, Default, Debug)] #[reflect(Component, Default, Debug)]
#[require(Node, UiImageSize)]
pub struct UiImage { pub struct UiImage {
/// The tint color used to draw the image. /// The tint color used to draw the image.
/// ///
@ -2173,32 +2186,30 @@ pub struct GlobalZIndex(pub i32);
/// dimension, either width or height. /// dimension, either width or height.
/// ///
/// # Example /// # Example
/// ``` /// ```rust
/// # use bevy_ecs::prelude::*; /// # use bevy_ecs::prelude::*;
/// # use bevy_ui::prelude::*; /// # use bevy_ui::prelude::*;
/// # use bevy_color::palettes::basic::{BLUE}; /// # use bevy_color::palettes::basic::{BLUE};
/// fn setup_ui(mut commands: Commands) { /// fn setup_ui(mut commands: Commands) {
/// commands.spawn(( /// commands.spawn((
/// NodeBundle { /// Node::default(),
/// style: Style { /// Style {
/// width: Val::Px(100.), /// width: Val::Px(100.),
/// height: Val::Px(100.), /// height: Val::Px(100.),
/// border: UiRect::all(Val::Px(2.)), /// border: UiRect::all(Val::Px(2.)),
/// ..Default::default()
/// },
/// background_color: BLUE.into(),
/// border_radius: BorderRadius::new(
/// // top left
/// Val::Px(10.),
/// // top right
/// Val::Px(20.),
/// // bottom right
/// Val::Px(30.),
/// // bottom left
/// Val::Px(40.),
/// ),
/// ..Default::default() /// ..Default::default()
/// }, /// },
/// BackgroundColor(BLUE.into()),
/// BorderRadius::new(
/// // top left
/// Val::Px(10.),
/// // top right
/// Val::Px(20.),
/// // bottom right
/// Val::Px(30.),
/// // bottom left
/// Val::Px(40.),
/// ),
/// )); /// ));
/// } /// }
/// ``` /// ```

2
crates/bevy_ui/src/widget/button.rs
View file

@ -1,7 +1,9 @@
use crate::{FocusPolicy, Interaction, Node};
use bevy_ecs::{prelude::Component, reflect::ReflectComponent}; use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
use bevy_reflect::{std_traits::ReflectDefault, Reflect}; use bevy_reflect::{std_traits::ReflectDefault, Reflect};
/// Marker struct for buttons /// Marker struct for buttons
#[derive(Component, Debug, Default, Clone, Copy, PartialEq, Eq, Reflect)] #[derive(Component, Debug, Default, Clone, Copy, PartialEq, Eq, Reflect)]
#[reflect(Component, Default, Debug, PartialEq)] #[reflect(Component, Default, Debug, PartialEq)]
#[require(Node, FocusPolicy(|| FocusPolicy::Block), Interaction)]
pub struct Button; pub struct Button;

23
crates/bevy_ui/src/widget/text.rs
View file

@ -1,6 +1,6 @@
use crate::{ use crate::{
ContentSize, DefaultUiCamera, FixedMeasure, FocusPolicy, Measure, MeasureArgs, Node, ContentSize, DefaultUiCamera, FixedMeasure, Measure, MeasureArgs, Node, NodeMeasure,
NodeMeasure, Style, TargetCamera, UiScale, ZIndex, TargetCamera, UiScale,
}; };
use bevy_asset::Assets; use bevy_asset::Assets;
use bevy_color::Color; use bevy_color::Color;
@ -16,14 +16,13 @@ use bevy_ecs::{
}; };
use bevy_math::Vec2; use bevy_math::Vec2;
use bevy_reflect::{std_traits::ReflectDefault, Reflect}; use bevy_reflect::{std_traits::ReflectDefault, Reflect};
use bevy_render::{camera::Camera, texture::Image, view::Visibility}; use bevy_render::{camera::Camera, texture::Image};
use bevy_sprite::TextureAtlasLayout; use bevy_sprite::TextureAtlasLayout;
use bevy_text::{ use bevy_text::{
scale_value, ComputedTextBlock, CosmicFontSystem, Font, FontAtlasSets, LineBreak, SwashCache, scale_value, ComputedTextBlock, CosmicFontSystem, Font, FontAtlasSets, LineBreak, SwashCache,
TextBounds, TextColor, TextError, TextFont, TextLayout, TextLayoutInfo, TextMeasureInfo, TextBounds, TextColor, TextError, TextFont, TextLayout, TextLayoutInfo, TextMeasureInfo,
TextPipeline, TextReader, TextRoot, TextSpanAccess, TextWriter, YAxisOrientation, TextPipeline, TextReader, TextRoot, TextSpanAccess, TextWriter, YAxisOrientation,
}; };
use bevy_transform::components::Transform;
use bevy_utils::{tracing::error, Entry}; use bevy_utils::{tracing::error, Entry};
use taffy::style::AvailableSpace; use taffy::style::AvailableSpace;
@ -67,7 +66,7 @@ pub struct TextBundle {}
/// The string in this component is the first 'text span' in a hierarchy of text spans that are collected into /// The string in this component is the first 'text span' in a hierarchy of text spans that are collected into
/// a [`ComputedTextBlock`]. See [`TextSpan`](bevy_text::TextSpan) for the component used by children of entities with [`Text`]. /// a [`ComputedTextBlock`]. See [`TextSpan`](bevy_text::TextSpan) for the component used by children of entities with [`Text`].
/// ///
/// Note that [`Transform`] on this entity is managed automatically by the UI layout system. /// Note that [`Transform`](bevy_transform::components::Transform) on this entity is managed automatically by the UI layout system.
/// ///
/// ///
/// ``` /// ```
@ -103,19 +102,7 @@ pub struct TextBundle {}
/// ``` /// ```
#[derive(Component, Debug, Default, Clone, Deref, DerefMut, Reflect)] #[derive(Component, Debug, Default, Clone, Deref, DerefMut, Reflect)]
#[reflect(Component, Default, Debug)] #[reflect(Component, Default, Debug)]
#[require( #[require(TextLayout, TextFont, TextColor, TextNodeFlags, Node)]
TextLayout,
TextFont,
TextColor,
TextNodeFlags,
Node,
Style, // TODO: Remove when Node uses required components.
ContentSize, // TODO: Remove when Node uses required components.
FocusPolicy, // TODO: Remove when Node uses required components.
ZIndex, // TODO: Remove when Node uses required components.
Visibility, // TODO: Remove when Node uses required components.
Transform // TODO: Remove when Node uses required components.
)]
pub struct Text(pub String); pub struct Text(pub String);
impl Text { impl Text {

9
examples/3d/auto_exposure.rs
View file

@ -114,18 +114,17 @@ fn setup(
Transform::from_xyz(0.0, 0.0, 0.0), Transform::from_xyz(0.0, 0.0, 0.0),
)); ));
commands.spawn(ImageBundle { commands.spawn((
image: UiImage { UiImage {
texture: metering_mask, texture: metering_mask,
..default() ..default()
}, },
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
..default() ..default()
}, },
..default() ));
});
let text_style = TextFont::default(); let text_style = TextFont::default();

8
examples/3d/blend_modes.rs
View file

@ -192,11 +192,9 @@ fn setup(
let mut label = |entity: Entity, label: &str| { let mut label = |entity: Entity, label: &str| {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default()
},
..default() ..default()
}, },
ExampleLabel { entity }, ExampleLabel { entity },

89
examples/3d/color_grading.rs
View file

@ -138,8 +138,9 @@ fn setup(
fn add_buttons(commands: &mut Commands, font: &Handle<Font>, color_grading: &ColorGrading) { fn add_buttons(commands: &mut Commands, font: &Handle<Font>, color_grading: &ColorGrading) {
// Spawn the parent node that contains all the buttons. // Spawn the parent node that contains all the buttons.
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
row_gap: Val::Px(6.0), row_gap: Val::Px(6.0),
@ -147,8 +148,7 @@ fn add_buttons(commands: &mut Commands, font: &Handle<Font>, color_grading: &Col
bottom: Val::Px(12.0), bottom: Val::Px(12.0),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Create the first row, which contains the global controls. // Create the first row, which contains the global controls.
add_buttons_for_global_controls(parent, color_grading, font); add_buttons_for_global_controls(parent, color_grading, font);
@ -172,36 +172,31 @@ fn add_buttons_for_global_controls(
font: &Handle<Font>, font: &Handle<Font>,
) { ) {
// Add the parent node for the row. // Add the parent node for the row.
parent parent.spawn(Node::default()).with_children(|parent| {
.spawn(NodeBundle { // Add some placeholder text to fill this column.
style: Style::default(), parent.spawn((
..default() Node::default(),
}) Style {
.with_children(|parent| { width: Val::Px(125.0),
// Add some placeholder text to fill this column.
parent.spawn(NodeBundle {
style: Style {
width: Val::Px(125.0),
..default()
},
..default() ..default()
}); },
));
// Add each global color grading option button. // Add each global color grading option button.
for option in [ for option in [
SelectedGlobalColorGradingOption::Exposure, SelectedGlobalColorGradingOption::Exposure,
SelectedGlobalColorGradingOption::Temperature, SelectedGlobalColorGradingOption::Temperature,
SelectedGlobalColorGradingOption::Tint, SelectedGlobalColorGradingOption::Tint,
SelectedGlobalColorGradingOption::Hue, SelectedGlobalColorGradingOption::Hue,
] { ] {
add_button_for_value( add_button_for_value(
parent, parent,
SelectedColorGradingOption::Global(option), SelectedColorGradingOption::Global(option),
color_grading, color_grading,
font, font,
); );
} }
}); });
} }
/// Adds the buttons that control color grading for individual sections /// Adds the buttons that control color grading for individual sections
@ -214,13 +209,13 @@ fn add_buttons_for_section(
) { ) {
// Spawn the row container. // Spawn the row container.
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Spawn the label ("Highlights", etc.) // Spawn the label ("Highlights", etc.)
add_text(parent, &section.to_string(), font, Color::WHITE).insert(Style { add_text(parent, &section.to_string(), font, Color::WHITE).insert(Style {
@ -255,8 +250,9 @@ fn add_button_for_value(
) { ) {
// Add the button node. // Add the button node.
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
border: UiRect::all(Val::Px(1.0)), border: UiRect::all(Val::Px(1.0)),
width: Val::Px(200.0), width: Val::Px(200.0),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
@ -265,11 +261,10 @@ fn add_button_for_value(
margin: UiRect::right(Val::Px(12.0)), margin: UiRect::right(Val::Px(12.0)),
..default() ..default()
}, },
border_color: BorderColor(Color::WHITE), BorderColor(Color::WHITE),
border_radius: BorderRadius::MAX, BorderRadius::MAX,
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..default() ))
})
.insert(ColorGradingOptionWidget { .insert(ColorGradingOptionWidget {
widget_type: ColorGradingOptionWidgetType::Button, widget_type: ColorGradingOptionWidgetType::Button,
option, option,
@ -286,13 +281,13 @@ fn add_button_for_value(
}); });
// Add a spacer. // Add a spacer.
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
flex_grow: 1.0, flex_grow: 1.0,
..default() ..default()
}, },
..default() ));
});
// Add the value text. // Add the value text.
add_text( add_text(

5
examples/3d/pcss.rs
View file

@ -209,10 +209,7 @@ fn spawn_gltf_scene(commands: &mut Commands, asset_server: &AssetServer) {
/// Spawns all the buttons at the bottom of the screen. /// Spawns all the buttons at the bottom of the screen.
fn spawn_buttons(commands: &mut Commands) { fn spawn_buttons(commands: &mut Commands) {
commands commands
.spawn(NodeBundle { .spawn((Node::default(), widgets::main_ui_style()))
style: widgets::main_ui_style(),
..default()
})
.with_children(|parent| { .with_children(|parent| {
widgets::spawn_option_buttons( widgets::spawn_option_buttons(
parent, parent,

12
examples/3d/shadow_biases.rs
View file

@ -98,15 +98,13 @@ fn setup(
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
padding: UiRect::all(Val::Px(5.0)), padding: UiRect::all(Val::Px(5.0)),
..default()
},
background_color: Color::BLACK.with_alpha(0.75).into(),
..default() ..default()
}, },
BackgroundColor(Color::BLACK.with_alpha(0.75)),
GlobalZIndex(i32::MAX), GlobalZIndex(i32::MAX),
)) ))
.with_children(|p| { .with_children(|p| {

38
examples/3d/split_screen.rs
View file

@ -85,12 +85,10 @@ fn setup(
commands commands
.spawn(( .spawn((
TargetCamera(camera), TargetCamera(camera),
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
..default()
},
..default() ..default()
}, },
)) ))
@ -110,8 +108,9 @@ fn setup(
fn buttons_panel(parent: &mut ChildBuilder) { fn buttons_panel(parent: &mut ChildBuilder) {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
@ -122,8 +121,7 @@ fn setup(
padding: UiRect::all(Val::Px(20.)), padding: UiRect::all(Val::Px(20.)),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
rotate_button(parent, "<", Direction::Left); rotate_button(parent, "<", Direction::Left);
rotate_button(parent, ">", Direction::Right); rotate_button(parent, ">", Direction::Right);
@ -134,19 +132,17 @@ fn setup(
parent parent
.spawn(( .spawn((
RotateCamera(direction), RotateCamera(direction),
ButtonBundle { Button,
style: Style { Style {
width: Val::Px(40.), width: Val::Px(40.),
height: Val::Px(40.), height: Val::Px(40.),
border: UiRect::all(Val::Px(2.)), border: UiRect::all(Val::Px(2.)),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default()
},
border_color: Color::WHITE.into(),
background_color: Color::srgb(0.25, 0.25, 0.25).into(),
..default() ..default()
}, },
BorderColor(Color::WHITE),
BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
)) ))
.with_children(|parent| { .with_children(|parent| {
parent.spawn(Text::new(caption)); parent.spawn(Text::new(caption));

8
examples/animation/animated_ui.rs
View file

@ -150,9 +150,10 @@ fn setup(
// contains the `AnimationPlayer`, as well as a child node that contains the // contains the `AnimationPlayer`, as well as a child node that contains the
// text to be animated. // text to be animated.
commands commands
.spawn(NodeBundle { .spawn((
Node::default(),
// Cover the whole screen, and center contents. // Cover the whole screen, and center contents.
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
top: Val::Px(0.0), top: Val::Px(0.0),
left: Val::Px(0.0), left: Val::Px(0.0),
@ -162,8 +163,7 @@ fn setup(
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.insert(animation_player) .insert(animation_player)
.insert(AnimationGraphHandle(animation_graph)) .insert(AnimationGraphHandle(animation_graph))
.with_children(|builder| { .with_children(|builder| {

56
examples/animation/animation_graph.rs
View file

@ -283,22 +283,20 @@ fn setup_node_rects(commands: &mut Commands) {
let container = { let container = {
let mut container = commands.spawn(( let mut container = commands.spawn((
NodeBundle { Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
bottom: Val::Px(node_rect.bottom), bottom: Val::Px(node_rect.bottom),
left: Val::Px(node_rect.left), left: Val::Px(node_rect.left),
height: Val::Px(node_rect.height), height: Val::Px(node_rect.height),
width: Val::Px(node_rect.width), width: Val::Px(node_rect.width),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_items: JustifyItems::Center, justify_items: JustifyItems::Center,
align_content: AlignContent::Center, align_content: AlignContent::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default()
},
border_color: WHITE.into(),
..default() ..default()
}, },
BorderColor(WHITE.into()),
Outline::new(Val::Px(1.), Val::ZERO, Color::WHITE), Outline::new(Val::Px(1.), Val::ZERO, Color::WHITE),
)); ));
@ -316,8 +314,9 @@ fn setup_node_rects(commands: &mut Commands) {
// Create the background color. // Create the background color.
if let NodeType::Clip(_) = node_type { if let NodeType::Clip(_) = node_type {
let background = commands let background = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
top: Val::Px(0.), top: Val::Px(0.),
left: Val::Px(0.), left: Val::Px(0.),
@ -325,9 +324,8 @@ fn setup_node_rects(commands: &mut Commands) {
width: Val::Px(node_rect.width), width: Val::Px(node_rect.width),
..default() ..default()
}, },
background_color: DARK_GREEN.into(), BackgroundColor(DARK_GREEN.into()),
..default() ))
})
.id(); .id();
commands.entity(container).add_child(background); commands.entity(container).add_child(background);
@ -343,8 +341,9 @@ fn setup_node_rects(commands: &mut Commands) {
/// vertical and horizontal lines, respectively. /// vertical and horizontal lines, respectively.
fn setup_node_lines(commands: &mut Commands) { fn setup_node_lines(commands: &mut Commands) {
for line in &HORIZONTAL_LINES { for line in &HORIZONTAL_LINES {
commands.spawn(NodeBundle { commands.spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
bottom: Val::Px(line.bottom), bottom: Val::Px(line.bottom),
left: Val::Px(line.left), left: Val::Px(line.left),
@ -353,14 +352,14 @@ fn setup_node_lines(commands: &mut Commands) {
border: UiRect::bottom(Val::Px(1.0)), border: UiRect::bottom(Val::Px(1.0)),
..default() ..default()
}, },
border_color: WHITE.into(), BorderColor(WHITE.into()),
..default() ));
});
} }
for line in &VERTICAL_LINES { for line in &VERTICAL_LINES {
commands.spawn(NodeBundle { commands.spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
bottom: Val::Px(line.bottom), bottom: Val::Px(line.bottom),
left: Val::Px(line.left), left: Val::Px(line.left),
@ -369,9 +368,8 @@ fn setup_node_lines(commands: &mut Commands) {
border: UiRect::left(Val::Px(1.0)), border: UiRect::left(Val::Px(1.0)),
..default() ..default()
}, },
border_color: WHITE.into(), BorderColor(WHITE.into()),
..default() ));
});
} }
} }

70
examples/animation/animation_masks.rs
View file

@ -168,8 +168,9 @@ fn setup_ui(mut commands: Commands) {
// Add the buttons that allow the user to toggle mask groups on and off. // Add the buttons that allow the user to toggle mask groups on and off.
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
row_gap: Val::Px(6.0), row_gap: Val::Px(6.0),
@ -177,8 +178,7 @@ fn setup_ui(mut commands: Commands) {
bottom: Val::Px(12.0), bottom: Val::Px(12.0),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
let row_style = Style { let row_style = Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
@ -189,10 +189,7 @@ fn setup_ui(mut commands: Commands) {
add_mask_group_control(parent, "Head", Val::Auto, MASK_GROUP_HEAD); add_mask_group_control(parent, "Head", Val::Auto, MASK_GROUP_HEAD);
parent parent
.spawn(NodeBundle { .spawn((Node::default(), row_style.clone()))
style: row_style.clone(),
..default()
})
.with_children(|parent| { .with_children(|parent| {
add_mask_group_control( add_mask_group_control(
parent, parent,
@ -209,10 +206,7 @@ fn setup_ui(mut commands: Commands) {
}); });
parent parent
.spawn(NodeBundle { .spawn((Node::default(), row_style))
style: row_style,
..default()
})
.with_children(|parent| { .with_children(|parent| {
add_mask_group_control( add_mask_group_control(
parent, parent,
@ -251,8 +245,9 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
); );
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
border: UiRect::all(Val::Px(1.0)), border: UiRect::all(Val::Px(1.0)),
width, width,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -262,15 +257,15 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
margin: UiRect::ZERO, margin: UiRect::ZERO,
..default() ..default()
}, },
border_color: BorderColor(Color::WHITE), BorderColor(Color::WHITE),
border_radius: BorderRadius::all(Val::Px(3.0)), BorderRadius::all(Val::Px(3.0)),
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
border: UiRect::ZERO, border: UiRect::ZERO,
width: Val::Percent(100.0), width: Val::Percent(100.0),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
@ -279,9 +274,8 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
margin: UiRect::ZERO, margin: UiRect::ZERO,
..default() ..default()
}, },
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..default() ))
})
.with_child(( .with_child((
Text::new(label), Text::new(label),
label_text_style.clone(), label_text_style.clone(),
@ -292,8 +286,9 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
)); ));
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
@ -301,9 +296,8 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
border: UiRect::top(Val::Px(1.0)), border: UiRect::top(Val::Px(1.0)),
..default() ..default()
}, },
border_color: BorderColor(Color::WHITE), BorderColor(Color::WHITE),
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
for (index, label) in [ for (index, label) in [
AnimationLabel::Run, AnimationLabel::Run,
@ -315,13 +309,14 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
.enumerate() .enumerate()
{ {
builder builder
.spawn(ButtonBundle { .spawn((
background_color: if index > 0 { Button,
Color::BLACK.into() BackgroundColor(if index > 0 {
Color::BLACK
} else { } else {
Color::WHITE.into() Color::WHITE
}, }),
style: Style { Style {
flex_grow: 1.0, flex_grow: 1.0,
border: if index > 0 { border: if index > 0 {
UiRect::left(Val::Px(1.0)) UiRect::left(Val::Px(1.0))
@ -330,9 +325,8 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
}, },
..default() ..default()
}, },
border_color: BorderColor(Color::WHITE), BorderColor(Color::WHITE),
..default() ))
})
.with_child(( .with_child((
Text(format!("{:?}", label)), Text(format!("{:?}", label)),
if index > 0 { if index > 0 {

14
examples/app/log_layers_ecs.rs
View file

@ -126,14 +126,12 @@ fn setup(mut commands: Commands) {
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands.spawn(( commands.spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Vw(100.0), width: Val::Vw(100.0),
height: Val::Vh(100.0), height: Val::Vh(100.0),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
padding: UiRect::all(Val::Px(12.)), padding: UiRect::all(Val::Px(12.)),
..default()
},
..default() ..default()
}, },
LogViewerRoot, LogViewerRoot,

8
examples/camera/first_person_view_model.rs
View file

@ -192,15 +192,15 @@ fn spawn_lights(mut commands: Commands) {
fn spawn_text(mut commands: Commands) { fn spawn_text(mut commands: Commands) {
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
bottom: Val::Px(12.0), bottom: Val::Px(12.0),
left: Val::Px(12.0), left: Val::Px(12.0),
..default() ..default()
}, },
..default() ))
})
.with_child(Text::new(concat!( .with_child(Text::new(concat!(
"Move the camera with your mouse.\n", "Move the camera with your mouse.\n",
"Press arrow up to decrease the FOV of the world model.\n", "Press arrow up to decrease the FOV of the world model.\n",

8
examples/games/alien_cake_addict.rs
View file

@ -393,15 +393,15 @@ fn gameover_keyboard(
// display the number of cake eaten before losing // display the number of cake eaten before losing
fn display_score(mut commands: Commands, game: Res<Game>) { fn display_score(mut commands: Commands, game: Res<Game>) {
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_child(( .with_child((
Text::new(format!("Cake eaten: {}", game.cake_eaten)), Text::new(format!("Cake eaten: {}", game.cake_eaten)),
TextFont { TextFont {

263
examples/games/game_menu.rs
View file

@ -75,28 +75,25 @@ mod splash {
// Display the logo // Display the logo
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
..default()
},
..default() ..default()
}, },
OnSplashScreen, OnSplashScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent.spawn(ImageBundle { parent.spawn((
style: Style { UiImage::new(icon),
Style {
// This will set the logo to be 200px wide, and auto adjust its height // This will set the logo to be 200px wide, and auto adjust its height
width: Val::Px(200.0), width: Val::Px(200.0),
..default() ..default()
}, },
image: UiImage::new(icon), ));
..default()
});
}); });
// Insert the timer as a resource // Insert the timer as a resource
commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, TimerMode::Once))); commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, TimerMode::Once)));
@ -144,24 +141,23 @@ mod game {
) { ) {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
// center children // center children
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default()
},
..default() ..default()
}, },
OnGameScreen, OnGameScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
// First create a `NodeBundle` for centering what we want to display // First create a `Node` and `Style` for centering what we want to display
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// This will display its children in a column, from top to bottom // This will display its children in a column, from top to bottom
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
// `align_items` will align children on the cross axis. Here the main axis is // `align_items` will align children on the cross axis. Here the main axis is
@ -170,9 +166,8 @@ mod game {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..default() ))
})
.with_children(|p| { .with_children(|p| {
p.spawn(( p.spawn((
Text::new("Will be back to the menu shortly..."), Text::new("Will be back to the menu shortly..."),
@ -405,29 +400,27 @@ mod menu {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default()
},
..default() ..default()
}, },
OnMainMenuScreen, OnMainMenuScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: CRIMSON.into(), BackgroundColor(CRIMSON.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Display the game name // Display the game name
parent.spawn(( parent.spawn((
@ -449,20 +442,14 @@ mod menu {
// - quit // - quit
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: button_style.clone(), button_style.clone(),
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default()
},
MenuButtonAction::Play, MenuButtonAction::Play,
)) ))
.with_children(|parent| { .with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/right.png"); let icon = asset_server.load("textures/Game Icons/right.png");
parent.spawn(ImageBundle { parent.spawn((UiImage::new(icon), button_icon_style.clone()));
style: button_icon_style.clone(),
image: UiImage::new(icon),
..default()
});
parent.spawn(( parent.spawn((
Text::new("New Game"), Text::new("New Game"),
button_text_font.clone(), button_text_font.clone(),
@ -471,20 +458,14 @@ mod menu {
}); });
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: button_style.clone(), button_style.clone(),
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default()
},
MenuButtonAction::Settings, MenuButtonAction::Settings,
)) ))
.with_children(|parent| { .with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/wrench.png"); let icon = asset_server.load("textures/Game Icons/wrench.png");
parent.spawn(ImageBundle { parent.spawn((UiImage::new(icon), button_icon_style.clone()));
style: button_icon_style.clone(),
image: UiImage::new(icon),
..default()
});
parent.spawn(( parent.spawn((
Text::new("Settings"), Text::new("Settings"),
button_text_font.clone(), button_text_font.clone(),
@ -493,20 +474,14 @@ mod menu {
}); });
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: button_style, button_style,
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default()
},
MenuButtonAction::Quit, MenuButtonAction::Quit,
)) ))
.with_children(|parent| { .with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/exitRight.png"); let icon = asset_server.load("textures/Game Icons/exitRight.png");
parent.spawn(ImageBundle { parent.spawn((UiImage::new(icon), button_icon_style));
style: button_icon_style,
image: UiImage::new(icon),
..default()
});
parent.spawn(( parent.spawn((
Text::new("Quit"), Text::new("Quit"),
button_text_font, button_text_font,
@ -537,29 +512,27 @@ mod menu {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default()
},
..default() ..default()
}, },
OnSettingsMenuScreen, OnSettingsMenuScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: CRIMSON.into(), BackgroundColor(CRIMSON.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
for (action, text) in [ for (action, text) in [
(MenuButtonAction::SettingsDisplay, "Display"), (MenuButtonAction::SettingsDisplay, "Display"),
@ -568,11 +541,9 @@ mod menu {
] { ] {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: button_style.clone(), button_style.clone(),
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default()
},
action, action,
)) ))
.with_children(|parent| { .with_children(|parent| {
@ -602,41 +573,39 @@ mod menu {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default()
},
..default() ..default()
}, },
OnDisplaySettingsMenuScreen, OnDisplaySettingsMenuScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: CRIMSON.into(), BackgroundColor(CRIMSON.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Create a new `NodeBundle`, this time not setting its `flex_direction`. It will // Create a new `Node` and `Style` , this time not setting its `flex_direction`. It will
// use the default value, `FlexDirection::Row`, from left to right. // use the default value, `FlexDirection::Row`, from left to right.
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: CRIMSON.into(), BackgroundColor(CRIMSON.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Display a label for the current setting // Display a label for the current setting
parent.spawn(( parent.spawn((
@ -650,15 +619,13 @@ mod menu {
DisplayQuality::High, DisplayQuality::High,
] { ] {
let mut entity = parent.spawn(( let mut entity = parent.spawn((
ButtonBundle { Button,
style: Style { Style {
width: Val::Px(150.0), width: Val::Px(150.0),
height: Val::Px(65.0), height: Val::Px(65.0),
..button_style.clone() ..button_style.clone()
},
background_color: NORMAL_BUTTON.into(),
..default()
}, },
BackgroundColor(NORMAL_BUTTON),
quality_setting, quality_setting,
)); ));
entity.with_children(|parent| { entity.with_children(|parent| {
@ -675,11 +642,9 @@ mod menu {
// Display the back button to return to the settings screen // Display the back button to return to the settings screen
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: button_style, button_style,
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default()
},
MenuButtonAction::BackToSettings, MenuButtonAction::BackToSettings,
)) ))
.with_children(|parent| { .with_children(|parent| {
@ -708,52 +673,48 @@ mod menu {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default()
},
..default() ..default()
}, },
OnSoundSettingsMenuScreen, OnSoundSettingsMenuScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: CRIMSON.into(), BackgroundColor(CRIMSON.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: CRIMSON.into(), BackgroundColor(CRIMSON.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn((Text::new("Volume"), button_text_style.clone())); parent.spawn((Text::new("Volume"), button_text_style.clone()));
for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] { for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
let mut entity = parent.spawn(( let mut entity = parent.spawn((
ButtonBundle { Button,
style: Style { Style {
width: Val::Px(30.0), width: Val::Px(30.0),
height: Val::Px(65.0), height: Val::Px(65.0),
..button_style.clone() ..button_style.clone()
},
background_color: NORMAL_BUTTON.into(),
..default()
}, },
BackgroundColor(NORMAL_BUTTON),
Volume(volume_setting), Volume(volume_setting),
)); ));
if *volume == Volume(volume_setting) { if *volume == Volume(volume_setting) {
@ -763,11 +724,9 @@ mod menu {
}); });
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: button_style, button_style,
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default()
},
MenuButtonAction::BackToSettings, MenuButtonAction::BackToSettings,
)) ))
.with_child((Text::new("Back"), button_text_style)); .with_child((Text::new("Back"), button_text_style));

26
examples/games/loading_screen.rs
View file

@ -82,15 +82,15 @@ fn setup(mut commands: Commands) {
..default() ..default()
}; };
commands commands
.spawn(NodeBundle { .spawn((
background_color: BackgroundColor(Color::NONE), Node::default(),
style: Style { BackgroundColor(Color::NONE),
Style {
justify_self: JustifySelf::Center, justify_self: JustifySelf::Center,
align_self: AlignSelf::FlexEnd, align_self: AlignSelf::FlexEnd,
..default() ..default()
}, },
..default() ))
})
.with_child((Text::new("Press 1 or 2 to load a new scene."), text_style)); .with_child((Text::new("Press 1 or 2 to load a new scene."), text_style));
} }
@ -257,15 +257,13 @@ fn load_loading_screen(mut commands: Commands) {
// Spawn the UI that will make up the loading screen. // Spawn the UI that will make up the loading screen.
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
background_color: BackgroundColor(Color::BLACK), BackgroundColor(Color::BLACK),
style: Style { Style {
height: Val::Percent(100.0), height: Val::Percent(100.0),
width: Val::Percent(100.0), width: Val::Percent(100.0),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default()
},
..default() ..default()
}, },
LoadingScreen, LoadingScreen,

22
examples/helpers/widgets.rs
View file

@ -58,8 +58,9 @@ pub fn spawn_option_button<T>(
// Add the button node. // Add the button node.
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
border: UiRect::all(Val::Px(1.0)).with_left(if is_first { border: UiRect::all(Val::Px(1.0)).with_left(if is_first {
Val::Px(1.0) Val::Px(1.0)
} else { } else {
@ -70,13 +71,12 @@ pub fn spawn_option_button<T>(
padding: UiRect::axes(Val::Px(12.0), Val::Px(6.0)), padding: UiRect::axes(Val::Px(12.0), Val::Px(6.0)),
..default() ..default()
}, },
border_color: BorderColor(Color::WHITE), BorderColor(Color::WHITE),
border_radius: BorderRadius::ZERO BorderRadius::ZERO
.with_left(if is_first { Val::Px(6.0) } else { Val::Px(0.0) }) .with_left(if is_first { Val::Px(6.0) } else { Val::Px(0.0) })
.with_right(if is_last { Val::Px(6.0) } else { Val::Px(0.0) }), .with_right(if is_last { Val::Px(6.0) } else { Val::Px(0.0) }),
background_color: BackgroundColor(bg_color), BackgroundColor(bg_color),
..default() ))
})
.insert(RadioButton) .insert(RadioButton)
.insert(WidgetClickSender(option_value.clone())) .insert(WidgetClickSender(option_value.clone()))
.with_children(|parent| { .with_children(|parent| {
@ -97,13 +97,13 @@ where
{ {
// Add the parent node for the row. // Add the parent node for the row.
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
spawn_ui_text(parent, title, Color::BLACK).insert(Style { spawn_ui_text(parent, title, Color::BLACK).insert(Style {
width: Val::Px(125.0), width: Val::Px(125.0),

8
examples/math/cubic_splines.rs
View file

@ -78,8 +78,9 @@ fn setup(mut commands: Commands) {
let style = TextFont::default(); let style = TextFont::default();
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
top: Val::Px(12.0), top: Val::Px(12.0),
left: Val::Px(12.0), left: Val::Px(12.0),
@ -87,8 +88,7 @@ fn setup(mut commands: Commands) {
row_gap: Val::Px(20.0), row_gap: Val::Px(20.0),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn((Text::new(instructions_text), style.clone())); parent.spawn((Text::new(instructions_text), style.clone()));
parent.spawn((SplineModeText, Text(spline_mode_text), style.clone())); parent.spawn((SplineModeText, Text(spline_mode_text), style.clone()));

10
examples/math/render_primitives.rs
View file

@ -370,12 +370,10 @@ fn setup_text(mut commands: Commands, cameras: Query<(Entity, &Camera)>) {
commands commands
.spawn(( .spawn((
HeaderNode, HeaderNode,
NodeBundle { Node::default(),
style: Style { Style {
justify_self: JustifySelf::Center, justify_self: JustifySelf::Center,
top: Val::Px(5.0), top: Val::Px(5.0),
..Default::default()
},
..Default::default() ..Default::default()
}, },
TargetCamera(active_camera), TargetCamera(active_camera),

8
examples/mobile/src/lib.rs
View file

@ -114,8 +114,9 @@ fn setup_scene(
// Test ui // Test ui
commands commands
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
@ -124,8 +125,7 @@ fn setup_scene(
bottom: Val::Px(50.0), bottom: Val::Px(50.0),
..default() ..default()
}, },
..default() ))
})
.with_child(( .with_child((
Text::new("Test Button"), Text::new("Test Button"),
TextFont { TextFont {

8
examples/movement/physics_in_fixed_timestep.rs
View file

@ -145,15 +145,15 @@ fn spawn_player(mut commands: Commands, asset_server: Res<AssetServer>) {
/// Spawn a bit of UI text to explain how to move the player. /// Spawn a bit of UI text to explain how to move the player.
fn spawn_text(mut commands: Commands) { fn spawn_text(mut commands: Commands) {
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
bottom: Val::Px(12.0), bottom: Val::Px(12.0),
left: Val::Px(12.0), left: Val::Px(12.0),
..default() ..default()
}, },
..default() ))
})
.with_child(( .with_child((
Text::new("Move the player with WASD"), Text::new("Move the player with WASD"),
TextFont { TextFont {

163
examples/state/computed_states.rs
View file

@ -336,8 +336,9 @@ mod ui {
pub fn setup_menu(mut commands: Commands, tutorial_state: Res<State<TutorialState>>) { pub fn setup_menu(mut commands: Commands, tutorial_state: Res<State<TutorialState>>) {
let button_entity = commands let button_entity = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
@ -347,24 +348,21 @@ mod ui {
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: Style { Style {
width: Val::Px(200.), width: Val::Px(200.),
height: Val::Px(65.), height: Val::Px(65.),
// horizontally center child text // horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text // vertically center child text
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default()
},
background_color: NORMAL_BUTTON.into(),
..default() ..default()
}, },
BackgroundColor(NORMAL_BUTTON),
MenuButton::Play, MenuButton::Play,
)) ))
.with_children(|parent| { .with_children(|parent| {
@ -380,23 +378,20 @@ mod ui {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: Style { Style {
width: Val::Px(200.), width: Val::Px(200.),
height: Val::Px(65.), height: Val::Px(65.),
// horizontally center child text // horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text // vertically center child text
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default()
},
background_color: match tutorial_state.get() {
TutorialState::Active => ACTIVE_BUTTON,
TutorialState::Inactive => NORMAL_BUTTON,
}
.into(),
..default() ..default()
}, },
BackgroundColor(match tutorial_state.get() {
TutorialState::Active => ACTIVE_BUTTON,
TutorialState::Inactive => NORMAL_BUTTON,
}),
MenuButton::Tutorial, MenuButton::Tutorial,
)) ))
.with_children(|parent| { .with_children(|parent| {
@ -464,37 +459,33 @@ mod ui {
commands commands
.spawn(( .spawn((
StateScoped(IsPaused::Paused), StateScoped(IsPaused::Paused),
NodeBundle { Node::default(),
style: Style { Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default()
},
..default() ..default()
}, },
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Px(400.), width: Val::Px(400.),
height: Val::Px(400.), height: Val::Px(400.),
// horizontally center child text // horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text // vertically center child text
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default()
},
background_color: NORMAL_BUTTON.into(),
..default() ..default()
}, },
BackgroundColor(NORMAL_BUTTON),
MenuButton::Play, MenuButton::Play,
)) ))
.with_children(|parent| { .with_children(|parent| {
@ -514,18 +505,16 @@ mod ui {
commands commands
.spawn(( .spawn((
StateScoped(TurboMode), StateScoped(TurboMode),
NodeBundle { Node::default(),
style: Style { Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::Start, justify_content: JustifyContent::Start,
align_items: AlignItems::Center, align_items: AlignItems::Center,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default()
},
..default() ..default()
}, },
)) ))
@ -556,18 +545,16 @@ mod ui {
commands commands
.spawn(( .spawn((
StateScoped(Tutorial::MovementInstructions), StateScoped(Tutorial::MovementInstructions),
NodeBundle { Node::default(),
style: Style { Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::End, justify_content: JustifyContent::End,
align_items: AlignItems::Center, align_items: AlignItems::Center,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default()
},
..default() ..default()
}, },
)) ))
@ -613,18 +600,16 @@ mod ui {
commands commands
.spawn(( .spawn((
StateScoped(Tutorial::PauseInstructions), StateScoped(Tutorial::PauseInstructions),
NodeBundle { Node::default(),
style: Style { Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::End, justify_content: JustifyContent::End,
align_items: AlignItems::Center, align_items: AlignItems::Center,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
..default()
},
..default() ..default()
}, },
)) ))

18
examples/state/custom_transitions.rs
View file

@ -243,8 +243,9 @@ const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
fn setup_menu(mut commands: Commands) { fn setup_menu(mut commands: Commands) {
let button_entity = commands let button_entity = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
@ -252,12 +253,12 @@ fn setup_menu(mut commands: Commands) {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
width: Val::Px(150.), width: Val::Px(150.),
height: Val::Px(65.), height: Val::Px(65.),
// horizontally center child text // horizontally center child text
@ -266,9 +267,8 @@ fn setup_menu(mut commands: Commands) {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Play"), Text::new("Play"),

18
examples/state/states.rs
View file

@ -51,8 +51,9 @@ fn setup(mut commands: Commands) {
fn setup_menu(mut commands: Commands) { fn setup_menu(mut commands: Commands) {
let button_entity = commands let button_entity = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
@ -60,12 +61,12 @@ fn setup_menu(mut commands: Commands) {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
width: Val::Px(150.), width: Val::Px(150.),
height: Val::Px(65.), height: Val::Px(65.),
// horizontally center child text // horizontally center child text
@ -74,9 +75,8 @@ fn setup_menu(mut commands: Commands) {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Play"), Text::new("Play"),

48
examples/state/sub_states.rs
View file

@ -156,8 +156,9 @@ mod ui {
pub fn setup_menu(mut commands: Commands) { pub fn setup_menu(mut commands: Commands) {
let button_entity = commands let button_entity = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
@ -165,12 +166,12 @@ mod ui {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
width: Val::Px(150.), width: Val::Px(150.),
height: Val::Px(65.), height: Val::Px(65.),
// horizontally center child text // horizontally center child text
@ -179,9 +180,8 @@ mod ui {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Play"), Text::new("Play"),
@ -205,24 +205,23 @@ mod ui {
commands commands
.spawn(( .spawn((
StateScoped(IsPaused::Paused), StateScoped(IsPaused::Paused),
NodeBundle { Node::default(),
style: Style { Style {
// center button // center button
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
..default()
},
..default() ..default()
}, },
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(400.), width: Val::Px(400.),
height: Val::Px(400.), height: Val::Px(400.),
// horizontally center child text // horizontally center child text
@ -231,9 +230,8 @@ mod ui {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Paused"), Text::new("Paused"),

12
examples/stress_tests/bevymark.rs
View file

@ -261,15 +261,13 @@ fn setup(
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
padding: UiRect::all(Val::Px(5.0)), padding: UiRect::all(Val::Px(5.0)),
..default()
},
background_color: Color::BLACK.with_alpha(0.75).into(),
..default() ..default()
}, },
BackgroundColor(Color::BLACK.with_alpha(0.75)),
GlobalZIndex(i32::MAX), GlobalZIndex(i32::MAX),
)) ))
.with_children(|p| { .with_children(|p| {

80
examples/stress_tests/many_buttons.rs
View file

@ -138,8 +138,9 @@ fn setup_flex(mut commands: Commands, asset_server: Res<AssetServer>, args: Res<
let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8); let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8);
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
@ -147,32 +148,29 @@ fn setup_flex(mut commands: Commands, asset_server: Res<AssetServer>, args: Res<
height: Val::Percent(100.), height: Val::Percent(100.),
..default() ..default()
}, },
..default() ))
})
.with_children(|commands| { .with_children(|commands| {
for column in 0..args.buttons { for column in 0..args.buttons {
commands commands.spawn(Node::default()).with_children(|commands| {
.spawn(NodeBundle::default()) for row in 0..args.buttons {
.with_children(|commands| { let color = as_rainbow(row % column.max(1));
for row in 0..args.buttons { let border_color = Color::WHITE.with_alpha(0.5).into();
let color = as_rainbow(row % column.max(1)); spawn_button(
let border_color = Color::WHITE.with_alpha(0.5).into(); commands,
spawn_button( color,
commands, buttons_f,
color, column,
buttons_f, row,
column, !args.no_text,
row, border,
!args.no_text, border_color,
border, image
border_color, .as_ref()
image .filter(|_| (column + row) % args.image_freq == 0)
.as_ref() .cloned(),
.filter(|_| (column + row) % args.image_freq == 0) );
.cloned(), }
); });
}
});
} }
}); });
} }
@ -195,8 +193,9 @@ fn setup_grid(mut commands: Commands, asset_server: Res<AssetServer>, args: Res<
let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8); let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8);
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.0), height: Val::Percent(100.0),
@ -204,8 +203,7 @@ fn setup_grid(mut commands: Commands, asset_server: Res<AssetServer>, args: Res<
grid_template_rows: RepeatedGridTrack::flex(args.buttons as u16, 1.0), grid_template_rows: RepeatedGridTrack::flex(args.buttons as u16, 1.0),
..default() ..default()
}, },
..default() ))
})
.with_children(|commands| { .with_children(|commands| {
for column in 0..args.buttons { for column in 0..args.buttons {
for row in 0..args.buttons { for row in 0..args.buttons {
@ -246,20 +244,18 @@ fn spawn_button(
let height = Val::Vh(90.0 / buttons); let height = Val::Vh(90.0 / buttons);
let margin = UiRect::axes(width * 0.05, height * 0.05); let margin = UiRect::axes(width * 0.05, height * 0.05);
let mut builder = commands.spawn(( let mut builder = commands.spawn((
ButtonBundle { Button,
style: Style { Style {
width, width,
height, height,
margin, margin,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
border, border,
..default()
},
background_color: background_color.into(),
border_color,
..default() ..default()
}, },
BackgroundColor(background_color),
border_color,
IdleColor(background_color), IdleColor(background_color),
)); ));

16
examples/stress_tests/many_glyphs.rs
View file

@ -56,24 +56,24 @@ fn setup(mut commands: Commands) {
}; };
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|commands| { .with_children(|commands| {
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(1000.), width: Val::Px(1000.),
..Default::default() ..Default::default()
}, },
..Default::default() ))
})
.with_child((Text(text_string.clone()), text_font.clone(), text_block)); .with_child((Text(text_string.clone()), text_font.clone(), text_block));
}); });

8
examples/time/virtual_time.rs
View file

@ -77,8 +77,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut time: ResMu
let font_size = 33.; let font_size = 33.;
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Flex, display: Display::Flex,
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
width: Val::Percent(100.), width: Val::Percent(100.),
@ -87,8 +88,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut time: ResMu
padding: UiRect::all(Val::Px(20.0)), padding: UiRect::all(Val::Px(20.0)),
..default() ..default()
}, },
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
// real time info // real time info
builder.spawn(( builder.spawn((

156
examples/ui/borders.rs
View file

@ -12,8 +12,9 @@ fn main() {
fn setup(mut commands: Commands) { fn setup(mut commands: Commands) {
commands.spawn(Camera2d); commands.spawn(Camera2d);
let root = commands let root = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin: UiRect::all(Val::Px(25.0)), margin: UiRect::all(Val::Px(25.0)),
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
justify_self: JustifySelf::Stretch, justify_self: JustifySelf::Stretch,
@ -21,16 +22,16 @@ fn setup(mut commands: Commands) {
justify_content: JustifyContent::FlexStart, justify_content: JustifyContent::FlexStart,
align_items: AlignItems::FlexStart, align_items: AlignItems::FlexStart,
align_content: AlignContent::FlexStart, align_content: AlignContent::FlexStart,
..Default::default() ..default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.id(); .id();
let root_rounded = commands let root_rounded = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin: UiRect::all(Val::Px(25.0)), margin: UiRect::all(Val::Px(25.0)),
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
justify_self: JustifySelf::Stretch, justify_self: JustifySelf::Stretch,
@ -38,11 +39,10 @@ fn setup(mut commands: Commands) {
justify_content: JustifyContent::FlexStart, justify_content: JustifyContent::FlexStart,
align_items: AlignItems::FlexStart, align_items: AlignItems::FlexStart,
align_content: AlignContent::FlexStart, align_content: AlignContent::FlexStart,
..Default::default() ..default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.id(); .id();
// labels for the different border edges // labels for the different border edges
@ -124,32 +124,30 @@ fn setup(mut commands: Commands) {
for (label, border) in border_labels.into_iter().zip(borders) { for (label, border) in border_labels.into_iter().zip(borders) {
let inner_spot = commands let inner_spot = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(10.), width: Val::Px(10.),
height: Val::Px(10.), height: Val::Px(10.),
..Default::default() ..default()
}, },
background_color: YELLOW.into(), BackgroundColor(YELLOW.into()),
..Default::default() ))
})
.id(); .id();
let border_node = commands let border_node = commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Px(50.), width: Val::Px(50.),
height: Val::Px(50.), height: Val::Px(50.),
border, border,
margin: UiRect::all(Val::Px(20.)), margin: UiRect::all(Val::Px(20.)),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..default()
},
background_color: MAROON.into(),
border_color: RED.into(),
..Default::default()
}, },
BackgroundColor(MAROON.into()),
BorderColor(RED.into()),
Outline { Outline {
width: Val::Px(6.), width: Val::Px(6.),
offset: Val::Px(6.), offset: Val::Px(6.),
@ -168,14 +166,14 @@ fn setup(mut commands: Commands) {
)) ))
.id(); .id();
let container = commands let container = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..Default::default() ..default()
}, },
..Default::default() ))
})
.add_children(&[border_node, label_node]) .add_children(&[border_node, label_node])
.id(); .id();
commands.entity(root).add_child(container); commands.entity(root).add_child(container);
@ -183,16 +181,16 @@ fn setup(mut commands: Commands) {
for (label, border) in border_labels.into_iter().zip(borders) { for (label, border) in border_labels.into_iter().zip(borders) {
let inner_spot = commands let inner_spot = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(10.), width: Val::Px(10.),
height: Val::Px(10.), height: Val::Px(10.),
..Default::default() ..default()
}, },
border_radius: BorderRadius::MAX, BorderRadius::MAX,
background_color: YELLOW.into(), BackgroundColor(YELLOW.into()),
..Default::default() ))
})
.id(); .id();
let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.); let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.);
let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. }; let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. };
@ -204,21 +202,19 @@ fn setup(mut commands: Commands) {
); );
let border_node = commands let border_node = commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Px(50.), width: Val::Px(50.),
height: Val::Px(50.), height: Val::Px(50.),
border, border,
margin: UiRect::all(Val::Px(20.)), margin: UiRect::all(Val::Px(20.)),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..default()
},
background_color: MAROON.into(),
border_color: RED.into(),
border_radius,
..Default::default()
}, },
BackgroundColor(MAROON.into()),
BorderColor(RED.into()),
border_radius,
Outline { Outline {
width: Val::Px(6.), width: Val::Px(6.),
offset: Val::Px(6.), offset: Val::Px(6.),
@ -237,33 +233,33 @@ fn setup(mut commands: Commands) {
)) ))
.id(); .id();
let container = commands let container = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..Default::default() ..default()
}, },
..Default::default() ))
})
.add_children(&[border_node, label_node]) .add_children(&[border_node, label_node])
.id(); .id();
commands.entity(root_rounded).add_child(container); commands.entity(root_rounded).add_child(container);
} }
let border_label = commands let border_label = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin: UiRect { margin: UiRect {
left: Val::Px(25.0), left: Val::Px(25.0),
right: Val::Px(25.0), right: Val::Px(25.0),
top: Val::Px(25.0), top: Val::Px(25.0),
bottom: Val::Px(0.0), bottom: Val::Px(0.0),
}, },
..Default::default() ..default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
builder.spawn(( builder.spawn((
Text::new("Borders"), Text::new("Borders"),
@ -276,19 +272,19 @@ fn setup(mut commands: Commands) {
.id(); .id();
let border_rounded_label = commands let border_rounded_label = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin: UiRect { margin: UiRect {
left: Val::Px(25.0), left: Val::Px(25.0),
right: Val::Px(25.0), right: Val::Px(25.0),
top: Val::Px(25.0), top: Val::Px(25.0),
bottom: Val::Px(0.0), bottom: Val::Px(0.0),
}, },
..Default::default() ..default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
builder.spawn(( builder.spawn((
Text::new("Borders Rounded"), Text::new("Borders Rounded"),
@ -301,8 +297,9 @@ fn setup(mut commands: Commands) {
.id(); .id();
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin: UiRect::all(Val::Px(25.0)), margin: UiRect::all(Val::Px(25.0)),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
@ -311,11 +308,10 @@ fn setup(mut commands: Commands) {
justify_content: JustifyContent::FlexStart, justify_content: JustifyContent::FlexStart,
align_items: AlignItems::FlexStart, align_items: AlignItems::FlexStart,
align_content: AlignContent::FlexStart, align_content: AlignContent::FlexStart,
..Default::default() ..default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.add_child(border_label) .add_child(border_label)
.add_child(root) .add_child(root)
.add_child(border_rounded_label) .add_child(border_rounded_label)

30
examples/ui/box_shadow.rs
View file

@ -34,8 +34,9 @@ fn setup(mut commands: Commands) {
commands.spawn((Camera2d, UiBoxShadowSamples(args.samples))); commands.spawn((Camera2d, UiBoxShadowSamples(args.samples)));
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
padding: UiRect::all(Val::Px(30.)), padding: UiRect::all(Val::Px(30.)),
@ -43,9 +44,8 @@ fn setup(mut commands: Commands) {
flex_wrap: FlexWrap::Wrap, flex_wrap: FlexWrap::Wrap,
..default() ..default()
}, },
background_color: BackgroundColor(DEEP_SKY_BLUE.into()), BackgroundColor(DEEP_SKY_BLUE.into()),
..Default::default() ))
})
.with_children(|commands| { .with_children(|commands| {
let example_nodes = [ let example_nodes = [
( (
@ -201,18 +201,16 @@ fn box_shadow_node_bundle(
border_radius: BorderRadius, border_radius: BorderRadius,
) -> impl Bundle { ) -> impl Bundle {
( (
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Px(size.x), width: Val::Px(size.x),
height: Val::Px(size.y), height: Val::Px(size.y),
border: UiRect::all(Val::Px(4.)), border: UiRect::all(Val::Px(4.)),
..default() ..default()
},
border_color: BorderColor(LIGHT_SKY_BLUE.into()),
border_radius,
background_color: BackgroundColor(DEEP_SKY_BLUE.into()),
..Default::default()
}, },
BorderColor(LIGHT_SKY_BLUE.into()),
border_radius,
BackgroundColor(DEEP_SKY_BLUE.into()),
BoxShadow { BoxShadow {
color: Color::BLACK.with_alpha(0.8), color: Color::BLACK.with_alpha(0.8),
x_offset: Val::Percent(offset.x), x_offset: Val::Percent(offset.x),

22
examples/ui/button.rs
View file

@ -55,20 +55,21 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// ui camera // ui camera
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
width: Val::Px(150.0), width: Val::Px(150.0),
height: Val::Px(65.0), height: Val::Px(65.0),
border: UiRect::all(Val::Px(5.0)), border: UiRect::all(Val::Px(5.0)),
@ -78,11 +79,10 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
border_color: BorderColor(Color::BLACK), BorderColor(Color::BLACK),
border_radius: BorderRadius::MAX, BorderRadius::MAX,
background_color: NORMAL_BUTTON.into(), BackgroundColor(NORMAL_BUTTON),
..default() ))
})
.with_child(( .with_child((
Text::new("Button"), Text::new("Button"),
TextFont { TextFont {

235
examples/ui/display_and_visibility.rs
View file

@ -82,8 +82,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}; };
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands.spawn(NodeBundle { commands.spawn((Node::default(),
style: Style { Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -91,9 +91,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
justify_content: JustifyContent::SpaceEvenly, justify_content: JustifyContent::SpaceEvenly,
..Default::default() ..Default::default()
}, },
background_color: BackgroundColor(Color::BLACK), BackgroundColor(Color::BLACK),
..Default::default() )).with_children(|parent| {
}).with_children(|parent| {
parent.spawn((Text::new("Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left"), parent.spawn((Text::new("Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left"),
text_font.clone(), text_font.clone(),
TextLayout::new_with_justify(JustifyText::Center), TextLayout::new_with_justify(JustifyText::Center),
@ -104,48 +103,49 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
)); ));
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
let mut target_ids = vec![]; let mut target_ids = vec![];
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(50.), width: Val::Percent(50.),
height: Val::Px(520.), height: Val::Px(520.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..default()
}, },
..Default::default() )).with_children(|parent| {
}).with_children(|parent| {
target_ids = spawn_left_panel(parent, &palette); target_ids = spawn_left_panel(parent, &palette);
}); });
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(50.), width: Val::Percent(50.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..default()
}, },
..Default::default() )).with_children(|parent| {
}).with_children(|parent| {
spawn_right_panel(parent, text_font, &palette, target_ids); spawn_right_panel(parent, text_font, &palette, target_ids);
}); });
}); });
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
align_items: AlignItems::Start, align_items: AlignItems::Start,
justify_content: JustifyContent::Start, justify_content: JustifyContent::Start,
column_gap: Val::Px(10.), column_gap: Val::Px(10.),
..Default::default() ..default()
}, },
..default() }) ))
.with_children(|builder| { .with_children(|builder| {
let text_font = TextFont { let text_font = TextFont {
font: asset_server.load("fonts/FiraSans-Bold.ttf"), font: asset_server.load("fonts/FiraSans-Bold.ttf"),
@ -172,93 +172,90 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Entity> { fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Entity> {
let mut target_ids = vec![]; let mut target_ids = vec![];
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
padding: UiRect::all(Val::Px(10.)), padding: UiRect::all(Val::Px(10.)),
..Default::default() ..default()
}, },
background_color: BackgroundColor(Color::WHITE), BackgroundColor(Color::WHITE),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((Node::default(), BackgroundColor(Color::BLACK)))
background_color: BackgroundColor(Color::BLACK),
..Default::default()
})
.with_children(|parent| { .with_children(|parent| {
let id = parent let id = parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
align_items: AlignItems::FlexEnd, align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd, justify_content: JustifyContent::FlexEnd,
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[0]), BackgroundColor(palette[0]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(100.), width: Val::Px(100.),
height: Val::Px(500.), height: Val::Px(500.),
..Default::default() ..default()
}, },
..Default::default() ));
});
let id = parent let id = parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
height: Val::Px(400.), height: Val::Px(400.),
align_items: AlignItems::FlexEnd, align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd, justify_content: JustifyContent::FlexEnd,
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[1]), BackgroundColor(palette[1]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(100.), width: Val::Px(100.),
height: Val::Px(400.), height: Val::Px(400.),
..Default::default() ..default()
}, },
..Default::default() ));
});
let id = parent let id = parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
height: Val::Px(300.), height: Val::Px(300.),
align_items: AlignItems::FlexEnd, align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd, justify_content: JustifyContent::FlexEnd,
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[2]), BackgroundColor(palette[2]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(100.), width: Val::Px(100.),
height: Val::Px(300.), height: Val::Px(300.),
..Default::default() ..default()
}, },
..Default::default() ));
});
let id = parent let id = parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(200.), width: Val::Px(200.),
height: Val::Px(200.), height: Val::Px(200.),
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[3]), BackgroundColor(palette[3]),
..Default::default() ))
})
.id(); .id();
target_ids.push(id); target_ids.push(id);
}) })
@ -286,18 +283,19 @@ fn spawn_right_panel(
spawn_button::<Visibility>(parent, text_font.clone(), target_id); spawn_button::<Visibility>(parent, text_font.clone(), target_id);
}; };
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
padding: UiRect::all(Val::Px(10.)), padding: UiRect::all(Val::Px(10.)),
..Default::default() ..default()
}, },
background_color: BackgroundColor(Color::WHITE), BackgroundColor(Color::WHITE),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(500.), width: Val::Px(500.),
height: Val::Px(500.), height: Val::Px(500.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -306,19 +304,19 @@ fn spawn_right_panel(
padding: UiRect { padding: UiRect {
left: Val::Px(5.), left: Val::Px(5.),
top: Val::Px(5.), top: Val::Px(5.),
..Default::default() ..default()
}, },
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[0]), BackgroundColor(palette[0]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap()); spawn_buttons(parent, target_ids.pop().unwrap());
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(400.), width: Val::Px(400.),
height: Val::Px(400.), height: Val::Px(400.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -327,19 +325,19 @@ fn spawn_right_panel(
padding: UiRect { padding: UiRect {
left: Val::Px(5.), left: Val::Px(5.),
top: Val::Px(5.), top: Val::Px(5.),
..Default::default() ..default()
}, },
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[1]), BackgroundColor(palette[1]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap()); spawn_buttons(parent, target_ids.pop().unwrap());
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(300.), width: Val::Px(300.),
height: Val::Px(300.), height: Val::Px(300.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -348,19 +346,19 @@ fn spawn_right_panel(
padding: UiRect { padding: UiRect {
left: Val::Px(5.), left: Val::Px(5.),
top: Val::Px(5.), top: Val::Px(5.),
..Default::default() ..default()
}, },
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[2]), BackgroundColor(palette[2]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap()); spawn_buttons(parent, target_ids.pop().unwrap());
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(200.), width: Val::Px(200.),
height: Val::Px(200.), height: Val::Px(200.),
align_items: AlignItems::FlexStart, align_items: AlignItems::FlexStart,
@ -369,24 +367,23 @@ fn spawn_right_panel(
padding: UiRect { padding: UiRect {
left: Val::Px(5.), left: Val::Px(5.),
top: Val::Px(5.), top: Val::Px(5.),
..Default::default() ..default()
}, },
..Default::default() ..default()
}, },
background_color: BackgroundColor(palette[3]), BackgroundColor(palette[3]),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap()); spawn_buttons(parent, target_ids.pop().unwrap());
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(100.), width: Val::Px(100.),
height: Val::Px(100.), height: Val::Px(100.),
..Default::default() ..default()
}, },
..Default::default() ));
});
}); });
}); });
}); });
@ -401,15 +398,13 @@ where
{ {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: Style { Style {
align_self: AlignSelf::FlexStart, align_self: AlignSelf::FlexStart,
padding: UiRect::axes(Val::Px(5.), Val::Px(1.)), padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
..Default::default() ..default()
},
background_color: Color::BLACK.with_alpha(0.5).into(),
..Default::default()
}, },
BackgroundColor(Color::BLACK.with_alpha(0.5)),
Target::<T>::new(target), Target::<T>::new(target),
)) ))
.with_children(|builder| { .with_children(|builder| {

62
examples/ui/flex_layout.rs
View file

@ -22,8 +22,9 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
let font = asset_server.load("fonts/FiraSans-Bold.ttf"); let font = asset_server.load("fonts/FiraSans-Bold.ttf");
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// fill the entire window // fill the entire window
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
@ -33,19 +34,18 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
row_gap: MARGIN, row_gap: MARGIN,
..Default::default() ..Default::default()
}, },
background_color: BackgroundColor(Color::BLACK), BackgroundColor(Color::BLACK),
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
// spawn the key // spawn the key
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
spawn_nested_text_bundle( spawn_nested_text_bundle(
builder, builder,
@ -64,16 +64,16 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
}); });
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
row_gap: MARGIN, row_gap: MARGIN,
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
// spawn one child node for each combination of `AlignItems` and `JustifyContent` // spawn one child node for each combination of `AlignItems` and `JustifyContent`
let justifications = [ let justifications = [
@ -93,16 +93,16 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
]; ];
for align_items in alignments { for align_items in alignments {
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
column_gap: MARGIN, column_gap: MARGIN,
..Default::default() ..Default::default()
}, },
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
for justify_content in justifications { for justify_content in justifications {
spawn_child_node( spawn_child_node(
@ -125,18 +125,18 @@ fn spawn_child_node(
justify_content: JustifyContent, justify_content: JustifyContent,
) { ) {
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items, align_items,
justify_content, justify_content,
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
..Default::default() ..default()
}, },
background_color: BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
let labels = [ let labels = [
(format!("{align_items:?}"), ALIGN_ITEMS_COLOR, 0.), (format!("{align_items:?}"), ALIGN_ITEMS_COLOR, 0.),
@ -163,15 +163,15 @@ fn spawn_nested_text_bundle(
text: &str, text: &str,
) { ) {
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin, margin,
padding: UiRect::axes(Val::Px(5.), Val::Px(1.)), padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
..Default::default() ..default()
}, },
background_color: BackgroundColor(background_color), BackgroundColor(background_color),
..Default::default() ))
})
.with_children(|builder| { .with_children(|builder| {
builder.spawn(( builder.spawn((
Text::new(text), Text::new(text),

19
examples/ui/font_atlas_debug.rs
View file

@ -48,16 +48,15 @@ fn atlas_render_system(
} }
let font_atlas = &font_atlas[state.atlas_count as usize]; let font_atlas = &font_atlas[state.atlas_count as usize];
state.atlas_count += 1; state.atlas_count += 1;
commands.spawn(ImageBundle { commands.spawn((
image: font_atlas.texture.clone().into(), UiImage::new(font_atlas.texture.clone()),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
top: Val::ZERO, top: Val::ZERO,
left: Val::Px(512.0 * x_offset), left: Val::Px(512.0 * x_offset),
..default() ..default()
}, },
..default() ));
});
} }
} }
} }
@ -86,15 +85,15 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut state: ResM
state.handle = font_handle.clone(); state.handle = font_handle.clone();
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
background_color: Color::NONE.into(), Node::default(),
style: Style { BackgroundColor(Color::NONE),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
bottom: Val::ZERO, bottom: Val::ZERO,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("a"), Text::new("a"),

36
examples/ui/ghost_nodes.rs
View file

@ -33,29 +33,27 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands commands
.spawn(GhostNode::new()) .spawn(GhostNode::new())
.with_children(|ghost_root| { .with_children(|ghost_root| {
ghost_root ghost_root.spawn(Node::default()).with_child(create_label(
.spawn(NodeBundle::default()) "This text node is rendered under a ghost root",
.with_child(create_label( font_handle.clone(),
"This text node is rendered under a ghost root", ));
font_handle.clone(),
));
}); });
// Normal UI root // Normal UI root
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn((NodeBundle::default(), Counter(0))) .spawn((Node::default(), Counter(0)))
.with_children(|layout_parent| { .with_children(|layout_parent| {
layout_parent layout_parent
.spawn((GhostNode::new(), Counter(0))) .spawn((GhostNode::new(), Counter(0)))
@ -78,9 +76,10 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}); });
} }
fn create_button() -> ButtonBundle { fn create_button() -> impl Bundle {
ButtonBundle { (
style: Style { Button,
Style {
width: Val::Px(150.0), width: Val::Px(150.0),
height: Val::Px(65.0), height: Val::Px(65.0),
border: UiRect::all(Val::Px(5.0)), border: UiRect::all(Val::Px(5.0)),
@ -90,11 +89,10 @@ fn create_button() -> ButtonBundle {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
border_color: BorderColor(Color::BLACK), BorderColor(Color::BLACK),
border_radius: BorderRadius::MAX, BorderRadius::MAX,
background_color: Color::srgb(0.15, 0.15, 0.15).into(), BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
..default() )
}
} }
fn create_label(text: &str, font: Handle<Font>) -> (Text, TextFont, TextColor) { fn create_label(text: &str, font: Handle<Font>) -> (Text, TextFont, TextColor) {

77
examples/ui/grid.rs
View file

@ -21,8 +21,9 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
// Top-level grid (app frame) // Top-level grid (app frame)
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// Use the CSS Grid algorithm for laying out this node // Use the CSS Grid algorithm for laying out this node
display: Display::Grid, display: Display::Grid,
// Make node fill the entirety of its parent (in this case the window) // Make node fill the entirety of its parent (in this case the window)
@ -43,30 +44,30 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
], ],
..default() ..default()
}, },
background_color: BackgroundColor(Color::WHITE), BackgroundColor(Color::WHITE),
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
// Header // Header
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
// Make this node span two grid columns so that it takes up the entire top tow // Make this node span two grid columns so that it takes up the entire top tow
grid_column: GridPlacement::span(2), grid_column: GridPlacement::span(2),
padding: UiRect::all(Val::Px(6.0)), padding: UiRect::all(Val::Px(6.0)),
..default() ..default()
}, },
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
spawn_nested_text_bundle(builder, font.clone(), "Bevy CSS Grid Layout Example"); spawn_nested_text_bundle(builder, font.clone(), "Bevy CSS Grid Layout Example");
}); });
// Main content grid (auto placed in row 2, column 1) // Main content grid (auto placed in row 2, column 1)
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
// Make the height of the node fill its parent // Make the height of the node fill its parent
height: Val::Percent(100.0), height: Val::Percent(100.0),
// Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square // Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square
@ -87,9 +88,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
column_gap: Val::Px(12.0), column_gap: Val::Px(12.0),
..default() ..default()
}, },
background_color: BackgroundColor(Color::srgb(0.25, 0.25, 0.25)), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
// Note there is no need to specify the position for each grid item. Grid items that are // Note there is no need to specify the position for each grid item. Grid items that are
// not given an explicit position will be automatically positioned into the next available // not given an explicit position will be automatically positioned into the next available
@ -116,8 +116,9 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
// Right side bar (auto placed in row 2, column 2) // Right side bar (auto placed in row 2, column 2)
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
// Align content towards the start (top) in the vertical axis // Align content towards the start (top) in the vertical axis
align_items: AlignItems::Start, align_items: AlignItems::Start,
@ -132,9 +133,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
..default() ..default()
}, },
background_color: BackgroundColor(BLACK.into()), BackgroundColor(BLACK.into()),
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
builder.spawn((Text::new("Sidebar"), builder.spawn((Text::new("Sidebar"),
TextFont { TextFont {
@ -149,24 +149,25 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
..default() ..default()
}, },
)); ));
builder.spawn(NodeBundle::default()); builder.spawn(Node::default());
}); });
// Footer / status bar // Footer / status bar
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
// Make this node span two grid column so that it takes up the entire bottom row // Make this node span two grid column so that it takes up the entire bottom row
grid_column: GridPlacement::span(2), grid_column: GridPlacement::span(2),
..default() ..default()
}, },
background_color: BackgroundColor(WHITE.into()), BackgroundColor(WHITE.into()),
..default() ));
});
// Modal (absolutely positioned on top of content - currently hidden: to view it, change its visibility) // Modal (absolutely positioned on top of content - currently hidden: to view it, change its visibility)
builder.spawn(NodeBundle { builder.spawn((
visibility: Visibility::Hidden, Node::default(),
style: Style { Visibility::Hidden,
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
margin: UiRect { margin: UiRect {
top: Val::Px(100.), top: Val::Px(100.),
@ -179,9 +180,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
max_width: Val::Px(600.), max_width: Val::Px(600.),
..default() ..default()
}, },
background_color: BackgroundColor(Color::WHITE.with_alpha(0.8)), BackgroundColor(Color::WHITE.with_alpha(0.8)),
..default() ));
});
}); });
} }
@ -190,20 +190,17 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
/// which will allow it to take its size from the size of the grid area it occupies. /// which will allow it to take its size from the size of the grid area it occupies.
fn item_rect(builder: &mut ChildBuilder, color: Srgba) { fn item_rect(builder: &mut ChildBuilder, color: Srgba) {
builder builder
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
padding: UiRect::all(Val::Px(3.0)), padding: UiRect::all(Val::Px(3.0)),
..default() ..default()
}, },
background_color: BackgroundColor(BLACK.into()), BackgroundColor(BLACK.into()),
..default() ))
})
.with_children(|builder| { .with_children(|builder| {
builder.spawn(NodeBundle { builder.spawn((Node::default(), BackgroundColor(color.into())));
background_color: BackgroundColor(color.into()),
..default()
});
}); });
} }

55
examples/ui/overflow.rs
View file

@ -20,17 +20,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let image = asset_server.load("branding/icon.png"); let image = asset_server.load("branding/icon.png");
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..Default::default()
}, },
background_color: ANTIQUE_WHITE.into(), BackgroundColor(ANTIQUE_WHITE.into()),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
for overflow in [ for overflow in [
Overflow::visible(), Overflow::visible(),
@ -39,33 +39,34 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
Overflow::clip(), Overflow::clip(),
] { ] {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
margin: UiRect::horizontal(Val::Px(25.)), margin: UiRect::horizontal(Val::Px(25.)),
..Default::default() ..Default::default()
}, },
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
let label = format!("{overflow:#?}"); let label = format!("{overflow:#?}");
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
padding: UiRect::all(Val::Px(10.)), padding: UiRect::all(Val::Px(10.)),
margin: UiRect::bottom(Val::Px(25.)), margin: UiRect::bottom(Val::Px(25.)),
..Default::default() ..Default::default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn((Text::new(label), text_style.clone())); parent.spawn((Text::new(label), text_style.clone()));
}); });
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(100.), width: Val::Px(100.),
height: Val::Px(100.), height: Val::Px(100.),
padding: UiRect { padding: UiRect {
@ -75,22 +76,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}, },
border: UiRect::all(Val::Px(5.)), border: UiRect::all(Val::Px(5.)),
overflow, overflow,
..Default::default() ..default()
}, },
border_color: Color::BLACK.into(), BorderColor(Color::BLACK),
background_color: GRAY.into(), BackgroundColor(GRAY.into()),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
ImageBundle { UiImage::new(image.clone()),
image: UiImage::new(image.clone()), Style {
style: Style { min_width: Val::Px(100.),
min_width: Val::Px(100.), min_height: Val::Px(100.),
min_height: Val::Px(100.), ..default()
..Default::default()
},
..Default::default()
}, },
Interaction::default(), Interaction::default(),
Outline { Outline {

71
examples/ui/overflow_clip_margin.rs
View file

@ -17,19 +17,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let image = asset_server.load("branding/icon.png"); let image = asset_server.load("branding/icon.png");
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
row_gap: Val::Px(40.), row_gap: Val::Px(40.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
..Default::default() ..default()
}, },
background_color: ANTIQUE_WHITE.into(), BackgroundColor(ANTIQUE_WHITE.into()),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
for overflow_clip_margin in [ for overflow_clip_margin in [
OverflowClipMargin::border_box().with_margin(25.), OverflowClipMargin::border_box().with_margin(25.),
@ -38,30 +38,31 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
OverflowClipMargin::content_box(), OverflowClipMargin::content_box(),
] { ] {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
column_gap: Val::Px(20.), column_gap: Val::Px(20.),
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
padding: UiRect::all(Val::Px(10.)), padding: UiRect::all(Val::Px(10.)),
margin: UiRect::bottom(Val::Px(25.)), margin: UiRect::bottom(Val::Px(25.)),
..Default::default() ..default()
}, },
background_color: Color::srgb(0.25, 0.25, 0.25).into(), BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
..Default::default() ))
})
.with_child(Text(format!("{overflow_clip_margin:#?}"))); .with_child(Text(format!("{overflow_clip_margin:#?}")));
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
margin: UiRect::top(Val::Px(10.)), margin: UiRect::top(Val::Px(10.)),
width: Val::Px(100.), width: Val::Px(100.),
height: Val::Px(100.), height: Val::Px(100.),
@ -69,32 +70,30 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
border: UiRect::all(Val::Px(5.)), border: UiRect::all(Val::Px(5.)),
overflow: Overflow::clip(), overflow: Overflow::clip(),
overflow_clip_margin, overflow_clip_margin,
..Default::default() ..default()
}, },
border_color: Color::BLACK.into(), BackgroundColor(GRAY.into()),
background_color: GRAY.into(), BorderColor(Color::BLACK),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
min_width: Val::Px(50.), min_width: Val::Px(50.),
min_height: Val::Px(50.), min_height: Val::Px(50.),
..Default::default() ..default()
}, },
background_color: LIGHT_CYAN.into(), BackgroundColor(LIGHT_CYAN.into()),
..Default::default() ))
}) .with_child((
.with_child(ImageBundle { UiImage::new(image.clone()),
image: UiImage::new(image.clone()), Style {
style: Style {
min_width: Val::Px(100.), min_width: Val::Px(100.),
min_height: Val::Px(100.), min_height: Val::Px(100.),
..Default::default() ..default()
}, },
..Default::default() ));
});
}); });
}); });
} }

59
examples/ui/overflow_debug.rs
View file

@ -105,20 +105,21 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Overflow Debug // Overflow Debug
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
display: Display::Grid, display: Display::Grid,
grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE), grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE),
grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE), grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE),
@ -126,8 +127,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
column_gap: Val::Px(80.), column_gap: Val::Px(80.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
spawn_image(parent, &asset_server, Move); spawn_image(parent, &asset_server, Move);
spawn_image(parent, &asset_server, Scale); spawn_image(parent, &asset_server, Scale);
@ -146,17 +146,16 @@ fn spawn_image(
update_transform: impl UpdateTransform + Component, update_transform: impl UpdateTransform + Component,
) { ) {
spawn_container(parent, update_transform, |parent| { spawn_container(parent, update_transform, |parent| {
parent.spawn(ImageBundle { parent.spawn((
image: UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")), UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
style: Style { Style {
height: Val::Px(100.), height: Val::Px(100.),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
top: Val::Px(-50.), top: Val::Px(-50.),
left: Val::Px(-200.), left: Val::Px(-200.),
..default() ..default()
}, },
..default() ));
});
}); });
} }
@ -188,34 +187,30 @@ fn spawn_container(
parent parent
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
overflow: Overflow::clip(), overflow: Overflow::clip(),
..default()
},
background_color: Color::srgb(0.25, 0.25, 0.25).into(),
..default() ..default()
}, },
BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
Container(0), Container(0),
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
top: Val::Px(transform.translation.x), top: Val::Px(transform.translation.x),
left: Val::Px(transform.translation.y), left: Val::Px(transform.translation.y),
..default()
},
transform,
..default() ..default()
}, },
transform,
update_transform, update_transform,
)) ))
.with_children(spawn_children); .with_children(spawn_children);

18
examples/ui/relative_cursor_position.rs
View file

@ -29,8 +29,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
)); ));
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
@ -38,20 +39,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(250.), width: Val::Px(250.),
height: Val::Px(250.), height: Val::Px(250.),
margin: UiRect::bottom(Val::Px(15.)), margin: UiRect::bottom(Val::Px(15.)),
..default() ..default()
}, },
background_color: Color::srgb(235., 35., 12.).into(), BackgroundColor(Color::srgb(235., 35., 12.)),
..default() ))
})
.insert(RelativeCursorPosition::default()); .insert(RelativeCursorPosition::default());
parent.spawn(( parent.spawn((

20
examples/ui/render_ui_to_texture.rs
View file

@ -65,19 +65,17 @@ fn setup(
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
// Cover the whole image // Cover the whole image
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default()
},
background_color: GOLD.into(),
..default() ..default()
}, },
BackgroundColor(GOLD.into()),
TargetCamera(texture_camera), TargetCamera(texture_camera),
)) ))
.with_children(|parent| { .with_children(|parent| {

115
examples/ui/scroll.rs
View file

@ -30,28 +30,28 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// root node // root node
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
..default() ..default()
}, },
..default() ))
})
.insert(PickingBehavior::IGNORE) .insert(PickingBehavior::IGNORE)
.with_children(|parent| { .with_children(|parent| {
// horizontal scroll example // horizontal scroll example
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// header // header
parent.spawn(( parent.spawn((
@ -66,17 +66,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// horizontal scroll container // horizontal scroll container
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(80.), width: Val::Percent(80.),
margin: UiRect::all(Val::Px(10.)), margin: UiRect::all(Val::Px(10.)),
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
overflow: Overflow::scroll_x(), // n.b. overflow: Overflow::scroll_x(), // n.b.
..default() ..default()
}, },
background_color: Color::srgb(0.10, 0.10, 0.10).into(), BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
for i in 0..100 { for i in 0..100 {
parent.spawn((Text(format!("Item {i}")), parent.spawn((Text(format!("Item {i}")),
@ -111,29 +111,29 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// container for all other examples // container for all other examples
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// vertical scroll example // vertical scroll example
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
width: Val::Px(200.), width: Val::Px(200.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Title // Title
parent.spawn(( parent.spawn((
@ -147,29 +147,29 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
)); ));
// Scrolling list // Scrolling list
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
height: Val::Percent(50.), height: Val::Percent(50.),
overflow: Overflow::scroll_y(), // n.b. overflow: Overflow::scroll_y(), // n.b.
..default() ..default()
}, },
background_color: Color::srgb(0.10, 0.10, 0.10).into(), BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// List items // List items
for i in 0..25 { for i in 0..25 {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
min_height: Val::Px(LINE_HEIGHT), min_height: Val::Px(LINE_HEIGHT),
max_height: Val::Px(LINE_HEIGHT), max_height: Val::Px(LINE_HEIGHT),
..default() ..default()
}, },
..default() ))
})
.insert(PickingBehavior { .insert(PickingBehavior {
should_block_lower: false, should_block_lower: false,
..default() ..default()
@ -199,16 +199,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Bidirectional scroll example // Bidirectional scroll example
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
width: Val::Px(200.), width: Val::Px(200.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Title // Title
parent.spawn(( parent.spawn((
@ -222,28 +222,28 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
)); ));
// Scrolling list // Scrolling list
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
height: Val::Percent(50.), height: Val::Percent(50.),
overflow: Overflow::scroll(), // n.b. overflow: Overflow::scroll(), // n.b.
..default() ..default()
}, },
background_color: Color::srgb(0.10, 0.10, 0.10).into(), BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Rows in each column // Rows in each column
for oi in 0..10 { for oi in 0..10 {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
..default() ..default()
}, },
..default() ))
})
.insert(PickingBehavior::IGNORE) .insert(PickingBehavior::IGNORE)
.with_children(|parent| { .with_children(|parent| {
// Elements in each row // Elements in each row
@ -274,16 +274,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Nested scrolls example // Nested scrolls example
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
width: Val::Px(200.), width: Val::Px(200.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Title // Title
parent.spawn(( parent.spawn((
@ -297,8 +297,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
)); ));
// Outer, horizontal scrolling container // Outer, horizontal scrolling container
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
column_gap: Val::Px(20.), column_gap: Val::Px(20.),
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
@ -306,24 +307,22 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
overflow: Overflow::scroll_x(), // n.b. overflow: Overflow::scroll_x(), // n.b.
..default() ..default()
}, },
background_color: Color::srgb(0.10, 0.10, 0.10).into(), BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Inner, scrolling columns // Inner, scrolling columns
for oi in 0..30 { for oi in 0..30 {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
overflow: Overflow::scroll_y(), overflow: Overflow::scroll_y(),
..default() ..default()
}, },
background_color: Color::srgb(0.05, 0.05, 0.05) BackgroundColor(Color::srgb(0.05, 0.05, 0.05)),
.into(), ))
..default()
})
.insert(PickingBehavior { .insert(PickingBehavior {
should_block_lower: false, should_block_lower: false,
..default() ..default()

175
examples/ui/size_constraints.rs
View file

@ -52,28 +52,28 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
); );
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..Default::default() ..default()
}, },
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Size Constraints Example"), Text::new("Size Constraints Example"),
@ -87,17 +87,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
spawn_bar(parent); spawn_bar(parent);
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Stretch, align_items: AlignItems::Stretch,
padding: UiRect::all(Val::Px(10.)), padding: UiRect::all(Val::Px(10.)),
margin: UiRect::top(Val::Px(50.)), margin: UiRect::top(Val::Px(50.)),
..Default::default() ..default()
}, },
background_color: YELLOW.into(), BackgroundColor(YELLOW.into()),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
for constraint in [ for constraint in [
Constraint::MinWidth, Constraint::MinWidth,
@ -114,40 +114,31 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
fn spawn_bar(parent: &mut ChildBuilder) { fn spawn_bar(parent: &mut ChildBuilder) {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_basis: Val::Percent(100.0), flex_basis: Val::Percent(100.0),
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
padding: UiRect::all(Val::Px(10.)), padding: UiRect::all(Val::Px(10.)),
..Default::default() ..default()
}, },
background_color: YELLOW.into(), BackgroundColor(YELLOW.into()),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
align_items: AlignItems::Stretch, align_items: AlignItems::Stretch,
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Px(100.), height: Val::Px(100.),
padding: UiRect::all(Val::Px(4.)), padding: UiRect::all(Val::Px(4.)),
..Default::default() ..default()
}, },
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((Node::default(), BackgroundColor(Color::WHITE), Bar));
NodeBundle {
style: Style {
..Default::default()
},
background_color: Color::WHITE.into(),
..Default::default()
},
Bar,
));
}); });
}); });
} }
@ -165,67 +156,63 @@ fn spawn_button_row(
}; };
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
padding: UiRect::all(Val::Px(2.)), padding: UiRect::all(Val::Px(2.)),
align_items: AlignItems::Stretch, align_items: AlignItems::Stretch,
..Default::default() ..default()
}, },
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
justify_content: JustifyContent::End, justify_content: JustifyContent::End,
padding: UiRect::all(Val::Px(2.)), padding: UiRect::all(Val::Px(2.)),
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_children(|parent| { .with_children(|parent| {
// spawn row label // spawn row label
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
min_width: Val::Px(200.), min_width: Val::Px(200.),
max_width: Val::Px(200.), max_width: Val::Px(200.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..Default::default() ..default()
}, },
..Default::default() ))
})
.with_child((Text::new(label), text_style.clone())); .with_child((Text::new(label), text_style.clone()));
// spawn row buttons // spawn row buttons
parent parent.spawn(Node::default()).with_children(|parent| {
.spawn(NodeBundle { spawn_button(
..Default::default() parent,
}) constraint,
.with_children(|parent| { ButtonValue(Val::Auto),
"Auto".to_string(),
text_style.clone(),
true,
);
for percent in [0., 25., 50., 75., 100., 125.] {
spawn_button( spawn_button(
parent, parent,
constraint, constraint,
ButtonValue(Val::Auto), ButtonValue(Val::Percent(percent)),
"Auto".to_string(), format!("{percent}%"),
text_style.clone(), text_style.clone(),
true, false,
); );
for percent in [0., 25., 50., 75., 100., 125.] { }
spawn_button( });
parent,
constraint,
ButtonValue(Val::Percent(percent)),
format!("{percent}%"),
text_style.clone(),
false,
);
}
});
}); });
}); });
} }
@ -240,41 +227,37 @@ fn spawn_button(
) { ) {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: Style { Style {
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
border: UiRect::all(Val::Px(2.)), border: UiRect::all(Val::Px(2.)),
margin: UiRect::horizontal(Val::Px(2.)), margin: UiRect::horizontal(Val::Px(2.)),
..Default::default()
},
border_color: if active {
ACTIVE_BORDER_COLOR
} else {
INACTIVE_BORDER_COLOR
}
.into(),
..Default::default() ..Default::default()
}, },
BorderColor(if active {
ACTIVE_BORDER_COLOR
} else {
INACTIVE_BORDER_COLOR
}),
constraint, constraint,
action, action,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(100.), width: Val::Px(100.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..Default::default() ..default()
}, },
background_color: if active { BackgroundColor(if active {
ACTIVE_INNER_COLOR ACTIVE_INNER_COLOR
} else { } else {
INACTIVE_INNER_COLOR INACTIVE_INNER_COLOR
} }),
.into(), ))
..Default::default()
})
.with_child(( .with_child((
Text::new(label), Text::new(label),
text_style.0, text_style.0,

39
examples/ui/text_debug.rs
View file

@ -36,19 +36,21 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
commands.spawn(Camera2d); commands.spawn(Camera2d);
let root_uinode = commands let root_uinode = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
..default() ..default()
}, },
..default() ))
})
.id(); .id();
let left_column = commands.spawn(NodeBundle { let left_column = commands
style: Style { .spawn((
Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
align_items: AlignItems::Start, align_items: AlignItems::Start,
@ -56,8 +58,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
margin: UiRect::axes(Val::Px(15.), Val::Px(5.)), margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
..default() ..default()
}, },
..default() )).with_children(|builder| {
}).with_children(|builder| {
builder.spawn(( builder.spawn((
Text::new("This is\ntext with\nline breaks\nin the top left."), Text::new("This is\ntext with\nline breaks\nin the top left."),
TextFont { TextFont {
@ -101,17 +102,17 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
); );
}).id(); }).id();
let right_column = commands.spawn(NodeBundle { let right_column = commands.spawn((
style: Style { Node::default(),
flex_direction: FlexDirection::Column, Style {
justify_content: JustifyContent::SpaceBetween, flex_direction: FlexDirection::Column,
align_items: AlignItems::End, justify_content: JustifyContent::SpaceBetween,
flex_grow: 1., align_items: AlignItems::End,
margin: UiRect::axes(Val::Px(15.), Val::Px(5.)), flex_grow: 1.,
..default() margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
}, ..default()
..default() },
}).with_children(|builder| { )).with_children(|builder| {
builder.spawn((Text::new( builder.spawn((Text::new(
"This text is very long, has a limited width, is center-justified, is positioned in the top right and is also colored pink."), "This text is very long, has a limited width, is center-justified, is positioned in the top right and is also colored pink."),

34
examples/ui/text_wrap_debug.rs
View file

@ -52,16 +52,16 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
}; };
let root = commands let root = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
..Default::default() ..default()
}, },
background_color: Color::BLACK.into(), BackgroundColor(Color::BLACK),
..Default::default() ))
})
.id(); .id();
for linebreak in [ for linebreak in [
@ -71,17 +71,17 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
LineBreak::NoWrap, LineBreak::NoWrap,
] { ] {
let row_id = commands let row_id = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Row, flex_direction: FlexDirection::Row,
justify_content: JustifyContent::SpaceAround, justify_content: JustifyContent::SpaceAround,
align_items: AlignItems::Center, align_items: AlignItems::Center,
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(50.), height: Val::Percent(50.),
..Default::default() ..default()
}, },
..Default::default() ))
})
.id(); .id();
let justifications = vec![ let justifications = vec![
@ -96,18 +96,18 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
for (i, justification) in justifications.into_iter().enumerate() { for (i, justification) in justifications.into_iter().enumerate() {
let c = 0.3 + i as f32 * 0.1; let c = 0.3 + i as f32 * 0.1;
let column_id = commands let column_id = commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
justify_content: justification, justify_content: justification,
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
width: Val::Percent(16.), width: Val::Percent(16.),
height: Val::Percent(95.), height: Val::Percent(95.),
overflow: Overflow::clip_x(), overflow: Overflow::clip_x(),
..Default::default() ..default()
}, },
background_color: Color::srgb(0.5, c, 1.0 - c).into(), BackgroundColor(Color::srgb(0.5, c, 1.0 - c)),
..Default::default() ))
})
.id(); .id();
let messages = [ let messages = [

28
examples/ui/transparency_ui.rs
View file

@ -17,29 +17,29 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf"); let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::SpaceAround, justify_content: JustifyContent::SpaceAround,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
width: Val::Px(150.0), width: Val::Px(150.0),
height: Val::Px(65.0), height: Val::Px(65.0),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::srgb(0.1, 0.5, 0.1).into(), BackgroundColor(Color::srgb(0.1, 0.5, 0.1)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Button 1"), Text::new("Button 1"),
@ -56,17 +56,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Button with a different color, // Button with a different color,
// to demonstrate the text looks different due to its transparency. // to demonstrate the text looks different due to its transparency.
parent parent
.spawn(ButtonBundle { .spawn((
style: Style { Button,
Style {
width: Val::Px(150.0), width: Val::Px(150.0),
height: Val::Px(65.0), height: Val::Px(65.0),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::srgb(0.5, 0.1, 0.5).into(), BackgroundColor(Color::srgb(0.5, 0.1, 0.5)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
Text::new("Button 2"), Text::new("Button 2"),

195
examples/ui/ui.rs
View file

@ -35,42 +35,42 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// root node // root node
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
..default() ..default()
}, },
..default() ))
})
.insert(PickingBehavior::IGNORE) .insert(PickingBehavior::IGNORE)
.with_children(|parent| { .with_children(|parent| {
// left vertical fill (border) // left vertical fill (border)
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(200.), width: Val::Px(200.),
border: UiRect::all(Val::Px(2.)), border: UiRect::all(Val::Px(2.)),
..default() ..default()
}, },
background_color: Color::srgb(0.65, 0.65, 0.65).into(), BackgroundColor(Color::srgb(0.65, 0.65, 0.65)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// left vertical fill (content) // left vertical fill (content)
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
padding: UiRect::all(Val::Px(5.)), padding: UiRect::all(Val::Px(5.)),
row_gap: Val::Px(5.), row_gap: Val::Px(5.),
..default() ..default()
}, },
background_color: Color::srgb(0.15, 0.15, 0.15).into(), BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// text // text
parent.spawn(( parent.spawn((
@ -110,16 +110,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}); });
// right vertical fill // right vertical fill
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
width: Val::Px(200.), width: Val::Px(200.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// Title // Title
parent.spawn(( parent.spawn((
@ -133,17 +133,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
)); ));
// Scrolling list // Scrolling list
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_self: AlignSelf::Stretch, align_self: AlignSelf::Stretch,
height: Val::Percent(50.), height: Val::Percent(50.),
overflow: Overflow::scroll_y(), overflow: Overflow::scroll_y(),
..default() ..default()
}, },
background_color: Color::srgb(0.10, 0.10, 0.10).into(), BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// List items // List items
for i in 0..25 { for i in 0..25 {
@ -166,8 +166,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}); });
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(200.0), width: Val::Px(200.0),
height: Val::Px(200.0), height: Val::Px(200.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
@ -176,20 +177,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
border: UiRect::all(Val::Px(20.)), border: UiRect::all(Val::Px(20.)),
..default() ..default()
}, },
border_color: LIME.into(), BorderColor(LIME.into()),
background_color: Color::srgb(0.4, 0.4, 1.).into(), BackgroundColor(Color::srgb(0.4, 0.4, 1.)),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
..default() ..default()
}, },
background_color: Color::srgb(0.8, 0.8, 1.).into(), BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
..default() ));
});
}); });
let shadow = BoxShadow { let shadow = BoxShadow {
@ -202,8 +202,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// render order test: reddest in the back, whitest in the front (flex center) // render order test: reddest in the back, whitest in the front (flex center)
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
@ -211,84 +212,73 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.insert(PickingBehavior::IGNORE) .insert(PickingBehavior::IGNORE)
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Px(100.0), width: Val::Px(100.0),
height: Val::Px(100.0), height: Val::Px(100.0),
..default()
},
background_color: Color::srgb(1.0, 0.0, 0.).into(),
..default() ..default()
}, },
BackgroundColor(Color::srgb(1.0, 0.0, 0.)),
shadow, shadow,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
style: Style { Style {
// Take the size of the parent node. // Take the size of the parent node.
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(20.), left: Val::Px(20.),
bottom: Val::Px(20.), bottom: Val::Px(20.),
..default()
},
background_color: Color::srgb(1.0, 0.3, 0.3).into(),
..default() ..default()
}, },
BackgroundColor(Color::srgb(1.0, 0.3, 0.3)),
shadow, shadow,
)); ));
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(40.), left: Val::Px(40.),
bottom: Val::Px(40.), bottom: Val::Px(40.),
..default()
},
background_color: Color::srgb(1.0, 0.5, 0.5).into(),
..default() ..default()
}, },
BackgroundColor(Color::srgb(1.0, 0.5, 0.5)),
shadow, shadow,
)); ));
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(60.), left: Val::Px(60.),
bottom: Val::Px(60.), bottom: Val::Px(60.),
..default()
},
background_color: Color::srgb(0.0, 0.7, 0.7).into(),
..default() ..default()
}, },
BackgroundColor(Color::srgb(0.0, 0.7, 0.7)),
shadow, shadow,
)); ));
// alpha test // alpha test
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(80.), left: Val::Px(80.),
bottom: Val::Px(80.), bottom: Val::Px(80.),
..default()
},
background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(),
..default() ..default()
}, },
BackgroundColor(Color::srgba(1.0, 0.9, 0.9, 0.4)),
BoxShadow { BoxShadow {
color: Color::BLACK.with_alpha(0.3), color: Color::BLACK.with_alpha(0.3),
..shadow ..shadow
@ -298,44 +288,37 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}); });
// bevy logo (flex center) // bevy logo (flex center)
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::FlexStart, align_items: AlignItems::FlexStart,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// bevy logo (image) // bevy logo (image)
// A `NodeBundle` is used to display the logo the image as an `ImageBundle` can't automatically
// size itself with a child node present.
parent parent
.spawn(( .spawn((
NodeBundle { UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
style: Style { Style {
width: Val::Px(500.0), width: Val::Px(500.0),
height: Val::Px(125.0), height: Val::Px(125.0),
margin: UiRect::top(Val::VMin(5.)), margin: UiRect::top(Val::VMin(5.)),
..default()
},
..default() ..default()
}, },
UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
)) ))
.with_children(|parent| { .with_children(|parent| {
// alt text // alt text
// This UI node takes up no space in the layout and the `Text` component is used by the accessibility module // This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
// and is not rendered. // and is not rendered.
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
style: Style { Style {
display: Display::None, display: Display::None,
..Default::default() ..default()
},
..Default::default()
}, },
Text::new("Bevy logo"), Text::new("Bevy logo"),
)); ));

32
examples/ui/ui_material.rs
View file

@ -1,6 +1,6 @@
//! Demonstrates the use of [`UiMaterials`](UiMaterial) and how to change material values //! Demonstrates the use of [`UiMaterials`](UiMaterial) and how to change material values
use bevy::{prelude::*, reflect::TypePath, render::render_resource::*}; use bevy::{color::palettes::css::RED, prelude::*, reflect::TypePath, render::render_resource::*};
/// This example uses a shader source file from the assets subdirectory /// This example uses a shader source file from the assets subdirectory
const SHADER_ASSET_PATH: &str = "shaders/custom_ui_material.wgsl"; const SHADER_ASSET_PATH: &str = "shaders/custom_ui_material.wgsl";
@ -23,34 +23,34 @@ fn setup(
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
let banner_scale_factor = 0.5; let banner_scale_factor = 0.5;
parent.spawn(MaterialNodeBundle { parent.spawn((
style: Style { MaterialNode(ui_materials.add(CustomUiMaterial {
color: LinearRgba::WHITE.to_f32_array().into(),
slider: 0.5,
color_texture: asset_server.load("branding/banner.png"),
border_color: LinearRgba::WHITE.to_f32_array().into(),
})),
Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
width: Val::Px(905.0 * banner_scale_factor), width: Val::Px(905.0 * banner_scale_factor),
height: Val::Px(363.0 * banner_scale_factor), height: Val::Px(363.0 * banner_scale_factor),
border: UiRect::all(Val::Px(10.)), border: UiRect::all(Val::Px(10.)),
..default() ..default()
}, },
material: UiMaterialHandle(ui_materials.add(CustomUiMaterial { BackgroundColor(RED.into()),
color: LinearRgba::WHITE.to_f32_array().into(), ));
slider: 0.5,
color_texture: asset_server.load("branding/banner.png"),
border_color: LinearRgba::WHITE.to_f32_array().into(),
})),
..default()
});
}); });
} }
@ -82,7 +82,7 @@ impl UiMaterial for CustomUiMaterial {
// Also updates the color of the image to a rainbow color // Also updates the color of the image to a rainbow color
fn animate( fn animate(
mut materials: ResMut<Assets<CustomUiMaterial>>, mut materials: ResMut<Assets<CustomUiMaterial>>,
q: Query<&UiMaterialHandle<CustomUiMaterial>>, q: Query<&MaterialNode<CustomUiMaterial>>,
time: Res<Time>, time: Res<Time>,
) { ) {
let duration = 2.0; let duration = 2.0;

39
examples/ui/ui_scaling.rs
View file

@ -29,8 +29,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}; };
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(50.0), width: Val::Percent(50.0),
height: Val::Percent(50.0), height: Val::Percent(50.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
@ -40,41 +41,39 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: ANTIQUE_WHITE.into(), BackgroundColor(ANTIQUE_WHITE.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(40.0), width: Val::Px(40.0),
height: Val::Px(40.0), height: Val::Px(40.0),
..default() ..default()
}, },
background_color: RED.into(), BackgroundColor(RED.into()),
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn((Text::new("Size!"), text_font, TextColor::BLACK)); parent.spawn((Text::new("Size!"), text_font, TextColor::BLACK));
}); });
parent.spawn(NodeBundle { parent.spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(15.0), width: Val::Percent(15.0),
height: Val::Percent(15.0), height: Val::Percent(15.0),
..default() ..default()
}, },
background_color: BLUE.into(), BackgroundColor(BLUE.into()),
..default() ));
}); parent.spawn((
parent.spawn(ImageBundle { UiImage::new(asset_server.load("branding/icon.png")),
style: Style { Style {
width: Val::Px(30.0), width: Val::Px(30.0),
height: Val::Px(30.0), height: Val::Px(30.0),
..default() ..default()
}, },
image: asset_server.load("branding/icon.png").into(), ));
..default()
});
}); });
} }

21
examples/ui/ui_texture_atlas.rs
View file

@ -33,8 +33,9 @@ fn setup(
// root node // root node
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
@ -43,20 +44,16 @@ fn setup(
row_gap: Val::Px(text_font.font_size * 2.), row_gap: Val::Px(text_font.font_size * 2.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(( parent.spawn((
ImageBundle { UiImage::new(texture_handle),
style: Style { Style {
width: Val::Px(256.), width: Val::Px(256.),
height: Val::Px(256.), height: Val::Px(256.),
..default()
},
image: UiImage::new(texture_handle),
background_color: BackgroundColor(ANTIQUE_WHITE.into()),
..default() ..default()
}, },
BackgroundColor(ANTIQUE_WHITE.into()),
TextureAtlas::from(texture_atlas_handle), TextureAtlas::from(texture_atlas_handle),
Outline::new(Val::Px(8.0), Val::ZERO, CRIMSON.into()), Outline::new(Val::Px(8.0), Val::ZERO, CRIMSON.into()),
)); ));

30
examples/ui/ui_texture_atlas_slice.rs
View file

@ -63,16 +63,16 @@ fn setup(
// ui camera // ui camera
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
for (idx, [w, h]) in [ for (idx, [w, h]) in [
(0, [150.0, 150.0]), (0, [150.0, 150.0]),
@ -81,18 +81,16 @@ fn setup(
] { ] {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: Style { UiImage::new(texture_handle.clone()),
width: Val::Px(w), Style {
height: Val::Px(h), width: Val::Px(w),
// horizontally center child text height: Val::Px(h),
justify_content: JustifyContent::Center, // horizontally center child text
// vertically center child text justify_content: JustifyContent::Center,
align_items: AlignItems::Center, // vertically center child text
margin: UiRect::all(Val::Px(20.0)), align_items: AlignItems::Center,
..default() margin: UiRect::all(Val::Px(20.0)),
},
image: texture_handle.clone().into(),
..default() ..default()
}, },
ImageScaleMode::Sliced(slicer.clone()), ImageScaleMode::Sliced(slicer.clone()),

30
examples/ui/ui_texture_slice.rs
View file

@ -55,34 +55,32 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// ui camera // ui camera
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] { for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] {
parent parent
.spawn(( .spawn((
ButtonBundle { Button,
style: Style { Style {
width: Val::Px(w), width: Val::Px(w),
height: Val::Px(h), height: Val::Px(h),
// horizontally center child text // horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text // vertically center child text
align_items: AlignItems::Center, align_items: AlignItems::Center,
margin: UiRect::all(Val::Px(20.0)), margin: UiRect::all(Val::Px(20.0)),
..default()
},
image: image.clone().into(),
..default() ..default()
}, },
UiImage::new(image.clone()),
ImageScaleMode::Sliced(slicer.clone()), ImageScaleMode::Sliced(slicer.clone()),
)) ))
.with_children(|parent| { .with_children(|parent| {

23
examples/ui/ui_texture_slice_flip_and_tile.rs
View file

@ -39,8 +39,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
commands.spawn(Camera2d); commands.spawn(Camera2d);
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
@ -50,8 +51,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
row_gap: Val::Px(10.), row_gap: Val::Px(10.),
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
for ([width, height], flip_x, flip_y) in [ for ([width, height], flip_x, flip_y) in [
([160., 160.], false, false), ([160., 160.], false, false),
@ -60,19 +60,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
([160., 160.], true, true), ([160., 160.], true, true),
] { ] {
parent.spawn(( parent.spawn((
NodeBundle {
style: Style {
width: Val::Px(width),
height: Val::Px(height),
..default()
},
..Default::default()
},
UiImage { UiImage {
texture: image.clone(), texture: image.clone(),
flip_x, flip_x,
flip_y, flip_y,
..Default::default() ..default()
},
Style {
width: Val::Px(width),
height: Val::Px(height),
..default()
}, },
ImageScaleMode::Sliced(slicer.clone()), ImageScaleMode::Sliced(slicer.clone()),
)); ));

168
examples/ui/viewport_debug.rs
View file

@ -68,173 +68,169 @@ fn setup(mut commands: Commands) {
fn spawn_with_viewport_coords(commands: &mut Commands) { fn spawn_with_viewport_coords(commands: &mut Commands) {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Vw(100.), width: Val::Vw(100.),
height: Val::Vh(100.), height: Val::Vh(100.),
border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)), border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)),
flex_wrap: FlexWrap::Wrap, flex_wrap: FlexWrap::Wrap,
..default()
},
border_color: PALETTE[0].into(),
..default() ..default()
}, },
BorderColor(PALETTE[0].into()),
Coords::Viewport, Coords::Viewport,
)) ))
.with_children(|builder| { .with_children(|builder| {
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Vw(30.), width: Val::Vw(30.),
height: Val::Vh(30.), height: Val::Vh(30.),
border: UiRect::all(Val::VMin(5.)), border: UiRect::all(Val::VMin(5.)),
..default() ..default()
}, },
background_color: PALETTE[2].into(), BackgroundColor(PALETTE[2].into()),
border_color: PALETTE[9].into(), BorderColor(PALETTE[9].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Vw(60.), width: Val::Vw(60.),
height: Val::Vh(30.), height: Val::Vh(30.),
..default() ..default()
}, },
background_color: PALETTE[3].into(), BackgroundColor(PALETTE[3].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Vw(45.), width: Val::Vw(45.),
height: Val::Vh(30.), height: Val::Vh(30.),
border: UiRect::left(Val::VMax(45. / 2.)), border: UiRect::left(Val::VMax(45. / 2.)),
..default() ..default()
}, },
background_color: PALETTE[4].into(), BackgroundColor(PALETTE[4].into()),
border_color: PALETTE[8].into(), BorderColor(PALETTE[8].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Vw(45.), width: Val::Vw(45.),
height: Val::Vh(30.), height: Val::Vh(30.),
border: UiRect::right(Val::VMax(45. / 2.)), border: UiRect::right(Val::VMax(45. / 2.)),
..default() ..default()
}, },
background_color: PALETTE[5].into(), BackgroundColor(PALETTE[5].into()),
border_color: PALETTE[8].into(), BorderColor(PALETTE[8].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Vw(60.), width: Val::Vw(60.),
height: Val::Vh(30.), height: Val::Vh(30.),
..default() ..default()
}, },
background_color: PALETTE[6].into(), BackgroundColor(PALETTE[6].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Vw(30.), width: Val::Vw(30.),
height: Val::Vh(30.), height: Val::Vh(30.),
border: UiRect::all(Val::VMin(5.)), border: UiRect::all(Val::VMin(5.)),
..default() ..default()
}, },
background_color: PALETTE[7].into(), BackgroundColor(PALETTE[7].into()),
border_color: PALETTE[9].into(), BorderColor(PALETTE[9].into()),
..default() ));
});
}); });
} }
fn spawn_with_pixel_coords(commands: &mut Commands) { fn spawn_with_pixel_coords(commands: &mut Commands) {
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
width: Val::Px(640.), width: Val::Px(640.),
height: Val::Px(360.), height: Val::Px(360.),
border: UiRect::axes(Val::Px(32.), Val::Px(18.)), border: UiRect::axes(Val::Px(32.), Val::Px(18.)),
flex_wrap: FlexWrap::Wrap, flex_wrap: FlexWrap::Wrap,
..default()
},
border_color: PALETTE[1].into(),
..default() ..default()
}, },
BorderColor(PALETTE[1].into()),
Coords::Pixel, Coords::Pixel,
)) ))
.with_children(|builder| { .with_children(|builder| {
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(192.), width: Val::Px(192.),
height: Val::Px(108.), height: Val::Px(108.),
border: UiRect::axes(Val::Px(18.), Val::Px(18.)), border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
..default() ..default()
}, },
background_color: PALETTE[2].into(), BackgroundColor(PALETTE[2].into()),
border_color: PALETTE[9].into(), BorderColor(PALETTE[9].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(384.), width: Val::Px(384.),
height: Val::Px(108.), height: Val::Px(108.),
..default() ..default()
}, },
background_color: PALETTE[3].into(), BackgroundColor(PALETTE[3].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(288.), width: Val::Px(288.),
height: Val::Px(108.), height: Val::Px(108.),
border: UiRect::left(Val::Px(144.)), border: UiRect::left(Val::Px(144.)),
..default() ..default()
}, },
background_color: PALETTE[4].into(), BackgroundColor(PALETTE[4].into()),
border_color: PALETTE[8].into(), BorderColor(PALETTE[8].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(288.), width: Val::Px(288.),
height: Val::Px(108.), height: Val::Px(108.),
border: UiRect::right(Val::Px(144.)), border: UiRect::right(Val::Px(144.)),
..default() ..default()
}, },
background_color: PALETTE[5].into(), BackgroundColor(PALETTE[5].into()),
border_color: PALETTE[8].into(), BorderColor(PALETTE[8].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(384.), width: Val::Px(384.),
height: Val::Px(108.), height: Val::Px(108.),
..default() ..default()
}, },
background_color: PALETTE[6].into(), BackgroundColor(PALETTE[6].into()),
..default() ));
});
builder.spawn(NodeBundle { builder.spawn((
style: Style { Node::default(),
Style {
width: Val::Px(192.), width: Val::Px(192.),
height: Val::Px(108.), height: Val::Px(108.),
border: UiRect::axes(Val::Px(18.), Val::Px(18.)), border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
..default() ..default()
}, },
background_color: PALETTE[7].into(), BackgroundColor(PALETTE[7].into()),
border_color: PALETTE[9].into(), BorderColor(PALETTE[9].into()),
..default() ));
});
}); });
} }

92
examples/ui/z_index.rs
View file

@ -23,32 +23,32 @@ fn setup(mut commands: Commands) {
// the default z-index value is `ZIndex::Local(0)`. // the default z-index value is `ZIndex::Local(0)`.
// because this is a root UI node, using local or global values will do the same thing. // because this is a root UI node, using local or global values will do the same thing.
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
height: Val::Percent(100.), height: Val::Percent(100.),
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
background_color: GRAY.into(), Node::default(),
style: Style { Style {
width: Val::Px(180.0), width: Val::Px(180.0),
height: Val::Px(100.0), height: Val::Px(100.0),
..default() ..default()
}, },
..default() BackgroundColor(GRAY.into()),
}) ))
.with_children(|parent| { .with_children(|parent| {
// spawn a node with default z-index. // spawn a node with default z-index.
parent.spawn(NodeBundle { parent.spawn((
background_color: RED.into(), Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(10.0), left: Val::Px(10.0),
bottom: Val::Px(40.0), bottom: Val::Px(40.0),
@ -56,15 +56,14 @@ fn setup(mut commands: Commands) {
height: Val::Px(50.0), height: Val::Px(50.0),
..default() ..default()
}, },
..default() BackgroundColor(RED.into()),
}); ));
// spawn a node with a positive local z-index of 2. // spawn a node with a positive local z-index of 2.
// it will show above other nodes in the gray container. // it will show above other nodes in the gray container.
parent.spawn(NodeBundle { parent.spawn((
z_index: ZIndex(2), Node::default(),
background_color: BLUE.into(), Style {
style: Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(45.0), left: Val::Px(45.0),
bottom: Val::Px(30.0), bottom: Val::Px(30.0),
@ -72,15 +71,15 @@ fn setup(mut commands: Commands) {
height: Val::Px(50.), height: Val::Px(50.),
..default() ..default()
}, },
..default() ZIndex(2),
}); BackgroundColor(BLUE.into()),
));
// spawn a node with a negative local z-index. // spawn a node with a negative local z-index.
// it will show under other nodes in the gray container. // it will show under other nodes in the gray container.
parent.spawn(NodeBundle { parent.spawn((
z_index: ZIndex(-1), Node::default(),
background_color: LIME.into(), Style {
style: Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(70.0), left: Val::Px(70.0),
bottom: Val::Px(20.0), bottom: Val::Px(20.0),
@ -88,25 +87,24 @@ fn setup(mut commands: Commands) {
height: Val::Px(75.), height: Val::Px(75.),
..default() ..default()
}, },
..default() ZIndex(-1),
}); BackgroundColor(LIME.into()),
));
// spawn a node with a positive global z-index of 1. // spawn a node with a positive global z-index of 1.
// it will show above all other nodes, because it's the highest global z-index in this example. // it will show above all other nodes, because it's the highest global z-index in this example.
// by default, boxes all share the global z-index of 0 that the gray container is added to. // by default, boxes all share the global z-index of 0 that the gray container is added to.
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
background_color: PURPLE.into(), Style {
style: Style { position_type: PositionType::Absolute,
position_type: PositionType::Absolute, left: Val::Px(15.0),
left: Val::Px(15.0), bottom: Val::Px(10.0),
bottom: Val::Px(10.0), width: Val::Px(100.),
width: Val::Px(100.), height: Val::Px(60.),
height: Val::Px(60.), ..default()
..default()
},
..Default::default()
}, },
BackgroundColor(PURPLE.into()),
GlobalZIndex(1), GlobalZIndex(1),
)); ));
@ -114,18 +112,16 @@ fn setup(mut commands: Commands) {
// this will show under all other nodes including its parent, because it's the lowest global z-index // this will show under all other nodes including its parent, because it's the lowest global z-index
// in this example. // in this example.
parent.spawn(( parent.spawn((
NodeBundle { Node::default(),
background_color: YELLOW.into(), Style {
style: Style { position_type: PositionType::Absolute,
position_type: PositionType::Absolute, left: Val::Px(-15.0),
left: Val::Px(-15.0), bottom: Val::Px(-15.0),
bottom: Val::Px(-15.0), width: Val::Px(100.),
width: Val::Px(100.), height: Val::Px(125.),
height: Val::Px(125.), ..default()
..default()
},
..Default::default()
}, },
BackgroundColor(YELLOW.into()),
GlobalZIndex(-1), GlobalZIndex(-1),
)); ));
}); });

18
examples/window/scale_factor_override.rs
View file

@ -28,28 +28,28 @@ fn setup(mut commands: Commands) {
commands.spawn(Camera2d); commands.spawn(Camera2d);
// root node // root node
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
justify_content: JustifyContent::SpaceBetween, justify_content: JustifyContent::SpaceBetween,
..default() ..default()
}, },
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
// left vertical fill (border) // left vertical fill (border)
parent parent
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Px(300.0), width: Val::Px(300.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
border: UiRect::all(Val::Px(2.0)), border: UiRect::all(Val::Px(2.0)),
..default() ..default()
}, },
background_color: Color::srgb(0.65, 0.65, 0.65).into(), BackgroundColor(Color::srgb(0.65, 0.65, 0.65)),
..default() ))
})
.with_child(( .with_child((
CustomText, CustomText,
Text::new("Example text"), Text::new("Example text"),

12
examples/window/window_drag_move.rs
View file

@ -62,15 +62,13 @@ fn setup(mut commands: Commands) {
// UI // UI
commands commands
.spawn(( .spawn((
NodeBundle { Node::default(),
style: Style { Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
padding: UiRect::all(Val::Px(5.0)), padding: UiRect::all(Val::Px(5.0)),
..default()
},
background_color: Color::BLACK.with_alpha(0.75).into(),
..default() ..default()
}, },
BackgroundColor(Color::BLACK.with_alpha(0.75)),
GlobalZIndex(i32::MAX), GlobalZIndex(i32::MAX),
)) ))
.with_children(|p| { .with_children(|p| {

8
examples/window/window_resizing.rs
View file

@ -35,13 +35,13 @@ fn setup_camera(mut commands: Commands) {
fn setup_ui(mut commands: Commands) { fn setup_ui(mut commands: Commands) {
// Node that fills entire background // Node that fills entire background
commands commands
.spawn(NodeBundle { .spawn((
style: Style { Node::default(),
Style {
width: Val::Percent(100.), width: Val::Percent(100.),
..default() ..default()
}, },
..default() ))
})
// Text where we display current resolution // Text where we display current resolution
.with_child(( .with_child((
Text::new("Resolution"), Text::new("Resolution"),