So, I’ve been trying to make buttons in my new app and I’m not sure how it works… I know you need the “ui” and all that, and I’ve been looking in the buttons smaple Code but I’m no sure how it really works… Some of the stuff confuses me. 
anyway, I’d appriciate the help!
Thanks!
[import]uid: 95032 topic_id: 16569 reply_id: 316569[/import]
Well a simple button doesn’t need ui, it just needs a display object, like a graphic, rectangle, circle or text.
[lua]local function buttonPressed(event)
– do whatever you need to do here…
end
local button = display.newImageRect(“button.png”, 64, 40) – assuming a 64x40 ping file…
button.x = 50
button.y = 50
button:addEventListener(“tap”, buttonPressed)[/lua]
What ui.lua gives you is the ability to do all that in one line (though you still have to write the “buttonPressed” function…) of code.
It also gives you a few other features like having an Up and Down state for the button (two graphics passed to it), the ability to use plain graphics, and add text to them (though I’ve never done that…)
I used ui for my first couple of apps, but for the two I’m currently working on, I don’t really care about up/down states and I’d rather have a few small graphics with pre-rendered text than have to load a bazillion different fonts… [import]uid: 19626 topic_id: 16569 reply_id: 61885[/import]
Yeah… Well my uncle… (because I’m only twelve… that’s why he’s teaching me) anyway, my Uncle wanted to use the Ui… I think he like the features of it… Thanks for the help though… I’m so glad I have a nice Forum to work and get answers with… Uh… So yeah… I’d like a description of the Ui…!
Thanks so much though…! I’m not sure how to make an object a button… which is what most of the problem is. [import]uid: 95032 topic_id: 16569 reply_id: 61894[/import]
Well here is a pretty detailed use for ui.lua:
[lua] local settingsButton = ui.newButton{defaultSrc=“settings_btn.png”, defaultX = 198, defaultY = 32, overSrc=“settings_down_btn.png”, overX = 198, overY = 32, onRelease=settings, x=display.contentWidth/2, y=245 + iPad}
localGroup:insert(settingsButton)[/lua]
This version does not use text labels. I have two graphics “settings_btn.png” and “settings_down_btn.png”. The first is used with the default parameters (defaultSrc, defaultX and defaultY) that lets you define the image for the button, and the height and width of the button. where it will appear. The 2nd image is use with the “over” parameters (overSrc, overX and overY) which control the image to show while the button is being touched, but before its let up on.
In the version I’m using, which supports retina graphics and as such you have to pass it the width and height of the graphic. It’s badly named, because defaultX should be defaultWidth and defaultY should be defaultHeight (and the same over overX and overY)
Then there is the “onRelease” value which is a function that is called when the player finishes the “tap” action. In my first example above, this would be the “buttonPressed” function. Then you have the X, Y to where the button goes.
This version can also do text labels so I’ve never figured that out.
My ui.lua says its version 1.5, but it references 1.9 in the comments.
This lua file is in use in many places. It would be nice if it became an official part of the system, or an effort made to reign in all the different versions.
[lua]-- ui.lua (currently includes Button class with labels, font selection and optional event model)
– Version 1.5 (works with multitouch, adds setText() method to buttons)
– Copyright © 2010 ANSCA Inc. All Rights Reserved.
– Permission is hereby granted, free of charge, to any person obtaining a copy of
– this software and associated documentation files (the “Software”), to deal in the
– Software without restriction, including without limitation the rights to use, copy,
– modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
– and to permit persons to whom the Software is furnished to do so, subject to the
– following conditions:
– The above copyright notice and this permission notice shall be included in all copies
– or substantial portions of the Software.
– THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
– INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
– PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
– FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
– OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
– DEALINGS IN THE SOFTWARE.
– Unofficial Version 1.6 Works with Dynamic Scaling.
– Based on the work edited by William Flagello, williamflagello.com
– Original from https://developer.anscamobile.com/code/ui-library
– Unofficial Version 1.7 Dynamic Scaling text fixes by Jonathan Bebe
– http://developer.anscamobile.com/forum/2010/12/17/easily-make-your-text-sharp-retina-displays#comment-18164
– Provided in Ghosts & Monsters Sample Project
– Unofficial Version 1.71 Retina Updates by Jonathan Bebe
– http://developer.anscamobile.com/forum/2010/12/17/easily-make-your-text-sharp-retina-displays#comment-38284
– Adapted to 1.7 base code by E. Gonenc, pixelenvision.com
– Unofficial Version 1.8 added support for providing already realized display-objects for use in Tiled/Lime
– Based on the file changed by Frank Siebenlist
– http://developer.anscamobile.com/forum/2011/02/19/enhanced-uilua-v15
– Adapted to 1.7 base code by E. Gonenc, pixelenvision.com
– Unofficial Version 1.9
– Added transparency & scaling options to use as over state. newLabel updated to support retina text.
– Edited by E. Gonenc, pixelenvision.com
module(…, package.seeall)
– convenience test functions added by Frank.
local coronaMetaTable = getmetatable(display.getCurrentStage())
— Test function that returns whether object is a Corona display object.
– Note that all Corona types seem to share the same metatable…
local isDisplayObject = function(o)
return type(o) == “table” and getmetatable(o) == coronaMetaTable
end
– Helper function for newButton utility function below
local function newButtonHandler( self, event )
local result = true
local default = self[1]
local over = self[2]
– General “onEvent” function overrides onPress and onRelease, if present
local onEvent = self._onEvent
local onPress = self._onPress
local onRelease = self._onRelease
local buttonEvent = {}
if (self._id) then
buttonEvent.id = self._id
end
local phase = event.phase
if “began” == phase then
if over then
default.isVisible = false
over.isVisible = true
end
if onEvent then
buttonEvent.phase = “press”
result = onEvent( buttonEvent )
elseif onPress then
result = onPress( event )
end
– Subsequent touch events will target button even if they are outside the stageBounds of button
display.getCurrentStage():setFocus( self, event.id )
self.isFocus = true
elseif self.isFocus then
local bounds = self.stageBounds
local x,y = event.x,event.y
local isWithinBounds =
bounds.xMin <= x and bounds.xMax >= x and bounds.yMin <= y and bounds.yMax >= y
if “moved” == phase then
if over then
– The rollover image should only be visible while the finger is within button’s stageBounds
default.isVisible = not isWithinBounds
over.isVisible = isWithinBounds
end
elseif “ended” == phase or “cancelled” == phase then
if over then
default.isVisible = true
over.isVisible = false
end
if “ended” == phase then
– Only consider this a “click” if the user lifts their finger inside button’s stageBounds
if isWithinBounds then
if onEvent then
buttonEvent.phase = “release”
result = onEvent( buttonEvent )
elseif onRelease then
result = onRelease( event )
end
end
end
– Allow touch events to be sent normally to the objects they “hit”
display.getCurrentStage():setFocus( self, nil )
self.isFocus = false
end
end
return result
end
– Button class
function newButton( params )
local button, defaultSrc , defaultX , defaultY , overSrc , overX , overY , overScale , overAlpha , size, font, textColor, offset
local sizeDivide = 1
local sizeMultiply = 1
if display.contentScaleX < 1.0 or display.contentScaleY < 1.0 then
sizeMultiply = 2
sizeDivide = 0.5
end
if params.defaultSrc then
button = display.newGroup()
if isDisplayObject(params.defaultSrc) then
default = params.defaultSrc
else
default = display.newImageRect ( params.defaultSrc , params.defaultX , params.defaultY )
end
button:insert( default, false )
end
if params.overSrc then
if isDisplayObject(params.overSrc) then
over = params.overSrc
else
over = display.newImageRect ( params.overSrc , params.overX , params.overY )
end
if params.overAlpha then
over.alpha = params.overAlpha
end
if params.overScale then
over:scale(params.overScale,params.overScale)
end
over.isVisible = false
button:insert( over, false )
end
– Public methods
function button:setText( newText )
local labelText = self.text
if ( labelText ) then
labelText:removeSelf()
self.text = nil
end
local labelShadow = self.shadow
if ( labelShadow ) then
labelShadow:removeSelf()
self.shadow = nil
end
local labelHighlight = self.highlight
if ( labelHighlight ) then
labelHighlight:removeSelf()
self.highlight = nil
end
if ( params.size and type(params.size) == “number” ) then size=params.size else size=20 end
if ( params.font ) then font=params.font else font=native.systemFontBold end
if ( params.textColor ) then textColor=params.textColor else textColor={ 255, 255, 255, 255 } end
size = size * sizeMultiply
– Optional vertical correction for fonts with unusual baselines (I’m looking at you, Zapfino)
if ( params.offset and type(params.offset) == “number” ) then offset=params.offset else offset = 0 end
if ( params.emboss ) then
– Make the label text look “embossed” (also adjusts effect for textColor brightness)
local textBrightness = ( textColor[1] + textColor[2] + textColor[3] ) / 3
labelHighlight = display.newText( newText, 0, 0, font, size )
if ( textBrightness > 127) then
labelHighlight:setTextColor( 255, 255, 255, 20 )
else
labelHighlight:setTextColor( 255, 255, 255, 140 )
end
button:insert( labelHighlight, true )
labelHighlight.x = labelHighlight.x + 1.5; labelHighlight.y = labelHighlight.y + 1.5 + offset
self.highlight = labelHighlight
labelShadow = display.newText( newText, 0, 0, font, size )
if ( textBrightness > 127) then
labelShadow:setTextColor( 0, 0, 0, 128 )
else
labelShadow:setTextColor( 0, 0, 0, 20 )
end
button:insert( labelShadow, true )
labelShadow.x = labelShadow.x - 1; labelShadow.y = labelShadow.y - 1 + offset
self.shadow = labelShadow
labelHighlight.xScale = sizeDivide; labelHighlight.yScale = sizeDivide
labelShadow.xScale = sizeDivide; labelShadow.yScale = sizeDivide
end
labelText = display.newText( newText, 0, 0, font, size )
labelText:setTextColor( textColor[1], textColor[2], textColor[3], textColor[4] )
button:insert( labelText, true )
labelText.y = labelText.y + offset
self.text = labelText
labelText.xScale = sizeDivide; labelText.yScale = sizeDivide
end
if params.text then
button:setText( params.text )
end
if ( params.onPress and ( type(params.onPress) == “function” ) ) then
button._onPress = params.onPress
end
if ( params.onRelease and ( type(params.onRelease) == “function” ) ) then
button._onRelease = params.onRelease
end
if (params.onEvent and ( type(params.onEvent) == “function” ) ) then
button._onEvent = params.onEvent
end
– set button to active (meaning, can be pushed)
button.isActive = true
– Set button as a table listener by setting a table method and adding the button as its own table listener for “touch” events
button.touch = newButtonHandler
button:addEventListener( “touch”, button )
if params.x then
button.x = params.x
end
if params.y then
button.y = params.y
end
if params.id then
button._id = params.id
end
return button
end
– Label class
function newLabel( params )
local labelText
local size, font, textColor, align
local t = display.newGroup()
local sizeDivide = 1
local sizeMultiply = 1
if ( params.bounds ) then
local bounds = params.bounds
local left = bounds[1]
local top = bounds[2]
local width = bounds[3]
local height = bounds[4]
if ( params.size and type(params.size) == “number” ) then size=params.size else size=20 end
if ( params.font ) then font=params.font else font=native.systemFontBold end
if ( params.textColor ) then textColor=params.textColor else textColor={ 255, 255, 255, 255 } end
if ( params.offset and type(params.offset) == “number” ) then offset=params.offset else offset = 0 end
if ( params.align ) then align = params.align else align = “center” end
if ( params.text ) then
labelText = display.newText( params.text, 0, 0, font, size * 2 )
labelText.xScale = 0.5; labelText.yScale = 0.5
labelText:setTextColor( textColor[1], textColor[2], textColor[3], textColor[4] )
t:insert( labelText )
– TODO: handle no-initial-text case by creating a field with an empty string?
if ( align == “left” ) then
labelText.x = left + labelText.contentWidth * 0.5
elseif ( align == “right” ) then
labelText.x = (left + width) - labelText.contentWidth * 0.5
else
labelText.x = ((2 * left) + width) * 0.5
end
end
labelText.y = top + labelText.contentHeight * 0.5
– Public methods
function t:setText( newText )
if ( newText ) then
labelText.text = newText
if ( “left” == align ) then
labelText.x = left + labelText.contentWidth * 0.5
elseif ( “right” == align ) then
labelText.x = (left + width) - labelText.contentWidth * 0.5
else
labelText.x = ((2 * left) + width) * 0.5
end
end
end
function t:setTextColor( r, g, b, a )
local newR = 255
local newG = 255
local newB = 255
local newA = 255
if ( r and type® == “number” ) then newR = r end
if ( g and type(g) == “number” ) then newG = g end
if ( b and type(b) == “number” ) then newB = b end
if ( a and type(a) == “number” ) then newA = a end
labelText:setTextColor( r, g, b, a )
end
end
– Return instance (as display group)
return t
end[/lua]
[import]uid: 19626 topic_id: 16569 reply_id: 61975[/import]
Hey guys, check this out: http://developer.anscamobile.com/code/enhanced-ui-library-uilua
It’s version 2.4. Cheers! [import]uid: 67217 topic_id: 16569 reply_id: 61984[/import]
Thank you for pointing out us this link Naomi. 
[import]uid: 89165 topic_id: 16569 reply_id: 62026[/import]