Taking the HTML5 Platformer and WebGL Game Projects Universal


Today, our Windows (and Windows Phone) Wednesday post we revisiting projects we've been following for a while that are getting a Universal refit.

David shows off how easy it can be to convert an existing project into an Universal project and covers how to customize a project to better handle device specific areas.

Creating a HTML5 phone, tablet & PC game using the Universal Apps project for Windows Stores

It’s definitely good to be a HTML5 developer. You can now target multiple devices & stores via the very same code base with almost no effort! We will focus on the Microsoft devices in this article.

During this tutorial, we’re going how to copy/paste a game working fine in the browser into a Universal HTML5 Apps that will run both on Windows 8.1 & Windows Phone 8.1. For games, you can have cases where 100% of the code will live into the shared project!

We’re first going to see how to have a unique Visual Studio solution embedding the same code of a 2D Canvas platformer game to target 2 platforms: Windows 8.1 & Windows Phone 8.1. Then, we’ll see a second option using 3D & WebGL this time and WinJS to have a game running again on both Windows tablets & phones.

What’s a Universal Apps?

During our last BUILD event in April 2014, we’ve released a new type of Visual Studio 2013 project to help developers creating applications that will target both ecosystems using HTML5: Windows Phone 8.1 & Windows Store Apps. Basically, you will have 3 projects inside it:

- a shared one containing the JavaScript code, HTML & CSS files that will be strictly identical between both platforms
- a Windows Phone specific project if you need to have a specific UI, controls or experience on some parts of the project
- a Windows Store 8.1 specific project for the same reasons

If you’ve never heard about this new kind of project, you can start by watching this overview session: Building a Converged Phone and PC App using HTML and JavaScript and the main entry point of our documentation, resources & tutorials is here: Building universal Windows apps for all Windows devices

You’ll even be able to target Xbox One Apps with the same approach in the future! This is for instance explained in this session: Building Xbox One Apps using HTML and JavaScript

By default, we’re using our open-source WinJS framework but you’re not forced to use it as we’re going to see in the first example.

Prerequisite: you need to install Visual Studio 2013 Update 2 to be able to use the new Universal Apps project templates.

Tutorial: creating a Universal HTML5 2D Platformer game

We’re not going to see how to create a game from scratch, we’re rather going to reuse one of my good old sample using EaselJS. If you’re a complete beginner in building HTML5 games, start by reading this article: Everything you need to know to build HTML5 games with Canvas & SVG

In our case, let’s use a slightly modified version explained in this tutorial series: HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS . I’ve just added a virtual joystick to be able to move the hero using touch.

Download the source code: PlatformerTouch.zip or test the result directly in your browser: https://aka.ms/platformer





Going further

You can embrace the Windows platforms by using WinRT APIs to enhance the game experience and differentiate it from other platforms. For instance, we could imagine enabling a live tile experience in our game pushing the last level played and the best high score. This is really pretty simple to implement, you just have to download this sample: App tiles and badges sample and inject the code in our current platformer sample.

Tutorial: creating a Universal 3D WebGL game

I’ve already covered this topic specifically for Windows 8.1 Store Apps in details: Using WebGL to create games for the Windows Store . Please first read this article before discovering how to convert it to a Universal App.

We’re going to start from the solution created in this article and available for download: WebGLStoreGame.zip . As a reminder, this is a packaged version of our 3D sample scene available on our website: http://www.babylonjs.com/index.html?ESPILIT . The credits goes to Michel Rousseau for these awesome 3D assets.


And you’re done! Launch it on Windows Phone and you’ll be able to move using your 2 thumbs. Launch it on Windows and you’ll be able to move using the keyboard/mouse or other inputs defined in the settings charm.


Still not clear? Download the Visual Studio 2013 solution: UniversalWebGLGame.zip and play with the code!

[David's written a long and detailed post, please click through to read it all]

Other times we've highlighted the Platformer;

And WebGL/Babylon.JS;

The Discussion

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.