Implement rotation for Text2d (#2084)

Fixes https://github.com/bevyengine/bevy/issues/2080

![CleanShot 2021-05-02 at 22 50 09](https://user-images.githubusercontent.com/11653/116844876-373ca780-ab99-11eb-8f61-8d93d929bff0.gif)


Co-authored-by: Nathan Stocks <cleancut@github.com>
Co-authored-by: Denis Laprise <nside@users.noreply.github.com>

crates/bevy_text/src/draw.rs

@@ -1,4 +1,6 @@
+use crate::{PositionedGlyph, TextSection};
 use bevy_math::{Mat4, Vec3};
+use bevy_render::pipeline::IndexFormat;
 use bevy_render::{
     draw::{Draw, DrawContext, DrawError, Drawable},
     mesh,
@@ -8,19 +10,18 @@ use bevy_render::{
     renderer::{BindGroup, RenderResourceBindings, RenderResourceId},
 };
 use bevy_sprite::TextureAtlasSprite;
+use bevy_transform::prelude::GlobalTransform;
 use bevy_utils::tracing::error;
 
-use crate::{PositionedGlyph, TextSection};
-use bevy_render::pipeline::IndexFormat;
-
 pub struct DrawableText<'a> {
     pub render_resource_bindings: &'a mut RenderResourceBindings,
-    pub position: Vec3,
+    pub global_transform: GlobalTransform,
     pub scale_factor: f32,
     pub sections: &'a [TextSection],
     pub text_glyphs: &'a Vec<PositionedGlyph>,
     pub msaa: &'a Msaa,
     pub font_quad_vertex_layout: &'a VertexBufferLayout,
+    pub alignment_offset: Vec3,
 }
 
 impl<'a> Drawable for DrawableText<'a> {
@@ -76,19 +77,12 @@ impl<'a> Drawable for DrawableText<'a> {
                 flip_y: false,
             };
 
-            // To get the rendering right for non-one scaling factors, we need
+            let transform = Mat4::from_rotation_translation(
-            // the sprite to be drawn in "physical" coordinates. This is because
+                self.global_transform.rotation,
-            // the shader uses the size of the sprite to control the size on
+                self.global_transform.translation,
-            // screen. To accomplish this we make the sprite transform
+            ) * Mat4::from_scale(self.global_transform.scale / self.scale_factor)
-            // convert from physical coordinates to logical coordinates in
-            // addition to altering the origin. Since individual glyphs will
-            // already be in physical coordinates, we just need to convert the
-            // overall position to physical coordinates to get the sprites
-            // physical position.
-
-            let transform = Mat4::from_scale(Vec3::splat(1. / self.scale_factor))
                 * Mat4::from_translation(
-                    self.position * self.scale_factor + tv.position.extend(0.),
+                    self.alignment_offset * self.scale_factor + tv.position.extend(0.),
                 );
 
             let transform_buffer = context.get_uniform_buffer(&transform).unwrap();

crates/bevy_text/src/text2d.rs

@@ -93,26 +93,25 @@ pub fn draw_text2d_system(
         let (width, height) = (calculated_size.size.width, calculated_size.size.height);
 
         if let Some(text_glyphs) = text_pipeline.get_glyphs(&entity) {
-            let position = global_transform.translation
+            let alignment_offset = match text.alignment.vertical {
-                + match text.alignment.vertical {
+                VerticalAlign::Top => Vec3::new(0.0, -height, 0.0),
-                    VerticalAlign::Top => Vec3::ZERO,
+                VerticalAlign::Center => Vec3::new(0.0, -height * 0.5, 0.0),
-                    VerticalAlign::Center => Vec3::new(0.0, -height * 0.5, 0.0),
+                VerticalAlign::Bottom => Vec3::ZERO,
-                    VerticalAlign::Bottom => Vec3::new(0.0, -height, 0.0),
+            } + match text.alignment.horizontal {
-                }
+                HorizontalAlign::Left => Vec3::ZERO,
-                + match text.alignment.horizontal {
+                HorizontalAlign::Center => Vec3::new(-width * 0.5, 0.0, 0.0),
-                    HorizontalAlign::Left => Vec3::new(-width, 0.0, 0.0),
+                HorizontalAlign::Right => Vec3::new(-width, 0.0, 0.0),
-                    HorizontalAlign::Center => Vec3::new(-width * 0.5, 0.0, 0.0),
+            };
-                    HorizontalAlign::Right => Vec3::ZERO,
-                };
 
             let mut drawable_text = DrawableText {
                 render_resource_bindings: &mut render_resource_bindings,
-                position,
+                global_transform: *global_transform,
+                scale_factor,
                 msaa: &msaa,
                 text_glyphs: &text_glyphs.glyphs,
                 font_quad_vertex_layout: &font_quad_vertex_layout,
-                scale_factor,
                 sections: &text.sections,
+                alignment_offset,
             };
 
             drawable_text.draw(&mut draw, &mut context).unwrap();

crates/bevy_ui/src/widget/text.rs

@@ -167,16 +167,15 @@ pub fn draw_text_system(
         }
 
         if let Some(text_glyphs) = text_pipeline.get_glyphs(&entity) {
-            let position = global_transform.translation - (node.size / 2.0).extend(0.0);
-
             let mut drawable_text = DrawableText {
                 render_resource_bindings: &mut render_resource_bindings,
-                position,
+                global_transform: *global_transform,
                 scale_factor: scale_factor as f32,
                 msaa: &msaa,
                 text_glyphs: &text_glyphs.glyphs,
                 font_quad_vertex_layout: &vertex_buffer_layout,
                 sections: &text.sections,
+                alignment_offset: (node.size / -2.0).extend(0.0),
             };
 
             drawable_text.draw(&mut draw, &mut context).unwrap();

examples/2d/text2d.rs

@@ -4,36 +4,79 @@ fn main() {
     App::build()
         .add_plugins(DefaultPlugins)
         .add_startup_system(setup.system())
-        .add_system(animate.system())
+        .add_system(animate_translation.system())
+        .add_system(animate_rotation.system())
+        .add_system(animate_scale.system())
         .run();
 }
 
+struct AnimateTranslation;
+struct AnimateRotation;
+struct AnimateScale;
+
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+    let text_style = TextStyle {
+        font,
+        font_size: 60.0,
+        color: Color::WHITE,
+    };
+    let text_alignment = TextAlignment {
+        vertical: VerticalAlign::Center,
+        horizontal: HorizontalAlign::Center,
+    };
     // 2d camera
     commands.spawn_bundle(OrthographicCameraBundle::new_2d());
-    commands.spawn_bundle(Text2dBundle {
+    // Demonstrate changing translation
-        text: Text::with_section(
+    commands
-            "This text is in the 2D scene.",
+        .spawn_bundle(Text2dBundle {
-            TextStyle {
+            text: Text::with_section("translation", text_style.clone(), text_alignment),
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            ..Default::default()
-                font_size: 60.0,
+        })
-                color: Color::WHITE,
+        .insert(AnimateTranslation);
-            },
+    // Demonstrate changing rotation
-            TextAlignment {
+    commands
-                vertical: VerticalAlign::Center,
+        .spawn_bundle(Text2dBundle {
-                horizontal: HorizontalAlign::Center,
+            text: Text::with_section("rotation", text_style.clone(), text_alignment),
-            },
+            ..Default::default()
-        ),
+        })
-        ..Default::default()
+        .insert(AnimateRotation);
-    });
+    // Demonstrate changing scale
+    commands
+        .spawn_bundle(Text2dBundle {
+            text: Text::with_section("scale", text_style, text_alignment),
+            ..Default::default()
+        })
+        .insert(AnimateScale);
 }
 
-fn animate(time: Res<Time>, mut query: Query<&mut Transform, With<Text>>) {
+fn animate_translation(
-    // `Transform.translation` will determine the location of the text.
+    time: Res<Time>,
-    // `Transform.scale` and `Transform.rotation` do not yet affect text (though you can set the
+    mut query: Query<&mut Transform, (With<Text>, With<AnimateTranslation>)>,
-    // size of the text via `Text.style.font_size`)
+) {
     for mut transform in query.iter_mut() {
-        transform.translation.x = 100.0 * time.seconds_since_startup().sin() as f32;
+        transform.translation.x = 100.0 * time.seconds_since_startup().sin() as f32 - 400.0;
         transform.translation.y = 100.0 * time.seconds_since_startup().cos() as f32;
     }
 }
+
+fn animate_rotation(
+    time: Res<Time>,
+    mut query: Query<&mut Transform, (With<Text>, With<AnimateRotation>)>,
+) {
+    for mut transform in query.iter_mut() {
+        transform.rotation = Quat::from_rotation_z(time.seconds_since_startup().cos() as f32);
+    }
+}
+
+fn animate_scale(
+    time: Res<Time>,
+    mut query: Query<&mut Transform, (With<Text>, With<AnimateScale>)>,
+) {
+    // Consider changing font-size instead of scaling the transform. Scaling a Text2D will scale the
+    // rendered quad, resulting in a pixellated look.
+    for mut transform in query.iter_mut() {
+        transform.translation = Vec3::new(400.0, 0.0, 0.0);
+        transform.scale = Vec3::splat((time.seconds_since_startup().sin() as f32 + 1.1) * 2.0);
+    }
+}