Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

UI Class

edited June 2013 in General Posts: 1,595

I decided about a week ago to make a gui class for a toolbar sort of thing, so far I have: A Button, Dial, Slider, Toggle, Drop down menu. I want to continue creating this class and release it when I've finished for everyone to use. The aim for this is that people can easily add a UI to their game. Here is an example of how these functions work:

 --Button command: Button(Position,Size,Text,Colour,BorderWidth,CallBack)
    var1 = "Press Me" --readImage("Cargo Bot:Clear Button")
    btn = Button(vec2(WIDTH/2,HEIGHT/2),vec2(100,60),var1,
    color(154, 227, 8, 255),5,function() print("test") end)
    var = 100
    --Slider command: Slider(Position,Size,StartValue,EndValue,Value)
    --Note: Size variable must always be vec2. If the 'y' value of the Size variable is less than 
    ------- 20 then the Slider will remain as a linear (single valued) Slider, but if the 'y' 
    ------- value is greater than 20 then this means the Slider becomes a scalar valued Slider,
    ------- allowing for 2D movement of the axis, this type of slider needs the StartVal,EndVal
    ------- and Value variables to be Scalar variables (vec2(x,y)). If the Slider is a linear 
    ------- Slider then the StartValue,EndValue and Value variables must remain linear otherwise 
    ------- this will cause errors.
    sldr = Slider(vec2(WIDTH/2,300),vec2(150,15),50,200,var)
    var2 = 0
    --Toggle command: Toggle(Position,Size,Value) , Toggle Value: Toggle:getValue()
    tog = Toggle(vec2(WIDTH/2,HEIGHT/2+100),vec2(75,30),var2)
    --Dial command: Dial(Position,Size,StartVal,EndVal,Value) , Dial Value: Dial:getValue()
    dial = Dial(vec2(WIDTH/2,HEIGHT/2+200),65,0,20,10)
    --Drop Down Menu command: DMenu(Position,Size) , DMenu item: DMenu:addItem(Name,Callback)
    dropd = DMenu(vec2(WIDTH/2+200,HEIGHT/2),vec2(150,30))
    dropd:addItem("try me",function() print("test") end)
    dropd:addItem("try me2",function() print("test2") end)

Here's what it looks like, hopefully you know which one is which!


  • Posts: 666

    Good job! Keep knocking it out!

    If you need inspiration, take a look at Cider. Also there is a QML port in here.

  • Posts: 1,595

    Thanks I'm looking for ideas of good controls if you've got any! Here's a video of it now

  • Posts: 1,976

    Your video is private and I can't see it.

  • Posts: 2,042

    @Luatee, @SkyTheCoder is correct

  • Posts: 1,595

    Sorry about that I swear it said public, done now

  • Posts: 1,976

    Wow, nice...

  • Posts: 2,042

    Wow is right... That's awesome

  • Posts: 257

    Luatee : i like your toggle wich i find best than cider version
    your dropdown menu does'nt exist in cider and i need
    please could you share the code thanks

  • edited June 2013 Posts: 1,595

    Thanks ill keep it flowing, @hpsoft i will upload the code as soon as i have another 5 UI functions, so i need ideas! Thanks for the positive comments, i could do with some negatives aswell

  • Jmv38Jmv38 Mod
    Posts: 3,295

    5 more?
    What about:
    - joystick.
    - textbox.
    - radio button.
    - roller spinner.
    - color picker.
    - toolbar (with pushbutton icons).
    No excuse now!

  • Posts: 1,595

    Text box was on my list, roller spinner? Not sure what that is. Radio button is a good shout that will be added. Colour picker I've always wanted to do but not to sure, @Andrew_Stacey has a brilliant colour picker in his complex numbers app so i know its possible. A toolbar? Like a bar with a load of buttons? This project was actually started to make the ui functions to go on a toolbar. Thanks for those suggestions ill give an update at the end of the day!

  • Jmv38Jmv38 Mod
    Posts: 3,295

    "roller spinner": i mean thg equivalent to your drop down menu, but instaed of dropping down, it looks like a rotation barrel that you can spin with your finger (i dont know the name for that). It is like the native apple component for entering dates.

  • Posts: 1,595

    I get what you mean, I'd only do a 2d roller spinner though I'm assuming that's what you were refering to, I've done the radio button that was simple next ill do the text box

  • edited June 2013 Posts: 80

    Looks great. The way the dropdown text looks as it as appering looks off because of the way you have them appear. The menu is fine, but a better looking transition is needed. Maybe the menu outline appears and you draw the buttons and then fade in the names. It just needs some more love. Or maybe draw it off the screen on the init of the dropdown and then just draw it and update it as needed.

  • edited June 2013 Posts: 1,595

    I honestly thought the menu looked good as it was but I'm not entirely sure what you're on about, you don't like the way the text on the menu expands out?

    Edit: @Thwapp I've made the text fade in and out when i expand or collapse the menu which looks quite nice but I'm not going to change the transition of the menu because its meant to as it says 'drop down'

    Looking at a more professionally developed vgui here's Derma: , I will take most my ideas from here

  • Posts: 1,595

    Added windows and parenting:

  • Jmv38Jmv38 Mod
    edited June 2013 Posts: 3,295

    Wow....! =D> =D> =D>

  • Posts: 1,976


  • Posts: 80

    The fading of the text looks much better

  • edited June 2013 Posts: 1,595

    Thanks you two and I added in a colour picker aswell for you @Jmv38 but I have noticed you made a window class before that looks pretty good so this might not be too much a step for you..

  • Jmv38Jmv38 Mod
    Posts: 3,295

    Cool! Thanks.

Sign In or Register to comment.