Swipe me Down…or Up, Left and even Right.

One thing we take for granted on mobile devices and their apps, is swiping. We do it almost every day, from refreshing emails to blasting extra terrestrial creatures. So does your game set the standard for swiping?

There are numerous ways to implement such a system, we’ll take a look at a simple way to track and react to the user. Our system will adhere to the following rules:

• Detection of linear gestures only (no circles or bizarre squiggles)
• All directions detected by one function (left, right, up, down)
• Diagonal gestures accounted for by two-directional detection (e.g Down and Left)
• Differentiating between clicks and swipes

In the diagram on the right, the yellow areas mark the areas where a diagonal swipe will be detected, as it overlays both the horizontal and vertical zones. You can also see from this diagram that any swipe will record at least one direction; we must allow the user to wander away from a perfect linear action.

The system is encapsulated in one function, one supporting function (not called by the programmer) and will also require a data type and a global variable:

type tInput
 pressed
 pressTime
 clicked 
 minSwipe
 swiped
 swipeLeft
 swipeRight
 swipeUp
 swipeDown
 startX
 startY
endtype global gInput as tInput

function checkInput()
   ` Our code
endfunction ret

function setInput(iClick, iLeft, iRight, iUp, iDown)
   ` Our Code
endfunction 

The checkInput() function will be called in any part of the program that needs to monitor for swipes. It will return a value:

• 0 – No change
• 1 – Click detected
• 2 – Swipe Detected

Building up the function one part at a time, we firstly need to detect when the pointer is pressed; this is the first action we detect and we record the time that it happens (assume that gTime is our global variable for recording the current time). We also need to record where on the screen the pointer was pressed, and initialise the other values in the global variable:

if getPointerPressed() = 1
  gInput.pressed = g.time
  gInput.pressTime = 0
  gInput.clicked = 0
  gInput.swiped = 0
  gInput.startX = getPointerX()
  gInput.startY = getPointerY()
  ret = 1
  exitfunction cINPUT_NONE
endif

If the pointer is already in the depressed state, we must update the time it has been depressed for

if gInput.pressed > 0
 gInput.pressTime = gTime - gInput.pressed
endif

The third action we must detect and react to, is releasing the pointer, and this is the crucial action. Here are the steps we must follow to check the outcome of the full suite of actions:

• Get current screen position
• Record distance between start and end positions
• Record total time pointer was pressed
• If pointer time less than a specified period, and pointer has not travelled, consider it a click
• If pointer has travelled more than a minimum specified distance, consider it a swipe
• Calculate the angle of the swipe and set the appropriate directional flags.

The code to perform this, including the supporting setInput() function to set the flags is around 30 lines, and can be seen in the downloadable demo project. There are 12 detectable directions in all, registered by 4 flags. The demo project also allows you to visually check the abilities of this simple function; download it now to get started with swiping!