Add rotation support for Quad and Sprite

examples/color.rs

@@ -64,6 +64,7 @@ impl Game for Colors {
                     height: 1.0,
                 },
                 position: Point::new(0.0, 0.0),
+                rotation: 0.0,
                 size: (500.0, 500.0),
             },
             target,

examples/image.rs

@@ -4,7 +4,8 @@ use coffee::graphics::{
 };
 use coffee::load::Task;
 use coffee::ui::{
-    Align, Column, Element, Image, Justify, Renderer, Text, UserInterface,
+    Align, Column, Element, Image, Justify, Panel, Renderer, Text,
+    UserInterface,
 };
 use coffee::{Game, Result, Timer};
 
@@ -54,13 +55,13 @@ impl UserInterface for ImageScreen {
             .align_items(Align::Center)
             .justify_content(Justify::Center)
             .spacing(20)
-            .push(
+            .push(Panel::new(
                 Text::new("This is an image")
                     .size(50)
                     .height(60)
                     .horizontal_alignment(HorizontalAlignment::Center)
                     .vertical_alignment(VerticalAlignment::Center),
-            )
+            ))
             .push(Image::new(&self.image).height(250))
             .into()
     }

examples/input.rs

@@ -2,8 +2,7 @@
 use std::collections::HashSet;
 
 use coffee::graphics::{
-    Color, Frame, Image, Point, Rectangle, Sprite, Vector, Window,
-    WindowSettings,
+    Color, Frame, Image, Point, Rectangle, Sprite, Window, WindowSettings,
 };
 use coffee::input::{self, keyboard, mouse, Input};
 use coffee::load::Task;
@@ -154,6 +153,7 @@ impl Game for InputExample {
                     height: 1,
                 },
                 position: self.cursor_position - Vector::new(3.0, 3.0),
+                rotation: 0.0,
                 scale: (6.0, 6.0),
             },
             &mut frame.as_target(),

examples/particles.rs

@@ -149,6 +149,7 @@ impl Game for Particles {
                     height: 1,
                 },
                 position: particle.position + velocity * delta_factor,
+                rotation: 0.0,
                 scale: (1.0, 1.0),
             }
         });

src/graphics/backend_gfx/quad.rs

@@ -33,6 +33,7 @@ gfx_defines! {
         src: [f32; 4] = "a_Src",
         translation: [f32; 2] = "a_Translation",
         scale: [f32; 2] = "a_Scale",
+        rotation: f32 = "a_Rotation",
         layer: u32 = "t_Layer",
     }
 
@@ -213,11 +214,13 @@ impl From<graphics::Quad> for Quad {
         let source = quad.source;
         let position = quad.position;
         let (width, height) = quad.size;
+        let rotation = quad.rotation;
 
         Quad {
             src: [source.x, source.y, source.width, source.height],
             translation: [position.x, position.y],
             scale: [width, height],
+            rotation: rotation,
             layer: 0,
         }
     }

src/graphics/backend_gfx/shader/quad.vert

@@ -6,26 +6,44 @@ in vec4 a_Src;
 in vec2 a_Scale;
 in vec2 a_Translation;
 in uint t_Layer;
+in float a_Rotation;
 
-layout (std140) uniform Globals {
+layout(std140)uniform Globals{
     mat4 u_MVP;
 };
 
 out vec2 v_Uv;
 flat out uint v_Layer;
 
-void main() {
-    v_Uv = a_Pos * a_Src.zw + a_Src.xy;
-    v_Layer = t_Layer;
-
-    mat4 instance_transform = mat4(
-        vec4(a_Scale.x, 0.0, 0.0, 0.0),
-        vec4(0.0, a_Scale.y, 0.0, 0.0),
-        vec4(0.0, 0.0, 1.0, 0.0),
-        vec4(a_Translation, 0.0, 1.0)
+void main(){
+    v_Uv=a_Pos*a_Src.zw+a_Src.xy;
+    v_Layer=t_Layer;
+    
+    mat4 Scale=mat4(
+        vec4(a_Scale.x,0.,0.,0.),
+        vec4(0.,a_Scale.y,0.,0.),
+        vec4(0.,0.,1.,0.),
+        vec4(0,0,0.,1.)
     );
-
-    vec4 position = u_MVP * instance_transform * vec4(a_Pos, 0.0, 1.0);
-
-    gl_Position = position;
+
+    mat4 Rotate=mat4(
+        vec4(cos(a_Rotation),-sin(a_Rotation),0.,0.),
+        vec4(sin(a_Rotation),cos(a_Rotation),0.,0.),
+        vec4(0.,0.,1.,0.),
+        vec4(0.,0.,0.,1.)
+    );
+
+    mat4 Translate=mat4(
+        vec4(1.,0.,0.,0.),
+        vec4(0.,1.,0.,0.),
+        vec4(0.,0.,1.,0.),
+        vec4(a_Translation,0.,1.)
+    );
+
+    vec4 temp = (Rotate*vec4(a_Pos-vec2(.5,.5),0.,1.)) + vec4(.5,.5,0,0);
+    mat4 instance_transform=Translate*Scale;
+
+    vec4 position=u_MVP*instance_transform*temp;
+
+    gl_Position=position;
 }

src/graphics/backend_wgpu/quad.rs

@@ -168,9 +168,14 @@ impl Pipeline {
                                 },
                                 wgpu::VertexAttributeDescriptor {
                                     shader_location: 4,
-                                    format: wgpu::VertexFormat::Uint,
+                                    format: wgpu::VertexFormat::Float,
                                     offset: 4 * (4 + 2 + 2),
                                 },
+                                wgpu::VertexAttributeDescriptor {
+                                    shader_location: 5,
+                                    format: wgpu::VertexFormat::Uint,
+                                    offset: 4 * (4 + 2 + 2 + 1),
+                                },
                             ],
                         },
                     ],
@@ -336,6 +341,7 @@ pub struct Quad {
     source: [f32; 4],
     scale: [f32; 2],
     translation: [f32; 2],
+    rotation: f32,
     pub layer: u32,
 }
 
@@ -347,11 +353,13 @@ impl From<graphics::Quad> for Quad {
     fn from(quad: graphics::Quad) -> Quad {
         let source = quad.source;
         let position = quad.position;
+        let rotation = quad.rotation;
         let (width, height) = quad.size;
 
         Quad {
             source: [source.x, source.y, source.width, source.height],
             translation: [position.x, position.y],
+            rotation: rotation,
             scale: [width, height],
             layer: 0,
         }

src/graphics/backend_wgpu/shader/quad.vert

@@ -1,28 +1,46 @@
 #version 450
 
-layout(location = 0) in vec2 a_Pos;
-layout(location = 1) in vec4 a_Src;
-layout(location = 2) in vec2 a_Scale;
-layout(location = 3) in vec2 a_Translation;
-layout(location = 4) in uint t_Layer;
+layout(location=0)in vec2 a_Pos;
+layout(location=1)in vec4 a_Src;
+layout(location=2)in vec2 a_Scale;
+layout(location=3)in vec2 a_Translation;
+layout(location=4)in float a_Rotation;
+layout(location=5)in uint t_Layer;
 
-layout (set = 0, binding = 0) uniform Globals {
+layout(set=0,binding=0)uniform Globals{
     mat4 u_Transform;
 };
 
-layout(location = 0) out vec2 v_Uv;
-layout(location = 1) flat out uint v_Layer;
+layout(location=0)out vec2 v_Uv;
+layout(location=1)flat out uint v_Layer;
 
-void main() {
-    v_Uv = a_Pos * a_Src.zw + a_Src.xy;
-    v_Layer = t_Layer;
-
-    mat4 a_Transform = mat4(
-        vec4(a_Scale.x, 0.0, 0.0, 0.0),
-        vec4(0.0, a_Scale.y, 0.0, 0.0),
-        vec4(0.0, 0.0, 1.0, 0.0),
-        vec4(a_Translation, 0.0, 1.0)
+void main(){
+    v_Uv=a_Pos*a_Src.zw+a_Src.xy;
+    v_Layer=t_Layer;
+    
+    mat4 Scale=mat4(
+        vec4(a_Scale.x,0.,0.,0.),
+        vec4(0.,a_Scale.y,0.,0.),
+        vec4(0.,0.,1.,0.),
+        vec4(0,0,0.,1.)
     );
-
-    gl_Position = u_Transform * a_Transform * vec4(a_Pos, 0.0, 1.0);
+
+    mat4 Rotate=mat4(
+        vec4(cos(a_Rotation),-sin(a_Rotation),0.,0.),
+        vec4(sin(a_Rotation),cos(a_Rotation),0.,0.),
+        vec4(0.,0.,1.,0.),
+        vec4(0.,0.,0.,1.)
+    );
+
+    mat4 Translate=mat4(
+        vec4(1.,0.,0.,0.),
+        vec4(0.,1.,0.,0.),
+        vec4(0.,0.,1.,0.),
+        vec4(a_Translation,0.,1.)
+    );
+
+    vec4 temp = (Rotate*vec4(a_Pos-vec2(.5,.5),0.,1.)) + vec4(.5,.5,0,0);
+    mat4 a_Transform=Translate*Scale;
+
+    gl_Position=u_Transform*a_Transform*temp;
 }

src/graphics/quad.rs

@@ -8,9 +8,12 @@ pub struct Quad {
     /// coordinates: [0.0, 1.0].
     pub source: Rectangle<f32>,
 
-    /// The position where the quad should be drawn.
+    /// The position where the quad should be drawn, anchored at the top left of the quad.
     pub position: Point,
 
+    /// The clockwise rotation to apply to the quad when drawing, specified in radians.
+    pub rotation: f32,
+
     /// The size of the quad.
     pub size: (f32, f32),
 }
@@ -25,6 +28,7 @@ impl Default for Quad {
                 height: 1.0,
             },
             position: Point::new(0.0, 0.0),
+            rotation: 0.0,
             size: (1.0, 1.0),
         }
     }

src/graphics/sprite.rs

@@ -13,9 +13,12 @@ pub struct Sprite {
     /// coordinates.
     pub source: Rectangle<u16>,
 
-    /// The position where the sprite should be drawn.
+    /// The position where the sprite should be drawn, anchored at the top left of the sprite.
     pub position: Point,
 
+    /// The clockwise rotation to apply to the sprite when drawing, specified in radians.
+    pub rotation: f32,
+
     /// The scale to apply to the sprite.
     pub scale: (f32, f32),
 }
@@ -31,6 +34,7 @@ impl Default for Sprite {
                 height: 1,
             },
             position: Point::new(0.0, 0.0),
+            rotation: 0.0,
             scale: (1.0, 1.0),
         }
     }
@@ -46,6 +50,7 @@ impl IntoQuad for Sprite {
                 height: self.source.height as f32 * y_unit,
             },
             position: self.position,
+            rotation: self.rotation,
             size: (
                 self.source.width as f32 * self.scale.0,
                 self.source.height as f32 * self.scale.1,

src/ui/renderer/button.rs

@@ -61,6 +61,7 @@ impl button::Renderer for Renderer {
                 ..LEFT
             },
             position: Point::new(bounds.x, bounds.y),
+            rotation: 0.0,
             scale: (1.0, 1.0),
         });
 
@@ -71,6 +72,7 @@ impl button::Renderer for Renderer {
                 ..BACKGROUND
             },
             position: Point::new(bounds.x + LEFT.width as f32, bounds.y),
+            rotation: 0.0,
             scale: (bounds.width - (LEFT.width + RIGHT.width) as f32, 1.0),
         });
 
@@ -84,6 +86,7 @@ impl button::Renderer for Renderer {
                 bounds.x + bounds.width - RIGHT.width as f32,
                 bounds.y,
             ),
+            rotation: 0.0,
             scale: (1.0, 1.0),
         });
 

src/ui/renderer/checkbox.rs

@@ -27,6 +27,7 @@ impl checkbox::Renderer for Renderer {
                 ..SPRITE
             },
             position: Point::new(bounds.x, bounds.y),
+            rotation: 0.0,
             scale: (1.0, 1.0),
         });
 
@@ -37,6 +38,7 @@ impl checkbox::Renderer for Renderer {
                     ..SPRITE
                 },
                 position: Point::new(bounds.x, bounds.y),
+                rotation: 0.0,
                 scale: (1.0, 1.0),
             });
         }

src/ui/renderer/image.rs

@@ -1,5 +1,5 @@
-use crate::graphics::{Rectangle, Sprite, Point, Image, Batch};
-use crate::ui::{Renderer, image};
+use crate::graphics::{Batch, Image, Point, Rectangle, Sprite};
+use crate::ui::{image, Renderer};
 
 impl image::Renderer for Renderer {
     fn draw(
@@ -22,14 +22,16 @@ impl image::Renderer for Renderer {
             ((ratio_x, ratio_x), Point::new(position_x, position_y))
         };
 
-        let mut batch = Batch::new(image); 
+        let rotation = 0.0;
+
+        let mut batch = Batch::new(image);
         batch.add(Sprite {
             source,
             position,
+            rotation,
             scale,
         });
 
         self.images.push(batch);
     }
 }
-