Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
23. September 2016

 

Welcome back to our ongoing Godot tutorial series.  You may notice a pretty major change in the way Godot looks from previous tutorials.  This is because this tutorial jumps forward to Godot 2.1 which has an updated look and feel.  Don’t worry, the process is virtually identical regardless to which version of Godot you were running.  Today we are going to look at implementing 2D lights in your Godot game.  This will involve creating Godot light nodes, as well as occluders to prevent light.  We will also look at light masking, which is useful for implementing fog of war type effects. 

 

As always there is a video version of this tutorial available here.

 

First let’s set up a simple scene we can test our lighting on.  I simple create the following hierarchy using the default Godot icon sprite.

image

 

Then scale it up like so:

image

 

Now let’s add a Light2D as a Child to our Root node:

image

 

Notice the exclamation mark?

image

 

This is because we need to specify a texture to use as the light source.  I created the following image in Paint.net (process is shown in the video if you want to see how it was made):

LightMask

 

Notice that this image is a grayscale PNG file with an alpha channel.  Where there are no pixels at all, there will be no light shown.  Where it is whitest, the light will be most intense, while the darker it gets the less intense the light.  Save this image or create your own and add it to your project.  Now we set it as the texture source for our light.

image

 

Now if you move your Light2D node around the scene, you will see how it interacts with other objects in the scene:

GIF

 

There are a number of properties you can set for the light, such as the Energy (intensity) Color (tint) and Scale (size):

image

 

Notice also Mode.  We will come back to that in a minute.  Now sometimes you aren’t going to want all lights affecting all objects in the scene.  Thankfully there is a setting for that.  Notice in the range category there is a setting called Item Mask:

image

 

This controls what layer of items this light will interact with (there is also a setting for shadows as well).  Now if you switch over to your Sprite, under canvas item you will notice a Light Mask setting:

image

 

So long as the light and CanvasItem use the same masking channel, the light will apply to that node.  If they don’t use the same channel, the light will have no effect.  This can lower processing costs and enables you to exempt parts of your seen from being lit if so desired.

 

Now sometimes you want to have light actively blocked in your scene.  For example you might have a wall that should cast a shadow.  This is easy to implement in Godot using Occuluders.  This is simply a polygon area where the proverbial light don’t shine.  Let’s set one up around the nose of our Godot sprite.  Add a LightOccluder2D to your Sprite.

image

 

Your scene hierarchy should now look like:

image

 

With the LightOcculder2D node selected in the Scene the following icon should be available in the 2D view:

image

 

Click the pencil.  Now we want to draw our occlusion polygon, like so:

Gif2

 

Now notice the way the light interacts with the scene...

gif4

 

Now remember earlier on the Mode value of our Light2D node?

image

 

Now we are going to switch it over to “Mask” and show a powerful capability.  This can be used to create localized lights or to implement fog of war effects.  Just like before we need a texture to represent our light source, but this time we want the pixel values reversed, so I created the following image:

LightMask2

 

In this case the black area will receive no light, while the whitest area will contain the most light.  Here is the end result:

gif5

 

By scaling the light out to the full size of the screen, you can easily attach such a light to the character sprite to easily implement a fog of war type approach.

 

The Video

Programming


29. June 2016

 

Welcome to a new tutorial series here on GameFromScratch.com where we will be looking at core concepts of game programming.  This includes data structures, design patterns and algorithms commonly used in game development.  We start the series off with Finite State Machines.

 

There is an HD video version of this tutorial available here and embedded below.

 

What is a Finite State Machine?

 

A Finite State Machine (or FSM for short) is one of those concepts that sounds much scarier than it actually is.  In the simplest form it’s a datatype that can have only one value (state) from a finite selection of values(states).  The easiest way is to understand the finite state machine is to look at a real world example.

 

trafficLight

 

Yep, a traffic light is a perfect example of a FSM, or at least, the logic controlling it is.  Consider the three possible states this particular traffic light can be in.  At any given point (assuming I suppose the power is working...) the light will be one of three states, red, yellow or green.  It can never been more than one of those states at a time, it’s always red or yellow or green.  These are the two keep concepts of a finite state machine.  There are a finite number of states ( 3 in this case ) and only one is true or active at a time.

 

It’s a very simple concept, but extremely useful in game development.

 

What are FSMs Used For?

 

In game development, one of the most common uses for finite state machines is artificial intelligence.  Consider the example of PacMan’s ghosts.  A state machine can be used to control how they behave.  A ghost may have one of several different operating modes for example waiting to be released, hunting, hunted and dead.  The state machine is what is used to drive the ghost’s actions and to switch between states.  You will find AI examples absolutely loaded with state machines, often with some fuzzy logic controlling the transition between states to give a layer of unpredictability to your characters.

AI isn’t the only place of course, think of all the different things in a game that are related, there are multiple different states they can be in, but only one can be active at a time.  Game states are a very common example, where you break your game up into a series of states, for example Loading, Main Menu, Playing, High Score, Exiting.  Many game engines ( one such example is Phaser ) split your game up into a series of states.  The ultimate controller of these states is a finite state machine.  A sequential UI ( think of a sequence of dialogs controlled by next/back buttons ) can also be implemented using FSMs.  They are also commonly used to control elements in a games world.  Consider a game with a weather system, be it day or night cycles or season cycles like Spring, Summer, etc...  these would most likely be controlled via FSMs.

 

Implementing a Finite State Machine

 

The example we are going to use here is to implement a traffic light via FSM.  At it’s core the data is going to be stored in an enum, a natural fit for state machines, but stack based or array based options are also viable.  This example is not only going to switch the traffic lights periodically, it’s also going to implement callbacks so the world at large can interact with the light.  This example is implemented using C#, but should be easily adapted to most modern programming languages.

 

using System;

namespace GameFromScratchDemo
{

    public class TrafficLight{
        // This enum represents the three possible values our state machine can 
        be
        public enum States { Green, Yellow, Red };    
        // This is the amount of time for the timer to wait before changing 
        between states
        private const int LIGHT_DURATION = 5000;

        // An actual instance of our enum.
        private States _state;

        // The timer object that is going to be used to switch between states 
        private System.Threading.Timer _timer;

        // This function is called by the timer when it's time for a light to 
        change
        public void lightChanged(){
            System.Console.WriteLine("Light Changed");
            
            //  For each state, move to the next appropriate state.  I.e, red 
            becomes green, etc. 
            switch(_state){
                case States.Green:
                _state = States.Yellow;
                break;

                case States.Yellow:
                _state = States.Red;
                break;

                case States.Red:
                _state = States.Green;
                break;
            }

            // Reset our timer, so this will all happen again and again
            _timer.Change(LIGHT_DURATION,System.Threading.Timeout.Infinite);

            // Call our event.  This is used to communicate with the outside 
            world that our state change occured
            onStateChange(_state);
        }

        // In our constructor we simply set out default state (green) and 
        create/start our timer
        public TrafficLight() {
            _state = States.Green;
            System.Console.WriteLine("Light Created with initial Green state");

            _timer = new System.Threading.Timer( _ => lightChanged(), null, 
            LIGHT_DURATION,
                System.Threading.Timeout.Infinite);
        }

        // these two work together to provide the callback functionality
        // Implementing callback is going to differ greatly from langauge to 
        language
        public delegate void StateChangedResult(States newState);
        public event StateChangedResult onStateChange;
    }

    // Our actual program.  Simply create a traffic light instance
    // Register a callback that will simply print the current state returned 
    when the light state changes
    // And finally wait for the user to hit enter before ending the program
    public class Program
    {
        public static void Main(string[] args)
        {
            TrafficLight light = new TrafficLight();
            light.onStateChange += (TrafficLight.States state) => { Console.
            WriteLine(state); };
            Console.ReadLine();
        }
       
    }
}

The example is pretty well documented in the code above.  Essentially we are creating a class TrafficLight that can internally have one of three states Green, Yellow or Red.  It also implements a timer that switches between those states.  To make the code actually useful, it also implements a callback system so code external to the TrafficLight can interact with it as a black box.  The callback will be passed the current state value every time the light changes.

 

This is obviously a simple example of a state machine but the same basic premise remains regardless to complexity.  It is a very useful data structure for organizing code, especially the flow of logic.  Coupled with callbacks, it is also a great way of keeping systems decoupled as much as possible.

 

The Video

Programming Design


22. June 2016

 

Welcome to a new tutorial series covering the Defold engine, recently released for free use by King.  You can learn more about the Defold Engine in this video which contains a quick hands on.  It’s a powerful, cross platform Lua powered game engine for 2D game development.  This tutorial series will ultimately walk through all aspects of using the Defold game engine, in both text and video formats.  All of the assets used in creating these tutorials is available on the Patreon dropbox, although I will make source and asset files available as they are needed in text tutorials.  This first tutorial simply walks through getting the Defold engine installed and creating our first project.

 

You can watch the video version of this tutorial here or embedded down below.

 

Getting And Installing Defold Engine

 

Getting started with the Defold engine is very easy, however you will need to log in to Defold.com using a Google account.  First head on over to Defold.com and click the Get Defold button.

image

 

At this point you will have to log in using a Google account.  Once authenticated, you will be redirected to the Defold dashboard.  There are a number of download links available on this page.  Simply pick your appropriate platform:

image

 

This will download an archive file, extract the contents somewhere.

image

 

Defold is run by double clicking the Defold executable.  Before doing so however, let’s create a new project.

 

Creating a New Project in Defold

 

Creating a new Defold project is currently done using the Defold dashboard.  On the left hand sidebar of the dashboard, locate the Add Project button and click it.

image

 

You will now be brought to a very simple configuration form:

image

 

Name your project and click Save.  In my case I am creating a blank project, however Defold have made some sample projects available as a starting point.  If you would rather start there check “Yes, show me your tutorials”.  You will be presented with a list of options:

image

 

Your project is now available.  Let’s load the Editor.  In the folder you extracted Defold, double click the Defold executable.

 

Loading Your Project

 

Now with the editor open, select File->Open Project.

image

 

A list of available projects should now be available.

image

 

Select your newly created project and click Next.  Behind the scenes Defold is creating a git repository for your game.  Since this is the first “checkout”, you need to create a new branch.  Click New Branch then call it V1 or whatever name makes sense to you.

image

 

Defold will now download your project.  Here is the project structure of an empty new project:

image

 

Double click game.project to edit many game specific configuration setting:

image

 

Although our “game” doesn’t actually do anything, you can run it by hitting Ctrl+B or via the Project Menu:

image

 

Certainly not the most exciting game, but it’s a start!

image

 

Managing Your Projects

 

Back in the Defold dashboard, you can edit and delete your projects as well as add additional users.  Your project(s) should now appear on the left hand side of the dashboard, like so:

image

 

Click the gears icon above your project will bring you to the configuration section:

image

 

Clicking Team enables you to add users to your project:

image

 

Of course, they will have to authenticate using Google as well.

 

Finally by clicking Settings you have the ability to change the name and description of your project, as well as delete it entirely:

image

 

Code Hosted on Defold’s Server??? DEALBREAKER!

 

Don’t like the idea of your git repository behind hosted on Defold’s servers?  Well that’s an understandable concern and using the above process, this is exactly what happens.  When you create a project, it’s created as a Git repository on Defold’s servers and when you open it, you are downloading (or more accurately, checking out) to your local server).  It’s understandable that this isn’t for everyone.  Fortunately there is an alternative.

I am not going into details here, but if you want to bypass Defold’s servers complete, follow this guide here.

 

The Video

 

Programming


5. May 2016

 

Introduction

Welcome to the first part of a multipart tutorial series on creating games using the Haxe programming language with the Heaps graphics engine.  Heaps is under development by Nicolas Cannasse, the guy that created the Haxe language in the first place.  In his own words:

Heaps is a cross platform graphics engine designed for high performance games. It's designed to leverage modern GPUs that are commonly available on both desktop and mobile devices. The framework currently supports HTML5 WebGL, Flash Stage3D, native Mobile (iOS and Android) and Desktop with OpenGL. 

Heaps is a very cool library, but not an incredibly well documented one.  So that’s where this tutorial series comes in.  We are going to look at creating 2D then 3D graphics using the Heaps engine.  For this series I will be doing both text and video versions of each tutorial.  The video version of this tutorial is available here.

 

Setting Up Your Haxe Development Environment

This tutorial is going to assume you are using Windows, if you are on another operating system, the steps are going to vary slightly.

First head to Haxe.org/download and download the appropriate Haxe installer for the most reason version.

image 

In my case I am going with the Windows Installer.  Run the executable and say yes to any security messages you receive.  You want to install everything like so:

image

 

Install where ever you like:

image

 

Verify your install worked correctly.  Fire up a command prompt and type haxelib version:

image

 

That was easy, eh?  Next you will probably want an IDE or Editor.  Personally I am using Haxe Develop, a special port of Flash Develop.  This is a Windows only IDE though.  Another option is Visual Studio Code with the Haxe language extensions.

 

Finally we need to install the Heaps library.  It’s not registered with Haxelib yet, so we currently have to install it from Github.  Run the command:

 

haxelib git heaps https://github.com/ncannasse/heaps.git

image

 

And done.

 

Creating a Hello World application

Now let’s create our first application to make sure everything is up and running correctly.  A simple hello world app.

Assuming you are using HaxeDevelop, go ahead and create a new project via Project->New Project

image

 

I created a JavaScript project like:

image

 

Inside our project folder, we need to create a folder for our resources.  I simply created a directory called res.  Simply right click your project in the Project panel and select Add->New Folder...

image

 

Next we need a TTF file, I personally used this font.  Simply download that zip and copy the ttf file into the newly created res directory.  You can open an Explorer window to that directory by right clicking it and selecting Explore.  I personally renamed it to not be all caps, it should work either way though.  If you are using HaxeDevelop, your project should look something like this:

image

 

We have two final bits of configuration.  First we need to text HaxeDevelop that we use the Heaps library, and that the resource folder is named Res.  Right click your project and select Properties

image

 

Next select the Compiler Options tab.  First add an entry to Compiler options with the value –D resourcePath=”res”.  Then add a value to Libraries of heaps.  That’s it, click Apply then Ok.

image

 

Finally some code!  First we need a WebGL canvas for our application to run in.  Simply open up index.html located in the Bin folder and add a canvas.  Your code should look something like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>JSTest</title>
	<meta name="description" content="" />
</head>
<body>
	<canvas id="webgl" style="width:100%;height:100%"></canvas>
	<script src="JSTest.js"></script>
</body>
</html>

 

Now we need to edit our main Haxe code.  By default it will be called Main.hx and it’s the entry point (and entirety) of our program.  Enter the following code:

import h2d.Text;
import hxd.Res;
import hxd.res.Font;
import js.Lib;

class Main extends hxd.App {
        var text : Text;

		// Called on creation
        override function init() {
			// Initialize all loaders for embeded resources
			Res.initEmbed();
			// Create an instance of wireframe.tff located in our res folder, then create a font2d of 128pt size
			var font = Res.wireframe.build(128);
			// Create a new text object using the newly created font, parented to the 2d scene
            text = new Text(font, s2d);
			// Assign the text
			text.text = "Hello World";
			// Make it read, using hex code ( RR GG BB, each two hex characters represent an RGB value from 0 - 255 )
			text.textColor = 0xFF0000;
        }

		// Called each frame
        override function update(dt:Float) {
			// simply scale our text object up until it's 3x normal size, repeat forever
			var scaleAmount = 0.01;
			if (text.scaleX < 3.0) text.setScale(text.scaleX + scaleAmount);
			else text.setScale(1);
			
        }

        static function main() {
            new Main();
        }
    }

Now go ahead and run your code by either hitting F5 or click this button image

You should see:

GIF

 

Congratulations, your first Haxe programming using the Heaps library.  Next up, we will jump into 2D graphics with Heaps.

 

Video

Programming


4. May 2016

 

Mixamo is a great animation resource, that enables you to quickly (and currently freely) add animations to your 3D models.  However, if you want to incorporate the results into your Blender workflow, it can be a bit non-intuitive.  The Mixamo documentation recommend using Collada, which simply does not work well.  There instructions also skip completely the process of actually using the resulting animations...  a rather key component.  The following workflow is perhaps the easiest with the best results.

 

First off, when exporting your animations from Mixamo, use the following settings:

image

 

This will result in a zip file containing your model, as well as several animations, like so:

image

 

If you haven’t already, load Blender.  Next go to File->Import->FBX.  The next part is critical, in the Import FBX settings select Manual Orientation and Apply Transform

image

 

Your model and it’s armature should now load fine, with full proper textures showing up.  I suggest you rename your armature something meaningful, as each animation is going to come in with the same name (Armature, Armature.001, etc.).

 

Next do the import again, with the exact same settings, this time bring in one of your animations.  If you only need to wire up a single animation, you are nearly done.  Just bring up the DopeSheet, switch to Action Editor

image

 

You can now toggle between any animation available in the Blend file:

image

Keep in mind, I renamed my main character Timeline, then the walk animation armature was renamed Walk, etc...

 

If however you need to use multiple animations, or want to create a single timeline with all of the animations on it, you are now going to have to break out the NLA Editor.  It is simply a matter of Add Action Strip to your main character, for each animation in the timeline, like so:

image

 

And, the end result:

GIF

 

I glossed over part of the process, but never fear... I also did a video!

Art


GFS On YouTube

See More Tutorials on DevGa.me!

Month List