Hello everyone, I’m here to present to you my Tool Bar UI. It comes with over 10 different ‘tools’ you can use in your games and your apps, I’ve made it quite performance friendly, about a 4-5 FPS drop. On an iPad 3 it is still over 55FPS though with all UI elements on the screen. Here is the code: http://pastebin.com/pQdgnkR2 if you spot anything that could be more efficient then don’t hesitate to tell.
For every UI object add to draw and touched, probably should make a controller class and add touch propagation.
The documentation is as follows:
--For all UI objects you can use the obj:isVisible(bool) to set the visibility of the each individual object
--Also use obj:visible() to get a boolean stating whether it is visible or not.
--If you see ... in a function brackets it means you can add a string to be set as the header of that UI object.
--Frame command:
Frame(Position,Size,Text,Grey(single value color))
Frame:isCloseable(bool) --sets the frame so it can be minimised. Experimental!
Frame:isMoveable(bool) --sets the top bar for the window to be moved or not.
Frame:getPos() --returns vec2 with the frames CENTER position.
Frame:isHolding() --returns a boolean stating whether the frame top bar is being touched
Frame:addChild(child) --adds a child to be parented to the frame.
Frame:getChildren() --returns a table of all the children.
--Button command:
Button(Position,Size,Text,Colour,BorderWidth,CallBack)
Button:strokeCol(col) --sets the colour of the border.
Button:setAlpha(alpha) --sets the alpha of the button, including the border.
Button:addParent(frame) --item must be a frame, I wouldn't try it on other UI objects.
Button:setDrawPos(pos) --set draw position of the button, for use in games with translate for scrolling etc
Button:setPos(pos) --set position of the button
--RoundButton command:
RoundButton(Position,Size,Text,Colour,Round,Callback)
RoundButton:strokeCol(col) --sets the colour of the border.
RoundButton:setAlpha(alpha) --sets the alpha of the button, including the border.
RoundButton:addParent(frame) --item must be a frame, I wouldn't try it on other UI objects.
RoundButton:setDrawPos(pos) --set draw position of the button, for use in games with translate for scrolling etc
RoundButton:setPos(pos) --set position of the button
--ImageButton command:
ImageButton(Position,Size,Image,CallBack)
ImageButton:setAlpha(alpha) --sets the alpha of the button, including the border.
ImageButton:addParent(frame) --item must be a frame, I wouldn't try it on other UI objects.
ImageButton:setDrawPos(pos) --set draw position of the button, for use in games with translate for scrolling etc
ImageButton:setPos(pos) --set position of the button
--Slider command:
Slider(Position,Size,StartValue,EndValue,Value)
Slider:setLabel(txt) --sets the header of the slider.
Slider:showValue(bool) --show the current value of the slider, displayed as text in the middle.
Slider:setColour(col) --sets the colour of the slider.
Slider:setPos(pos) --sets the position of the slider.
Slider:addParent(frame) --item must be a frame.
Slider:startImage(image,size)
Slider:endImage(image,size)
--Text Box command:
Textbox(Position,Size,Colour,FontSize,Text,...)
Textbox:setMode(mode) --sets draw mode, CORNER or CENTER.
Textbox:setDimensions(pos,size) --set the position and size of the textbox after init.
Textbox:getDimensions() --returns a table, getDimensions().size and getDimensions().pos is the way I use it.
Textbox:setFont(fontsize) --sets the font size of the text.
Textbox:startTyping() --opens up the keyboard and focusses on textbox.
Textbox:isTyping() --returns a boolean stating whether the textbox is focussed on or not.
Textbox:isFinished() --returns a boolean for one frame when the textbox is closed.
Textbox:setAlpha(alpha) --sets the alpha of the textbox.
Textbox:strokeCol(col) --sets the border colour of the textbox.
Textbox:addParent(frame) --item must be a frame.
Textbox:setText(txt) --sets the text of the text box.
Textbox:getText() --returns a string of the text inside the textbox.
--Textbox also needs to be included in the main keyboard(key) function as Textbox:keyboard(key).
--Toggle command:
Toggle(Position,Size,Value,...)
Toggle:strokeCol(col) --sets the stroke col.
Toggle:addParent(frame) --item must be a frame.
Toggle:getValue() --returns a value, 1 or 0.
--Dial command:
Dial(Position,Size,StartValue,EndValue,Value)
Dial:addParent(frame) --item must be a frame.
Dial:setFloat(n) -- n must be 1 or 0, sets the return value as an integer (whole number) or a float (decimal).
Dial:getValue() --returns a value, default is an integer.
--Drop down menu command:
DMenu(Position,Size,...)
DMenu:strokeCol(col) --sets the colour of the border.
DMenu:addItem(name,callback) --adds an item to the menu and a callback for when it is pressed.
DMenu:addParent(frame) --item must be a frame.
--Combo box command:
Combox(Position,Size,ImageSize)
Combox:setSelected(name) --sets the selected box in the combo box
Combox:strokeCol(col) --sets the colour of the border.
Combox:addParent(frame) --item must be a frame.
Combox:addItem(name,callback) --adds an item to the combo box and callback when pressed.
--Combo box for images command:
ComboxImg(Position,Size,ImageSizs)
ComboxImg:strokeCol(col) --sets the colour of the border.
ComboxImg:addParent(frame) --item must be a frame.
ComboxImg:addItem(name,callback) --adds an item to the combo box and callback when pressed.
--Radio toggle command:
Radio(Position,Size,Label,Value (1 or 0))
Radio:addParent(frame) --item must be a frame.
Radio:getValue() --returns a value, 1 or 0.
--Colour picker command:
Colour(Position) --a different one I know, I haven't really needed to use it with a different size so I didn't add it.
Colour:strokeCol(col) --sets the colour of the border for each box.
Colour:isMoving() --returns a boolean stating whether the alpha is being changed.
Colour:isTouchingAlpha() --returns a boolean stating whether the alpha box is being touched.
Colour:addParent(frame) --item must be a frame.
Colour:getValue() --returns a colour with r,g,b,a.
Colour:getAlpha() --returns the alpha value of the alpha box.
Colour:isTouching() --returns a bool whether the gradient box has been touched or the colour box.
--Progress bar command:
Progbar(Position,Size,Value,Colour1,Colour2)
Progbar:addParent(frame) --item must be a frame.
Progbar:setStart(n) --sets the start value.
Progbar:setEnd(n) --sets the end value.
Progbar:setValue(n) --sets the value of the progress bar.
If you would like stuff to be added then comment with what you would like to see and if it is reasonable it will be added, Im open to making new objects aswell.
Hope this can be used by many!
Screenshot (V0.5):
https://www.dropbox.com/s/21p5m9r3fd1fkmi/IMG_0379.JPG
Changelog:
--V0.6
Added Image Buttons and Rounded Buttons with a changeable roundness of course.
Also added ability to set images either side of the slider. Updates are in the documentation above.