Skip to content
coding.jackalope edited this page Feb 27, 2021 · 9 revisions
Table of Contents

Overview

Images can be drawn within windows and react to user interaction. A path to an image can be specified through the options of the Image function. If this is done, Slab will manage the image resource and will use the path as a key to the resource.

Slab.BeginWindow('MyFirstWindow', {Title = "My First Window"})

Slab.Image('MyImage', {Path = "Slab/Internal/Resources/Textures/power.png"})

Slab.EndWindow()

A Love image object can also be used to pass into the Image function. These resources should be managed outside of Slab.

local Power = nil
function love.load(args)
	Power = love.graphics.newImage("Slab/Internal/Resources/Textures/power.png")
end

...

Slab.BeginWindow('MyFirstWindow', {Title = "My First Window"})

Slab.Image('MyImage', {Image = Power})

Slab.EndWindow()

Images can also react to user input. An image can react to a mouse click.

Slab.BeginWindow('MyFirstWindow', {Title = "My First Window"})

local PowerColor = PowerButton and {1.0, 0.0, 0.0, 1.0} or {1.0, 1.0, 1.0, 1.0}

Slab.Image('MyImage', {Image = Power, Color = PowerColor, ReturnOnClick = true})
if Slab.IsControlClicked() then
	PowerButton = not PowerButton
end

Slab.EndWindow()

An image can also react to hover.

Slab.BeginWindow('MyFirstWindow', {Title = "My First Window"})

local PowerColor = PowerButton and {1.0, 0.0, 0.0, 1.0} or {1.0, 1.0, 1.0, 1.0}

Slab.Image('MyImage', {Image = Power, Color = PowerColor})
PowerButton = Slab.IsControlHovered()

Slab.EndWindow()

Sub-rectangles can also be specified with an image.

Tiles = love.graphics.newImage("Assets/Textures/mapPack_spritesheet.png")

Slab.Image('TileImage', {
	Image = Tiles,
	SubX = 0.0,
	SubY = 0.0,
	SubW = 64.0,
	SubH = 64.0
})
Slab.SameLine({CenterY = true})
Slab.Text(V.Name)

API

Below is a list of functions associated with the Image API.

Image

Draws an image at the current cursor position. The Id uniquely identifies this image to manage behaviors with this image. An image can be supplied through the options or a path can be specified which Slab will manage the loading and storing of the image reference.

Parameter Type Description
Id String A string uniquely identifying this image within the context of the current window.
Options Table List of options controlling how the image should be drawn.
Option Type Description
Image Object A user supplied image. This must be a valid Love image or the call will assert.
Path String If the Image option is nil, then a path must be specified. Slab will load and manage the image resource.
Rotation Number The rotation value to apply when this image is drawn.
Scale Number The scale value to apply to both the X and Y axis.
ScaleX Number The scale value to apply to the X axis.
ScaleY Number The scale value to apply to the Y axis.
Color Table The color to use when rendering this image.
SubX Number The X-coordinate used inside the given image.
SubY Number The Y-coordinate used inside the given image.
SubW Number The width used inside the given image.
SubH Number The height used insided the given image.
WrapX String The horizontal wrapping mode for this image. The available options are 'clamp', 'repeat', 'mirroredrepeat', and 'clampzero'. For more information refer to the Love2D documentation on wrap modes here.
WrapY String The vertical wrapping mode for this image. The available options are 'clamp', 'repeat', 'mirroredrepeat', and 'clampzero'. For more information refer to the Love2D documentation on wrap modes here.
UseOutline Boolean If set to true, a rectangle will be drawn around the given image. If 'SubW' or 'SubH' are specified, these values will be used instead of the image's dimensions.
OutlineColor Table The color used to draw the outline. Default color is black.
OutlineW Number The width used for the outline. Default value is 1.
W Number The width the image should be resized to.
H Number The height the image should be resized to.
Clone this wiki locally