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.
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 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
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.
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!
Other times we've highlighted the Platformer;
- HTML5 Platformer game PhoneGap'ed onto Windows Phone 7.1(5)
- Mixing the Game State Management and Platformer XNA Recipes
- Multiplayer Platforming with Mango flavored TCP and UDP
- Playing in the Babylon.js sandbox and editor
- WebGL to Windows 8
- BabylonJS + WebGL + Bing + Maps + 3D = BabylonBing
- Kinect Fusion powered 3D with WebGL, BabylonJS