Touch event Not Working in Screen Greater Than contentWidth

Solar2D General Questions/Discussion
#1

contentWidth is defined as 2048. So when the screen is greater than this we have set up the app images to position in response. This works well, even for adding simple eventListeners - they can be interacted with if the object appears along the x axis that is greater than 2048.

But images given eventListeners that involve more states such as “began”. “moved” and that require focus as set by display.getCurrentStage():setFocus no longer work when on an x axis greater than 2048. All objects on the x axis less than that work fine. For an object that is right on the 2048 line, the half that is less can receive an event but the half that is greater cannot.

It appears that the contentWidth defined in the config. is being directly referenced during the touch event - as the getCurrentStage suggests. Odd when simple touch events do work in this >2048 X zone.

Hope that makes sense. Any solutions?

#2

Can you post some code that demonstrates this?

Thanks

Rob

#3

Ok, so here’s the code with comments. Basically Example 1 listener works if item is greater than 2048 and in Example 2 listener, items greater than 2048 do not work - but items less than do (even less than x=0)

 -- Content in config.lua is set like.. { width = 1536, height = 2048, fps = 60, scale = kScale, imageSuffix = { ["@2"] = .5, ["@4"] = .2, } }, -- LISTENER EXAMPLE TYPE1 -- In another scene.lua.. -- eventListener for myButton works fine it is at .x = 2100 myButton = display.newImageRect( imgDir.. "myButton.png", 508, 184 ); myButton.x = 2100; myButton.y = 1296; myButton.alpha = 1; myButton.oldAlpha = 1 -- Button event listeners local function onkwkBtnNxtEvent(event) but\_nextSc(myButton) return true end myButton:addEventListener("tap", onkwkBtnNxtEvent ) -- Button functions function but\_nextSc(self) myButton:removeEventListener("tap", onkwkBtnNxtEvent ) NextScene() end -- LISTENER EXAMPLE TYPE2 -- For these listeners, only those items2-4 receive the touch eventListener -- Item1 which is at x = 2100 is outside of x=2048 and does not. objectList = { { name="item1", w=345, h=300, x=2100, y=288}, { name="item2", w=300, h=200, x=1281, y=1414}, { name="item3", w=322, h=184, x=454, y=1012}, { name="item4", w=330, h=170, x=429, y=130}, } propButton = function () for i = 1, #objectList do local button = display.newImageRect ( imgDir.. objectList[i].name..".png", objectList[i].w, objectList[i].h ) button.name = objectList[i].name button.x = objectList[i].x; button.y = objectList[i].y button.xScale = 0.1; button.yScale = 0.1 button.alpha = 0 gp\_items:insert (button) button:addEventListener( "touch", onTouch ) end function onTouch (event) local t = event.target local phase = event.phase if "began" == phase and multiFlag == true then multiFlag = false local parent = t.parent; parent:insert(t); display.getCurrentStage():setFocus( t, event.id ) t.isFocus = true -- Store initial position t.x0 = event.x - t.x t.y0 = event.y - t.y elseif t.isFocus then if "moved" == phase then t.x = event.x - t.x0 t.y = event.y - t.y0 -- do more stuff elseif "ended" == phase or "cancelled" == phase then display.getCurrentStage():setFocus( t, nil ) t.isFocus = false -- do more stuff end end end return true end -- end onTouch
#4

Hey Rob, did you get a chance to take a look at this?

Thought I’d add this image to help describe the problem.

backBtn = listener type 1 described above

items1-4 = listener type 2 described above.

So item4 - the left hand side less than 2048 can be dragged and the right hand side over the line cannot.

Also note item1 can also be dragged even though it is outside of the 0-2048 zone.

Note coordinates below are based on iPhone 5 as config.lua sets up a 2048x1536 project so when the pixelHeight and Width are detected to be higher than iPad ie iPhone then we set an imageWidth which scales up using 1536 (preset height) which in the case of iPhone5 = 2726.4 x 1536

touchErrorDemo.jpg

Let me know if you need any more explanation. Thanks Rob.

#5

Okay I can’t really test what you posted because I don’t have your images.  If you would use newCiricles as something I can quickly cut and paste, then I’ll see what I can do.

Now there are a couple of things that come to mind.   First, touches don’t work outside of the defined content area.  However, I ran a test and I put an object past the defined content area and the touch events fired correctly.  The second thought was that maybe there were problems with large content areas, so I defined my content area in my config.lua as 2048, 2048 and put the circle at an X greater than 2048.  The touch’s worked. 

Here is my code:

local r = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) r.fill = { 0.1, 0.1, 0.1} local c1 = display.newCircle(-150, display.contentCenterY, 50) c1.name = "c1" local c2 = display.newCircle(display.contentCenterX, display.contentCenterY, 50) c2.name = "c2" local c3 = display.newCircle(display.contentWidth + 150, display.contentCenterY, 50) c3.name = "c3" local function touchHandler(event)      print(event.phase, event.target.name)      return true end c1:addEventListener("touch", touchHandler) c2:addEventListener("touch", touchHandler) c3:addEventListener("touch", touchHandler)

Rob

#6

Yes your code works. It’s the same as my example above - listener example type 1. But listener example type 2 isn’t working greater than 2048. Perhaps it has to do with parent:insert(t) or  display.getCurrentStage():setFocus( t, event.id ). We need to insert the “began” “moved” and “ended” parts of the code you’ve provided to see if it’s something in there…

#7

Okay I added the stage bits in and it still works:

local r = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) r.fill = { 0.1, 0.1, 0.1} local c1 = display.newCircle(-150, display.contentCenterY, 50) c1.name = "c1" local c2 = display.newCircle(display.contentCenterX, display.contentCenterY, 50) c2.name = "c2" local c3 = display.newCircle(display.contentWidth + 150, display.contentCenterY, 50) c3.name = "c3" local function touchMe(event)      if event.phase == "began" then            local parent = event.target.parent            parent:insert(event.target);        display.getCurrentStage():setFocus( event.target, event.id )            print("In began phase",event.phase, event.target.name)      elseif event.phase == "ended" then            display.getCurrentStage():setFocus( event.target, nil )        event.target.isFocus = false            print("In ended phase",event.phase, event.target.name)      end      return true end c1:addEventListener("touch", touchMe) c2:addEventListener("touch", touchMe) c3:addEventListener("touch", touchMe)

The only thing I can think is that your onTouch appears to be a global variable/function.  Perhaps something is writing over it somewhere.

Rob

#8

Thanks Rob for taking a look. I am away from the office but will test what you’ve got tomorrow. I didn’t inclue all my code, but the onTouch function has been forward declared. btw, the code used here is from the drag example in Corona’s sample code. I noticed a few differences in how you phrase things such as if “began” == phase vs. if phase == “began”. Anyway, I’ll get back to you soon, cheers.

#9

OK, found the issue was to do with Director as everything works fine without it. So after fishing around in Director I found it creates a Book Touch Area which refers to _W and _H settings at the top of _W = display.contentWidth and _H = display.contentHeight. Fortunately we have a device.lua which outputs actual screen sizes of each device as imageWidth and imageHeight. So using those settings instead has resulted in everything working fine :slight_smile:

#10

Glad you solved it.

Rob

#11

Can you post some code that demonstrates this?

Thanks

Rob

#12

Ok, so here’s the code with comments. Basically Example 1 listener works if item is greater than 2048 and in Example 2 listener, items greater than 2048 do not work - but items less than do (even less than x=0)

 -- Content in config.lua is set like.. { width = 1536, height = 2048, fps = 60, scale = kScale, imageSuffix = { ["@2"] = .5, ["@4"] = .2, } }, -- LISTENER EXAMPLE TYPE1 -- In another scene.lua.. -- eventListener for myButton works fine it is at .x = 2100 myButton = display.newImageRect( imgDir.. "myButton.png", 508, 184 ); myButton.x = 2100; myButton.y = 1296; myButton.alpha = 1; myButton.oldAlpha = 1 -- Button event listeners local function onkwkBtnNxtEvent(event) but\_nextSc(myButton) return true end myButton:addEventListener("tap", onkwkBtnNxtEvent ) -- Button functions function but\_nextSc(self) myButton:removeEventListener("tap", onkwkBtnNxtEvent ) NextScene() end -- LISTENER EXAMPLE TYPE2 -- For these listeners, only those items2-4 receive the touch eventListener -- Item1 which is at x = 2100 is outside of x=2048 and does not. objectList = { { name="item1", w=345, h=300, x=2100, y=288}, { name="item2", w=300, h=200, x=1281, y=1414}, { name="item3", w=322, h=184, x=454, y=1012}, { name="item4", w=330, h=170, x=429, y=130}, } propButton = function () for i = 1, #objectList do local button = display.newImageRect ( imgDir.. objectList[i].name..".png", objectList[i].w, objectList[i].h ) button.name = objectList[i].name button.x = objectList[i].x; button.y = objectList[i].y button.xScale = 0.1; button.yScale = 0.1 button.alpha = 0 gp\_items:insert (button) button:addEventListener( "touch", onTouch ) end function onTouch (event) local t = event.target local phase = event.phase if "began" == phase and multiFlag == true then multiFlag = false local parent = t.parent; parent:insert(t); display.getCurrentStage():setFocus( t, event.id ) t.isFocus = true -- Store initial position t.x0 = event.x - t.x t.y0 = event.y - t.y elseif t.isFocus then if "moved" == phase then t.x = event.x - t.x0 t.y = event.y - t.y0 -- do more stuff elseif "ended" == phase or "cancelled" == phase then display.getCurrentStage():setFocus( t, nil ) t.isFocus = false -- do more stuff end end end return true end -- end onTouch
#13

Hey Rob, did you get a chance to take a look at this?

Thought I’d add this image to help describe the problem.

backBtn = listener type 1 described above

items1-4 = listener type 2 described above.

So item4 - the left hand side less than 2048 can be dragged and the right hand side over the line cannot.

Also note item1 can also be dragged even though it is outside of the 0-2048 zone.

Note coordinates below are based on iPhone 5 as config.lua sets up a 2048x1536 project so when the pixelHeight and Width are detected to be higher than iPad ie iPhone then we set an imageWidth which scales up using 1536 (preset height) which in the case of iPhone5 = 2726.4 x 1536

touchErrorDemo.jpg

Let me know if you need any more explanation. Thanks Rob.

#14

Okay I can’t really test what you posted because I don’t have your images.  If you would use newCiricles as something I can quickly cut and paste, then I’ll see what I can do.

Now there are a couple of things that come to mind.   First, touches don’t work outside of the defined content area.  However, I ran a test and I put an object past the defined content area and the touch events fired correctly.  The second thought was that maybe there were problems with large content areas, so I defined my content area in my config.lua as 2048, 2048 and put the circle at an X greater than 2048.  The touch’s worked. 

Here is my code:

local r = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) r.fill = { 0.1, 0.1, 0.1} local c1 = display.newCircle(-150, display.contentCenterY, 50) c1.name = "c1" local c2 = display.newCircle(display.contentCenterX, display.contentCenterY, 50) c2.name = "c2" local c3 = display.newCircle(display.contentWidth + 150, display.contentCenterY, 50) c3.name = "c3" local function touchHandler(event)      print(event.phase, event.target.name)      return true end c1:addEventListener("touch", touchHandler) c2:addEventListener("touch", touchHandler) c3:addEventListener("touch", touchHandler)

Rob

#15

Yes your code works. It’s the same as my example above - listener example type 1. But listener example type 2 isn’t working greater than 2048. Perhaps it has to do with parent:insert(t) or  display.getCurrentStage():setFocus( t, event.id ). We need to insert the “began” “moved” and “ended” parts of the code you’ve provided to see if it’s something in there…

#16

Okay I added the stage bits in and it still works:

local r = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight) r.fill = { 0.1, 0.1, 0.1} local c1 = display.newCircle(-150, display.contentCenterY, 50) c1.name = "c1" local c2 = display.newCircle(display.contentCenterX, display.contentCenterY, 50) c2.name = "c2" local c3 = display.newCircle(display.contentWidth + 150, display.contentCenterY, 50) c3.name = "c3" local function touchMe(event)      if event.phase == "began" then            local parent = event.target.parent            parent:insert(event.target);        display.getCurrentStage():setFocus( event.target, event.id )            print("In began phase",event.phase, event.target.name)      elseif event.phase == "ended" then            display.getCurrentStage():setFocus( event.target, nil )        event.target.isFocus = false            print("In ended phase",event.phase, event.target.name)      end      return true end c1:addEventListener("touch", touchMe) c2:addEventListener("touch", touchMe) c3:addEventListener("touch", touchMe)

The only thing I can think is that your onTouch appears to be a global variable/function.  Perhaps something is writing over it somewhere.

Rob

#17

Thanks Rob for taking a look. I am away from the office but will test what you’ve got tomorrow. I didn’t inclue all my code, but the onTouch function has been forward declared. btw, the code used here is from the drag example in Corona’s sample code. I noticed a few differences in how you phrase things such as if “began” == phase vs. if phase == “began”. Anyway, I’ll get back to you soon, cheers.

#18

OK, found the issue was to do with Director as everything works fine without it. So after fishing around in Director I found it creates a Book Touch Area which refers to _W and _H settings at the top of _W = display.contentWidth and _H = display.contentHeight. Fortunately we have a device.lua which outputs actual screen sizes of each device as imageWidth and imageHeight. So using those settings instead has resulted in everything working fine :slight_smile:

#19

Glad you solved it.

Rob