Skip to content

UI.Image

Name Mandatory Description Default Type
⬅️ Input The image to display. ImageGFX.Texture2D
Output ➡️ The output of this shard will be its input. ImageGFX.Texture2D
Scale No Scaling to apply to the source image. @f2(1 1) Float2Var(Float2)None
Size No The size to render the image at. none Float2Var(Float2)None
ScalingAware No When set to true, this image's pixels will be rendered 1:1 regardless of UI context point size. none BoolVar(Bool)None

Display an image in the UI.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
GFX.MainWindow(Contents: {
  // Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  // UI
  UI({
    UI.CentralPanel({
      LoadImage("../../assets/ShardsLogo.png") = image
      image | UI.Image(Scale: @f2(0.1 0.1))
    })
  })

  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})


[info] textureFree 1
[info] textureFree 2
[info] textureFree 3
[info] textureFree 4
[info] textureFree 5
[info] textureFree 6
[warning] Context has 4 buffers at release (2 released, 4 kept)
[warning] Context has 13 textures at release (1 released, 13 kept)
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
GFX.MainWindow(Contents: {
  // Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  // UI
  UI({
    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: @f2(0.1 0.1))
      // Draw UI image directly from a texture
      texture | UI.Image(Scale: @f2(0.1 0.1))
    })
  })

  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})


[info] textureFree 1
[info] textureFree 2
[info] textureFree 3
[info] textureFree 4
[info] textureFree 5
[info] textureFree 6
[info] textureFree 7
[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 15 textures at release (2 released, 15 kept)
 

 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
GFX.MainWindow(Contents: {
  Once({
    GFX.DrawQueue = ui-draw-queue
    GFX.UIPass(ui-draw-queue) >> render-steps

    // Setup image loading with different alpha handling
    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
  UI({
    UI.CentralPanel({
      UI.Horizontal(Contents: {
        UI.Vertical(Contents: {
          premultiplied-alpha-image-1 | UI.Image(Scale: @f2(0.25 0.25))
          premultiplied-alpha-image-2 | UI.Image(Scale: @f2(0.25 0.25))
          premultiplied-alpha-image-3 | UI.Image(Scale: @f2(0.25 0.25))
          premultiplied-alpha-image-4 | UI.Image(Scale: @f2(0.25 0.25))
        })
        UI.Vertical(Contents: {
          non-premultiplied-alpha-image-1 | UI.Image(Scale: @f2(0.25 0.25))
          non-premultiplied-alpha-image-2 | UI.Image(Scale: @f2(0.25 0.25))
          non-premultiplied-alpha-image-3 | UI.Image(Scale: @f2(0.25 0.25))
          non-premultiplied-alpha-image-4 | UI.Image(Scale: @f2(0.25 0.25))
        })
      })
    })
  })

  // Render
  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})


[warning] Context has 18 buffers at release (2 released, 18 kept)
[warning] Context has 13 textures at release (1 released, 13 kept)