Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

14. June 2017


This is a brand new series being launched on YouTube and GameFromScratch and is somewhat different in scope.  The aim is to essentially make the same game several times in different game engines.  We are creating a simple bowling game in various different 3D game engines.  In fact, we are creating this bowling game which we completed earlier using the PlayCanvas game engine.


For each game engine in the series we will implement basically the exact same game, along with a step by step text version, plus a video of the process.  This should be useful for a number of reasons.  First it enables you to directly compare the workflow between different game engines.  Second, it shows... perhaps not best practices, but how to get started creating a full featured, if extremely limited, 3D game with physics, scenes, model importing an more.


At this point in time I have begun implementing it in a number of different engines, including:

    • PlayCanvas
    • Atomic Game Engine
    • Godot 2.x
    • Unity
    • Unreal Engine

Depending on the popularity of the series I am willing to implement the game in other engines as well with a few caveats.  The engines need to support all the required features ( level editor, 3d model importing, physics, etc ) required to make the game.  So while I could implement such a title in a code focused API such as Ogre or LibGDX, it’s completely outside of the scope of what I am trying to accomplish here.  I also need to have access to the game engine, either through public domain, free trial, etc.  This currently rules out some engines such as Leadwerks and Shiva unfortunately. 


Beyond the engines listed above, I’d love to hear what other engines you would like to see covered? 


GameDev News

6. June 2017


There are several game engines out there that present a code free option such as Stencyl and Construct.  Today we are looking at an open source alternative, GDevelop.  It is a cross platform, open source 2D game engine with a visual programming interface that requires no previous experience.  However there is also the ability to extend the engine using the C++ programming language if desired.  If you are new to the Closer Look series, it is a combination of game engine review and getting started tutorial helping you decide if a game engine is right for you.


As always, there is a video version of this tutorial available here and embedded below.


Without further ado, let’s jump into GDevelop.


Meet GDevelop

As mentioned above, GDevelop is an open source 2D game engine.  It is released under the MIT license for the core engine, while the editor is available under the GPL v3 open source license.  The code is available on Github.

Of course you don’t ever have to touch the source code to work with GDevelop.  You can download binaries for Windows, Mac, Linux as well as Browsers, iOS and Android in the form of GDevApp.  I will not be covering GDevApp today however.  GDevelop is able to compile native applications, HTML5 pages as well as Android applications, which is currently an experimental feature.

The vast majority of your time is going to be spent in the GDevelop editor, shown below.

image

The center of the screen is currently showing the Scene editor.  There is where you can compose scenes.  It is a tabbed view that can contain multiple open scenes as well as Events, the programming model of GDevelop, which we will discuss more shortly.

On the right hand side is the Objects Editor, which contain the building blocks of your game.  On the left hand side is the Project Manager containing the assets and scenes that make up your game.


Let’s walk through creating a sprite in a game.  In the Objects editor, right click objects and select Add an object.

image

This will show us a list of possible objects:

image


For every object except the Sprite you need to enable it before you can use it (thus why they are grayed out).  It’s as simple as double clicking a grayed out object to enable it however, like so:

image


In this case however we are going to use the Sprite object, which is already enabled.  Simply double click Sprite.  Double clicking the newly created object in the Object editor will open up the sprite editor screen:

image


At the top right corner of the editor window you will see the Images bank’s editor, click the plus icon and add the images you will use for your sprite.  Next drag the selected images down to the images section, like so:

GIF


You can rename and configure the animation (if any) under the Animations panel.

image


Now you can create an instance of your Sprite object by simply dragging it into the scene.

GIF2


As we saw earlier, there are several built in objects in addition to the Sprite object, including Admob integration, a Text object, a tiled sprite (spritesheet), etc.   Next lets move on to adding some logic to our newly created object.


Scripting in GDevelop

Logic in GDevelop are implemented using Events.  Let’s look at an example of moving the sprite around when the mouse moves.  Click on the Events tab.

image


In the Events ribbon, click Add an Event:

image


In this case we have no conditions, we want this to happen every single frame.  Hover over No actions, then select Add an Action.

image


This is where the building block aspect of GDevelop programming comes into play.  Select All Objects->Position->Position of an object.

image


Now we can set the parameters for positioning our object.  First select the object to modify, then set each parameter.  In this case we set the X and Y values to those of the mouse cursor, like so:

GIF3


Upon completion, you will see we now have an event defined:

image


In this particular case we have no condition, so our event will fire every pass through the event loop.  We could however have set a condition which causes our event to fire or not.  Here for example is a condition that will start playing some music once the scene is loaded.

image


Beyond conditions, there are other control structures you can add to events:

image


Link enables you to break link to another event sheet, enabling you to modularize your code.  It is also possible to define variables, both globally, to the scene and at the object level.  For example, right click the Project and select Modify Global Variables.

image


This now enables us to define new variables:

image


This can also be done at the object level, right click an object and select Other Properties.  Then in the resulting panel select Click to Edit...

image


While we are here, notice the Behaviors option?  This enables us to add new functionality to game objects.  Click the Add... button:

image


You will notice once again, by default all behaviors are disabled.  Double click a behavior to add it in.  Let’s go ahead and add Top-down movement as an example.  You can now edit properties of the new behavior in the same dialog:

image


This will instantly add arrow key navigation abilities to your object.  When you play your game, arrow keys will cause your object to move around screen.  Speaking of playing your game, hit the Preview button in the Scene ribbon to launch your game in your browser.

image


You can control application level settings of your project by right clicking your project and selecting Edit the property of the game.

image


This will bring up the next dialog.

image


Finally, if your project has Native extensions enabled, under the File menu you have the option to build a native version of your application.

image


Then simply click the Compile button.

image



Documentation and Community

GDevelop is reasonably well documented, with a Getting Started tutorial, several other tutorials and a decent number of starter templates to choose from.

image 


There is also a manual available online.  If you are intending to extend GDevelop using C++ however, the documentation is almost non-existent.  However being an open source project, all of the code is available.  All of the behaviors and objects we used in this example are available in source form on Github in the extensions folder:

image


GDevelop has a dedicated forum available here.  It is reasonably active with a decent sized community.  Forums are available in both English and French.


Conclusion

If open source, free and a visual programming interface are important to you, GDevelop is definitely an engine to consider.  The documentation is adequate, the engine is mostly feature complete, although annoyingly some features such as Tiled support are only available for native targets.  The entire thing is designed around extensibility and if you are willing to dive into C++, the sky’s the limit on what you can do.  My biggest complaint is a lack of polish on the UI layer, experiencing a few crashes, some UI glitches that went away on a reload and some buttons that simply do nothing.  Most annoyingly, the engine is basically unusable on a high DPI display.

It is however an easy engine to jump into and use if you are willing to deal with some UI warts.  An MIT license around the core engine is always an excellent feature.


The Video

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

15. December 2016

 

Welcome to the next part in the ongoing Closer Look At game engine series.  The Closer Look series combines a review, overview and getting started tutorial in one and aims to give a developer a good idea ofs2closerlook a given game engine is a good fit for them or not.  Today we are looking at the S2Engine, which is a commercial game engine available for purchase on Steam.  Right off the hop the S2Engine is going to have two major strikes against it for many game developers.  First, it’s Windows only.  Figured I’d get the out of the way right up front as if you are looking to create cross platform games, this is not the engine for you.  Second, it’s commercial and closed source, although the price tag is quite low at around $20USD.

 

As always there is an HD video version of this review available here.

 

Without further ado, let’s jump in to the S2Engine.

 

The Tools

The entire development experience in the S2Engine takes place in the S2EngineHD Editor.  Here is the editor in action running the included sample scene:

s1

 

The S2Engine Editor is absolutely loaded with tools, lets take a guided tour.  First off we have the scene window where you can see a live rendering of your game in action:

sceneoptimized

 

Please keep in mind the fuzziness in the picture above comes from the animated gif process, the real-time viewport looks vastly superior to the image above.  The Scene view is where you place entities in your scene and preview the results.

 

You can switch between the various available tools using the following toolbar:

image

Or via menu:

image

 

The Project Window

image

 

This is where the various assets of your game are organized.  It’s an analog to the underlying file system of your project.  The buttons across the left enable you to filter the various different objects ( Animations, Models, FSMs, etc ).

 

The Class Window

image

 

This is where you can instance various game objects.  Select an object, click Create and then click within the scene to place the entity.  The newly created entity (or a selected entity) can then be configured using the lower Params window, which is context sensitive to the selected object.

 

Terrain Tools

image

 

S2Engine has a full terrain editing system in.  The Terrain tool enables you to interactively edit the scenes landscape (height map).  There are tools for raising/lowering, flattening, stepping and painting terrain as well as drawing roads and vegetation.  The actual editing is done in the scene window:

terrain

 

Model Window

image

 

S2Engine supports 3D animated models of FBX format, simply click the Import button in the Project view:

image

 

There are multiple different panels for configuring models, setting and handling animations, managing joints/bones and even vertex level manipulations.

image

 

There is also an animation panel.

image

This enables you to blend animations together, set and remove animation keys and of course, preview animations.

 

Material Window

imageimage

 

A detailed material system allowing multiple layers.  You can control diffuse and normal maps, UV tilting, lighting properties and more.  You also have control over detailed material attributes like alpha blending, animations, scattering, light emission and more.

 

Special FX

image

 

Fine tuned control over multiple special FX of types weather, post processing and environmental.  Fine tune control over all aspects, including water fx, sky, weather, lens effects, etc.  You also have fine tune control over day/night cycles using a keyframe system:

image

 

Cutscene Tool

image

 

S2Engine has a complete system in place for authoring cut scenes.  Includes a curve editor:

image

 

As well as a detailed timeline:

image

 

Hierarchy

image

This is essentially your scene graph.

 

Font Tool

image

Enables you to create png textures for fonts of varying dimensions with font preview.  Fonts are imported in fnt format created using the BMFont tool.

 

GUI Editor

image

Currently in Beta, there is a UI editor available.  You can create a hierarchy of UI widgets and configure them using the Params class panel.

 

imageimage

Currently supported widgets include button, slider, frame, input box, combobox, label, checkbutton, colorbox, image, listbox, groupbox, tabbox and rangeinputbox.

 

Publishing

When you are complete publishing is a pretty straight forward process.  This is one of the advantages of only supporting a single platform publishing is as simple as choosing a file name, starting scene, main script (entry point) and a few other settings and clicking the Publish button.

image

 

Coding

There are two ways to code in S2Engine.  You can use their own scripting language or the visual FSM (Finite State Machine) visual programming language.  The scripting language has the sc2 extension and has a C like syntax.  You can read the language reference here while the API documentation is available here.  Scripts are simply connected to (and thus control) game objects.  Here is an example script that controls a jeep found in the demo game.

#message TakeControl
#message LeftControl
#message LockWaypoints
#message UnlockWaypoints

#use "engine.wav"

var float acc;
var float steer;
var bool brake;
var bool control;
var float steerAng;
var string steerNode;
var string handsNode;
var float oldsteerAng;
var bool _on;

function void Init()
{
	_on=false;
	control=false;
	steerAng=0.0;
	steerNode="steer";
	handsNode="hands";
	AICreateObject(false,false,205.0,200.0);
	resetNodeFlags("camera","visible");
	resetNodeFlags("hands","visible");
	SetSource(10.0,15000.0);
}

function void PostInit()
{
	SetPerObjectMaterialData(3,0.0);
	resetNodeFlags("light01","visible");
	resetNodeFlags("light02","visible");
	_on=false;
}

function void update()
{
	if(control==true)
	{
		acc=0.0;
		steer=0.0;
		brake=false;
		RotateNode(steerNode,"rgt",-steerAng);
		RotateNode(handsNode,"rgt",-steerAng);
		
		SetSourcePitch((PhysicsGetVehicleRPM()*0.0025)+1.0);
		/*LOG( string(PhysicsGetVehicleRPM()) );*/
		
		if(IsKeyPressed("w"))
		{
			acc=1.0;
		}
		if(IsKeyPressed("s"))
		{
			acc=-0.5;
		}
		oldsteerAng=steerAng;
		if(IsKeyPressed("d"))
		{
			steerAng=steerAng+(frametime);
			steer=-1.0;
		}
		else
		{
			if(IsKeyPressed("a"))
			{
				steerAng=steerAng-(frametime);
				steer=1.0;
			}
			else
			{
				steerAng=0.0;
			}
		}
		if(IsKeyPressed(" "))
		{
			brake=true;
		}
		if(steerAng>=35.0)
		{
			steerAng=35.0;
		}
		if( steerAng<=(-35.0) )
		{
			steerAng=-35.0;
		}
		steerAng=ScalarInterpolate(oldsteerAng,steerAng,(frametime/200.0));	
		RotateNode(steerNode,"rgt",steerAng);
		RotateNode(handsNode,"rgt",steerAng);
		PhysicsVehicleControl(steer,acc,brake);
		
		if(acc!=0.0)
		{
			var vec3 fwdaxis;
			fwdaxis=GetWorldAxis("fwd");
			SendMessageMulti("pushOut",string(fwdaxis),400.0,"null");
		}
	}
	else
	{
		PhysicsVehicleControl(0.0,0.0,true);
		if(ObjectIsInRange("player01",300.0))
		{
			SendMessageSingle("player01","DriveVehicle","");
		}
	}
}

function void message()
{
	if( ReceivedMessage("TakeControl") )
	{
		/* lights control */
		var float tod;
		tod=float(GetLevelParam("TimeOfDay"));
		LOG("tod"+string(tod));
		if( (tod>=18.0) && (tod<=24.0) )
		{
			SetPerObjectMaterialData(3,1.0);
			if(!_on)
			{
				SetNodeFlags("light01","visible");
				SetNodeFlags("light02","visible");
				_on=true;
			}
		}
		if( (tod>0.0) && (tod<6.0) )
		{
			SetPerObjectMaterialData(3,1.0);
			if(!_on)
			{
				SetNodeFlags("light01","visible");
				SetNodeFlags("light02","visible");
				_on=true;
			}
		}
		if( (tod>6.0) && (tod<18.0) )
		{
			SetPerObjectMaterialData(3,0.0);
			ResetNodeFlags("light01","visible");
			ResetNodeFlags("light02","visible");
			_on=false;
		}
	
		/*=======================================0*/
		control=true;
		SetNodeFlags("hands","visible");
		PlaySound("engine.wav",true);
	}
	
	if( ReceivedMessage("LeftControl") )
	{
		control=false;
		ResetNodeFlags("hands","visible");
		StopSound();
		SetPerObjectMaterialData(3,0.0);
		ResetNodeFlags("light01","visible");
		ResetNodeFlags("light02","visible");
		_on=false;
	}
}

 

It’s a straight forward enough language, but I generally prefer that engines use an off the shelf scripting engine instead of rolling their own.  This gives the community access to a much larger source of expertise, sample code and generally is much more time tested and stable.  As you can see from the script above, much of the logic and communication is implemented via message passing.

The majority of in game programming however is done using FSM (Finite State Machines ) via the FSM graph.

s2

If you’ve ever worked in Blueprints in Unreal Engine or Flowgraph in CryEngine you should have a pretty good idea how FSM programming works.  You’re code responds to various events and creates program flows using a series of connecting cables to other states.  Each node can have multiple actions, configured like so:

s3

There are dozens of states available, and new ones can easily be created.

image

Variables are easily created as well.

image

In addition to local variables, parameters and globals can also be defined.

image

 

 

The Documentation, Community and Content

The S2Engine has a decent amount of documentation, reference materials, getting started videos and beginner projects.  There are however a few issues, the first of which is English.  The developers primary language is not English and it shows on occasion in the documentation.  The actual UI is very well translated but some of the documentation  is certainly a tad “Engrish”.  Worse, some of the linked starting videos aren’t in English at all.  I have no issue with non-English videos, but I would recommend not linking them directly from an English localized application.

In terms of actual available documentation, there is a Wiki available here, a very solid reference manual available here, and a series of video tutorials available here.  S2Engine also comes with the beginner scene you’ve seen throughout this review.

The community for S2Engine isn’t huge but there is an active forum.  There is also a Trello bug tracking board available on Trello as well as a few other community options.  One impressive thing about the engine is the engine developer is very responsive to user requests and feedback.

One interesting aspect of the S2Engine is the existence of Content DLC.  These are themed content packs you can download and use in your game.  Currently the only content pack is the Medieval content pack shown in the video below. There is another content DLC pack in the works.

 

 

Conclusion

I pointed out the two biggest negatives to this game engine in the very first paragraph.  It’s Windows only, both for tooling and target platforms.  It’s closed source and commercial.  For many those are going to be big enough deal breakers that nothing else really matters.  For the rest though, is this a worthwhile engine?  For a small team effort, there is a massive amount of functionality included in this engine, it’s capable of some staggeringly pretty results and the workflow, once understood, is pretty accessible to people with limited programming experience.

My biggest recommendation to the developer behind this engine is to make a proper demo available.  What will get people to use this engine over the other options is that they prefer the workflow, the tools, the built in assets, etc.  The lack of a current demo is going to vastly limit the potential audience.  Even with a low price tag, few people will spend money to evaluate an engine and having a previous weaker version of your engine available as the trial is certainly a mistake.  When you go to the download section of the website, you are greeted by this text:

NOTE: The version to be downloaded here (1.4.5) is a previous, very old, FREE BETA version. It is useful just for letting you to view How S2ENGINE HD is organized and How it works. It doesn’t represent the final quality of the 1.4.6 Steam version.

This is quite simply a mistake.  A demo is about selling people on your engine, so having them experience a “very old” version is a bad idea.  Always put your best foot forward when showing an engine.  I would recommend creating a version of the current engine that is full featured but either time locked, save limited or publish limited.  You will have a great many more developers willing to give your engine a try. 

I have found the performance to be a bit inconsistent.  I was running consistently at 70+ FPS, then struggled to hit 15FPS for a while with a ton of UI glitches.  Upgrading to the newest nVidia drivers didn’t help.  Then oddly, switching Optimus to use the integrated GPU, then back to dedicated seemed to fix the problems.  Hopefully these problems are localized to me and not widespread.  I wish the developers used a standard UI toolkit like Qt, as their custom implementation can be a bit buggy or not perform as you’d expect.  I also unfortunately experienced a half a dozen crashes while evaluating the engine, including one while making the video version of this review.

 

The Video

Programming , ,

8. October 2016

 

Welcome to the next chapter in the on-going Closer Look At game engine series.  The Closer Look series is aimed at informing you quickly if a given game engine is a good fit for you or not.  It’s a combination of overview, review and getting started tutorial that should give you a quick idea of a game engines strengths and weaknesses.  Today we are looking at Clickteam Fusion, a codeless game engine that has been around in one form or another for over 20 years.  I have to admit up front, this guide isn’t as in-depth as previous entries as I am rushing a bit to get it out to you.  This is because as ofctf25 publish date (Oct 6/2016) Clickteam Fusion 2.5 is heavily discounted in the Humble Bundle.

 

As always, there is an HD video version of this guide available here.

 

About Quickteam Fusion

 

Quickteam Fusion is a 2D cross platform game engine that takes a codeless approach in a similar vein as Construct2 or Stencyl.  First released as Klik and Play in 1995, it was later rebranded The Games Factory, then Multimedia Fusion then finally Clickteam Fusion.  Clickteam tools run on Windows, and via various add-ons and modules is capable of targeting Windows, iOS, Android, Flash, HTML5 and Mac OS.  Note that several of these modules have an additional price tag from the base package.  In terms of pricing, here is the current ( 10/6/2016 ) from Steam.

image

 

Please note however that those prices are in Canadian dollars.  Also Clickteam is frequently discounted up to 75% or more, so do not ever pay the full price.  The free version is mostly full functioning minus extensibility and the ability to generate a game that runs outside of Clickteam itself, along with a few in game resource limitations.  The Developer Upgrade removes the requirement to display that the game was authored in Clickstream ( via Splash screen, credits, etc ) as well as adding some more controls inside the engine, most of which aren’t game related.

 

There are some fairly successful games that have been authored using Clickteam Fusion, the most famous of which is the Five Nights at Freddy’s series.  Other games include The Escapists, Freedom Planet and a few dozen more games available on Steam, Google Play or the iOS App Store.  So this is a production ready game engine, although only suited for 2D games.

 

Inside Clickstream Fusion

 

The strength of Clickteam is certainly the tooling it comes with.  All work in Clickstream Studio is done in the editor:

image

 

One of the biggest faults against Clickstream has got to be it’s aging UI.  While not particularly attractive, it is for the most part effective.  On the left hand side you’ve got the Workspace Toolbar, which can be thought of as your scene graph.  “Scenes” in Clickstream are somewhat confusingly referred to as Frames.  You game is made up on one or more frames, and when you select a frame you see the level editor shown on the right.  This is used for placing and interacting the various items that compose your scene frame.  On the bottom left you see the Properties panel, this changes based on what object is currently selected.  Also shown here is the editor for Active objects.  Actives are very important to CTF as we will see shortly.  There are also windows for controlling layers, for selecting built in assets, etc.  Windows can be undocked, pinned and move about the interface easily.

 

CT1

 

The primary editing service can be used to easily create levels or maps via simple drag and drop.

CT2

 

You can also insert new items into the frame:

image

 

Then choose from the dozens of built-in object types available:

ctf3

 

Perhaps 90% of the time, what you are going to use is an Active object, which is essentially Clickteam’s version of Entity or Sprite.

image

 

Double click the newly created Active and you get the active editor:

image

 

This tool combines several different tools into one.  There is a full paint package in here with fairly advanced tooling.  There are tools for doing common tasks like setting the Active’s pivot point and direction of facing, and there are tools here for defining and previewing animations.

 

In addition to the built in objects, there are several other extensions that can be added using the Extensions manager:

image

 

Additionally Clickteam offer a store for additional extensions that are both freely available and for sale:

image

 

Confusingly there is no direct integration between the store and Clickteam.  Therefore you have to download and manually install extensions and assets purchased this way.  The Store’s contents are mostly free and also showcase games created using Clickteam, tutorials, game code and more.

 

“Coding” in Clickteam

At this point you should have a pretty good idea how you compose the assets of your game to create levels… how do you actually add some logic to it?  That is done using these four tools:

image

Left to right they are the Story Board editor, Frame Editor, Event Editor and Event List Editor.

 

Story Board Editor

image

This one is pretty simple.  It’s just a top level overview of the Frames that make up your game.  Remember your game is ultimately composed of multiple frames, like so:

image

 

Frame Editor

image

The Frame Editor is simple the level editor we’ve already taken a look at.

 

Event Editor

image

 

This is where the “coding” happens.  Essentially its a top down flow chart/graph of events that happen in your game and what those events happen to.  Here for example is the “code” to select a Flying Saucer Active in the game “Saucer Squad”:

image

On the left hand side are the events (38 and 39, 36 is a group heading and 37 is simply a comment).  That first event triggers when the user left clicks on the Saucer object.  The right handle side of the screen shows the action that occurs when that happens.

image

 

So for the event on Line 38, then the user clicks the left mouse button on Active type Saucer, it plays the sound sample Button_1, among other actions.  It’s essentially these events and actions you use to create your game.  Let’s create a very simple example… lets create an action that simple plays a sound effect when the frame (scene) is created.

First select Insert->Condition

image

 

This will bring up the conditions dialog:

image

 

In this case I clicked the Storyboard Controls (the chessboard/horse icon), then chose Start of Frame.  The creates a new action that will fire when the frame is started.  Now to the right hand side, select the space below the Speaker icon, like so:

image

 

Right click and all of the available options will be displayed:

image

 

Next the appropriate editor will be shown

image

 

Event List Editor

This editor performs the same functionality as the Event Editor, but instead of in a somewhat unwieldy grid view, it represents the events in a much more readable list form:

image

 

One last editor of note is the expression editor, for creating much more advanced logical conditions:

image

 

Individual entities within the frame can also have their own events, set in the properties panel of the selected item:

image

Clicking edit will bring you back to the exact same interface we just discussed.  Also in the properties panel you can define variables:

image

 

These values can then be interacted with in other event controllers.

 

Community and Documentation

Documentation in Clickteam is decent.  Built in there is an integrated CHM based help system, as well as 4 multipart tutorial games to get started.  There are also a wealth of tutorials available to download (mostly free) on the Clickteam store.  There are also a fair number of Clickteam tutorials on YouTube, although many of them are quite awful.  There is an active forum as well as a wiki.  All told, for every problem I faced, I found a solution quickly enough online.

 

Summary

So what ultimately do I think of Clickteam Fusion?  For the most part it is what it’s advertised to be, a code free 2D game creation kit able to target multiple platform.  There is of course a learning curve, but it’s a relatively short one.  As a code focused programmer, I don’t find the coding process extremely productive, but I can see how it would be so for a more visual oriented person and especially for a non-coder.  Clickteam tools are certainly getting a bit long in the tooth, a lot of the legacy cruft is showing it’s age and the UI could certainly use an update.  My biggest hesitation is wondering how well this development system would scale with system complexity.  If you’re game isn’t easily broken into scenes or is sprawling in complexity, I can see Clickteam becoming incredibly cumbersome.  That said, I think this is a successful all in one development tool that can take you a very far way in a very short period of time even with minimal to no development skill.

 

The Video

Programming, Design , ,

Month List

Popular Comments