As David Rousset says in his blog (http://blogs.msdn.com/b/davrous/archive/2014/06/20/the-web-the-next-game-frontier.aspx), the web is the next game frontier. I totally agree with him.

The web is everywhere.

When you create a responsive website, you eventually get to all the connected devices in the world, with just a URL. That is why there is so much effort and work going on around WebGL and all the frameworks available to help developers creating new gaming experiences on the web.

Just by giving a look at the BabylonJS website, you can see how incredible “3D in web” can be.

image

When talking about distribution though the web may not be always the best channel. Do people have to search for your game url or run into it by chance? How can you tell the world that your game is really great on mobile and they need to test it?

Mobile has long time been a great opportunity for game developers. In this world, one did not wait for WebGL to appear to create and distribute applications and games. The application stores of each of the 3 main platforms (iOS, Android, Windows) are a really great way to do this. People go there to search and find games. You want to be there.

image

And that is only one of many reasons that having your game available as an application is a good strategy. When you are hosted in an application, many features are available easily: phone contacts to find friends to play with, mobile orientation, storage, push notifications, etc. Moreover, you do not need internet to be playable.

That being said, what if it could be easy to create a game playable in a full browser experience from a web URL and also as an application with enhanced features? Your game will really be available everywhere, wouldn’t it?

Well… the good news is that since a few month (and the support of WebGL on every mobile browsers), this dream finally come true!

Here is a quick video showing you the exact same code running inside an application on iOS, Android and Windows Phone.

You can download the full sample here : https://meulta.blob.core.windows.net/samples/BabylonJsSample.zip

In this article, I will explain you how to do this in a really simple way using Apache Cordova, CocoonJS and the incredibly powerful and simple to use WebGL framework: BabylonJS. 🙂

Feel free to get in touch with me on twitter to talk about this: http://twitter.com/emargraff

This article is not going into detail about how to use BabylonJS to create great 3D scenes. To learn more about this, you can follow the MVA course done by David Catuhe and David Rousset : http://channel9.msdn.com/Series/Introduction-to-WebGL-3D-with-HTML5-and-Babylonjs

To be able to do this, you need to follow some easy steps. Let’s go!

1. Install Cordova

The easiest way to install Cordova is to use NodeJS Package Manager (npm) that you can get from the www.nodejs.com website. Once installed, you just have to run the following command line:

  npm install –g cordova

Note: on iOS, you need to prefix all your commands (npm and later Cordova) with sudo to run it as an administrator.

2. Install frameworks

Cordova works in a really simple way: you put all your HTML/Javascript code inside a www folder and Cordova manage for you the creation of a project for each platform containing your code. On iOS and Android, this code is running inside a WebView even if the HTML code is stored inside the app and not get from an online server. On Windows (Phone and Tablet) this is a bit different as this platform is able to run HTML/Javascript as a first class language to create native apps. That is why there is no WebView on the Windows platform project generated by Cordova and why any Cordova app will be faster on Windows.

Anyway, you need to install and configure the build tools and frameworks Cordova will be using to compile for each platform:

3. Create the cordova project

This is a really simple step as you only need to run the following command line:

  cordova create myproject

Where myproject have to be replaced with your project name.

We usually use a reverse domain name notation to name cordova project such as com.mycompany.myproject. This is not mandatory.

This command line initialize a directory containing some folders such as www which will contain your code and plugins where Cordova store the code for each plugin you add.

image

A plugin is a Cordova extension generally used to access a specific feature on the phone. There is one for the camera, another one for accelerometer, etc.

4. Add the BabylonJS 3D scene

For this example, we are going to create a really simple scene containing a cube.

Open the index.html file in an HTML editor such as Visual Studio and delete all its content. From there, you can add any BabylonJS code you want. You can find great samples on the www.babylonjs.com website.

To create a simple 3D scene, copy the following code in you index.html file:

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

    <title>Babylon – Basic scene</title>

 

    <style>

 

        html, body {

 

            overflow: hidden;

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

 

        }

 

        #renderCanvas {

 

            width: 100%;

            height: 100%;

            touch-action: none;

 

        }

 

    </style>

 

    <script src=”babylon.js”></script>

    <script src=”hand.js”></script>

    <script src=”cordova.max.js”></script>

 

</head>

 

<body>

 

    <canvas id=”renderCanvas”></canvas>

 

    <script type=”text/javascript”>

 

        // Get the canvas element from our HTML below

        var canvas = document.getElementById(“renderCanvas”); 

 

        // Load the BABYLON 3D engine

        var engine = new BABYLON.Engine(canvas, true); 

 

        var cube;

 

        // ————————————————————-

        // Here begins a function that we will ‘call’ just after it’s built

 

        var createScene = function () {

 

            // Now create a basic Babylon Scene object

            var scene = new BABYLON.Scene(engine);

 

 

 

            // This creates and positions a free camera

            var camera = new BABYLON.TouchCamera(“camerarotate” new BABYLON.Vector3(0, 0, 10), scene);

 

            camera.rotation = new BABYLON.Vector3(0, Math.PI, 0);

 

 

            // This attaches the camera to the canvas

            camera.attachControl(canvas, false);

 

 

            // This creates a light, aiming 0,1,0 – to the sky.

            var light = new BABYLON.HemisphericLight(“light1”, new BABYLON.Vector3(0, 1, 0), scene);

 

            // Dim the light a small amount

            light.intensity = .5;

 

            cube = new BABYLON.Mesh.CreateBox(“box”, 2, scene);

            cube.material = new BABYLON.StandardMaterial(“Mat”, scene);

cube.rotation.z = 100;

 

            cube.rotation.y = 100;

 

            // Register a render loop to repeatedly render the scene

            engine.runRenderLoop(function () {

 

                scene.render();

 

            });

 

            // Leave this function

            return scene;

 

        };  // End of createScene function

 

        // ————————————————————-

        // Now, call the createScene function that you just finished creating

        var scene = createScene(); 

 

    </script> 

 

</body>

</html>

You also need to download the Babylon.js and hand.js files that are available here: https://github.com/BabylonJS/Babylon.js and here: http://handjs.codeplex.com/.

You can test the result in a web browser, here is how this simple cube looks in IE.

image

5. Add the Windows platform

Now that all our web code is ready and available in the www folder, all we have to do is add the project to deploy on each platform. This is done using Cordova command line tool.

  cordova platform add Windows

This command “simply” create a Visual Studio solution and some projects in it which are hosting the files from the www folder. As I said earlier in this article, the Windows project generated by Cordova take advantage of the Windows platform and generate a native html/javascript app. That is why you will not find a WebView in the Visual Studio projects.

You can use the Microsoft tooling to build, deploy and debug the files generated by cordova but this is only mandatory for the debug part. Building and deploying can be done directly from the command line.

For instance, building is done through this line:

  cordova build windows

The build instruction is a shortcut for 2 successive commands which are: prepare and compile. You can use them independently to respectively: update the platform generated project with any change done in the cordova project files and compile the platform.

You can run your app on a specific platform using the run command. It is possible to run it in a local emulator or a physical device connecting through USB.

This will run on the phone emulator

  cordova run windows --emulator -- --phone 

This will run on a physical phone:

  cordova run windows --device -- --phone

Please note the double dashes ‘–‘ which are not a typing mistake I made here but a required command in the line.

And here is the result on the Windows Phone emulator:

image

6. Going crossplatform

The good part is that all of these steps are working exactly the same on iOS. All you need is having a mac somewhere, copy your folder on it and run the following command:

  cordova platform add ios

Then running the run command for ios will deploy and run it on the emulator or the device connected.

However, for this to work you need to configure your environment according to this documentation: http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide and you need to be on iOS 8 or higher because the iOS webview only support WebGL since this specific version.

On Android, this is pretty much the same story. There is a problem though : the Android webview only support WebGL from the 36.0.0.0 version which is going to be shipped with Android L and not available at the moment I am writing this article.

So: what can you do to get a crossplatform game using WebGL? There is a really simple solution provided by CocoonJS.

CocoonJS is a solution to create multiplatform applications. It provides an extension to the cordova command line and give you a cordova plugin call WebView+. This plugin is based on Chromium and enables WebGL even if you are on a version of Android where the webview does not support it by default. In other words, CocoonJS replaces the default WebView used by Cordova by this WebView+.

To do it, you need to install CocoonJS using the following command line:

  npm install -g cocoonjs

This install a new command line tool which is working exactly the same cordova does. To add the android platform, run this:

  Cocoonjs platform add android

Then, to force cordova to use the WebView+ instead of the classic one:

  Cocoonjs plugin add com.ludei.webview.plus

 

image

Build it, run it, and there you go: it just works! 🙂

Be aware that when you do this, the WebView+ is using chrome, which cannot be used in emulators. When you add it to your project you are stuck with real device debugging.

7. Getting the most of each platform

We now have a multiplatform HTML5 game that is distributed as an application and can be discovered from each application store. That is great but we can do more.

As I told you, the second Cordova goal is to make us capable of easily using the phone features from Javascript in a uniform way across platforms. This is done through plugins. You can find the whole plugin list on the Apache Cordova website: http://cordova.apache.org/docs/en/3.6.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs

I am pretty sure you will find a lot of great ideas on what plugins to use and be creative about it 🙂

8. Working with great tools : Visual Studio 2015

This is not new that Microsoft is deeply involved in the Open Source community and working a lot with open source projets. With Visual Studio 2015, a new step is being taken mainly because this important things:

  • Visual Studio 2015 is going to be FREE for students and open source developers (yes FREE).
  • Visual Studio 2015 comes by default with Cordova tooling for create, improving and debugging cordova projects.
  • Visual Studio 2015 comes with a really really really fast android emulator you can use to debug your android apps (created using Xamarin, C++ or Cordova technologies)
  • Cordova tooling will help you get plug and play iOS debugging through network

 

A real advantage is also that it is going to install all the tools you need to compile on Android as you can see on this screenshot from the installer.

Capture

Why am I talking about this here? Obviously because this can be a great tool for you to create crossplatform WebGL games. Run it, attach Visual Studio 2015 to it and let the debug begin 🙂

You can learn more about this here:

Conclusion

You just get through really simple steps to create you app using web languages. In a near future I really hope that every platform is going to understand HTML and Javascript as first class languages to create apps. Windows does it in Windows RT apps since a lot a time and Windows Phone is there since the last version (8.1). That could be a great advance for the future of mobile apps and games.

Do not hesitate to share your thoughts and tests on the comments or on twitter! (@emargraff)