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. Rather then wait for the game to be completely finished I figured I would start sharing some of my development experiences here on my blog.
One of the first ideas I had was for a “Gravity Pulse” power that would be granted upon earning a predefined a amount of points (1,500 pts being the default). Every time the user gains these amount of points a custom sound file will be played and then the screen will display a message to shake the device. If the user shakes the device within a predefined amount of time all ships on the screen will blow up.
Declaration and Initialization
I start out by defining three local class variables I will use to access the sensor itself and default values for the polling interval.
Once the DOM of the default.js page has been loaded I call a custom function (named initialize).
Inside of initialize I set up all of my ships, the coordinate system for the gameboard and other important details. There is a function I have created that will handle the accelerometer instance called initAccel.
The initAccel function assigns the default accelerometer (through the magic of WinRT) to the class variable accelerometer and if it finds a device it sets up the reporting interval properties. Reporting interval is how often we will receive new sensor readings from the accelerometer so it is important to pick a value that won’t kill our cpu.
Handling the Accelerometer Readings
The function I use to check for an in progress Gravity Pulse is called updateScore. This is where I start listening to accelerometer readings by assigning an eventListener for “shake events” as well as updating the screen and playing a wav file (more on playing sounds and external libraries to come)
When a user shakes the Windows 8 tablet enough to register a “shake” event the onShakenAccel eventHandler is called and the following code invoked:
You will notice the first thing I do is remove the eventListener which will effectively turn off the Accelerometer Sensor and then I call a custom function to blow up the on screen ships.
That’s it! By adding a few eventListeners and a call into the WinRT Windows.Device.Sensors namespace my game has full accelerometer support! Hopefully this post will help you get started in adding sensor support in your own Metro Style Apps. As Always - if you are currently working on a Windows 8 app 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