Get 'direction/angle of touch in a Point and Click game

Games
#1

I apologize if this is addressed somewhere but my search came up blank.

I’m creating a Point and Click game. I can move my animated sprite character to a ‘new’ touch point with no problem.

I want to be able to set the facing direction (1 or 8 possible) of the sprite animation when a touch occur. So I’m trying to find out if the new touch was North, North East, East, South East, etc from the current sprite X,Y location give the touch  X,Y. Then I can set the correct offset in sprite sheet.

I suspect this involves using the math.arctan2() and/or math.deg() but not sure. Maybe there is an easier way.

I remember seeing a youtube tutorial game years ago with code but I cannot find it now!

Can someone point me to a code example?

_ Thank you _ in advance.

Gary

You can email me a mrgort@gmail.com if you like and/or respond here.

#2

It’s standard trigonometry where you solve the angle between two points. Corona use radians and its coordinate system is a bit different from normal (i.e. y grows going down and not the other way around), so there are a few things to remember. Still, the code for finding out the angle is really as easy as:

 

local player = display.newCircle( display.contentCenterX, display.contentCenterY, 12 ) local function getAngle(event) if event.phase == "began" then local angle = math.deg(math.atan2( event.y - player.y , event.x - player.x )) -- at this point, the angle will be between -180 and 180 degrees print(angle) -- Corona's coordinate system is a bit different, so if you -- want the standard 0 to 360 degrees, you'd need to add -- if angle \< 0 then -- angle = angle\*-1 -- else -- angle = 360-angle -- end -- print(angle) end return true end local touchSensor = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight ) touchSensor.isVisible = false touchSensor.isHitTestable = true touchSensor:addEventListener( "touch", getAngle )

All you’d need to do is to then define the thresholds for facing north, north west, west, etc. and what happens.

Happy coding!

#3

Many thanks XeduR!

It was pretty straight forward to use the degree to determine ‘where’ the target point was and set the correct sprite starting

point.

My only gotcha was realizing that the ‘0/360’ degree point is at ‘3 o’clock’ position, not at ‘12 o’clock’ as I thought it would be.

I’m still trying to find that information in the documentation.

Thanks again!

Gary

#4

@Gary,
 
Using trig as @XeduR suggested you’ll get 0-degrees laying along the  positive x-axis.  Then, because the y-axis is flipped (compared to a traditional Cartesian layout), the angles will increase clockwise instead of counter-clockwise.
 
i.e. You’ll get the opposite of this: polar.png

 
Note, you can use vector math to make your life easier if you need.  SSK2 provides a vector lib and it treats the negative y-axis as 0-degrees:
https://roaminggamer.github.io/RGDocs/pages/SSK2/libraries/math2D/

PS - I’m not advocating against learning trig and/or using it.  This is fundamental.  However, once you’re comfortable you may find that utilizing vector math lends itself better to problem solving.

#5

Thanks!

I’ll check out SSK2. Right now I have prototype code working using degrees.

My next lesson is how to detect ‘boundary’ areas on a display. Ex: I have a screen that is a valley on the left, then a set of stone stair going bottom to top and then on the right of the stairs the face of cliff. I want to be able to point and click on the stairs so that the walking man sprite will go up/down, but if you click to the left of the stairs I can detect that and the sprite will ‘fall’ off the stairs. On the right of the stairs I detect the wall and don’t allow the sprite to go further right.

Same idea in all the other scenes. Need to detect boundaries around things to limit the sprite movement. Of course I need to detect objects that I want him interact with, like buttons, creatures, etc. That I know how to do with object.events.

Right now I’m playing with just drawing a line/polygon on each side of the stairs (as an example) and checking somehow (collision? event?) with the sprite.

Gary

#6

It’s standard trigonometry where you solve the angle between two points. Corona use radians and its coordinate system is a bit different from normal (i.e. y grows going down and not the other way around), so there are a few things to remember. Still, the code for finding out the angle is really as easy as:

 

local player = display.newCircle( display.contentCenterX, display.contentCenterY, 12 ) local function getAngle(event) if event.phase == "began" then local angle = math.deg(math.atan2( event.y - player.y , event.x - player.x )) -- at this point, the angle will be between -180 and 180 degrees print(angle) -- Corona's coordinate system is a bit different, so if you -- want the standard 0 to 360 degrees, you'd need to add -- if angle \< 0 then -- angle = angle\*-1 -- else -- angle = 360-angle -- end -- print(angle) end return true end local touchSensor = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight ) touchSensor.isVisible = false touchSensor.isHitTestable = true touchSensor:addEventListener( "touch", getAngle )

All you’d need to do is to then define the thresholds for facing north, north west, west, etc. and what happens.

Happy coding!

#7

Many thanks XeduR!

It was pretty straight forward to use the degree to determine ‘where’ the target point was and set the correct sprite starting

point.

My only gotcha was realizing that the ‘0/360’ degree point is at ‘3 o’clock’ position, not at ‘12 o’clock’ as I thought it would be.

I’m still trying to find that information in the documentation.

Thanks again!

Gary

#8

@Gary,
 
Using trig as @XeduR suggested you’ll get 0-degrees laying along the  positive x-axis.  Then, because the y-axis is flipped (compared to a traditional Cartesian layout), the angles will increase clockwise instead of counter-clockwise.
 
i.e. You’ll get the opposite of this: polar.png

 
Note, you can use vector math to make your life easier if you need.  SSK2 provides a vector lib and it treats the negative y-axis as 0-degrees:
https://roaminggamer.github.io/RGDocs/pages/SSK2/libraries/math2D/

PS - I’m not advocating against learning trig and/or using it.  This is fundamental.  However, once you’re comfortable you may find that utilizing vector math lends itself better to problem solving.

#9

Thanks!

I’ll check out SSK2. Right now I have prototype code working using degrees.

My next lesson is how to detect ‘boundary’ areas on a display. Ex: I have a screen that is a valley on the left, then a set of stone stair going bottom to top and then on the right of the stairs the face of cliff. I want to be able to point and click on the stairs so that the walking man sprite will go up/down, but if you click to the left of the stairs I can detect that and the sprite will ‘fall’ off the stairs. On the right of the stairs I detect the wall and don’t allow the sprite to go further right.

Same idea in all the other scenes. Need to detect boundaries around things to limit the sprite movement. Of course I need to detect objects that I want him interact with, like buttons, creatures, etc. That I know how to do with object.events.

Right now I’m playing with just drawing a line/polygon on each side of the stairs (as an example) and checking somehow (collision? event?) with the sprite.

Gary