Setting rotation of image based on rotation of iPhone

I have seen various games where game elements are controlled by rotating the iPhone. For example a car game I recently downloaded uses the rotation of the iPhone to steer the car.

I would like to rotate a graphic in my game based on the current rotation of the iPhone and would therefore appreciate a heads up on what functions I should be looking at to do this.

Thanks

Paul [import]uid: 7863 topic_id: 1596 reply_id: 301596[/import]

Look in the fishies sample code

http://developer.anscamobile.com/sample-code/graphics#Fishies

Look into Runtime:addEventListener( “orientation”, backgroundOrientation )

Carlos [import]uid: 24 topic_id: 1596 reply_id: 4582[/import]

Ah thanks Carlos, I downloaded the Orientation sample and the clock one but they only seemed to recognise 90 degree orientations. I will download the fishies now and have a look…

Thanks

Paul [import]uid: 7863 topic_id: 1596 reply_id: 4585[/import]

Oh I see what you mean, you want the accelerometer functionality …

Look at the compass demo and the GPS demo

http://developer.anscamobile.com/sample-code/device#GPS

C [import]uid: 24 topic_id: 1596 reply_id: 4590[/import]

local function proc( event )

local xGravity = event.xGravity;
local yGravity = event.yGravity;

end

Runtime:addEventListener( “accelerometer”, proc ) [import]uid: 24 topic_id: 1596 reply_id: 4593[/import]

Thanks for the swift reply Carlos. I just came back after looking at the Fishies sample and was going to ask as it only appeared to do 90 degrees.

I was under the impression the compass was only added with the iPhone 3gs however I recall playing a game when the first iPhone came out where you can steer a pint of beer down a table by rotating the iPhone. Am I right in assuming this wasn’t using the accelerometer? If so then was there some other way to get accurate data on how much the iPhone was rotated?

I will look at the compass and GPS demo now anyway but I am curious as to how the games for the first iPhone dealt with this if there was no accelerometer in those days.

Thanks

Paul [import]uid: 7863 topic_id: 1596 reply_id: 4595[/import]

Wow thanks I will plug that code into my game workings and see what action I can get going.

Many thanks for the super fast replies.

Paul [import]uid: 7863 topic_id: 1596 reply_id: 4597[/import]

Hi there

I did a wee test as follows

  
local textObj = display.newText("0", 150, 50, NIL, 24)  
textObj:setTextColor(255,255,255)  
  
local function proc( event )  
  
 textObj.text=event.xGravity  
  
end  
  
Runtime:addEventListener( "accelerometer", proc )  
  

When I run this app on my iPhone, I get text displayed that is constantly changing with a value like

0.012612123445667

The phone is stationary on the table and the number is being constantly updated.

I think I am a bit confused what this xGravity number is and therefore why I do not understand why it is not a constant if the phone is not moving.

Any insight into this much appreciated.

Thanks

Paul [import]uid: 7863 topic_id: 1596 reply_id: 4604[/import]

It’s a representation of the effects of gravity on an object in one axis, and is very sensitive.

In essence an accelerometer is a spring with a weight at the end of it that can only travel in one axis. When you hang the spring with the weight down it’s effected by any little movement in it’s axis. The number you see is a representation of the length of the spring at that moment. If you jump the spring gets longer and you get a bigger number, if you duck quickly you get a smaller number.

The instant accelerometer numbers try to filter out gravity as a constant and are a little less noisy.

The gyro in the iPhone 4 is basically the same thing, but in the three rotational axies instead of the linear ones.

Take a look at these two links if you are curious about the actual workings on the inside of the IC’s
http://www.ifixit.com/Teardown/iPhone-4-Gyroscope-Teardown/3156/1
http://arstechnica.com/civis/viewtopic.php?f=11&t=1113626 [import]uid: 3 topic_id: 1596 reply_id: 4613[/import]

Brilliant - thanks for the fab explanation Sean. I think I kind of understand now.

What would be a great addition to your site would be a sample that demonstrates using this functionality to move say a ball around on a flat table or steering a car. Of course I will happily supply you such an example if I get this working today:)

If anyone else has any code samples for this they would like to share please do:)

Out of interest, does the game edition have any additional api hooks for this? [import]uid: 7863 topic_id: 1596 reply_id: 4621[/import]

Just found this video explaining the accelerometer in Flash CS5 - I think some of it could be relevant and may therefore help others

http://vimeo.com/10955690

[import]uid: 7863 topic_id: 1596 reply_id: 4622[/import]

There actually is some sample code that covers this in the Game Edition sample code, which I just realized isn’t online yet (just on the dmg). It wouldn’t work in the normal SDK because it also uses the physics engine, but it does demo what you’re talking about.

I’ll paste it here for you to look at for the moment.

Not obvious from the picture, but the objects roll around in the box when you rotate the phone.

[code]
local physics = require(“physics”)
physics.start()

physics.setScale( 60 )
physics.setGravity( 0, 9.8 ) – initial gravity points downwards

system.setAccelerometerInterval( 100 ) – set accelerometer to maximum responsiveness

function onTilt( event )
physics.setGravity( ( 9.8 * event.xGravity ), ( -9.8 * event.yGravity ) )
end

Runtime:addEventListener( “accelerometer”, onTilt )
display.setStatusBar( display.HiddenStatusBar )

local bkg = display.newImage( “bkg_wood.png” )

borderBody = { friction=0.5, bounce=0.3, bodyType=“static” }

local borderTop = display.newRect( 0, 0, 320, 20 )
physics.addBody( borderTop, borderBody )

local borderBottom = display.newRect( 0, 460, 320, 20 )
physics.addBody( borderBottom, borderBody )

local borderLeft = display.newRect( 0, 20, 20, 460 )
physics.addBody( borderLeft, borderBody )

local borderRight = display.newRect( 300, 20, 20, 460 )
physics.addBody( borderRight, borderBody )

local triangle = display.newImage(“triangle.png”)
triangle.x = 80; triangle.y = 160

local triangle2 = display.newImage(“triangle.png”)
triangle2.x = 170; triangle2.y = 160

local pentagon = display.newImage(“pentagon.png”)
pentagon.x = 80; pentagon.y = 70

local pentagon2 = display.newImage(“pentagon.png”)
pentagon2.x = 170; pentagon2.y = 70

local crate = display.newImage(“crate.png”)
crate.x = 150; crate.y = 250

local crateB = display.newImage(“crateB.png”)
crateB.x = 250; crateB.y = 250

local crateC = display.newImage(“crateC.png”)
crateC.x = 260; crateC.y = 50

local soccerball = display.newImage(“soccer_ball.png”)
soccerball.x = 80; soccerball.y = 320

local superball = display.newImage(“super_ball.png”)
superball.x = 260; superball.y = 340

local superball2 = display.newImage(“super_ball.png”)
superball2.x = 240; superball2.y = 130

local superball3 = display.newImage(“super_ball.png”)
superball3.x = 250; superball3.y = 180
triangleShape = { 0,-35, 37,30, -37,30 }
pentagonShape = { 0,-37, 37,-10, 23,34, -23,34, -37,-10 }

physics.addBody( crate, { density=2, friction=0.5, bounce=0.4 } )
physics.addBody( crateB, { density=4, friction=0.5, bounce=0.4 } )
physics.addBody( crateC, { density=1, friction=0.5, bounce=0.4 } )

physics.addBody( triangle, { density=0.9, friction=0.5, bounce=0.3, shape=triangleShape } )
physics.addBody( triangle2, { density=0.9, friction=0.5, bounce=0.3, shape=triangleShape } )

physics.addBody( pentagon, { density=0.9, friction=0.5, bounce=0.4, shape=pentagonShape } )
physics.addBody( pentagon2, { density=0.9, friction=0.5, bounce=0.4, shape=pentagonShape } )

physics.addBody( soccerball, { density=0.9, friction=0.5, bounce=0.6, radius=38 } )
physics.addBody( superball, { density=0.9, friction=0.5, bounce=0.8, radius=24 } )
physics.addBody( superball2, { density=0.9, friction=0.5, bounce=0.8, radius=24 } )
physics.addBody( superball3, { density=0.9, friction=0.5, bounce=0.8, radius=24 } )

[/code] [import]uid: 3 topic_id: 1596 reply_id: 4623[/import]

That is really good of you Sean! That looks just what I am after. I may have to download this game edition and have a look. Guess it makes sense as I am maiking a game to use the game edition.

Thanks

Paul [import]uid: 7863 topic_id: 1596 reply_id: 4624[/import]

Beezer! I have got a ball moving round the screen in the direction I tilt the iPhone.

I am just using the standard SDK (Not the game edition).

Just in case it is of any use to anyone or they can suggest a better way here is my code. I must add that I got most of this code from another post on the forum.

  
local ballObj - display.newImage("ball.png", 150,150)  
  
local function shakeme( event )  
  
 xMovement = event.xGravity  
 yMovement = event.yGravity  
end  
local function onEnterFrame( event )   
  
 ballObj.x = ballObj.x + xMovement  
 ballObj.y = ballObj.y - yMovement  
  
end  
  
Runtime:addEventListener( "enterFrame", onEnter )  
Runtime:addEventListener( "accelerometer", shakeme )  
  

The movement of the ball is very slow which I like as it looks like a lava lamp or a hot air balloon.

Thanks again to the Corona staff for all your help. [import]uid: 7863 topic_id: 1596 reply_id: 4628[/import]

When I move an image with accelerometer, everything is ok.

But when I rotate an image around a fixed point (using event.x or yGravity combined with a trigonometric function to convert the linear movement to an angle), everything is ok, EXCEPT when iphone is placed stationary on a table: a lot of small (0 to 5 degres) movements of rotation (eg. value of x and ygravity between 0.0000 and ±0.0003).

If I understand well explanation of seanh in post #8 (accelerometer is like a spring), why is it only visible through a rotation movement? And what’s the best solution to neutralise these small erratic movements?
Thanks for your help.
[import]uid: 8970 topic_id: 1596 reply_id: 10475[/import]

Filter them via an IF THEN END. [import]uid: 5712 topic_id: 1596 reply_id: 10481[/import]