Module: Touch

Sets up touch buttons.

For example

var $ = document.getElementById.bind(document);

Touch.setupButtons({
  inputElement: $("buttons"),
  buttons: [
    { element: $("abuttoninput"), callback: handleAbutton, },
    { element: $("avatarinput"),  callback: handleShow, },
  ],
});

The code above sets up 2 buttons. The HTML elements "abuttoninput" and "avatarinput". The actual touch input events come from an HTML element "buttons" which is an div that covers the entire display.

Simulates N virtual dpads using touch events

For each change in direction callback will be called with an event info where

pad = (index of pad)
direction =


   2     -1 = no touch
 3 | 1
  \|/
4--+--0
  /|\
 5 | 7
   6

dx   = -1, 0, 1
dy   = -1, 0, 1
bits = 1 for right, 2 for left, 4 for up, 8 for down

Note: this matches trig functions so you can do this

if (dir >= 0) {
  var angle = dir * Math.PI / 4;
  var dx    = Math.cos(angle);
  var dy    = Math.sin(angle);
}

for +y up (ie, normal for 3d)

In 2d you'd probably want to flip dy

if (dir >= 0) {
  var angle =  dir * Math.PI / 4;
  var dx    =  Math.cos(angle);
  var dy    = -Math.sin(angle);
}

The default way of figuring out the direction is to take the angle from the center to the place of touch, compute an angle, divide a circle into octants, which ever octant is the direction

If axisSize is passed in then instead the space is divided into 3x3 boxes. Which ever box the finger is in is the direction. axisSize determines the width height of the axis boxes

     | ax |
     | is |
-----+----+-----
     |    | axis
-----+----+-----
     |    |
     |    |

if divisions: 4 is passed in then instead of getting 8 directions decided by octant you get 4 decided by quadrant as in

       2
    \  |  /
     \ | /
4 <---   ---> 0
     / | \
    /  V  \
       6