Developing Windows Store Apps with HTML5 - A Showcase

Windows Store: A New Ecosystem

With Windows 8, Microsoft has brought an operating system to the market that closes the gap between the mobile device and PC. Microsoft is ushering in a new era of "personalized computing" and redefines the meaning of the conventional PC. What was considered just a personal computer has now been transformed into an entire platform.

With going ahead and doing such radical changes to their Windows which millions of users got used to over the years, Microsoft certainly showed that if they want to keep on winning there is only one right thing to do now: dare and try something different. That also obviously equals to taking more risk, investing resources and potentially failing.

Device independence is the key, which offers new challenges for application and game developers in Windows 8. No longer must a user specify the device they use on the go. What is most important is that their data and programs are accessible when required.

The Windows Store lies at the core of this concept. A collection of comprehensive and standardized apps are offered in there in Microsoft's one store. The Windows Store is available whether using Windows 8 or Windows RT on a Tablet-PC, Laptop or Desktop Computer.

While developers have been enthusiastic about the store when it was launched, the excitement dwindled by today. Today it just seems fair to admit, that it didn't turn out to be "the big thing" next to Windows 8 itself.

Still, in this article we would like to demonstrate how we, at GameDuell, use our game Solitaire Harmony in the new Windows ecosystem and how we have adapted our existing HTML5 game as an app for the Windows Store. Solitaire Harmony was one of the first games launched together with the Windows Store.

The Challenge: New Runtime Promises Much

What is particularly noticeable with app development for the Windows Store is the language possibility. On the one hand there is Microsoft's own programming languages C, C++, C# and Visual Basic. On the other hand the web-known, JavaScript.

The opportunity to have both these options is made possible by the new run-time environment 'WinRT'. WinRT is the platform used for Windows Store apps and ensures they are supported on both the classic x86 and x64 desktop processors, as well as on the mobile ARM processor.

It is extraordinary that only one platform is required to run apps on all Windows 8 compatible devices (whether desktop or mobile device). This opportunity excited us so much that we bet we could make our own great game app for the Windows Store, using the existing code of our current HTML5 version of "Solitaire Harmony".

Multiple Input Options and How to Tame Them

Casual games are excellent examples of the use of applications across various devices. Casual games have simple controls and intuitive gameplay and generally, are controlled either by a touch of the finger or with a mouse. It is essential that both input devices and touch screens are recognized.

The new "Chakra" engine is essential for rendering Windows Store apps. The same engine is used for Internet Explorer 10, through which browser API's are ready for WebSockets, CSS3 and family.

JavaScript allows for both touch and mouse events for gesture control. As a games developer for cross-platform online games it is essential to react to both events. Thanks to IE10's browser APIs we have MSPointer settings. MSPointer settings mean that individual mouse, touch or pen events can be merged into one single event. Thus, mouse, pen or touch movements can be restricted to only one event reaction. While the event handling code reduces the input possibilities for users increases. The use of MSPointer solved the issue of touchscreen and tablet compatibility for Solitaire Harmony.

Code example:

// Without MSPointer: var box = document.getElementById('box'); var onAction = function(event){ alert('There was an action!'); }; box.addEventListener('touchstart',onAction,false); box.addEventListener('mousedown',onAction,false);

// With MSPointer: var box = document.getElementById('box'); box.addEventListener('MSPointerDown',function(event){ alert('There was an action!'); },false);

Great Features with WinJS

The adjustment of input options for browser games does not necessarily make it an app. The use of a platform's ecosystem is essential in making an app. Here we are able to do something very special with Solitaire Harmony, integrating high-scores and rewards, while storing data in roaming storage.

This allows users to take their scores from device to device. Users can use load their saved data on various devices as scores are automatically synchronized with a Windows Live account. The functionality that WinJS offers means that continuing game progress in no longer an issue.

Roaming Settings

Thanks to WinJS, Windows platform native properties are available, such as saving individual game data in roaming storage. Loading high-scores, for example, can be done as follows:

Code example:

var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings; if(typeof roamingSettings.values['highscore'] != 'undefined'){ var highscore = roamingSettings.values['highscore']; }

Toast Notifications

To make the most of WinJS, we have integrated some WinJS elements from the new Windows UI to blend our own harmonious design with Windows 8. For example, upon completing a level, the so called 'Toast notification' will show new achievements:

Live Tiles

In addition, current high-scores will be shown directly on the app's icon. In Windows this icon is referred to as the 'Live Tile'. This high-score example, which is shown through tile updates, can be created with JavaScript:

// Get highscore from roaming settings var highscore = roamingSettings.values['highscore'];
// Use the Windows.UI.Notifications namespace var Notifications = Windows.UI.Notifications; // Get a tile template: http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx#TileWideImageAndText01 var tileXml = Notifications.TileUpdateManager.getTemplateContent(Notifications.
TileTemplateType.tileWideImageAndText01); // Edit the given template var tileImageAttributes = tileXml.getElementsByTagName('image'); tileImageAttributes[0].setAttribute('src', 'ms-appx:///images/windows_8/logos/widelogo.png'); var tileAttributes = tileXml.getElementsByTagName('text'); tileAttributes[0].appendChild(tileXml.createTextNode('Highscore: '+highscore)); // Create a new notification from the template var tileNotification = new Notifications.TileNotification(tileXml); // Update the title of your app with your information Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Application View States

Our HTML5 version of Solitaire Harmony has been developed to work flawlessly with the Retina display iPhone and on the iPad. Moreover the game looks fantastic on full HD resolution desktop displays.

With Windows 8 we had to deal with a further adjustment, size. The operating system allows users with a minimum resolution of 1366x768, the possibility to run two apps simultaneously. Therefore users can have various application view states.

When an app is placed on the side of the screen it finds itself in 'snapped' mode, while the second app, reduced to partial screen view, is in 'filled' mode. Solitaire Harmony looks great in 'filled' mode, as this screenshot demonstrates:

Advanced Control Options with Charms

Achievements are more enjoyable when you can share them. We knew that it was necessary that our Solitaire Harmony users have the possibility to share their high-scores and level-ups. In order to achieve this with our HTML5 version we integrated services from Twitter and Facebook. This is no longer necessary with the Windows Store app.

Microsoft offers a new control element with Windows 8 and Windows RT, the Charm Bar. The so called 'Charm Bar' comprises five key elements or 'charms', these are: Search, Share, Start, Devices and Settings. As an app developer you then have the option to register your own game content for sharing. One click of the 'Share' button shows users services, from which they can share files and information, for example with a Twitter app.

This has many advantages for developers, as services such as Email, Twitter or Facebook no longer need to be implemented. Therefore it is now only necessary to configure the app's Share Target Contract. With this option, we could dispense with the JavaScript files for processing Facebook and Twitter requests and streamline the Solitaire Harmony code.

Conclusion

Last year it seemed like a skeptical move when we decided to build our HTML5 version of Solitaire Harmony. Many in the industry did not believe that HTML5 was ready, particularly for games.

Windows 8 and Windows RT will now prove that HTML5 can be used to make cool games. Thanks to the Chakra JavaScript engine, graphic animations are, by default, driven by hardware acceleration. This provides the necessary performance for even the more complex casual games that can now be played at a comfortable speed and without lag.

Not only were we surprised at this performance boost but also with the development time required. Trusting in HTML5 paid off. Our comprehensive experience with JavaScript and CSS3 allowed us, without too much difficulty, to convert our existing browser game to a successful running app. From the beginning we have run our code with Visual Studio. We have only had to adjust to the diverse input options that Windows 8 has to offer.

The most demanding part of this project was to understand the concept and user interface behind Windows 8 and how we should integrate our app in accordance. We believe that Solitaire Harmony has turned out remarkably.

And even if Windows 8 and its store can't fully live up to what was expected from them, tablet users and users that access our own platform GameDuell.com on their tablet, will be more than happy to see that there are games they can play directly in their browser.

To make Windows 8 store a success it must make developers and innovators happy by returning a proper profit to them for their work. In order to achieve, it needs to return to the spotlight – but when will a big tech site or blog finally feature a Windows 8 app that is not a game?