View Single Post
Old 05-06-2019, 09:03 PM   #22
Human being with feelings
Lokasenna's Avatar
Join Date: Sep 2008
Location: Calgary, AB, Canada
Posts: 6,247

tXShooter just pointed this thread out to me - sorry for not catching it the first time around.

My GUI library doesn't currently have any image-related functionality (the upcoming v3 will, hopefully), but images are straightforward enough that it's not too hard to add them.

The example given above has links to a version of the library (a VERY old version - like, not even worth using for anything other than that tutorial) that I had rewritten to use the provided images rather than drawing the elements.

As it happens, I reimplemented a portion of that code the other day for a script I'm working on. I've added a bunch of comments, hopefully it gets the idea across:

-- We'll be reusing a couple of methods from this
GUI.req("Classes/Class - Button.lua")()

-- We'll keep the loaded images here so we don't keep loading existing files
local images = {}

-- Loads the specified image from script_path/images/[image].png
-- If successful, returns a buffer number for retrieving it
local function loadImage(image)
  -- If we've already got this file...
  if images[image] then return images[image] end

  -- Have the GUI assign a buffer for our image to live in
  local buffer = GUI.GetBuffer()

  -- Attempt to load the given image from our ./images
  local ret = gfx.loadimg(buffer, GUI.script_path.."/images/"..image..".png")

  -- If we're good, store the buffer number and return it
  if ret > -1 then
    images[image] = buffer
    return buffer
  -- If not, release the buffer

-- Create a new element class
local IButton = GUI.Element:new()
GUI.IButton = IButton
IButton.__index = IButton

-- Required properties: z, w, h, image, func, params
-- w and h must be the size of one "frame" of the image
function IButton:new(name, props)
  local button = props = name
  button.type = "IButton"

  if not button.image then error("IButton: Missing 'image' property") end

  button.state = 0

  GUI.redraw_z[button.z] = true

  return setmetatable(button, self)

-- Make sure we have the image specified for this button
function IButton:init()
  self.imageBuffer = loadImage(self.image)
  if not self.imageBuffer then error("IButton: The specified image was not found") end

-- Draw from our buffer to the current layer
-- This setup expects three button states, laid out left to right: Normal, Hover, Down
function IButton:draw()
  gfx.mode = 0
  gfx.blit(self.imageBuffer, 1, 0, self.state * self.w, 0, self.w, self.h, self.x, self.y, self.w, self.h)

-- Check to see if the mouse has left the button and update accordingly
function IButton:onupdate()
  if self.state > 0 and not GUI.IsInside(self, GUI.mouse.x, GUI.mouse.y) then
    self.state = 0


-- Hover
function IButton:onmouseover()
  self.state = 1

-- Mouse down
function IButton:onmousedown()
  self.state = 2

-- These two functions aren't any different, so we can just borrow them
IButton.onmouseup = GUI.Button.onmouseup
IButton.ondoubleclick = GUI.Button.ondoubleclick
Lokasenna is offline   Reply With Quote