Game Development Reference
In-Depth Information
When it comes to WebKit touch events, you would usually set up the following three events:
canvas.addEventListener( 'touchstart', onTouchStart, false );
canvas.addEventListener( 'touchmove', onTouchMove, false );
canvas.addEventListener( 'touchend', onTouchEnd, false );
This would cover your three main input states. It's similar in Windows 8. The only difference
is that you need to reference the MSPointer event instead.
canvas.addEventListener('MSPointerDown', onTouchStart, false);
canvas.addEventListener("MSPointerMove", onTouchMove, false);
canvas.addEventListener('MSPointerUp', onTouchEnd, false);
As you can see, the two are basically the same. If you wanted, you could easily detect the
platform and swap out the correct event ID if you are building a cross-platform HTML5
game. One of the advantages of supporting this in your Windows 8 app is that IE 10 also
supports the same touch model, so it will work flawlessly on the Web as well.
From here, there are a few additional differences in the event that you would get back on
Windows 8 versus WebKit. In WebKit, you could get the touch point's ID via the .identifier
property. In Windows 8, you would use .pointerID. From there, you can continue to access
x,y and clientX,clientY just like you would do in WebKit. After that, your code should work
basically the same. Also, since input can come from multiple sources in a Windows 8 game,
you can test the pointerType of the event object you receive with the following constants:
MSPOINTER_TYPE_MOUSE 4
MSPOINTER_TYPE_PEN 3
MSPOINTER_TYPE_TOUCH 2
Simply get the value of pointerType from the event and see if it matches up to one of the
above values. This is critical if you want your game to show virtual controls when it detects a
touch event instead of the mouse. As you start to anticipate your game being played on
devices with a mouse and keyboard, you may want to enable or disable the touch controls
based on the input type. I have seen this in several apps that will show the onscreen keyboard
when a touch is detected versus a mouse click.
