Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
29. November 2016

 

Welcome to the next part in the ongoing BabylonJS Tutorial Series.  In the previous tutorial we created our first simple scene which contained a simple camera.  In this tutorial we are going to explore the concept of camera’s in more depth.  As always there is an HD video version of this tutorial available here.

 

In the previous example we created a Free Camera.  A Free Camera is a camera that can be moved around using the mouse and keyboard.  Often of course you are going to want to be able to customize which keys are used to move the camera.  Here is an example that configured the camera to respond to the WASD keys.

 

var canvas = document.getElementById('canvas');

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

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();
            var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0,
            0,-10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas,true);
            camera.keysUp.push(87);    //W
            camera.keysDown.push(83)   //D
            camera.keysLeft.push(65);  //A
            camera.keysRight.push(68); //S


            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.render();
        });

 

This code running:

1

When we create the camera, we pass it’s initial location within our scene.  In this case the position is (0,0,-10) or –10 down the Z axis.  Of course we also pass the scene the camera belongs to into the constructor as well.  Next we set the target of the camera, in this case the origin (or a Zero vector).  Finally we need the camera to actually receive input controls from the canvas.  This is simply done by calling attachControl.  This will result in input (such as mouse and keyboard) being passed to the camera for processing.  There is a member of the camera for keys representing up, down, left and right movement.  To each we pass the appropriate key scancode for the each key in the WASD combination.  When you run this code, you can now navigate around the scene using the WASD and free look using the mouse.

 

Another common camera type is a camera that orbits an object.  That is the camera revolves around the target in a circular orbit.  This is accomplished using an ArcRotateCamera.  Keep in mind however, you could also implement this camera in any other camera object available in Babylon, it would however be your responsibility to implement the functionality.  The follow is the code to create an ArcRotateCamera:

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(45),
                    BABYLON.Tools.ToRadians(45),
                    10.0,box.position,scene);
            camera.attachControl(canvas,true);

            return scene;
        }

 

This code running:

2

The three major parameters to the ArcRotateCamera are the alpha, beta and radius.  Radius is straight forward, this is the distance to orbit the target.  Think of the target as the mid point of a circle.  The radius then defines the size of the circle the camera will follow.  Alpha is the rotation angle around the X axis, while beta is the rotation angle around the Y axis.  Note that both take their parameter in radians instead of degrees, so we have to convert using the ToRadians() helper method.

 

The final kind of camera we are going to look at is the FollowCamera.  This camera does exactly what you’d expect, it follows a given target.  Let’s look at some code:

        var canvas = document.getElementById('canvas');

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

        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();

            var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);

            // Create a second object so we can actually witness the movement
            // Make this one wireframe to distiguish the difference.
            var box2 = BABYLON.Mesh.CreateBox("Box2",4.0,scene);
            var material = new BABYLON.StandardMaterial("material1",scene);
            material.wireframe = true;
            box2.material = material;

            box2.position = new BABYLON.Vector3(0,5,0);

            var camera = new BABYLON.FollowCamera("followCam",BABYLON.Vector3.
            Zero(),scene);
            camera.target = box;
            camera.radius = 100;
            camera.heightOffset = 0;
            camera.attachControl(canvas,true);

            scene.activeCamera = camera;
            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.getMeshByName("Box").position.y += 0.1;
            scene.getMeshByName("Box").position.x += 0.1;
            scene.render();
        });

 

This code running:

3

This code contains two rendered cubes, the second a box with a wireframe material attached.  This was done so you could actually detect movement!  We will cover the specifics of materials shortly so don’t sweat the details.  Notice in the creation of the FollowCamera we pass in a target to follow (box), how far away we should follow from (radius) and there is also a control for how height the camera should be relative to the target.

 

It should be noted these are only a few of the possible cameras implemented in BabylonJS.  There are a good dozen other cameras available out of the box with features like touch or gamepad control, VR rendering and more.  The basic principals remain the same regardless to camera type.

The Video

Programming


15. November 2016

 

Welcome to the getting started tutorial in the ongoing BabylonJS Tutorial Series.  Today we are going to look at creating our first simple Babylon application setup and running.  As always there is a HD video version of this tutorial available here or embedded down below. 

 

To get started with BabylonJS, we need a web page containing a <CANVAS> tag to host our application.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #canvas {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

 

Nothing special here.  We simply create a canvas tag named canvas, style it so it takes up the entire page and that’s about it.  Now we need to link to the BabylonJs library.  You’ve got a few options here, you can download it locally or host it from a content delivery network (CDN).  I’ll take this approach, as it’s generally the fastest option for end users.  You can even create a stripped down version with only the required features here.

 

The options for using BabylonJS include:

 

Babylon.max.js is the most human readable of the versions, making it the easiest to debug but the slowest to load.  During development, this is the version I am going to use.  Simply link to this library somewhere within the <HEAD> tag of our HTML.

<script src="http://cdn.babylonjs.com/2-4/babylon.max.js"></script>

 

We have our host webpage setup and Babylon linked, time to finally get down to some code.  Below our canvas, add the following code:

    <script>
        window.addEventListener('DOMContentLoaded', function(){
            var canvas = document.getElementById('canvas');

            var engine = new BABYLON.Engine(canvas, true);
            var createScene = function(){
                var scene = new BABYLON.Scene(engine);
                
                scene.clearColor = new BABYLON.Color3.White();
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.
                Vector3(0, 0,-10), scene);
                camera.setTarget(BABYLON.Vector3.Zero());

                var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
                
                return scene;
            }

            var scene = createScene();
            engine.runRenderLoop(function(){
                scene.render();
            });

        });
    </script>

 

When we run this code we should see:

image

 

Humble beginnings certainly, but our first running app is complete.  So what are we seeing here?  It’s an unlit cube viewed by a camera looking at the origin from –10 units down the z-axis.  Let’s take a quicker look at the code that got us here.  First we create a function that we call on DOMContentLoaded event fired, so basically when our page is loaded, this function is called.  Let’s walk through the function.

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

This code gets a reference to the canvas tag we created in our HTML file.  We then use this canvas to create an instance of our Babylon game engine.

var createScene = function(){
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3.White();
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 0,-10),
    scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
    return scene;
}

Here we are creating a function that will setup our scene.  First we create a new Scene using our newly created engine.  We then set the clear color to white.  The clear color is the color that each frame is cleared with between calls, essentially setting the background color to white.  Next we create a FreeCamera named “camera1”, located at –10 along the Z axis in our scene.  Next we set the target to the origin (0,0,0).  We will go into more detail on cameras shortly, so let’s skip over this for now. Then we create a cube at the origin named “Box” that is 4x4x4 in dimensions.  Notice in both when we create the Camera and Box we pass the scene in.  This causes these entities to be created in that particular scene.  Finally we return our newly created scene from our function.

var scene = createScene();
engine.runRenderLoop(function(){
    scene.render();
});

 

Next we create our scene by calling our just defined createScene() function.  We then start our game loop calling engine.runRenderLoop().  The game loop can be thought of as the heart of our game.  This is a loop that will be called over and over as fast as possible.  If for example your game is drawing at 60FPS, this function is called 60 times in a second.  For now all we do is call scene’s render() method, which causes the contents of that scene to be drawn.

 

Here now is the code in it’s entirety.  ( A WebStorm project is available in the GFS Patreon Dropbox directory Tutorial Series –> Babylon for backers )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.babylonjs.com/2-4/babylon.max.js"></script>

    <style>
        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            var canvas = document.getElementById('canvas');
            var engine = new BABYLON.Engine(canvas, true);
            var createScene = function () {
                var scene = new BABYLON.Scene(engine);
                scene.clearColor = new BABYLON.Color3.White();
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.
                Vector3(0, 0, -10), scene);
                camera.setTarget(BABYLON.Vector3.Zero());
                var box = BABYLON.Mesh.CreateBox("Box", 4.0, scene);
                return scene;
            }
    
            var scene = createScene();
            engine.runRenderLoop(function () {
                scene.render();
            });
        });
    </script>
</body>
</html>

 

That’s it for now.  In the next part we will explore cameras in more detail.

 

The Video

GameDev News


9. November 2016

BabylonBannerSplattered_thumb[3]

Welcome to the GameFromScratch.com tutorial series covering the BabylonJS HTML5 game engine.  The home page of the series is available here.  For each tutorial in the series there is both a text and video version available.  In this post we are simply going to introduce the BabylonJS engine, the scope of this tutorial series and discuss why you might want to use the Babylon engine and also some of the alternatives available should you decide not to.  If you’ve already decided on using the BabylonJS game engine, jump forward to the next tutorial.

 

BabylonJS Overview

I’m not going to go into a great deal of detail on the functionality included in BabylonJS as I have already featured this game engine in the Closer Look game engine series.  Instead we are going to take a quick top level look at the engine features.

 

Why Choose BabylonJS

So, why is the BabylonJS game engine a good choice for you?

  • Open source (Apache 2 license) and free to use
  • Full featured 3D game library (scene graph, physics, particles, models, sprites, etc)
  • Compatible with most modern WebGL browsers
  • Excellent tooling, including level editor, Unity exporter, model converters
  • Good documentation, samples and other learning materials

You can read the full feature set here.

 

Why Not Choose BabylonJS?

So we mentioned a number of Babylon’s strengths, but why would you *not* choose to use BabylonJS?  Well, beyond the fact you may not like how they implement things the biggest reason all comes down to your priorities.  WebGL performance isn’t on par with desktop OpenGL or even OpenGL ES, so there is a bit of a performance penalty at work here.  While HTML5 applications can be wrapped to run as applications on various mobile devices, again there is a price to be paid, in both performance and labor.

At the end of the day, personally, I think a lot of it comes down to your primary target.  If you are creating a browser game first and foremost, I recommend working in a browser native library such as BabylonJS.  This has the most direct workflow, is easiest to debug, etc.  If on the other hand the browser is just another target for you you are probably better off working in a game engine that also targets HTML5, such as Unreal or Unity.

 

Alternatives to BabylonJS

Shockingly there aren’t actually a ton of HTML5 3D game engines or frameworks like BabylonJS.  The most direct alternatives are:

 

By no means is that an exclusive list, but it does represent some of the most common 3D engines with WebGL as their primary target.

In addition to these engines several 3D engines offer HTML5 as a target including Unreal, Unity, Godot and many more.  The primary challenge with these options is the generated code is often illegible, acting almost identically to a compiled binary.  So if things don’t work right you are dependent on the engine developer to fix things.  Or if you wish to use a native browser feature, you are again dependent on the engine developers to support it in some form.

 

Enough overview, lets jump into the technical details.  I am aiming to keep each tutorial somewhat short and concise, both text and video versions.  Stay tuned for the first tutorial covering getting BabylonJS up and running.

 

The Video

Programming


6. June 2016

 

V8 is a popular embeddable JavaScript engine, perhaps most famously used to power the popular Node development framework or as the JavaScript engine used by Chrome.  They just announced the release of version 5.2.  From the release notes V8 gained the following features:

ES6 & ES7 support

V8 5.2 contains support for ECMAScript 6 (aka ES2015) and ECMAScript 7 (aka ES2016).
Exponentiation operator
This release contains support for the ES7 exponentiation operator, an infix notation to replace Math.pow.
let n = 3**3; // n == 27
n **= 2; // n == 729
Evolving spec
For more information on the complexities behind support for evolving specifications and continued standards discussion around web compatibility bugs and tail calls, see the V8 blog post ES6, ES7, and beyond.

Performance

V8 5.2 contains further optimizations to improve the performance of JavaScript built-ins, including improvements for Array operations like the isArray method, the in operator, andFunction.prototype.bind. This is part of ongoing work to speed up built-ins based on new analysis of runtime call statistics on popular web pages. For more information, see the V8 Google I/O 2016 talk and look for an upcoming blog post on performance optimizations gleaned from real-world websites.

V8 API

Please check out our summary of API changes. This document gets regularly updated a few weeks after each major release.

GameDev News


27. May 2016

 

RPGMaker, the seminal, um... RPG (role playing game) maker, is currently available for free on Steam over the weekend and available for a sale price of 50% off.  image

 

RPGMaker is a complete game engine and toolset geared towards making JRPG style games.  First released in 1992, RPGMaker has been used to make several commercial games such as To The Moon and the Aveyond series.  Up until recently scripting was done using the Ruby language.  However with the move to MV, the language was changed to JavaScript.  Another major feature of the MV release is the ability to target both iOS and Android.  One nice thing about RPGMaker is it ships with a ton of game assets that should ease the getting started process.

 

To go along with the free weekend sale, the RPGMaker folks have put together an introduction:

So you’ve downloaded the program, opened it up, and are seeing the Engine for the first time. RPG Maker is not hard to use, but at first glance, there is so much to do that it can be a bit overwhelming. That is why we’ve prepared this quickstart guide, to get you on your way to making your game, your way.

What makes RPG Maker special, and what drew me to RPG Maker to begin with is that it allows anyone to make a game. You don’t have to know how to code, you don’t have to know how to make art, you don’t have to know how to make music. I don’t know how to do any of those things. But I can make a game, and you can too. All it takes is getting to know the three main parts of the RPG Maker engine. This won’t be a tutorial. It won’t explain how to do everything, but it will give you the basics of where to get started and how things work together.

 

Click here to read the full post.

GameDev News


GFS On YouTube

See More Tutorials on DevGa.me!

Month List