Easy Interfaces (ssk.easyIFC:*)
The Easy Interfaces library is a large library designed to produce:
- Buttons - Two-, three-, and four- state buttons that execute a listener(s) to do 'work'. Includes:
- Push Buttons, Toggle Buttons, and Radio Buttons
- Two-states: Selected, Unselected.
- Three-states: Selected, Unselected, Toggled.
- Three-states alternate: Selected, Unselected, Locked/Disabled.
- Four-states: Selected, Unselected, Toggled, Locked/Disabled.
- Labels - Single-line text objects.
This library has these features and benefits:
- One Line Creation - Make interface objects with a single line of code.
- Preset Libraries - Create templates (presets) once and use them over-and-over.
- Selective Overrides - When using presets, override any setting(s) you need, in order to handle one-off cases while still getting the value from presets.
- Meaningful Listeners - While buttons are implemented with touch listeners, I realized that the standard "began", "moved", and "ended" phases didn't really express the proper meaning for most new developers. So, this library uses these explicit (contextual) listeners instead: onPress, onRelease, and onEvent.
- Hyper-Flexible Construction - You can use an arbitrary combination of images, rectangles, frames, etc. to build great looking buttons.
- ... more
Lastly, this library provides a number of useful Effects that can be used to give your menus (and other interfaces) juicy visual effects.
Button Factories
ssk.easyIFC:newButton( group [, params ] )
- A parameterized factory used by all other factories to build buttons.ssk.easyIFC:presetPush( group, presetName, x, y, w, h [, labelText [, onRelease [ , overrideParams ]]] )
- Creates standard push-button instance using a preset record.ssk.easyIFC:presetToggle( group, presetName, x, y, w, h [, labelText [ , onEvent [, overrideParams ]]] )
- Creates standard toggle-button instance using a preset record.-
ssk.easyIFC:presetRadio( group, presetName, x, y , w, h [, labelText [, onRelease [, overrideParams ]]] )
- Creates standard radio-button instance using a preset record.group
(display.currentStage
) - Group to put button in.params
({}
) - See Button Parameters below.presetName
("default"
) - Name of preset record to use for configuring button.- See Making Button Presets below.
x
,y
- < x, y > position of button center.w
,h
- Width and height of button.labelText
(""
) - Optional text for button label.onRelease
(nil
) - Listener to call when push/radio button is released.onEvent
(nil
) - Listener to call when toggl button is toggled (on or off).overrideParams
(nil
) - Optional table of properties to override from preset.- See Button Parameters below.
Button Parameters
The following list is designed as a quick reference to the many button parameters.
- General
buttonType
("push"
) -"push"
,"toggle"
"radio"
anchorX
(0.5
) - Same as Corona SDK anchorX (external link)anchorY
(0.5
) - Same as Corona SDK anchorY (external link)placeRelative
(false
)- Experimental option that causes buttons to re-calculate their position relative to the sides of the screen. (Use at your own risk.)
- Label Parameters
emboss
(false
) - Use embossed label.labelSize
(20
) - Font size of label.labelColor
(_K_
) - Label color when not selected.selLabelColor
(_K_
) - Label color when selected.labelFont
(gameFont
ornative.systemFontBold
) - Font to use for label.- See Configuring SSK2 to learn how to set
gameFont
.
- See Configuring SSK2 to learn how to set
labelOffset
({0,0}
) - Table ofx
andy
offsets to apply to lable. Helps center troublesome fonts or push the label above/below/left/right the button if you want that look.labelHorizAlign
("center"
) - Label alignments:"left"
,"center"
,"right"
.- Warning: Not thoroughly tested as I rarely use this feature.
- Rectangle Parameters - If you are using plain rectangles for the button representation.
unselRectFillColor
({1,1,1,1}
) - Fill color for not selected representation of button.selRectFillColor
({1,1,1,1}
) - Fill color for selected representation of button.lockedRectFillColor
({1,1,1,1}
) - Fill color for (optional) locked/disabled representation of button.toggledRectFillColor
({1,1,1,1}
) - Fill color for (optional) toggled representation of button. This allows you to differentiate selected from toggled in togggle and radio buttons for a 3-state style button.cornerRadius
(nil
) - If this is provided and is set to a non-zero value, rounded rectangles are used instead of squared ones. The corners of these rounded rectangles will use this rounding 'radius'.
- Image Parameters - If you are using image rectangles for the button representation.
unselImgSrc
- Path and filename of not selected image representation.selImgSrc
- Path and filename of selected image representation.lockedImgSrc
- Path and filename of (optional) locked/disabled representation of button image.toggledImgSrc
- Path and filename of (optional) toggled representation of button image. This allows you to differentiate selected from toggled in togggle and radio buttons for a 3-state style button.unselImgFillColor
({1,1,1,1}
) - Fill color for not selected representation of button.selImgFillColor
({1,1,1,1}
) - Fill color for selected representation of button.lockedImgFillColor
({1,1,1,1}
) - Fill color for (optional) locked/disabled representation of button.toggledImgFillColor
({1,1,1,1}
) - Fill color for (optional) toggled representation of button. This allows you to differentiate selected from toggled in togggle and radio buttons for a 3-state style button.
- Touch Masking Parameters
touchMask
(nil
) - Optional mask image to restrict/enable touch areas on button.touchMaskW
,touchMaskH
- Width and height of mask.
- Stroke Parameters
unselStrokeColor
({1,1,1,1}
) - Stroke color for not selected representation of button.selStrokeColor
({1,1,1,1}
) - Stroke color for selected representation of button.lockedStrokeColor
({1,1,1,1}
) - Stroke color for (optional) locked/disabled representation of button.toggledStrokeColor
({1,1,1,1}
) - Stroke color for (optional) toggled representation of button. This allows you to differentiate selected from toggled in togggle and radio buttons for a 3-state style button.strokeWidth
(0
) - Stroke width of button.strokeColor
({1,1,1,1}
) - Stroke color for both representations of button.- Tip: Overrides
unselStrokeColor
andselStrokeColor
.
- Tip: Overrides
- Overlay Parameters - If you want to add an optional frame. (Tip: Frame is same size as button and overlays it.)
buttonOverlayRectColor
- If specified, create a rectangle using this color over the other visual elements.buttonOverlayImgSrc
- If specified, create an image rectangle using this path+filename over the other visual elements.buttonOverlayFillColor
- Optional fill color to shade image rectangle overlay.
Making Button Presets
Making a preset is as simple as:
- Specifying a table of Button Parameters,
- Adding that table to the list of known button button presets using
addButtonPreset()
.
local params =
{
labelColor = {1,1,1,1},
labelSize = 16,
labelFont = gameFont,
labelOffset = {0,1},
unselRectFillColor = { 0.25, 0.25, 0.25, 1},
selRectFillColor = {0.5, 0.5, 0.5, 1},
strokeWidth = 1,
strokeColor = {1,1,1,0.5},
emboss = false,
}
ssk.easyIFC:addButtonPreset( "default", params )
Later, you can use the preset like this:
easyIFC:presetPush( group, "default", 100, 100, 50, 40, "Hello" )
Default Presets
One great way to see how easy making presets is, is to look at the default presets that come with SSK2.
The default SSK2 presets can be found here: ~<path to ssk2>/interfaces/presets/default/
.
Redefining Button Presets
You may redefine a preset at any time in two simple steps:
- Specifying a NEW table of Button Parameters,
- Adding that table to the list of known button presets using
addButtonPreset()
using an exiting preset name.
Any buttons created with that preset name after this change will use the new definition.
Tip: This is a handy feature. You can create your interface using the built-in defaults. Then, when you are ready, create a custom preset definition file and use the same preset names. This will replace all the built-in presets with your own.
Ready-Made Presets
Eventually, I expect ready-made presets to be available for free and/or paid paid on:
Button Instances
Button objects are regular display objects. Thus, they have all the same properties and methods listed on the Corona SDK API display.* reference page.
In addition, all buttons have the following properties and methods:
Properties
isPressed
-true
if button is currently in selected state.- Tip: You should not modify this field, but rather treat it as a read-only property.
Methods
buttonInstance:pressed( )
- Returnstrue
if the button is in a 'selected' state.buttonInstance:toggle( [ noDispatch ] )
- Toggle the button and execute its listener.- Tip: If you do not want to execute the button's listener, pass
true
to the method.
- Tip: If you do not want to execute the button's listener, pass
buttonInstance:disable( )
- Disable the button.- Disabled buttons ignore touches.
- Changes alpha of button to 0.5 to show user button is not selectable.
buttonInstance:enable( )
- Enable a previously disabled button.- Changes alpha back to 1.0.
- Starts responding to touches again.
buttonInstance:isEnabled()
- Returnstrue
if button is enabled.buttonInstance:getText( )
- Returns the string currently displayed in the label or""
if blank.buttonInstance:setText( [ newText ] )
- Changes label text tonewText
or""
ifnewText
is not specified.buttonInstance:getTextColor()
- Returns a table representing the color of the label.buttonInstance:setLabelColor( color )
- Changes the color of the label.buttonInstance:adjustLabelOffset( offset )
- Modifies the offset of the label.
Button Listeners
Manually writing a solid button-listener is not straight-forward and requires a surprisingly large and sophisticated piece of code. This is often well beyond what most new and intermediate developers can do.
First, different kinds of buttons should execute their listener code at different times:
- Push Button - Users expect action to occur when button is released.
- Toggle Button - Users expect the action to occur any time the button is released and changes state.
- Radio Button - Users expect the action to occur when the button is released.
Second, the listener should gracefully handle all the weird things users do, such as:
- Touch a button, slide the finger off the button, then release. - Button visuals should update to tell user the button isn't selected any more and then NOT call the listener.
- Touch, swipe off, swipe back on, release - Again, update the visuals so the user knows the button state and then call the listener.
- Touch the screen, then swipe onto a button - The button should entirely ignore this. It is considered an 'accidental touch'.
- Touch one button and swipe onto another - Similar to case #1 above, but second button doesn't update visually. This is another 'accidental touch' scenario.
- ... The list goes on and you've got to handle it all.
Third, the listener should work equally well whether the developer has enabled 'multitouch' or not.
To handle all of this, the Easy Interfaces library uses a single (shared) listener for all buttons. This function is about 200 lines long and handles all of these interactions and button contexts.
All buttons use this listener by default. Then, if you want an action to happen at a particular contextual time, you supply your one (or more) small function(s) for one of these three named Button Parameters
onRelease
This is the default listener for push and radio buttons.
-- Sample Push Button 'onRelease' Listener
local function onRelease( event )
print("Pushed Button: " .. tostring( event.target:getText() ) )
end
-- Create Two Push Buttons
easyIFC:presetPush( group, "default", 100, 100, 50, 40, "Hello", onRelease )
easyIFC:presetPush( group, "default", 100, 150, 50, 40, "World", onRelease )
If you press the buttons created by this code, they will print:
"Pushed Button: Hello"
OR"Pushed Button: World"
-- Sample Radio Button 'onRelease' Listener
local function onRelease( event )
print("Pushed Button: " .. tostring( event.target:getText() ) )
end
-- Create Two Radio
local first = easyIFC:presetRadio( group, "default", 100, 100, 50, 40, "Hello", onRelease )
easyIFC:presetRadio( group, "default", 100, 150, 50, 40, "World", onRelease )
first:toggle()
As soon as this code executes, the message "Pushed Button: Hello"
will print.
Then if you do any of these actions NEXT:
- Touch "Hello" button: Nothing is printed.
- Touch and release "World" button:
- "Hello" button will de-select,
- "World Button" will select,
- Will be print:
"Pushed Button: World"
- Touch "World" button, swipe off button, release.
- "World" button will change to its selected visual state and back to deselected.
- Nothing is printed.
- Touch "Hello" button, swipe off, release.
- No visual state change.
- Nothing is printed.
onEvent
This is the default listener for Toggle Buttons. It is called every time the buttons toggle-state changes.
Note: The listener is not called when the visual state updates, but when the finger is lifted. i.e. Swiping on and off of a toggle button will not fire the listener.
-- Sample Toggle Button 'onEvent' Listener
local function onToggle( event )
print("Pressed Button: " .. tostring( event.target:getText() ) )
print("Is pressed ?= " .. tostring( event.target:pressed() ) )
end
easyIFC:presetToggle( group, "default", 100, 100, 50, 40, "Hello", onToggle )
easyIFC:presetToggle( group, "default", 100, 150, 50, 40, "World", onToggle )
If you touch these buttons, they will print a message any time you press and release the button. As expected, they ignore all 'weird' interactions and don't fire their listener unless a real toggle occured. Both buttons can be toggled and will ignore the state of the other button.
-- Sample Push Button 'onEvent' Listener
local function onToggle( event )
print("Pressed Button: " .. tostring( event.target:getText() ) )
print("Is pressed ?= " .. tostring( event.target:pressed() ) )
end
easyIFC:presetPush( group, "default", 100, 100, 50, 40, "Hello", nil, { onEvent = onToggle } )
easyIFC:presetPush( group, "default", 100, 150, 50, 40, "World", nil, { onEvent = onToggle } )
These buttons will fire two events. First when you touch the button, and second when you release the button.
If you touch a button and swipe away, you will not get the second event.
onPress
This listener is rarely used and excutes ONLY on the begining of a button touch. i.e. It is called when the user first touches the button.
-- Sample Push Button 'onPress' Listener
local function onPress( event )
print("Pressed Button: " .. tostring( event.target:getText() ) )
end
easyIFC:presetPush( group, "default", 100, 100, 50, 40, "Hello", nil, { onPress = onPress } )
Touching this button will fire the listener immediately.
Swiping off and back onto the button is ignored and will not fire the listener again.
You must lift your finger and touch the button again to get a new call to the listener.
Label Factories
presetLabel
Creates label instance using a preset record.
ssk.easyIFC:presetLabel( group, presetName, text, x, y [, params ] )
quickLabel
ssk.easyIFC:quickLabel( group, text, x, y [, font [, size [, color [ , anchorX [, anchorY ]]]]] )
quickEmbossedLabel
ssk.easyIFC:quickEmbossedLabel( group, text, x, y [,font [,size [,colorM [,colorH [,colorS ]]]]] )
Label Factory Arguments
As you will have noticed, the above factories have a fairly consistent function signature and share common arguments. Those argument can be summarized as follows:
group
(display.currentStage
) - Group to put button in.params
({}
) - See Label Parameters below.presetName
("default"
) - Name of preset record to use for configuring Label.- See Making Label Presets below.
x
,y
- < x, y > position of button center.anchorX
,anchorY
(0.5
) - You can optionally select the anchors forquickLabel()
text
(""
) - Optional text for label.font
(gameFont
ornative.systemFontBold
) - Font to use for label. + See Configuring SSK2 to learn how to setgameFont
.size
(20
) - Font size of label.color
(_K_
) - Label color.colorM
(_W_
) - Color of embossed label's main stroke.colorH
(_W_
) - Color of embossed label's highlight stroke.colorS
(_K_
) - Color of embossed label's shadow stroke.
Making Label Presets
Making a preset is as simple as:
- Specifying a table of Label Parameters,
- Adding that table to the list of known label presets using
addLabelPreset()
.
local params =
{
font = "Bounty Hunter.ttf",
fontSize = 32,
embossTextColor = _K_,
embossHighlightColor = _Y_,
embossShadowColor = _G_,
}
ssk.easyIFC:addLabelPreset( "bounty", params )
Later, you can use the preset like this:
-- Use 'bounty' preset, but override fontSize
easyIFC:presetPush( group, "bounty", "Boom!", 100, 100, { fontSize = 60 } )
Label Preset Parameters
Presets take all of the following parameters:
font
(gameFont
ornative.systemFontBold
) - Font to use for label. + See Configuring SSK2 to learn how to setgameFont
.fontSize
(20
) - Font size of label.textColor
(_K_
) - Label color.embossTextColor
(_K_
) - Color of embossed label's main stroke.embossHighlightColor
(_K_
) - Color of embossed label's highlight stroke.embossShadowColor
(_K_
) - Color of embossed label's shadow stroke.
Label Instances
Label Instances are regular display objects. Thus, they have all the same properties and methods listed on the Corona SDK API display.* reference page.
In addition, Preset Label Instances have the following properties and methods:
Properties
- All Label Parameters are stored as (read-only) properties on the label instance.
Methods
buttonInstance:getText( )
- Returns current text in label.buttonInstance:setText( [ newText ] )
- Changes label text tonewText
or""
ifnewText
is not specified.buttonInstance:setFillColors( embossTextColor, embossHighlightColor, embossShadowColor )
- Allows you to change the emboss colors of embossed label instances.buttonInstance:setLabelColor( color )
- Changes the color of the label.buttonInstance:adjustLabelOffset( offset )
- Modifies the offset of the label.
Effects
The button library comes with a set of functions that let you:
- Make useful visual calculations.
- Apply cool visual effects.
Tip: While they were first designed for interfaces, These functions can also be used on other display objects.
Visual Calculations
isInBounds( obj, obj2 )
- Returnstrue
if position ofobj
overobj2
(inside its axis-aligned-bounding-box.)- Remember: Anchors affect position.
- Uses Corona SDK built-in obj2.contentBounds (external link).
isInBounds_alt( obj, obj2 )
- Same asisInBounds( obj, obj2 )
, but bounds ofobj2
are calculated.
Fly Ins
ssk.easyIFC.easyFlyIn( obj, params )
- Cuase an object to move/rotate/scale to some offset, then fly-in to its original rotation and/or position and/or scale.delay
(0
) - Wait this long before starting the fly in.time
(250
) - Take this long to fly in.myEasing
(easing.outBack
) - Use this transition easing while flying in.sox
(0
) - Startingx
offset.soy
(0
) - Startingy
offset.sdr
(0
) - Startingrotation
delta.sdsx
(1
) - StartingxScale
. (Cannot be 0.)sdsy
(1
) - StartingyScale
. (Cannot be 0.)onComplete
(nil
) - Function to call when transition completes.function( obj ) ... end
onCompleteLabel
(nil
) - Ifobj
has an object (usually text object) assigned to propertyobj.label
, and you provide this parameter, the associated function will be called on the label.
-- Silly Game
local function onPress( event )
print("You Win!")
transition.cancel( event.target )
event.target.rotation = 0
event.target:setText("Winner!")
event.target:disable()
end
local button = ssk.easyIFC:presetPush( group, "default", 150, 100, 250, 40,
"Press Before Spinning Stops!", onPress )
local onComplete
local onComplete2
onComplete = function( obj )
ssk.easyIFC.easyFlyIn( button, { delay = 1000, time = 1000, sdr = 720,
myEasing = easing.linear,
onComplete = onComplete2 } )
end
onComplete2 = function( obj )
obj:disable()
obj:setText( "Loser!" )
end
ssk.easyIFC.easyFlyIn( button, { time = 500, sox = -fullw, onComplete = onComplete } )
Flipping
ssk.easyIFC.easyFlip( obj, params )
- Like flipping a card.
local button = ssk.easyIFC:presetPush( group, "default", x, y, 250, 40, "Flippy Button" )
ssk.easyIFC.easyFlip( button, { delay = 500, time = 1250, myEasing = easing.outBounce } )
Copyright © Roaming Gamer, LLC. 2008-2016; All Rights Reserved