EGS v2 - Screenshots! Redesign! (Easy GUI System)

[Trappingnoobs]

https://github.com/trappingnoobs/EGS

Screenshots at bottom of this post.

Going through being remade. I've already remade a lot of the old stuff. Borders no longer are antialiased (Which made them look horrendous.) and borders no longer don't meet at the corners.

Shading is now a lot more efficient and event declerations don't take up so much space because I made a function for them.

All functions have been rewritten and captions (Now named 'toolTips') are more customisable. The update events in GUIs now is something like 20-30% more efficient, and I've improved it a lot in general.

Code: Select all

Tl;Dr edition:

Add "require("Class.lua") and require("GUIElements\/GUIMain.lua")" to the top of main.lua
Add "GUIUpdate()" in love.update(). Pass in dt as an argument.
Add "GUIDraw()" in love.draw().

All camelCase except class names like TextButton, which are PascalCase.

Create an object like this:
TextButton:new("ButtonName")
ButtonName.size = {x,y}
ButtonName.position = {x,y}
ButtonName.text = "Hello world"

CheckBox:new("CheckName")

Slider:new("SliderName")

You get the idea.

Events work as such:

TextButton:new("Button1")
Button1.mouseButtonLDown:connect(function(x,y)
print("Mouse clicked at x:"..x.." y:"..y)
end)

Or, obviously, you can do

function Button1ClickedEventFunctionThing(x,y)
print("Mouse clicked at x:"..x.." y:"..y)
end
TextButton:new("Button1")
Button1.mouseButtonLDown:connect(Button1ClickedEventFunctionThing)

Most properties can be found by looking at GUIClassDecleration.lua, these are in all GUI elements (With some excepts; textLabel doesn't inherit mouseClicked, mousePressed or mouseReleased)

That's about it. If you need any help, just post and if you're in GMT or a similar timezone I'll usualy respond within 10 minutes.

I know, I know, there's a lot of these GUI libraries but other ones all seem to be too hard to use.

This uses my own class system (Multi-inheritance and inherit from multiple classes), and, so far has the following elements

• Checkbox
• TextButton
• Slider

I'm planning to make (In order of priority)

• DropdownBox
• Tabs
• Frames (Contain other GUI elements which position relative)
• Text input

Bugs so far are (Red bugs won't be fixed, you can either fix them manually, I'd happily update it with the fix; or you can put up with them):

• If an element is behind another, it still registers all mouse events if you click it.
• No z-positioning (Not realy a bug but it comes under the red-I-won't-fix-but-you-can category)

Features and good stuffs:

• Tooltips with text padding, and adjustable text
• Events
• Easy to use
• Very flexible
• Almost everything is adjustable (border color, width, etc)
• Generally, assuming a variable name, you'll guess write (Variable names aren't cryptic)

Bad things:

• Needs you to require two files
• Multiple (About 5-6) lua files (One of the two you require requires them for you.)
• Requires you to remember lots of variables to use efficiently (Err, what doesn't?)

To look at the list of variables, first look at GUIClassDecleration.lua, and look at GUIElement: All objects inherit from it. Note that the values set there are _DEFUALT VALUES_. You can feel free to change them but I _SERIOUSLY_ recommend you leave them alone. Look at them and you can change them in object instances instead of the object itself.

It's easy to attach a function to events; it's similar to http://roblox.com's event system, you just do this:

Code: Select all

function click()

end

Button.mouseButtonLDown:connect(click)

or you can have anonymous functions

Code: Select all

Button.mouseButtonLDown:connect(function()

end)

This is started to go into a documentation of my class sytem now, but it's relevant, so..

To make a GUI, is all you type is:

Code: Select all

GuiName:new("VariableName")

For example,

Code: Select all

Checkbox:new("Check1")

It then uses getfenv(2) to declare it. I used to allow "Check1 = Checkbox:new()", but I swapped it to this sytem because it looks better, and it allowed the classes to know what they're called.

Almost everything is fully adjustable, and some objects have their own callback functions- for example, checkbox has "checkStateChange".

It uses camelCase for all properties, methods etc, and PascalCase for classes. (eg CheckBox), and variables are named as simply as I could.

Post syntactic and whatnot feedback.

Some of you will find this a lot better than current systems, and some of you won't like it at all; fair enough, we all have opinions.

By the way; you only need one line of code in update and draw. GUIUpdate(), and GUIDraw() respectively. They both loop all GUIs and draw them.


That's about it. If you need any help, just post and if you're in GMT or a similar timezone I'll usualy respond within 10 minutes.

4JFdb.png (6.19 KiB) Viewed 384 times

m2dfb.png (12.54 KiB) Viewed 384 times

mTeXW.png (8.4 KiB) Viewed 384 times

eNlso.png (21.52 KiB) Viewed 384 times

bK3hU.png (24.6 KiB) Viewed 384 times

[Robin]

Please, please, please use

Code: Select all

 tags when appropriate

[GijsB]

please, give an example of a working button, i dont understand it.

[Trappingnoobs]

Please, please, please use (code) tags when appropriate

There's a code tag?!

T.t, I realy should look for these things. My eyes just seem to miss the thing I'm looking for, so I just colored it all red. Fixed now.


@Gijs

It's realy easy! This make a functional button.

Code: Select all

function love.load()
Button:new("Button1")
Button1.Text = "Click"
Button1:adjustSizeToText() --This just resizes Button1 to the size of the text. 
--It gives it some padding though (Some space so it doesn't look cramped)

Button1.Position = {10,10} --Positions it at x:10,y:10
Button1.backgroundColor = {0,255,255} --Bgcol R:0, G:255, B:255 = Sky blue
Button1.borderWidth = 2--2 pixel border width
Button1.borderColor = {0,255,0} --Bgcol R:0, G:255, B:0 = Green
Button1.caption = "This shows up when you hover"
Button1.hasCaption = true --If false, it doesn't show the caption ever. 
--It's false by default, so we make it true.

Button1.mouseClicked:connect(function()
Button1.text = "OMG YOU CLICKED!"
Button1:adjustSizeToText()
end
end)

function love.draw()
DrawGUI()
end

function love.update()
UpdateGUI()
end

[GijsB]

awesome

but you made a mistake at the first 2 ends, ')' must be at the first end, right? =

Code: Select all

function love.load()
Button:new("Button1")
Button1.Text = "Click"
Button1:adjustSizeToText() --This just resizes Button1 to the size of the text. 
--It gives it some padding though (Some space so it doesn't look cramped)

Button1.Position = {10,10} --Positions it at x:10,y:10
Button1.backgroundColor = {0,255,255} --Bgcol R:0, G:255, B:255 = Sky blue
Button1.borderWidth = 2--2 pixel border width
Button1.borderColor = {0,255,0} --Bgcol R:0, G:255, B:0 = Green
Button1.caption = "This shows up when you hover"
Button1.hasCaption = true --If false, it doesn't show the caption ever. 
--It's false by default, so we make it true.

Button1.mouseClicked:connect(function()
Button1.text = "OMG YOU CLICKED!"
Button1:adjustSizeToText()
end)--FIXED :D
end

[Trappingnoobs]

Yeah that's right. Typo for me.

I made a TextLabel now. Same as a Button but it doesn't register click events, better than just printing text, because it has border and whatnot. I'm going to still let it have mouseEnter and mouseLeave events though.

Any suggestions on what else I should implement?

[GijsB]

I box wich you can write in when you click in

lets see if you can make it faster en debug it freaking faster than roblox xD

[Trappingnoobs]

I box wich you can write in when you click in

lets see if you can make it faster en debug it freaking faster than roblox xD

That'd be quite hard actualy.

I could do it easily, but making the text, like, as you type, if you reach the end of the box, the text shifts left, I think that'd be quite hard- You'd need to know how wide each letter is.

[Robin]

You'd need to know how wide each letter is.

Font:getWidth

[Trappingnoobs]

You'd need to know how wide each letter is.

Font:getWidth

Yeah that's how I implemented padding, but I mean you'd need to calculate the width of every letter, put it in a table or something, and calculate how much to move the text.

Then you'd need to make it so that it only shows a particular substring, unless I just took the easy way out and just make it stretch the box as you type, or used the courier font..