WebGL to Windows 8

Today's project from Lee Stott and David Cathue combines Web and Windows making this a WWW kind of day (Web and Windows Wednesday).

While we've highlighted WebGL before;

Today we're taking it to the next logical step and helping you bring your WebGL app to Windows 8 and the Windows Store. 

WebGL to Windows 8

WebGL offers new very interesting opportunities for the gaming industry.

You can now develop a game for the web running cross-platforms and take the very same code to build a Windows Store App and add some platforms specifics & monetization.

Pre-requisites: validate your game in IE11 which now supports WebGL

Step 1. Validate your code against Internet Explorer 11.

...

Step 2. Be sure that your game runs in every WebGL-enabled browser/platform.

So what is new with IE11

Using a WebGL engine

ThreeJS

BabylonJS

Using Web Application Template

...

Please watch the videos below demonstrating the use of the Web Application Template (WAT) being used to build a Windows 8 HTML5/JS game.

The game can also be built as a native Windows 8 game the advantage this had over the WAT was the game could work offline.

Here is a recording of the endeavours and this 10 minute video shows how you would technically go about porting a game like this using both the WAT approach and the native approach.

http://www.youtube.com/watch?v=T51tgL3qzi8&feature=youtu.be

The native implementation 6:40 seconds in : http://youtu.be/T51tgL3qzi8?t=6m40s

[Click through for all the details and links]

Now, how about a complete walkthrough, start to app?

 Building a WebGL game for Windows 8 Store

Install Visual Studio 2013

To build a Windows 8.1 app for the Windows Store, you’ll need.

1. Windows 8.1

2. Visual Studio 2013 to package your code.

3. Windows Store and Developer account.

Simply follow the procedure described here: Get started - Download the tools . You can install the free version: Visual Studio 2013 Express for Windows 8 or if your a student you can head over to www.dreamspark.com and install Visual Studio Professional or Ultimate for FREE.

If your a student you get a FREE developer account via https://www.dreamspark.com/Student/Windows-8-App-Development.aspx

Taking your WebGL Browser to an app ...

Building a  simple BabylonJS sample ...

Creating a Windows 8 Store App ...

That’s it! You’ve just finished migrating the code into a Windows Store application! Press CTRL+F5 or the play button to launch the game:

image

You now need to add Windows 8 feature such as snap and charms

Updating your Windows 8 game to embrace the Windows 8.1 platform

First article you have to read as a game developer is that one: Designing a great game for Windows. It will briefly explain you how to embrace the Windows 8.1 platform & its design considerations: live tiles and notifications, share contracts, app bar, support for a variety of form factors and screen sizes, snap view, etc.

For JavaScript developers, download this good simple sample to start with: JavaScript and HTML5 touch game sample. You’ll find the code to create an app bar & a settings flyout panel for instance. I’ve used this sample project to modify the one we’ve created together.

Handling multiple views of a Windows Store app, Snap/Full

You really have 2 choices:

...

Adding Xbox Controller input...

Getting your game ready for Store
1. Passing the WACK test ...
Download the Visual Studio solution

If you’d like to review the complete solution, feel free to download David Cathue fill solution here

[Click through for the full post]

Now you mix this in with the news from Build about the new Universal Applications and you've got one app that could span the 2 foot to 10 foot, Phone, tablet, PC and someone the XBox One...

Tag:

Follow the discussion

  • Oops, something didn't work.

    Getting subscription
    Subscribe to this conversation
    Unsubscribing
    Subscribing

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.