We are going to combine a few things with this lesson:

• First, we will learn about creating an object that can be interacted with

• Second, how to set the location of an object

• Third, we will add an event listener to the object so that we can interact with the app

• And last, we will look at the Relaunch feature of Corona Simulator, which make it so easy to tweak your code!

We are using Corona by Ansca for this app.  You can code all of the coding once and be able to use it on an iPhone, iPad, or Android device.  But we’ll save deployment for another tutorial!

We’ll start where we left off with the “Hello World” app that we have previously created.  So our code to begin with looks like:

local textObj = display.newText( “Hello World!”, 50, 50, nil, 24)  
textObj:setTextColor( 255, 255, 255)

First, you will need to create a button graphic.  I just went into photoshop (which you can purchase from Adobe at a discount if you are a student or in education Adobe Education Store) and created a 100 pixel by 50 pixel rectangle and saved it as button.png.  Make sure you save it to the same folder as your main.lua file.

Now, lets add the button to your code:

local mybutton = display.newImage( “button.png” )
mybutton.x = display.contentWidth /2
mybutton.y = display.contentHeight -75

In these three lines of code, I created a new variable called mybutton and set it equal to display.newImage, which I have instructed to load button.png.

Then I set the button’s x property (which controls where it is positioned horizontally) to the width of the stage divided by 2.  This has the effect of centering the button horizontally on the screen, because the .x property looks at the CENTER of the graphic or object (which will become very important shortly!).

The .y does the same thing for the vertical of the stage.  Noticed that I subtracted 75 from the contentHeight property, this is so that it is not partially off the bottom of the screen.  -75 moves the center of the height of the image 75 pixels from the bottom.

Now we need to tell the button what to ‘do’ when it is tapped or clicked on:

function mybutton:tap( event )
textObj.x = math.random( 0, display.contentWidth)
textObj.y = math.random( 0, display.contentHeight)
end

This block of code creates a function that will respond to a tap event on mybutton.  What happens when it is tapped?  The “Hello World!” textobj is moved to a random location on the screen.  We use the math.random function call to return a number between 0 and the display stage width and height.

Finally, we need to add a listener to the button.  A listener is on the look out for any event (interaction) the user might have with the mobile device.  In this case we are creating a listener to check to see if the button is tapped:

mybutton:addEventListener( “tap”, mybutton )

Done!  Save your main.lua file and see how it works!

Getting Fancy!

Did you notice that sometimes the textObj (your “Hello World!”) goes off the screen?  That is because the .x and .y properties are setting the location based upon the center of the textObj.  The program can’t tell where the edges are on the object.  For all it knows, we WANT only part of the object to be showing!

There are many ways to keep this from happening.  One method is to modify the .x and .y calculations so that the number returned doesn’t allow the text to be cut off:

textObj.x = math.random( 40, display.contentWidth -50)
textObj.y = math.random( 20, display.contentHeight – 110)

In this case we are generating a number between 40 and the content width -50 for x and a number between 20 and the content height -110 for y.  This pretty much keeps the text on the screen at all times.  You can make these changes, save, and then click on the simulator, File > Relaunch.  Relaunch reloads your main.lua with the changes you made.  It saves you from having to do it with Open each time  (a wonderful feature when your trying to trouble shoot a project).

A better (and there are other even better methods, but this will do for now) method is to look at the size of the object that you want to keep on the screen.  Since you might not know the size of the object when the program is running (for a variety of reasons), it is better to let the program figure out what will keep the object fully on the screen:

local w = textObj.width
local h = textObj.height

function mybutton:tap( event )
textObj.x = math.random( w/2, display.contentWidth – (w/2))
textObj.y = math.random( h/2, display.contentHeight – (100 + h/2))
end

By creating two variables (h & w), we are recording the height and width of textObj. This can then be used in creating a simple formula to keep our text on the screen!
Tutorial Part 1:
[tubepress video=”yCL8Ye43f0c”]

Tutorial Part 2:
[tubepress video=”Qfe3K1x3sI4″]