Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
6. February 2017

 

In our previous tutorial we materials in our ongoing Babylon Tutorial Series but today we are going to take things a step higher up and let someone else worry about doing the work for us.  Today we will look at exporting 3D models from Blender for use in our game.  A number of exporters exist (3ds Max, FBX, Cheetah, Unity), but today we are specifically going to talk about using Blender.

First we need to download and install the plugin.  Fortunately they make a zip version available for download.  Head on over to https://github.com/BabylonJS/Babylon.js/blob/master/Exporters/Blender/Blender2Babylon-5.2.zip and click Download:

image

 

Save the zip file somewhere you will remember.  Now fire up Blender.  Select File->User Preferences…  then select the Add-Ons tab

image

 

Now choose Install From File… and select the newly downloaded zip.  Then in the filter area type “Bab” and Import-Export: Babylon.js should be available.  Simply check the checkbox to the right hand side to enable it.  We can now export our scene as a .babylon file for use in our game.  Simply select File->Export->Babylon.js:

image

 

There are no settings for the exporter, so simply pick your game asset directory and click Export Babylon.js Scene.  A .Babylon file and all of your textures will be created in your selected save location:

image

 

Now let’s look at the code required to load and display this model in our game:

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

        var engine = new BABYLON.Engine(canvas, true);
        engine.enableOfflineSupport = false; // Dont require a manifest file
        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.White();


            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(0),
                    BABYLON.Tools.ToRadians(0),
                    10.0,BABYLON.Vector3.Zero(),scene);
            camera.attachControl(canvas,true);
            var light = new BABYLON.PointLight("PointLight",new BABYLON.Vector3(
            0,0,0),scene);
            light.parent = camera;
            light.intensity = 1.5;

            BABYLON.SceneLoader.ImportMesh("","","ShippingContainer.babylon",
            scene,function(newMeshes) {
                newMeshes.forEach(function(mesh){
                    mesh.rotation = new BABYLON.Vector3(BABYLON.Tools.ToRadians(
                    45),0,0);
                }                );
            });

            return scene;
        }

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

    });

 

The magic is done using the Y() function call.  You can load a specific asset from within the .babylon file by specifying it’s name, but in this case we just want the whole thing.  Import mesh has a callback when the mesh is loaded ( it’s loaded async, so you need to use this callback ) and it’s passed an array of Mesh objects.  We simply loop through this array ( in this example it’s only one item long, so we could have just as easily done newMeshes[0] and accomplished the same thing ).  Sometimes you will need to reposition your objects when loaded due to different coordinate systems, this example shows rotating each mesh by 45 degrees along the X axis.

 

This example uses the ShippingContainer blend file available as part of the Patreon dropbox assets, but you can use any applicable Blend file to create the example.  If you are a Patreon support (thanks by the way!) you can find this model in Art\Blender\ShippingContainer and the code is all available (including the exported Babylon file) in Tutorial Series\Babylon\5 - PartFive – Models.

 

When we run this example, we should see:

GIF

 

The Video

Programming Art


31. January 2017

 

I found myself recently needed some rocks… I could easily download a collection of rocks, but I figured it would be extremely easy to just make my own.  My first thought was to simply take a cube, smoothly sub divide it a number of times, and apply a displacement modifier to it.  The end results however didn’t really bring the results I wanted:

Rock1

 

By the way, you can learn more about using the Displace modifier on my earlier tutorial on using Blender for level creation.

 

Ok, apparently this is going to take more than a few seconds…  hey… I wonder if there is a plugin?  Turns out, yes, yes there is.  The plugin add_mesh_rocks does exactly what it says.  You can download a tarball of the plugin here using the snapshot link.   You can get instructions for installing (a different but same process) plugin in Blender here.  Download and enable the plugin.

image

 

Once you’ve downloaded and enabled the plugin, there is a new option in the Add->Mesh menu, Rock Generator:

image

 

NOTE*** There seems to be a bug, the option wont be available if there isn’t any existing geometry in the scene.

TADA!

image

 

Ok, I admit, that looks a bit more like a kidney bean than a rock, but it’s a start.  If you look in the Tool (T) panel, you will see initial creation options for Rock Builder:

image

 

Click Generate materials if you want it to create a starting rock texture for you.  Every time you change any setting, you will get a completely different rock, like so:

Rock2

 

If you don’t want this behavior, turn off the random seed setting.  Once you’ve got a rock you are happy with… let’s destroy it!

 

Before we go to far though, if you dont want performance to absolutely crawl, we want to apply several modifiers that were created as part of the rock creation process.  Go to the modifiers tab and start applying the various modifiers:

image

 

OK, back to destruction.  The first and most obvious option is the Explode modifier.  There are a few steps we have to take here… first go into edit mode, select all the vertices and in the vertex data tab create a new vertex group.  Now apply first a particle system modifier, then an explode modifier.  Finally wire up the vertex group, like so:

image

 

The problem with explode is that it applies to the hull of the object only, so the results may not be way you want… as you can see:

Rock3

 

In some cases, that effect might be exactly what you are looking for.  Oh, and I turned gravity off to get the effect above. But if you instead want things to be a bit more… substantial, it’s time for a rethink.  In fact, it’s time for another plugin, but thankfully this one ships with Blender, it just needs to be enabled.   What you are looking for is “Cell Fracture”:

image

 

Once enabled, in Object mode, there will now be a new option available in the Edit section of the Tools tab:

image

 

Cell Fracture will split your object up into several solid pieces.  You’ve got tons of control over how the fracturing will occur.

image

 

What I personally did was changed source limit (number of pieces) down to 12 and unchecked “Next Layer” so the fracture occurs in the primary layer.  Now you will notice you’ve got several meshes instead of one:

image

 

In fact, you can now get rid of the source rock if you want.  You will notice your rock is actually 12 rocks now:

rock4

 

Instead of using a particle system like we did with explode, we are going to use Dynamics (Physics) instead.  Select all of the objects, switch to the physics tab and select Add Active.

image

 

This means all of our rocks will now participate in the physics engine.  To see the result, quickly add a plane to the scene, make it a rigid body and turn dynamic off:

image

 

And now press play in the timeline:

rock5

 

Now that looks much more realistic!  Now, what if we wanted our rock to explode instead of fall?  Well, physics are once again coming to our aid!  This time add a force field to the scene:

image

 

Then crank the strength way up (or lower the mass of your objects), like so:

image

 

Once again, I don’t want gravity to be part of the process, so I turn it off.  In the Scene tab, simply turn off gravity, like so:

image

 

And voila, exploding rocks!

Rock6

Art General


24. January 2017

 

Are you perhaps… artistically challenged?  This tutorial will give you passable 8-bit or 16-bit style pixel art results with a minimum of artistic ability.  Of course it assumes you know a bit about Blender, but dont worry if you don’t.  We have a pair of ground up tutorial series that will0001-0060 teach you everything you need to know to follow along, this Blender text tutorial series and this Blender video tutorial series.  Alright, let’s jump right in.  We are going to use a combination of vertex painting, cycles renderer and freestyle in Blender to create an image like the one to the right.  Not the most impressive thing you’ve ever seen I’m sure… but it was exceptionally easy.

 

 

Without further ado, let’s jump in.  For this example I am not going to model the sprite, if you are interested in seeing that process, watch the full video.  Instead we start with a simple model like the following:

image

 

Now let’s look at first colouring it, then cartoon rendering it and finally how to render it in pixel art style.

 

Vertex Painting The Object

First we start off by painting our surface.  The nice thing about Vertex Painting is it draws the colour information directly on the model, so you dont need to worry about UV maps or textures at all.  We just published a video on Vertex Painting in Blender if you want more details.  In the end we are going to use the Cycles renderer, but for now it’s easier to get started painting using the built in default Blender renderer.  This will enable us to easily see the painted vertices in the Blender viewport.  In the default material make sure that Vertex Color Paint is enabled:

image

 

Now it’s time to start filling out our different colors.  In Edit mode, simply select the faces you want to be a specific colour, like I have done here for the cockpit area:

image

 

Now switch over to Vertex Paint Mode:

image

 

Now select “Face Selection Masking For Painting”

image

 

This limits your painting to the faces currently selected in edit mode.  In the Tools menu ( T ), select the color you want to paint with.

image

 

Now hit SHIFT + K to fill the selection with the current colour, like so:

image

 

Now repeat this process for the rest of the ship.

 

Toon Shading In Cycles

Now that you’ve got your ship coloured, it’s time to switch over to the cycles renderer.  If using a default layout, simply select Cycles Render in the dropdown:

image

 

With the change to Cycles Render, we should now have a new option in the Materials dialog

image

 

Click Use Nodes.  Then select Toon BSDF.

image

 

Out of the box Vertex Colors aren't going to work in Cycles, we need to make a simple shader graph to get things to work.  Don’t worry… it’s super easy.  When you do a vertex paint, the data is stored in the mesh data, like so:

image

 

That “Col” data is about to become very useful.  Switch to Node Editor

image

 

Now what we want to do is add an Attribute input and wire it into the Color field of our Toon shader, like so:

image

 

Notice the name “Col”.  This is the link back to our vertex color data.  This causes the Toon shader to use the painted vertex colors as it’s color source.  If you do a render now, it should look something like…

image

 

Better, but still quite fugly…

 

Using Freestyle

Now to get a bit of a more hand-drawn effect, we want to enable freestyle in the Blender renderer:

image

 

Notice I increased the Line Thickness a fair bit from the default… this is a personal choice.  It’s possible you don’t like the default lines it chose to highlight, but don't worry, you can control that if you prefer.  Simply go to Edit Mode, select the edge you want Freestyle to render, select Ctrl+E then Mark Freestyle Edge:

image

 

Now in the Render Layers property panel, locate the Free Style Line Set, then enable Edge Mark.

image

 

Now when we render, it should look like:

image

 

Ok, that looks a bit better!  Now how about that Pixel art look?

 

Compositor Time

The compositor is a process that runs AFTER the image is rendered and can be used to create all kinds of special effects.  In this case we are going to pixelate the result.  In the Renderer dialog, make sure under Post Processing, that Compositing is enabled.

image

 

Now, back in Node Editor, switch to Compositor mode:

image

 

Now we want to edit our graph like so:

image

 

Essentially we take our input Render Layers, scale down the resulting image to 1/5th its size, apply the Pixelate filter, then scale it back to it’s regular size and finally send it to the Composite output.  Now let’s render and see what we’ve got:

image

 

TADA!  Pixel art in just 20 easy steps.  Granted, at that size it doesn’t look great, but at actual game scale:

image

 

It looks pretty solid… for a purple, yellow and emerald model that is!  You can download the Blend used in this example here.

 

The Video

Art


18. January 2017

 

In our previous tutorial we covered lighting in our ongoing Babylon Tutorial Series but the objects in our game are still remarkably drab.  A big part of this is the lack of materials applied to them.  In this tutorial we are looking at using the StandardMaterial which handles all the grunt work for you.  You can think of StandardMaterial as a container for several different kinds of textures (diffuse, opacity, etc. ) that can be applied to an object.  It also has some built in attributes such as diffuse (color), emissive (self lighting) and more.  Let’s start straight away with an example that we covered in a previous tutorial.  Applying a simply wireframe to our cube:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Common/Lib/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 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);

            var material = new BABYLON.StandardMaterial("material1",scene);
            material.wireframe = true;
            box.material = material;

            return scene;
        }

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

    });
</script>
</body>
</html>

 

When you run it:

image

 

Simple enough.  We create a StandardMaterial, passing in it’s identity and the scene to create it in.  We set the materials wireframe property to true, then apply the material to our object’s material property.  Note each object can only have a single material, although a compound material exists if you need to mix multiple materials together.  Now let’s look at a slightly more colourful example, this time using more of the built in properties of StandardMaterial.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Common/Lib/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 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);

            var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(
            5,5,0),scene);
            light.diffuse = new BABYLON.Color3(1,1,1);



            var material = new BABYLON.StandardMaterial("material1",scene);
            material.diffuseColor = BABYLON.Color3.Blue();
            material.emissiveColor = BABYLON.Color3.Red();

            material.specularColor = BABYLON.Color3.Red();
            material.specularPower = 3;
            material.alpha = 1.0;
            box.material = material;

            var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, 
            BABYLON.Mesh.DOUBLESIDE);
            plane.material = new BABYLON.StandardMaterial("material2",scene);
            plane.material.diffuseColor = new BABYLON.Color3.White();
            plane.material.backFaceCulling = false;
            plane.position = new BABYLON.Vector3(0,0,-5);

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            var material = scene.getMeshByName("Box").material;
//            material.alpha -= 0.01;
//            if(material.alpha < 0) material.alpha = 1.0;
            scene.render();
        });

    });
</script>
</body>
</html>

Running this example results in:

image

 

Here you can see we’ve set the diffuse, emissive and specular values of the cube.  I also created a plane so you can see the emissive value of our cube has no effect on it.  The diffuse property can be thought of as the colour in the traditional sense.  Emissive on the other hand is a value for an internal light of the material, there aren’t actually that many emissive parallels in the real world, but some mosses and a few creatures have an emissive property to them.  Specular color determines how external light sources interact with the surface.  If you look at the commented code in the main loop you will also see commented code affecting the alpha channel of the material.  Alpha can be thought of transparency, with a value of 1 being fully opaque, while 0 is fully transparent.

What the majority of people think of when they work with materials is textures.  Textures are simply images that are applied the surface of an object like virtual wallpaper.  There are different types of textures as well, some effect the color of a surface, others affect the transparency or normals.  Here is an example:

<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 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);

            var light = new BABYLON.PointLight("pointLight",new BABYLON.Vector3(
            0,10,0),scene);
            light.parent = camera;
            light.diffuse = new BABYLON.Color3(1,1,1);


            var material = new BABYLON.StandardMaterial("material1",scene);

            material.diffuseTexture = new BABYLON.Texture("gfs.png",scene);
            material.bumpTexture = new BABYLON.Texture("gfs_normal.png",scene);
            material.roughness = 0.5;
            box.material = material;



            return scene;
        }

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

            scene.render();
        });

    });
</script>

 

And when you run it:

image

 

This example uses two different textures, a diffuse texture:

gfs

 

And a normal map:

gfs_normal

 

For more details on Normal Maps, check this video on Normal Map 101.  Somewhat confusingly, BabylonJS refers to normal maps as bump textures.  This only scratches the surface of the material and texture options available, you also have options like ambient, opacity, reflection, light and specular textures, but you will find they almost all work exactly the same way.

Programming


12. January 2017

 

Today we are going to take a quick look at the Tilengine 2D game engine.  Tilengine in their own words is:

Tilengine is a free, cross-platform 2D graphics engine for creating classic/retro games with tilemaps, sprites and palettes. Its unique scanline-based rendering algorithm makes raster effects a core feature, a technique used by many games running on real 2D graphics chips.Untitled 3

Tilengine is open source (sorry, the core isn't open ), available on Github however I never could locate what license it’s released under.

EDIT—Since posted, there has been a bit of conversation about the licensing since this was posted, read here.

  It’s a C library, but contains bindings for Python, C# and Java.  I’m actually going to use the C# bindings for the example in this review as it’s the least documented of the available bindings.  There is a single page class reference available here and a small manual available here.  The engine is geared towards creating retro sprite style games and handles graphics, animations, palettes, input and window management, but has no sound or physics engine built in.  It is also designed to be used as a backend solution to an existing front end renderer.  There are several C based examples available here, and this represents the primary way you will get up to speed.  The graphics system is designed to emulate classic sprite systems like Sega’s SuperScaler arcade board but with Super Nintendo’s Mode 7 style graphics effects available.  Tilengine is layered over SDL and is cross platform, capable of running on most desktop operating systems, as well as Raspberry Pi devices.

Tilengine is composed like so:

image

 

Tilengine has direct support for tiled map files created using the Tiled map editor.  If you want to learn more about Tiled, I have done a complete tutorial series available here.

 

As a pretty straight forward game engine, let’s jump right in with the example created using the C# bindings:

using Tilengine;

namespace ConsoleApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var engine = Tilengine.Engine.Init(320,240,1,16,16);
            var window = Tilengine.Window.Create("",Tilengine.WindowFlags.Vsync);
            
            // This is the clear color drawn each frame.  Think of it as the sky color
            engine.BackgroundColor = new Color(0,128,238);

            // Load tsx and tmx file.  These are created in the Tiled level editor
            // tsx is a collection of tiles, tmx is a map painted using those tiles
            var tileset = Tileset.FromFile("SOTB_bg.tsx");
            var tilemap = Tilemap.FromFile("SOTB_bg.tmx","Layer 1");
            
            // create a new layer using our just loaded tiles.  Games can have multiple layers
            var layer = new Layer();
            layer.Setup(tileset,tilemap);
            layer.SetPosition(0,0);

            
            // Now we are loading an animated sprite riped from the 90s classic Shadow of the Beast
            // Spriteset is simply the image collection composing our game Spriteset
            // SequencePack is simple text format describing the available animations, their frames, speed etc
            // While Sequence is a named entry in the SequencePack text file
            Spriteset ss = Spriteset.FromFile("SOTB");
            SequencePack sp = SequencePack.FromFile("SOTB.sqx");
            Sequence walk = sp.Find("walk");

            // Now finally create a sprite using our spritesheet
            Sprite sprite = new Sprite();
            sprite.Setup(ss,TileFlags.None);

            int spriteX = 15;
            sprite.SetPosition(15,215);
            
            // Now play the animation sequence named "walk".  We also pass the final 0 in to tell it how many times the animation
            // should loop.  Zero equals forever
            Animation anim = new Animation();
            anim.SetSpriteAnimation(0,walk,0);
            
            
            int frame = 0;

            // This is your game loop
            while(window.Process()){
                // Draw the current frame of graphics (sprites, layers, etc)
                window.DrawFrame(frame++);

                // Now check if left or right arrow/gamepad are pressed, in which case move in that direction
                // IF moving left, flip the sprite over on the X axis
                if(window.GetInput(Input.Right)){
                    spriteX ++;
                    sprite.Flags = TileFlags.None; 
                }
                if(window.GetInput(Input.Left)){
                    spriteX --;
                    sprite.Flags = TileFlags.FlipX; 

                }
                sprite.SetPosition(spriteX, 185);
                if(spriteX > engine.Width) spriteX = 0;
            }
            

            //Cleanup
            tilemap.Delete();
            tileset.Delete();
            window.Delete();
            engine.Deinit();
        }
    }
}

 

The comments pretty much describe everything that is going on there.  For more details, be sure to check the video version of this tutorial available here [coming soon].  This example loads a sprite and animation from the game Shadow of the Beast, an Amiga platformer classic.  The SequencePack file format is extremely simple XML file, here is the example used:

<?xml version="1.0" encoding="UTF-8"?>

<sequences>
  <sequence name="walk" delay="6" loop="0">
    1,2,3,4,5,6
  </sequence>
</sequences>

 

The tsx and tmx files are generated using the Tiled level editor, another open source and free tool.  As you can see, it’s extremely simple to get up and going.  Run this code you will see:

SOTB

 

This is of course a primitive example, but does show the many parts of a game.  A game loop, sprite loading, animations, level loading, etc.  The major features of the engine, that I’m not covering here, are the various sprite effects it emulates.  You can see these effects demonstrated here or in the samples.

 

The Video

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List