Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

3. May 2017


Ever find yourself wanting to render a 360 degree view of your model?  If you’ve ever used Blender for game sprite creation I bet you have.  What is the best way to go about doing this?  One way is to keyframe the object rotating over time, although this may not result in the lighting you want.  A better way is to orbit the render target using the camera.  The question is, how do you do this?  Well you can manually keyframe the camera’s position and rotation but this process is a gigantic pain in the butt.  An easier solution is to have the camera follow a spline path.  That’s what we are going to look at today, it’s thankfully quite easy, but perhaps not entirely intuitive.


First thing you need to do is create the path for your camera to follow.  In my case I’m using a simple circle, with the center of the circle around my target, like so:



Next, select your camera, then shift select the curve.  Then hit CTRL + P and select follow path.



And voila!



That said, how exactly do you control how fast the animation moves?  Don’t worry, it’s quite easy.  With the curve selected, go to the Data panel and locate the Path Animation section.  The number of frames can be configured here.



Easy 360 degree (or in this case, 180 degree) rendering!



You can watch this in process in the video below.

Art ,

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 and click Download:



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



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:



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:



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",
            var light = new BABYLON.PointLight("PointLight",new BABYLON.Vector3(
            light.parent = camera;
            light.intensity = 1.5;

            scene,function(newMeshes) {
                    mesh.rotation = new BABYLON.Vector3(BABYLON.Tools.ToRadians(
                }                );

            return scene;

        var scene = createScene();



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:



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:



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.



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



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




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:



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:



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:



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:



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:



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”:



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



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



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:



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



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.



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:



And now press play in the timeline:



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:



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



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:



And voila, exploding rocks!


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:



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:



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:



Now switch over to Vertex Paint Mode:



Now select “Face Selection Masking For Painting”



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.



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



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:



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



Click Use Nodes.  Then select Toon BSDF.



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:



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



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



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…



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:



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:



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



Now when we render, it should look like:



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.



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



Now we want to edit our graph like so:



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:



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



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 , ,

13. October 2016


In the recent release of Blender 2.78 Blender received a new feature that’s quite cool, B-Bones or Bendy Bones.  This post is going to take a look at how you can use this new bone option.  So what exactly is a b-bone?  Simply put, it’s a new bone type in Blender that allows itself to be subdivided and bend as a smooth spline instead of as a single entity.  This enables you to use fewer bones to control curved meshes such as a tail or eyebrow.  Don’t worry, it will all make sense in a second.


Let’s first take a look at a regular bone and a b-bone side by side:



The bendy bone on the right still only uses two bones in the armature, but the b-bone has additional detail enabling a smoother bend and tighter controls.  Now let’s look at how you use Bendy bones in the first place.  At this point I am going to assume you already know how to use bones in Blender.  If you don’t be sure to check out either this tutorial on animation in Blender.


To use Bendy Bones, create an armature like normal.  Then head over to the armature tab:



Now under display make sure B-Bones is selected:



Now you can control each individual bone in the Bones section:



Segments determines how many sub-divisions occur within the bone:



The remaining controls enable you fine tune control over the spline controlling the sub bones.


Using Curve, Roll, Scale and Easing, we’ve got fine tune control over the way the individual bendy bones perform.



Bendy Bones are a (pun intended) flexible way of adding detail to bending bones without having to create several more bones.  There is a catch however!  Outside of Blender most game engines are going to have no idea what a Bendy bone is.  For example, you can see (by the pinching) that the Bendy Bone is ignored completely once imported into Unity.



It would be awesome if they added the ability to export B-Bones that automatically split into multiple bones.  The only alternative is to get B-Bones support added to the various game engines, a much less likely result.


If you want more information on the math behind Bendy Bones, be sure to check out this very technical post.


Video Version



Month List

Popular Comments

Introducing Project Starlord: Initial game design documents
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

Home > Design >

5. June 2013

As I said earlier, I am about to start work on a mobile/web/desktop game and this is the initial design details i've sketched so far.  This is just a mind dump of the game in my brain right now, so obviously its subject to change.



Game brief


Project Starlord Overview


You are charged with running a weapons factory in the far flung future. Starting from a simple factory on a single planet, the player researches and creates new designs, decides which factions to work with, has to deal with marketing and government negotiations as well as defending your factory from pirates and other hostile forces.


There are other arms manufactures that you can compete with, trade with, or both. Beyond building a single weapon system ( for example, laser or missile system ) you can eventually research complete platforms ( such as tank, jet or mech ). You can either make all the required components internally, or source the parts you can't make. Once your enterprise reaches a certain size, you can move beyond your home system and become players in the local solar system.


There are prestigious competitions you can can sponsor teams with using your weapons. In addition you can form your own team eventually, with your pilots piloting your own unique design.


The world evolves around the player. By making generous offers to one side of a conflict, you can tilt the balance of power. You may however make an enemy as a result. Back the wrong side and you may find yourself with a client unable to pay you! Or you can try to sell weapons to all sides, although eventually your customers may eventually force you to choose a side.


Of course, in a world without war, there is no need for weapons! You can't have that now can you? Keep an eye on political situations and apply a bit of pressure when it's in your best interest. Careful though, don't get caught!



Game Components



So essentailly I am looking to create an economic simulator where you run a weapons factory.  I have always found turn based strategy games the best fit for mobile gaming and some of my favourite experiences ( Civilizations, XCom, Game Dev Story, Lemonade Tycoon, etc… ) have been in this mold.


Obviously Starlord is just a code name, as I am fairly certain Marvel holds the copyright.  Do to the nature of people cloning games, camping URLs etc, I don't think I will be making the name public anytime soon.  Next up I'm going to start modelling the various systems I am going to have to create.  Divide and conquer, repeat and rinse.


Does this sound like the type of game you would play?


blog comments powered by Disqus

Month List

Popular Comments