2023-04-24 14:22:31 +00:00
|
|
|
//! This example demonstrates text wrapping and use of the `LineBreakOn` property.
|
|
|
|
|
2023-09-28 21:15:55 +00:00
|
|
|
use argh::FromArgs;
|
2024-10-01 22:30:50 +00:00
|
|
|
use bevy::{prelude::*, text::LineBreak, window::WindowResolution, winit::WinitSettings};
|
2023-04-24 14:22:31 +00:00
|
|
|
|
2023-09-28 21:15:55 +00:00
|
|
|
#[derive(FromArgs, Resource)]
|
|
|
|
/// `text_wrap_debug` demonstrates text wrapping and use of the `LineBreakOn` property
|
|
|
|
struct Args {
|
|
|
|
#[argh(option)]
|
|
|
|
/// window scale factor
|
2023-12-14 14:56:40 +00:00
|
|
|
scale_factor: Option<f32>,
|
2023-09-28 21:15:55 +00:00
|
|
|
|
|
|
|
#[argh(option, default = "1.")]
|
|
|
|
/// ui scale factor
|
2023-12-14 14:56:40 +00:00
|
|
|
ui_scale: f32,
|
2023-09-28 21:15:55 +00:00
|
|
|
}
|
|
|
|
|
2023-04-24 14:22:31 +00:00
|
|
|
fn main() {
|
2024-01-24 21:16:10 +00:00
|
|
|
// `from_env` panics on the web
|
|
|
|
#[cfg(not(target_arch = "wasm32"))]
|
2023-09-28 21:15:55 +00:00
|
|
|
let args: Args = argh::from_env();
|
2024-01-24 21:16:10 +00:00
|
|
|
#[cfg(target_arch = "wasm32")]
|
|
|
|
let args = Args::from_args(&[], &[]).unwrap();
|
|
|
|
|
2023-09-28 21:15:55 +00:00
|
|
|
let window = if let Some(scale_factor) = args.scale_factor {
|
|
|
|
Window {
|
|
|
|
resolution: WindowResolution::default().with_scale_factor_override(scale_factor),
|
|
|
|
..Default::default()
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
Window::default()
|
|
|
|
};
|
|
|
|
|
2023-04-24 14:22:31 +00:00
|
|
|
App::new()
|
2023-09-28 21:15:55 +00:00
|
|
|
.add_plugins(DefaultPlugins.set(WindowPlugin {
|
|
|
|
primary_window: Some(window),
|
|
|
|
..Default::default()
|
|
|
|
}))
|
2023-04-24 14:22:31 +00:00
|
|
|
.insert_resource(WinitSettings::desktop_app())
|
2023-09-28 21:15:55 +00:00
|
|
|
.insert_resource(UiScale(args.ui_scale))
|
2023-04-24 14:22:31 +00:00
|
|
|
.add_systems(Startup, spawn)
|
|
|
|
.run();
|
|
|
|
}
|
|
|
|
|
|
|
|
fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
|
2024-10-05 01:59:52 +00:00
|
|
|
commands.spawn(Camera2d);
|
2023-04-24 14:22:31 +00:00
|
|
|
|
2024-10-13 17:06:22 +00:00
|
|
|
let text_font = TextFont {
|
2023-04-24 14:22:31 +00:00
|
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
2024-09-16 23:14:37 +00:00
|
|
|
font_size: 12.0,
|
2023-11-03 12:57:38 +00:00
|
|
|
..default()
|
2023-04-24 14:22:31 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
let root = commands
|
Migrate UI bundles to required components (#15898)
# 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>
2024-10-17 21:11:02 +00:00
|
|
|
.spawn((
|
Merge Style properties into Node. Use ComputedNode for computed properties. (#15975)
# Objective
Continue improving the user experience of our UI Node API in the
direction specified by [Bevy's Next Generation Scene / UI
System](https://github.com/bevyengine/bevy/discussions/14437)
## Solution
As specified in the document above, merge `Style` fields into `Node`,
and move "computed Node fields" into `ComputedNode` (I chose this name
over something like `ComputedNodeLayout` because it currently contains
more than just layout info. If we want to break this up / rename these
concepts, lets do that in a separate PR). `Style` has been removed.
This accomplishes a number of goals:
## Ergonomics wins
Specifying both `Node` and `Style` is now no longer required for
non-default styles
Before:
```rust
commands.spawn((
Node::default(),
Style {
width: Val::Px(100.),
..default()
},
));
```
After:
```rust
commands.spawn(Node {
width: Val::Px(100.),
..default()
});
```
## Conceptual clarity
`Style` was never a comprehensive "style sheet". It only defined "core"
style properties that all `Nodes` shared. Any "styled property" that
couldn't fit that mold had to be in a separate component. A "real" style
system would style properties _across_ components (`Node`, `Button`,
etc). We have plans to build a true style system (see the doc linked
above).
By moving the `Style` fields to `Node`, we fully embrace `Node` as the
driving concept and remove the "style system" confusion.
## Next Steps
* Consider identifying and splitting out "style properties that aren't
core to Node". This should not happen for Bevy 0.15.
---
## Migration Guide
Move any fields set on `Style` into `Node` and replace all `Style`
component usage with `Node`.
Before:
```rust
commands.spawn((
Node::default(),
Style {
width: Val::Px(100.),
..default()
},
));
```
After:
```rust
commands.spawn(Node {
width: Val::Px(100.),
..default()
});
```
For any usage of the "computed node properties" that used to live on
`Node`, use `ComputedNode` instead:
Before:
```rust
fn system(nodes: Query<&Node>) {
for node in &nodes {
let computed_size = node.size();
}
}
```
After:
```rust
fn system(computed_nodes: Query<&ComputedNode>) {
for computed_node in &computed_nodes {
let computed_size = computed_node.size();
}
}
```
2024-10-18 22:25:33 +00:00
|
|
|
Node {
|
Flatten UI `Style` properties that use `Size` + remove `Size` (#8548)
# Objective
- Simplify API and make authoring styles easier
See:
https://github.com/bevyengine/bevy/issues/8540#issuecomment-1536177102
## Solution
- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by `width`, `height`, `min_width`, `min_height`, `max_width`,
`max_height`, `row_gap`, and `column_gap` properties
---
## Changelog
- Flattened `Style` properties that have a `Size` value directly into
`Style`
## Migration Guide
- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by the `width`, `height`, `min_width`, `min_height`,
`max_width`, `max_height`, `row_gap`, and `column_gap` properties. Use
the new properties instead.
---------
Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
2023-05-16 01:36:32 +00:00
|
|
|
width: Val::Percent(100.),
|
2023-09-19 15:14:46 +00:00
|
|
|
height: Val::Percent(100.),
|
|
|
|
flex_direction: FlexDirection::Column,
|
Migrate UI bundles to required components (#15898)
# 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>
2024-10-17 21:11:02 +00:00
|
|
|
..default()
|
2023-04-24 14:22:31 +00:00
|
|
|
},
|
Migrate UI bundles to required components (#15898)
# 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>
2024-10-17 21:11:02 +00:00
|
|
|
BackgroundColor(Color::BLACK),
|
|
|
|
))
|
2023-04-24 14:22:31 +00:00
|
|
|
.id();
|
|
|
|
|
2024-10-01 22:30:50 +00:00
|
|
|
for linebreak in [
|
|
|
|
LineBreak::AnyCharacter,
|
|
|
|
LineBreak::WordBoundary,
|
|
|
|
LineBreak::WordOrCharacter,
|
|
|
|
LineBreak::NoWrap,
|
2023-06-26 16:23:00 +00:00
|
|
|
] {
|
2023-04-24 14:22:31 +00:00
|
|
|
let row_id = commands
|
Merge Style properties into Node. Use ComputedNode for computed properties. (#15975)
# Objective
Continue improving the user experience of our UI Node API in the
direction specified by [Bevy's Next Generation Scene / UI
System](https://github.com/bevyengine/bevy/discussions/14437)
## Solution
As specified in the document above, merge `Style` fields into `Node`,
and move "computed Node fields" into `ComputedNode` (I chose this name
over something like `ComputedNodeLayout` because it currently contains
more than just layout info. If we want to break this up / rename these
concepts, lets do that in a separate PR). `Style` has been removed.
This accomplishes a number of goals:
## Ergonomics wins
Specifying both `Node` and `Style` is now no longer required for
non-default styles
Before:
```rust
commands.spawn((
Node::default(),
Style {
width: Val::Px(100.),
..default()
},
));
```
After:
```rust
commands.spawn(Node {
width: Val::Px(100.),
..default()
});
```
## Conceptual clarity
`Style` was never a comprehensive "style sheet". It only defined "core"
style properties that all `Nodes` shared. Any "styled property" that
couldn't fit that mold had to be in a separate component. A "real" style
system would style properties _across_ components (`Node`, `Button`,
etc). We have plans to build a true style system (see the doc linked
above).
By moving the `Style` fields to `Node`, we fully embrace `Node` as the
driving concept and remove the "style system" confusion.
## Next Steps
* Consider identifying and splitting out "style properties that aren't
core to Node". This should not happen for Bevy 0.15.
---
## Migration Guide
Move any fields set on `Style` into `Node` and replace all `Style`
component usage with `Node`.
Before:
```rust
commands.spawn((
Node::default(),
Style {
width: Val::Px(100.),
..default()
},
));
```
After:
```rust
commands.spawn(Node {
width: Val::Px(100.),
..default()
});
```
For any usage of the "computed node properties" that used to live on
`Node`, use `ComputedNode` instead:
Before:
```rust
fn system(nodes: Query<&Node>) {
for node in &nodes {
let computed_size = node.size();
}
}
```
After:
```rust
fn system(computed_nodes: Query<&ComputedNode>) {
for computed_node in &computed_nodes {
let computed_size = computed_node.size();
}
}
```
2024-10-18 22:25:33 +00:00
|
|
|
.spawn(Node {
|
|
|
|
flex_direction: FlexDirection::Row,
|
|
|
|
justify_content: JustifyContent::SpaceAround,
|
|
|
|
align_items: AlignItems::Center,
|
|
|
|
width: Val::Percent(100.),
|
|
|
|
height: Val::Percent(50.),
|
|
|
|
..default()
|
|
|
|
})
|
2023-04-24 14:22:31 +00:00
|
|
|
.id();
|
|
|
|
|
|
|
|
let justifications = vec![
|
|
|
|
JustifyContent::Center,
|
|
|
|
JustifyContent::FlexStart,
|
|
|
|
JustifyContent::FlexEnd,
|
|
|
|
JustifyContent::SpaceAround,
|
|
|
|
JustifyContent::SpaceBetween,
|
|
|
|
JustifyContent::SpaceEvenly,
|
|
|
|
];
|
|
|
|
|
|
|
|
for (i, justification) in justifications.into_iter().enumerate() {
|
|
|
|
let c = 0.3 + i as f32 * 0.1;
|
|
|
|
let column_id = commands
|
Migrate UI bundles to required components (#15898)
# 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>
2024-10-17 21:11:02 +00:00
|
|
|
.spawn((
|
Merge Style properties into Node. Use ComputedNode for computed properties. (#15975)
# Objective
Continue improving the user experience of our UI Node API in the
direction specified by [Bevy's Next Generation Scene / UI
System](https://github.com/bevyengine/bevy/discussions/14437)
## Solution
As specified in the document above, merge `Style` fields into `Node`,
and move "computed Node fields" into `ComputedNode` (I chose this name
over something like `ComputedNodeLayout` because it currently contains
more than just layout info. If we want to break this up / rename these
concepts, lets do that in a separate PR). `Style` has been removed.
This accomplishes a number of goals:
## Ergonomics wins
Specifying both `Node` and `Style` is now no longer required for
non-default styles
Before:
```rust
commands.spawn((
Node::default(),
Style {
width: Val::Px(100.),
..default()
},
));
```
After:
```rust
commands.spawn(Node {
width: Val::Px(100.),
..default()
});
```
## Conceptual clarity
`Style` was never a comprehensive "style sheet". It only defined "core"
style properties that all `Nodes` shared. Any "styled property" that
couldn't fit that mold had to be in a separate component. A "real" style
system would style properties _across_ components (`Node`, `Button`,
etc). We have plans to build a true style system (see the doc linked
above).
By moving the `Style` fields to `Node`, we fully embrace `Node` as the
driving concept and remove the "style system" confusion.
## Next Steps
* Consider identifying and splitting out "style properties that aren't
core to Node". This should not happen for Bevy 0.15.
---
## Migration Guide
Move any fields set on `Style` into `Node` and replace all `Style`
component usage with `Node`.
Before:
```rust
commands.spawn((
Node::default(),
Style {
width: Val::Px(100.),
..default()
},
));
```
After:
```rust
commands.spawn(Node {
width: Val::Px(100.),
..default()
});
```
For any usage of the "computed node properties" that used to live on
`Node`, use `ComputedNode` instead:
Before:
```rust
fn system(nodes: Query<&Node>) {
for node in &nodes {
let computed_size = node.size();
}
}
```
After:
```rust
fn system(computed_nodes: Query<&ComputedNode>) {
for computed_node in &computed_nodes {
let computed_size = computed_node.size();
}
}
```
2024-10-18 22:25:33 +00:00
|
|
|
Node {
|
2023-04-24 14:22:31 +00:00
|
|
|
justify_content: justification,
|
|
|
|
flex_direction: FlexDirection::Column,
|
Flatten UI `Style` properties that use `Size` + remove `Size` (#8548)
# Objective
- Simplify API and make authoring styles easier
See:
https://github.com/bevyengine/bevy/issues/8540#issuecomment-1536177102
## Solution
- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by `width`, `height`, `min_width`, `min_height`, `max_width`,
`max_height`, `row_gap`, and `column_gap` properties
---
## Changelog
- Flattened `Style` properties that have a `Size` value directly into
`Style`
## Migration Guide
- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by the `width`, `height`, `min_width`, `min_height`,
`max_width`, `max_height`, `row_gap`, and `column_gap` properties. Use
the new properties instead.
---------
Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
2023-05-16 01:36:32 +00:00
|
|
|
width: Val::Percent(16.),
|
|
|
|
height: Val::Percent(95.),
|
2023-06-26 16:23:00 +00:00
|
|
|
overflow: Overflow::clip_x(),
|
Migrate UI bundles to required components (#15898)
# 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>
2024-10-17 21:11:02 +00:00
|
|
|
..default()
|
2023-04-24 14:22:31 +00:00
|
|
|
},
|
Migrate UI bundles to required components (#15898)
# 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>
2024-10-17 21:11:02 +00:00
|
|
|
BackgroundColor(Color::srgb(0.5, c, 1.0 - c)),
|
|
|
|
))
|
2023-04-24 14:22:31 +00:00
|
|
|
.id();
|
|
|
|
|
|
|
|
let messages = [
|
|
|
|
format!("JustifyContent::{justification:?}"),
|
2024-10-01 22:30:50 +00:00
|
|
|
format!("LineBreakOn::{linebreak:?}"),
|
2024-07-04 20:41:08 +00:00
|
|
|
"Line 1\nLine 2".to_string(),
|
2023-04-24 14:22:31 +00:00
|
|
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor, nunc ac faucibus fringilla.".to_string(),
|
2024-07-04 20:41:08 +00:00
|
|
|
"pneumonoultramicroscopicsilicovolcanoconiosis".to_string()
|
2023-04-24 14:22:31 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
for (j, message) in messages.into_iter().enumerate() {
|
Text rework (#15591)
**Ready for review. Examples migration progress: 100%.**
# Objective
- Implement https://github.com/bevyengine/bevy/discussions/15014
## Solution
This implements [cart's
proposal](https://github.com/bevyengine/bevy/discussions/15014#discussioncomment-10574459)
faithfully except for one change. I separated `TextSpan` from
`TextSpan2d` because `TextSpan` needs to require the `GhostNode`
component, which is a `bevy_ui` component only usable by UI.
Extra changes:
- Added `EntityCommands::commands_mut` that returns a mutable reference.
This is a blocker for extension methods that return something other than
`self`. Note that `sickle_ui`'s `UiBuilder::commands` returns a mutable
reference for this reason.
## Testing
- [x] Text examples all work.
---
## Showcase
TODO: showcase-worthy
## Migration Guide
TODO: very breaking
### Accessing text spans by index
Text sections are now text sections on different entities in a
hierarchy, Use the new `TextReader` and `TextWriter` system parameters
to access spans by index.
Before:
```rust
fn refresh_text(mut query: Query<&mut Text, With<TimeText>>, time: Res<Time>) {
let text = query.single_mut();
text.sections[1].value = format_time(time.elapsed());
}
```
After:
```rust
fn refresh_text(
query: Query<Entity, With<TimeText>>,
mut writer: UiTextWriter,
time: Res<Time>
) {
let entity = query.single();
*writer.text(entity, 1) = format_time(time.elapsed());
}
```
### Iterating text spans
Text spans are now entities in a hierarchy, so the new `UiTextReader`
and `UiTextWriter` system parameters provide ways to iterate that
hierarchy. The `UiTextReader::iter` method will give you a normal
iterator over spans, and `UiTextWriter::for_each` lets you visit each of
the spans.
---------
Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
Co-authored-by: Carter Anderson <mcanders1@gmail.com>
2024-10-09 18:35:36 +00:00
|
|
|
commands.entity(column_id).with_child((
|
|
|
|
Text(message.clone()),
|
2024-10-13 17:06:22 +00:00
|
|
|
text_font.clone(),
|
2024-10-09 20:58:27 +00:00
|
|
|
TextLayout::new(JustifyText::Left, linebreak),
|
Text rework (#15591)
**Ready for review. Examples migration progress: 100%.**
# Objective
- Implement https://github.com/bevyengine/bevy/discussions/15014
## Solution
This implements [cart's
proposal](https://github.com/bevyengine/bevy/discussions/15014#discussioncomment-10574459)
faithfully except for one change. I separated `TextSpan` from
`TextSpan2d` because `TextSpan` needs to require the `GhostNode`
component, which is a `bevy_ui` component only usable by UI.
Extra changes:
- Added `EntityCommands::commands_mut` that returns a mutable reference.
This is a blocker for extension methods that return something other than
`self`. Note that `sickle_ui`'s `UiBuilder::commands` returns a mutable
reference for this reason.
## Testing
- [x] Text examples all work.
---
## Showcase
TODO: showcase-worthy
## Migration Guide
TODO: very breaking
### Accessing text spans by index
Text sections are now text sections on different entities in a
hierarchy, Use the new `TextReader` and `TextWriter` system parameters
to access spans by index.
Before:
```rust
fn refresh_text(mut query: Query<&mut Text, With<TimeText>>, time: Res<Time>) {
let text = query.single_mut();
text.sections[1].value = format_time(time.elapsed());
}
```
After:
```rust
fn refresh_text(
query: Query<Entity, With<TimeText>>,
mut writer: UiTextWriter,
time: Res<Time>
) {
let entity = query.single();
*writer.text(entity, 1) = format_time(time.elapsed());
}
```
### Iterating text spans
Text spans are now entities in a hierarchy, so the new `UiTextReader`
and `UiTextWriter` system parameters provide ways to iterate that
hierarchy. The `UiTextReader::iter` method will give you a normal
iterator over spans, and `UiTextWriter::for_each` lets you visit each of
the spans.
---------
Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
Co-authored-by: Carter Anderson <mcanders1@gmail.com>
2024-10-09 18:35:36 +00:00
|
|
|
BackgroundColor(Color::srgb(0.8 - j as f32 * 0.2, 0., 0.)),
|
|
|
|
));
|
2023-04-24 14:22:31 +00:00
|
|
|
}
|
|
|
|
commands.entity(row_id).add_child(column_id);
|
|
|
|
}
|
|
|
|
commands.entity(root).add_child(row_id);
|
|
|
|
}
|
|
|
|
}
|