From b11a3bf5258cce32088770d51d8ecaecf5758d74 Mon Sep 17 00:00:00 2001
From: StarArawn <toasterthegamer@gmail.com>
Date: Thu, 16 Dec 2021 10:45:24 -0500
Subject: [PATCH] Fixed image rendering.

---
 assets/generic-rpg-vendor.png                | Bin 0 -> 3056 bytes
 bevy_kayak_ui/src/render/unified/shader.wgsl |   2 +-
 examples/image.rs                            |  16 +++++++++++++---
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 assets/generic-rpg-vendor.png

diff --git a/assets/generic-rpg-vendor.png b/assets/generic-rpg-vendor.png
new file mode 100644
index 0000000000000000000000000000000000000000..895334653809e574e22f14202eeff82abdcbeb79
GIT binary patch
literal 3056
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

literal 0
HcmV?d00001

diff --git a/bevy_kayak_ui/src/render/unified/shader.wgsl b/bevy_kayak_ui/src/render/unified/shader.wgsl
index 5c23b8d..eb9607e 100644
--- a/bevy_kayak_ui/src/render/unified/shader.wgsl
+++ b/bevy_kayak_ui/src/render/unified/shader.wgsl
@@ -99,7 +99,7 @@ fn fragment(in: VertexOutput) -> [[location(0)]] vec4<f32> {
         return vec4<f32>(in.color.rgb, a);
     }
     if (quad_type.t == 2) {
-        var color = textureSample(image_texture, image_sampler, vec2<f32>(in.uv.x, in.uv.y));
+        var color = textureSample(image_texture, image_sampler, vec2<f32>(in.uv.x, 1.0 - in.uv.y));
         return vec4<f32>(color.rgb * in.color.rgb, color.a * in.color.a);
     }
     return in.color;
diff --git a/examples/image.rs b/examples/image.rs
index 7672550..e43484d 100644
--- a/examples/image.rs
+++ b/examples/image.rs
@@ -5,7 +5,11 @@ use bevy::{
     DefaultPlugins,
 };
 use kayak_ui::bevy::{BevyContext, BevyKayakUIPlugin, ImageManager, UICameraBundle};
-use kayak_ui::core::{render, Index};
+use kayak_ui::core::{
+    render,
+    styles::{Style, StyleProp, Units},
+    Index,
+};
 use kayak_widgets::{App, Image};
 
 fn startup(
@@ -22,13 +26,19 @@ fn startup(
         panic!("Couldn't find primary window!");
     };
 
-    let handle: Handle<bevy::render::texture::Image> = asset_server.load("panel.png");
+    let handle: Handle<bevy::render::texture::Image> = asset_server.load("generic-rpg-vendor.png");
     let ui_image_handle = image_manager.get(&handle);
 
     let context = BevyContext::new(window_size.x, window_size.y, |styles, context| {
+        let image_styles = Style {
+            width: StyleProp::Value(Units::Pixels(200.0)),
+            height: StyleProp::Value(Units::Pixels(182.0)),
+            ..Style::default()
+        };
+
         render! {
             <App styles={Some(styles.clone())}>
-                <Image handle={ui_image_handle} />
+                <Image styles={Some(image_styles)} handle={ui_image_handle} />
             </App>
         }
     });
-- 
GitLab