So I decided to implement a thumbstick this morning. My intent is to make it so that the center of the smaller circle moves to the edge of the larger circle in the event that the player drags their thumb outside of the thumbstick. I made a displayGroup, then added some circles and added an eventListener to the group. Got the math calculating angle and distance correctly.
When I start touching the group, and drag outside of the group far enough, my event stops firing, but “cancelled” or “ended” are not fired. Anything else I can listen for or should I put the listener on the whole scene and do the calculations there?
It’s not high quality code, I apologize for that. It’s simply me playing around with corona events before I’ve had coffee 
local smallCircle local largeCircle local centerPoint = {x = 150, y = 550} local function addThumbstick() local group = display.newGroup() largeCircle = display.newCircle(150, 550, 120) largeCircle:setFillColor(0, 255, 0) smallCircle = display.newCircle(150, 550, 20) smallCircle:setFillColor(255, 0, 0) group:insert(largeCircle) group:insert(smallCircle) group:toFront() return group end local thumbstickGroup = addThumbstick() local function manageThumbstick(event) print("event phase:" .. event.phase) if ((event.phase == "ended") or (event.phase == "cancelled")) then -- cancel animations, reset small circle to the center point else local potentialCenterPoint = {x = event.x, y = event.y} local distanceFromOrigin = calcDistance(centerPoint, potentialCenterPoint) if (distanceFromOrigin \> 120) then -- 120 is the largeCircle radius -- calculate angle so we can put the small circle at the edge -- of the large circle at the angle else smallCircle.x = event.x smallCircle.y = event.y end end return true end thumbstickGroup:addEventListener("touch", manageThumbstick)
My console ouput as I drag from the center to outside of the group shows that only the following phases are fired:
event.phase == “began”
event.phase == “moved”
again, “cancelled” or “ended” are never fired.
