Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Get 'direction/angle of touch in a Point and Click game
Started by garyhenson Jan 02 2019 08:37 PM

4 replies to this topic
sprite touch angle

Best Answer XeduR @Spyric , 02 January 2019 - 10:31 PM

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!

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

garyhenson

[GLOBAL: userInfoPane.html]
garyhenson
  • Observer

  • 12 posts
  • Corona SDK

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.



[TOPIC: post.html]
#2

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 432 posts
  • Corona SDK

  Best Answer

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!



[TOPIC: post.html]
#3

garyhenson

[GLOBAL: userInfoPane.html]
garyhenson
  • Observer

  • 12 posts
  • Corona SDK

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



[TOPIC: post.html]
#4

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,463 posts
  • Corona SDK

@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.


Edited by roaminggamer, 05 January 2019 - 09:46 AM.

  • garyhenson likes this

[TOPIC: post.html]
#5

garyhenson

[GLOBAL: userInfoPane.html]
garyhenson
  • Observer

  • 12 posts
  • Corona SDK

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




[topic_controls]
[/topic_controls]