How to detect if user touchs left, right, top or bottom of screen?

I want to detect whether the user has hit the screen in the top triangle the bottom triangle, the left triangle or the right triangle…

Is the easiest way to do this is to have 4 triangle images laid out as below, each with their own event listener and make the image at the top of the pile but alpha = 0

Is there a “better” way?

http://www.boiledsweets.com/tmp/Untitled-1.png [import]uid: 9371 topic_id: 4017 reply_id: 304017[/import]

Argh, alpha = 0 images don’t receive touch events! [import]uid: 9371 topic_id: 4017 reply_id: 12168[/import]

Ah it will if you use isHitTestable = true
[import]uid: 9371 topic_id: 4017 reply_id: 12169[/import]

No that isn’t going to work as the images are in fact rectangles and therefore overlap! DOH! [import]uid: 9371 topic_id: 4017 reply_id: 12171[/import]

Nah I think placing four rectangles is the answer [import]uid: 9371 topic_id: 4017 reply_id: 12180[/import]

I’m doing this which works but I reckon some clever person could write a function that returns whether a point is in a polygon or triangle array. So you could have top_tri = {0,0, 480,0, 240, 160} as the three x, y point co-ords then you pass in the array and the x,y event and it returns true if the x,y is in the array region

[blockcode]
West = display.newRect(6, 110, 158, 97)
West.alpha = 0
West.isHitTestable = true
West:addEventListener(“touch”, moveWest)

East = display.newRect(321, 109, 158, 97)
East.alpha = 0
East.isHitTestable = true
East:addEventListener(“touch”, moveEast)

North = display.newRect(165, 10, 158, 97)
North.alpha = 0
North.isHitTestable = true
North:addEventListener(“touch”, moveNorth)

South = display.newRect(165, 213, 158, 97)
South.alpha = 0
South.isHitTestable = true
South:addEventListener(“touch”, moveSouth)
[/blockcode]

Or course using this method could be made better by having even smaller squares in the very middle [import]uid: 9371 topic_id: 4017 reply_id: 12182[/import]

Measure event.x and event.y on a runtime touch? [import]uid: 6645 topic_id: 4017 reply_id: 12176[/import]

jmp909’s suggestion works cleaner, though requires some math.

Basically what you do is trace a ray from the center of the screen to your finger touch and see how many times the ray intersects the triangle point If it intersects 0 times or 2 times, it’s outside the triangle and there’s no hit. If it intersects 1 time, you get the hit. [import]uid: 11024 topic_id: 4017 reply_id: 12193[/import]

Talk is cheap. Code examples people please!

As I’ve said elsewhere Corona is great but it’s let down by the not complete API docs and scant examples. [import]uid: 9371 topic_id: 4017 reply_id: 12196[/import]

Here you go:

--Spend some days on the docs dude... You haven't!   
--http://developer.anscamobile.com/reference/index/eventx  

[import]uid: 7356 topic_id: 4017 reply_id: 12205[/import]

@finnk

ex-Unity user? :wink:
[import]uid: 7356 topic_id: 4017 reply_id: 12206[/import]

Nope, never used it before. Came straight from regular Cocoa but had troubles optimizing OpenGL and a myriad of other things. [import]uid: 11024 topic_id: 4017 reply_id: 12209[/import]

Thanks for your help.

I’ve spent a many hour reading the docs thanks. And found that they are not comprehensive as advertised.

The real answer is to code a is point in polygon type routine methinks. [import]uid: 9371 topic_id: 4017 reply_id: 12240[/import]


The real answer is to code a is point in polygon type routine methinks.

Talk is cheap. Code please!
(Isn’t that awful to read as a “thanks” to an answer?) [import]uid: 7356 topic_id: 4017 reply_id: 12246[/import]

Just once I have written a routine to do it I’ll post it here for the community.

I think you have taken my response the wrong way, it was meant in a light-hearted way. [import]uid: 9371 topic_id: 4017 reply_id: 12247[/import]

Work in progress:

[blockcode]

top_tri_x = {0, 319, 239}
top_tri_y = {0, 0, 239}

pointInPolygon(x,y,top_tri_x, top_tri_y)
function pointInPolygon(x, y, polyX, polyY)

local polySides=table.maxn(polyX)
local oddNodes=true
local counter=0

p1x = polyX[1]
p1y = polyY[1]
for i=1,polySides do
p2x=polyX[math.fmod(i,polySides)+1]
p2y=polyY[math.fmod(i,polySides)+1]
if y>math.min(p1y,p2y) then
if y<=math.max(p1y,p2y) then
if x<=math.max(p1x,p2x) then
if p1y~=p2y then
xinters=(y-p1y)*(p2x-p1x)/(p2y-p1y)+p1x
if p1x==p2x or x<=xinters then counter=counter+1 end
end
end
end
end
p1x = p2x
p1y = p2y
end

if math.fmod(counter,2)==0 then oddNodes=not oddNodes end

return oddNodes

end
[/blockcode]

Yet to test… [import]uid: 9371 topic_id: 4017 reply_id: 12250[/import]

No hard feelings here…

I would just place a transparent full stage rect shape on top of the graphics and make some calculations onTouch, to see what event.x / event.y I have as a percentage of my viewable area max x and y. Then return false in my handler to let the touch be handled from the display objects underneath my “location-detector” shape. [import]uid: 7356 topic_id: 4017 reply_id: 12251[/import]

“make some calculations”

Well that’s what that routine is doing in effect, or at least the result will be the same, I’ll be able to determine which ‘quadrant’ triangle the event.x, event.y occurred in [import]uid: 9371 topic_id: 4017 reply_id: 12259[/import]

Yup that code works. I think it’s pretty useful as you can use it for complex polygons not just triangles :slight_smile:

I’ll tidy up and post a working example in the Code Share thingy [import]uid: 9371 topic_id: 4017 reply_id: 12261[/import]

Here you go, this is for a landscape, 480*320 setup, adjust the tri arrays for portrait etc. Enjoy!

[blockcode]
local north_tri_x = {0, 479, 239}
local north_tri_y = {0, 0, 159}

local south_tri_x = {239, 0, 479}
local south_tri_y = {160, 319, 319}

local west_tri_x = {0, 239, 0}
local west_tri_y = {0, 159, 320}

local east_tri_x = {479, 240, 479}
local east_tri_y = {0, 159, 479}

local function pointInPolygon(x, y, polyX, polyY)

local polySides=table.maxn(polyX)
local oddNodes=true
local counter=0

p1x = polyX[1]
p1y = polyY[1]
for i=1,polySides do
p2x=polyX[math.fmod(i,polySides)+1]
p2y=polyY[math.fmod(i,polySides)+1]

if y>math.min(p1y,p2y) then
if y<=math.max(p1y,p2y) then
if x<=math.max(p1x,p2x) then
if p1y~=p2y then
xinters=(y-p1y)*(p2x-p1x)/(p2y-p1y)+p1x
if p1x==p2x or x<=xinters then counter=counter+1 end
end
end
end
end
p1x = p2x
p1y = p2y
end

if math.fmod(counter,2)==0 then oddNodes=not oddNodes end

return oddNodes

end

function wtouch(event)

if(pointInPolygon(event.x,event.y,north_tri_x, north_tri_y) == true) then
myText.text = “North”
else
if(pointInPolygon(event.x,event.y,south_tri_x, south_tri_y) == true) then
myText.text = “South”
else
if(pointInPolygon(event.x,event.y,west_tri_x, west_tri_y) == true) then
myText.text = “West”
else
if(pointInPolygon(event.x,event.y,east_tri_x, east_tri_y) == true) then
myText.text = “East”
end
end
end
end

end

myText = display.newText( “”, 240, 50, native.systemFont, 18 )
myText:setTextColor( 244,0,0 )

myLine = display.newLine(0,0, display.contentWidth,display.contentHeight)
myLine:setColor(255,255,255)
myLine.width = 1

myLine = display.newLine(0, display.contentHeight, display.contentWidth, 0)
myLine:setColor(255,255,255)
myLine.width = 1

Runtime:addEventListener( “touch”, wtouch )
[/blockcode] [import]uid: 9371 topic_id: 4017 reply_id: 12262[/import]