4

Developing iPhone/iPad/Android applications with Corona: Orientation Change

Posted by Dr. Burton on July 13, 2010 in Android, Corona, iPad, iPhone, Mobile |

In this final “Hello World” with Corona, we will look at how to allow for orientation change in our app.

First, please recognize that this is for a general rotation.  Seldom will this be sufficient to handle all rotation needs of your app.  You will usually need to code in the screen size and where you want the object to be located in the new orientation.

I’m going to start with the code that we used for adding sound effects to our app:

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

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

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

function mybutton:tap( event )
media.playEventSound(“beep.caf”)
textObj.alpha=0
textObj.x = math.random(w/2, display.contentWidth – (w/2))
textObj.y = math.random(h/2, display.contentHeight -(100 + h/2))
transition.to(textObj, {time=3000, alpha = 1})
end

mybutton:addEventListener( “tap”, mybutton )

To handle orientation, we will need to add a new listener and a function to handle the orientation change:
local function onOrientationChange (event)
local newAngle = textObj.rotation – event.delta
transition.to( textObj, {time= 150, rotation = newAngle})
end

Runtime:addEventListener( “orientation”, onOrientationChange )

The Runtime:addEventListener looks for the orientation change and calls the function.  The function looks at the current angle of textObj and calculates the new orientation angle by subtracting the event.delta.  After calculating the new angle, we perform a transition to the new orientation.  Our final code looks like:

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

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

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

function mybutton:tap( event )
media.playEventSound(“beep.caf”)
textObj.alpha=0
textObj.x = math.random(w/2, display.contentWidth – (w/2))
textObj.y = math.random(h/2, display.contentHeight -(100 + h/2))
transition.to(textObj, {time=3000, alpha = 1})
end

local function onOrientationChange (event)
local newAngle = textObj.rotation – event.delta
transition.to( textObj, {time= 150, rotation = newAngle})
end

mybutton:addEventListener( “tap”, mybutton )
Runtime:addEventListener( “orientation”, onOrientationChange )

Note: I have changed display.stageWidth and display.stageWidth to display.contentWidth & display.contentHeight for version 2.0 of Corona.  As of 2.0 stageHeight & stageWidth have been depreciated.


Demonstration:
[tubepress video = BVS5AMI-Ab0]

Tags: , , , , , ,

4 Comments

  • Jamie says:

    Hi there. I see you are using TextWrangler as your code editor for Lua/Corona. How have you made it so it makes Autocomplete suggestions for variables etc?

    Thanks

    Jamie

  • Dr. Burton says:

    I’m using BBEdit. Part of the autocomplete that you see in the demo is that I have already done the project several times to work out the bugs before I do any recording of the demo. BBEdit remembers those previous builds and is providing an autocomplete.

  • Jamie says:

    Hi. Thanks for taking the time to reply, It’s good to know i’m not missing out on useful features!

    Looking forward to more of your Video Tutorials.

  • ali says:

    Short and good lesson, but I would like to know how can I change the whole orientation of the screen instead of text only?

    thanks in advance;
    ali

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.