Skip to content

UI.Image

Name - Description Default Type
<input> The image to display. ImageGFX.Texture2D
<output> The output of this shard will be its input. ImageGFX.Texture2D
Scale Scaling to apply to the source image. (1 1) Float2&Float2
Size The size to render the image at. None Float2&Float2
ScalingAware When set to true, this image's pixels will be rendered 1:1 regardless of UI context point size. None Bool&Bool

Display an image in the UI.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
(GFX.MainWindow
 :Contents
 (->
  (Setup
   (GFX.DrawQueue) >= .ui-draw-queue
   (GFX.UIPass .ui-draw-queue) >> .render-steps)
  (UI
   .ui-draw-queue
   (UI.CentralPanel
    (->
     (Setup
      (LoadImage "data/ShardsLogo.png") = .image)
     .image (UI.Image :Scale (float2 0.25)))))

  (GFX.Render :Steps .render-steps)))

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
(GFX.MainWindow
 :Contents
 (->
  (Setup
   (GFX.DrawQueue) >= .ui-draw-queue
   (GFX.UIPass .ui-draw-queue) >> .render-steps)
  (UI
   .ui-draw-queue
   (UI.CentralPanel
    (->
     (Setup
      (LoadImage "data/ShardsLogo.png")  >= .image
      (GFX.Texture) >= .texture)
       ; Draw UI image by loading the image into graphics memory when needed
     .image (UI.Image :Scale (float2 0.1))
       ; Draw UI image directly from a texture
     .texture (UI.Image :Scale (float2 0.1)))))

  (GFX.Render :Steps .render-steps)))

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
;; this test script is meant to test the PremultiplyAlpha and DemultiplyAlpha shards as well as the :PremultiplyAlpha behaviour of LoadImage shrad
;; however, this script uses GFX.Texture as well. Without GFX.Texture, the issues with non-premultiplied alpha may not appear for PNGs.

(GFX.MainWindow
 :Contents
 (->
  (Setup
   (GFX.DrawQueue) >= .ui-draw-queue
   (GFX.UIPass .ui-draw-queue) >> .render-steps)
  (UI
   .ui-draw-queue
   (UI.CentralPanel
    (->
     (Setup
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha true) (GFX.Texture) = .premultiplied-alpha-image-1
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha false) (PremultiplyAlpha) (GFX.Texture) = .premultiplied-alpha-image-2
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha true) (DemultiplyAlpha) (PremultiplyAlpha) (GFX.Texture) = .premultiplied-alpha-image-3
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha false) (DemultiplyAlpha) (PremultiplyAlpha) (PremultiplyAlpha) (GFX.Texture) = .premultiplied-alpha-image-4
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha false) (GFX.Texture) = .non-premultiplied-alpha-image-1
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha false) (PremultiplyAlpha) (DemultiplyAlpha) (GFX.Texture) = .non-premultiplied-alpha-image-2
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha false) (PremultiplyAlpha) (DemultiplyAlpha) (DemultiplyAlpha) (GFX.Texture) = .non-premultiplied-alpha-image-3
      (LoadImage "data/Damaged_Effect_5.png" :PremultiplyAlpha true) (PremultiplyAlpha) (DemultiplyAlpha) (GFX.Texture) = .non-premultiplied-alpha-image-4)
     (UI.Horizontal
      :Contents 
      (-> 
       (UI.Vertical
        :Contents
        (->
         .premultiplied-alpha-image-1 (UI.Image :Scale (float2 0.25))
         .premultiplied-alpha-image-2 (UI.Image :Scale (float2 0.25))
         .premultiplied-alpha-image-3 (UI.Image :Scale (float2 0.25))
         .premultiplied-alpha-image-4 (UI.Image :Scale (float2 0.25))
         ))
       (UI.Vertical
        :Contents
        (->
         .non-premultiplied-alpha-image-1 (UI.Image :Scale (float2 0.25))
         .non-premultiplied-alpha-image-2 (UI.Image :Scale (float2 0.25))
         .non-premultiplied-alpha-image-3 (UI.Image :Scale (float2 0.25))
         .non-premultiplied-alpha-image-4 (UI.Image :Scale (float2 0.25))
     )))))))

  (GFX.Render :Steps .render-steps)))