Corona – Simple button

The widget button works well for many circumstances. In some cases you will want to use something simpler and more customizable. Here’s is a simple script that shows the basic concepts for creating your own button with a default and active state.

Here the button is a simple rectangle. The default and active state are represented by a simple color change. This could be an image change or any other effect.

-- This function handles animating the button's 
-- default and active states. 
local function on_touch( event ) 
	local phase = event.phase	-- Get the event phase
	local button = event.target	-- Get the event target

	-- Check the phase of the event
	if phase == "began" then 
		-- When the event begins give button focus, and color red
		display.getCurrentStage():setFocus( button )
		button:setFillColor( 255, 0, 0 )
	elseif phase == "ended" or phase == "cenceled" then 
		-- When event ends release focus, and color white
		display.getCurrentStage():setFocus( nil )
		button:setFillColor( 255, 255, 255 )
	end 
end

local function do_something() 
	print( "The button did something!" )
end 

local button = display.newRect( 0, 0, 48, 48 )
button.x = display.contentCenterX
button.y = display.contentCenterY

button:addEventListener( "touch", on_touch )
button:addEventListener( "tap", do_something )

Corona – Display Objects

Display Objects

Anything you can see on the screen is considered a display objects. Display objects can be images, text, shapes or almost anything you can think of.

Corona provides a few display object types. You can divide these into three broad categories:

  • shapes
  • text
  • images

An object in programming terms is defined as a collection of properties and methods. properties are variables that belong to the object and methods are functions that belong to the object.

For example a shape object might have properties of x and y. The x and y properties might set the location of the object on the x and y axis.

Many of the properties and methods of display objects are common to all display objects. While other properties and methods are specific to certain display objects. For example the x and y property exists for all display objects. The text property only applies to text objects.

The best way to get an idea of how to work with display objects is make a few.

Create a new Corona project and add the following code the main.lua file.

local box = display.newRect( 0, 0, 50, 100 )

This creates a new rectangle with it’s left edge at 0, top edge 0 and a width of 50 and height 100 pixels.

display.newRect( left, top, width, height )

This method creates a new rectangular shape. The shape has a solid color fill.

I have declared a new local variable box to hold a reference to the new box that was created. Through this variable you can access all of the properties and method of new object. Here are a few examples:

local box = display.newRect( 0, 0, 50, 100 )

-- Set the x and y to position the
-- box in the center of the screen
box.x = display.contentCenterX
box.y = display.contentCenterY

-- Set the fill color of the box
box:setFillColor( 33, 111, 255 )

-- Add a stroke
box.strokeWidth = 3

-- Set the stroke color
box:setStrokeColor(255, 222, 123 )

In general all display objects act the same way. Different types of display objects will have properties or methods that specific to them. For example the setTextColor() method only applies to text objects.