Skip to content
dengmahalYT edited this page Jul 10, 2024 · 4 revisions

Welcome to the deng_ui wiki!

Deng_ui is a ui library for Löve2d 12.0, intended for use in my "Tiresim2D" project(atleast thats its current name). This library is far from complete and things will probably change. (its also kinda spagheti) (maybe what im doing here is dumb, pls tell me)

Currently supported features:

  • Automatic rescaling
  • Buttons
  • Scrolling frames
  • Text input
  • Rotation of most ui-elements

Starting guide

Deng_ui needs to be provided a few callbacks in order for everything to work:

local dengui=require("dengui.lua")
function love.keypressed(key)
    dengui.keypressed(key)
end
function love.textinput(key)
    dengui.textinput(key)
end
function love.keyreleased(key)
    dengui.keyreleased(key)
end
function love.mousepressed(x, y, button, isTouch)
    dengui.mousepressed(x, y, button, isTouch)
end
function love.mousereleased(x,y,button,isTouch)
    dengui.mousereleased(x,y,button,isTouch)
end
function love.mousemoved(x,y,dx,dy)
    dengui.mousemoved(x,y,dx,dy)
end
function love.wheelmoved(x,y)
    dengui.wheelmoved(x,y)
end
function love.draw(dt)
     dengui.draw()
end

You can still have more things in love.draw() oofcourse, the library will simply be overlayed above enything done before it.

Canvases

Every UI-element has to be inside a canvas, and a canvas cannot be inside another canvas. A canvas can simply be created using dengui.new_canvas, taking sx_s,sy_s,zindex as mandatory arguments.

  • sx_s,sy_s are the scale proportional to your render_screen
  • zindex is the zindex, a higher zindex will be shown further infront (rendered later)

That function will return a canvas_id and a canvas_data.

  • canvas_id will be used for functions like creating ui-elements or setting the size of that canvas
  • canvas_data is the literal data that belongs to that canvas and is the data used internally aswell. not every variable here should be changed.

You can also define an aspect ratio the library will maintain. For that and more see the Canvases page.


rendering_screen

The rendering_screen is like an simulated screen for the library. It can be used to more easily maintain aspect ratios of everything without making things distorted.

You can set its dimensions using dengui.set_render_screen_dims, taking the arguments sx_s,sy_s,px_s,py_s,r,do_aspect,aspect_ratio (none mandatory).

  • sx_s,sy_s are the scale proportional to the screen.
  • px_s,py_s are the position proportional to the screen.
  • r is the rotation of the rendering_screen.
  • do_aspect sets if an aspect ratio should be maintained.
  • aspect_ratio is the aspect ratio.

creating and updating elements

There are many functions ot create elements. for example: dengui.new_box taking the arguments canvas_id,position,size,colour,mode (none mandatory) look in this wiki for more elements and what thier arguments mean.

Every new_[element] function returns the raw data the library works with. You can modify all that data whenever you want. You only have to keep track of all your elements (for now).

Example:
local mybox=dengui.new_box(maincanvas_id)
mybox.anchor={x=0.5,y=0.5}
mybox.colour={.4,0,.4,0.8}
mybox.size={scale={x=.9,y=.9},offset={x=0,y=0}}
mybox.position={scale={x=0.5,y=0.5},offset={x=0,y=0}}
mybox.zindex=1

You dont have to fill all arguments of the "new_[element]" functions

However, when you update an element, you have to call the deng.re_render_canvas function yourself. Alternatively you can also use the function dengui.re_render_all, which re_renders everything.


Data Structures

Size and Position are usually stores like this: {scale={x=number,y=number},offset={x=number,y=number}}

  • With scale you specify the size/position Propoortional to the canvas/rendering_screen.
  • With offset you specify the size/position offset in pixels

Colour is stored as table with r,g,b,a indexed by number. For example {1,1,1,1} would be white. just like normal löve

Anchor defines where the center of the element would be. For example:

  • {x=0,y=0} would define the top left corner as the center.
  • {x=0.5,y=0.5} would define the actual center as the center.
  • {x=1,y=1} would define the bottom right corner as the center.

etc.

For sorting the library uses a custom quicksort function. Its faster than the standart lua implementation in most cases. The cuustom sorting function also returns from where to where elements where moved in the end.

The library also runs at certain intervals (dependent on amount of elements inside a canvas) the garbage collecter scince a lot of memory can pile up with lots of ui-elements. it will print "collected" in the console when it does.

The main.lua was only used for testing and is not required for the library to run. You only need dengui.lua


For more see the induvidual elements TBD