Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Merged by Bors] - Add text wrapping support to Text2d #4347

Closed
wants to merge 6 commits into from

Conversation

infmagic2047
Copy link
Contributor

Objective

Fixes #4344.

Solution

Add a new component Text2dBounds to Text2dBundle that specifies the maximum width and height of text. Text will wrap according to this size.

@github-actions github-actions bot added the S-Needs-Triage This issue needs to be labelled label Mar 28, 2022
@alice-i-cecile alice-i-cecile added C-Bug An unexpected or incorrect behavior A-UI Graphical user interfaces, styles, layouts, and widgets C-Usability A targeted quality-of-life change that makes Bevy easier to use and removed S-Needs-Triage This issue needs to be labelled labels Mar 28, 2022
Copy link
Member

@alice-i-cecile alice-i-cecile left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it! This is really well made for a first PR: it does what you'd expect, and the code quality and docs are great.

One small suggestion for you.

@@ -123,7 +134,7 @@ pub fn text2d_system(
mut text_pipeline: ResMut<DefaultTextPipeline>,
mut text_queries: QuerySet<(
QueryState<Entity, (With<Text2dSize>, Changed<Text>)>,
QueryState<(&Text, &mut Text2dSize), With<Text2dSize>>,
QueryState<(&Text, &Text2dBounds, &mut Text2dSize), With<Text2dSize>>,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use an Option<Text2dBounds> here to be robust in the cases where this component isn't set.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, done now.

pub size: Size,
}

/// The maximum width and height of text. The text will wrap according to the specified size.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a comment on what happens when it's not possible to contain the text within the specified bound?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my testing and code-reading, the underlying library will truncate the part of text that fall out of the bound. However, only characters that are completely out of the bound will be truncated, so there may be some characters partly out of the bound.

This is not very desirable. A better behavior would be to clip the character at the bound, but as I understand, this is not simple because we don't have sprite masking yet. Therefore, I decided to simply document this fact here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a comment for now could be enough. Could you also mention that the text is centered within the bounds and when wrapped, and not justified or left align

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This centering is a simple consequence of the text alignment choice here (center horizontally and vertically). I added a mention of TextAlignment here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh right, I missed that it was part of the Text component. Thanks!

Comment on lines 54 to 72
// Demonstrate text wrapping
commands.spawn_bundle(SpriteBundle {
sprite: Sprite {
color: Color::rgb(0.25, 0.25, 0.75),
custom_size: Some(Vec2::new(300.0, 200.0)),
..default()
},
transform: Transform::from_xyz(0.0, -250.0, 0.0),
..default()
});
commands.spawn_bundle(Text2dBundle {
text: Text::with_section("this text wraps in the box", text_style, text_alignment),
text_2d_bounds: Text2dBounds {
// Wrap text in the rectangle
size: Size::new(300.0, 200.0),
},
transform: Transform::from_xyz(0.0, -250.0, 1.0),
..default()
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you use variables for the bounds so that they are reused for the sprite bundle and the text bounds? That would make it easier for someone who wants to play with the example

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK. I also changed the text alignment to top-left here, as this is probably a more useful case.

@alice-i-cecile
Copy link
Member

@infmagic2047, thanks for being so responsive to reviews :) Once the comments are addressed, you can press "Resolve conversation" on anything that's fully resolved so future reviewers can tell at a glance that there are no outstanding problems.

@mockersf mockersf added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Mar 29, 2022
@cart
Copy link
Member

cart commented Mar 29, 2022

bors r+

bors bot pushed a commit that referenced this pull request Mar 29, 2022
# Objective

Fixes #4344.

## Solution

Add a new component `Text2dBounds` to `Text2dBundle` that specifies the maximum width and height of text. Text will wrap according to this size.
@bors bors bot changed the title Add text wrapping support to Text2d [Merged by Bors] - Add text wrapping support to Text2d Mar 29, 2022
@bors bors bot closed this Mar 29, 2022
aevyrie pushed a commit to aevyrie/bevy that referenced this pull request Jun 7, 2022
# Objective

Fixes bevyengine#4344.

## Solution

Add a new component `Text2dBounds` to `Text2dBundle` that specifies the maximum width and height of text. Text will wrap according to this size.
ItsDoot pushed a commit to ItsDoot/bevy that referenced this pull request Feb 1, 2023
# Objective

Fixes bevyengine#4344.

## Solution

Add a new component `Text2dBounds` to `Text2dBundle` that specifies the maximum width and height of text. Text will wrap according to this size.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior C-Usability A targeted quality-of-life change that makes Bevy easier to use S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add text wrapping support to Text2d
4 participants