14

Developing iPhone/iPad/Android Apps with Corona: Working with Buttons

Posted by Dr. Burton on June 21, 2010 in Android, Corona, iPad, iPhone, Mobile |

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″]

Tags: , , , , ,

14 Comments

  • Very interesting post. Keep writing dude !!

  • Frank says:

    Thanks Dr. Burton. Keep posting great Tutorials in Corona SDK. Any chance you could show the various options for playing video, switching views and playing sounds in Corona. Looking forward to your next post.

  • Dr. Burton says:

    Frank,
    I’ll see what I can do! Classes are getting started. As soon as I get caught-up, I’ll be posting more tutorials. I’ll put these on my to do list. Thanks for the suggestions!

  • juan says:

    Hi,
    I have a lot of “main.lua” files, so I need to create a menu for those files..
    how can I create menu for all my files???

    thanks

  • Dr. Burton says:

    For more complex projects, I recommend (and my students can verify this) that you use the director class written by Ricardo Rauber
    It can be found at:http://developer.anscamobile.com/code/director-class-10
    A great example of its use is Ghosts v. Monsters (which can also be downloaded from the AnscaMobile website).

  • Krišto says:

    My button displays white and it should be blue. Why is that? I tried few formats like gif, jpeg and png. So the problem is not the format. It always displays just white.

  • Joanne says:

    Thank you, so very much. I loved this tutorial. You have given me hope that as a 47 yr old Mom with zero programming experience, I will succeed at building my first app in Corona. My kids will be in awe!

  • Dr. Burton says:

    Thank you Joanne, you made my day! Keep working on the apps. More tutorials are coming!

  • Joel Chavez says:

    Hello, I have followed the tutorial closely and have made changes for Corona 2.0
    but when I tap my button nothing happens. Any suggestions would be appreciated and thanks for your help.

  • Dr. Burton says:

    The most likely place for an error is the addEventListener. Are any errors thrown in the terminal?

  • Joel Chavez says:

    yes, the issue was that i wrote mybutton instead of myButton. Once I corrected the spelling it worked just fine. Thank you again, I’m finding your tutorials very helpful.

  • anuj khandelwal says:

    do you know how to add a button in which once you start pressing, it will continue do its function. Like in mario game until you stop pressing forward button you character runs continuously.

  • russell mckee says:

    In the function myButton:tap(event) do you need to include the “:tap”. I see some people include it and some don’t. What is the logic behind it?
    Thanks for the great stuff!

  • Johno says:

    Camel Notation

    myButton
    mybutton

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copyright © 2010-2019 Burtons Media Group All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.5, from BuyNowShop.com.