I have recently been coding a Windows 8 Metro Style App using the new Windows 8 Release Preview bits and Visual Studio Express 2012 RC. The app is going to be a retro shooter that takes advantage of HTML5 Canvas for the main game engine and then several Windows 8 Metro Style App Features.
I wanted to add Touch Support to the game enabling players to use their fingers to destroy the on screen ships. This meant supporting multiple fingers on screen at the same time as well still supporting mouse for players who did not own a touch device. Thankfully this is super easy to do via the MSPointer API’s!
These API’s will handle all touch and mouse events thus simplifying the events you need to handle.
You can also handle Gestures such as Tap Events using the following:
MSGestureTap – The user taps on the screen with touch or pen, or clicks the mouse.
MSGestureDoubleTap – The user taps two times (within a time threshold) on the screen with touch or pen, or double-clicks the mouse.
MSGestureHold – The user presses and holds a finger on the screen without moving.
MSGestureStart, MSGestureChange, and MSGestureEnd – Handle your own custom gestures
For my game I chose to handle the MSPointerUp event. This means that any time a user taps the screen with a finger (or clicks the mouse button) when they release an event will fire off. These events will pass along the x and y locations that they touched. It is important to keep in mind that a user will be able to drag their finger around without the event being registered. We only handle the x and y locations when they finally remove their finger “up” from the screen.
Handling Touch Events
The first thing I did was to tell my application which element to monitor touch events on. My game is entirely HTML5 Canvas based (more on canvas game development to come) so I handled all touch events on the Canvas like this:
Once the player fires off the event I call a custom touchHandler function like so:
This function loops through all of the Ship objects I have on screen and compares their current x and y coordinates to the x and y coordinates of the touch. If it finds that the touch was inside the bounds of a ship it marks that ship for destruction. The destroyShip function runs through an animation of the ship blowing up over a pre-determined amount of frames (currently 12).
If you are curious about what each of these Ship objects look like here is the function I created to track all of their state:
This is what the shipHit function looks like:
Finally, here is the destroyShip function:
That’s it! Whether a user is touching the screen with all ten fingers or simply clicking with a mouse all of these events are handled for me. Of course using more fingers on screen will make the game easier so I may want to add a difficulty mode to the games options at some point.
Testing Touch on Non-Touch Devices
Now what if you don’t have a Touch Enabled device to test your app out on? Thankfully Visual Studio 11 offers a robust Simulator that in addition to offering you the ability to run your app at different resolutions comes with some handy Touch emulation features. Select Simulator as your Debug target from the menu and start debugging.
Once you see your emulator running click on the Hand Icon on the top right.
Your mouse pointer will now turn into a targeting reticle that will pass Touch Events across instead of Mouse Clicks!
While it doesn’t give the ability currently to do Multiple Touch points it will be enough for you to test your Touch Event Handlers and verify your code is working.
I hope this post has given you an idea of how easy it is to include Touch in your Metro Style Apps using the MSPointer API’s.
If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it! You may also want to check out my previous Windows 8 Metro Style Development Tips:
- Using KnockoutJS in Windows 8 Metro Style Apps
- Illegal characters in path when deploying a Metro Style App
- Connecting to WCF RIA Services in a Windows 8 Metro Style App using Upshot.js and Knockout.js
- Help! Visual Studio 11 Beta Dark Theme incorrectly using White Background
- “The application could not be started.” error when debugging a Windows 8 Metro Style App
- Migrating a Windows 8 Metro Style App from Consumer Preview to Release Preview