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;
- BabylonJS + WebGL + Bing + Maps + 3D = BabylonBing
- Kinect Fusion powered 3D with WebGL, BabylonJS
- Playing in the Babylon.js sandbox and editor
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 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
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.
The native implementation 6:40 seconds in : http://youtu.be/T51tgL3qzi8?t=6m40s
Now, how about a complete walkthrough, start to app?
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:
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.
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
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...