Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
20. July 2015

 

In this “A Closer Look at”, we will be taking an in-depth look at the Stencyl game engine.  The Closer Look At series is a cross between a preview, review and getting started guide and should help you determine if a game engine is right for you.  Stencyl is a cross platform 2D game engine with tools that run on Windows, Mac and Linux and capable of targeting all of those, plus Flash, Android and iOS.  Stencyl is free to use for the Flash target with additional platforms coming with a fee.  Stencyl provides a high level Lego block type programming experience but coders need not fear, you can drop into code easily if you want.  Amazingly enough, you may find you do not actually want to!

 

There is an HD video version of this guide available here.

 image

 

The Editor

 

Stencyl is a relatively self contained providing almost all of the tooling you need in a single editor.  When you first launch Stencyl this is your initial view of the editor:

image

 

It comes with a sample game included and one nice feature of Stencyl is the ability to seamlessly download additional assets from their website including additional examples and editor extensions.  Once you’ve actually created a project you’ve got even better integration with their online store ( misnomer, as everything currently is free ).

 

The Dashboard is the home page of your game.  The game itself is broken up into Scenes and scenes are composed of Actors, Backgrounds, Fonts, Sounds and Tilesets.  Created resources are available across all scenes. 

 

image

 

Scene/Level Editor

Loading  a Scene brings up the scene editor

image

 

The editor has several modes available across the top (Scene, Behaviors, Events, Physics, Atlases and Properties).  The Scene editor (shown above) enables you to paint scenes using tiles for a tileset, or to place your various actors within the world.  The editor supports multiple layers of tiles with various blending modes available.  The tile placement experience is very smooth with functionality you would expect like snapping, flood filling (painting an entire region with a single tile) and grids. There is also support for defining regions, placing physics joints, adding rows and columns of tiles all at once and more.  The ability to paint with multiple textures is also present:

s1

 

The Tilesets themselves are created as a Tileset resource at the dashboard:

image

image

image

 

You can then edit each tile in the tileset:

image

Three things can be set for each tile, a custom piece of metadata that can be access by code (perhaps a text description of the tile), the collision shape for the bounds of the triangle, using either a default shape or defining your own, and finally the frames of animation for animated tiles.  Should you require more precise collisions than the default shapes, you can define your own Collision Bounds:

image

 

The Create A Polygon tool is a bit clunky but gets the job done:

image

 

Back to the Scene editor, you will notice the next two tabs after Scene are Behaviors and Events:

image

These are basically the way you “program” your Stencyl game and we will revisit both shortly.  Just remember them for now.  Physics enables you to configure some global level physics properties for you scene:

image

 

Atlases are akin to spritesheets in other game engines.  It enables you to bundle like minded resources into a single file to improve performance.  This is more of an implementation detail, so we wont cover it in depth.

image

 

Finally Properties enables you to set some critical details of the scene that you otherwise set during creation.

image

 

Basically Scene is your game level and Stencyl provides a complete and comprehensive level editor with most of the required tools for placement, physics, etc.  You will notice at this point that Stencyl is highly configured for creation of 2D tile based games and if your game doesn’t fit this description, Stencyl becomes less and less useful.

 

Actors

 

Next let’s take a look at the Actors interface.  An Actor is basically any game entity that isn’t a tile.  So your main character, your main menu, a high score widget and enemy sprites may all be actors.  As you will see, the interface for actors is remarkably similar to Scenes:

image

 

An actor can contain multiple animations, each of which is composed of frames of animation.  You can define as many animations as you desire and each animation you can control the order of frames and the duration that each one lasts.  Animation frames use the same interface as loading a tileset.

 

You may notice across the top there are several editor options for Actors available as well.

image

 

Appearance is the editor you see in the above screenshot were you specify the animations of your Actor.  Behaviors and Events are the programming interface and once again, we will cover those shortly.  Collision enables you to define the collision properties of your Actor:

image

One unfortunately missing feature is the ability to define a collision shape per frame of your animation.  This means if the collision volume changes massively as your Actor is animated you will either need to split it into separate animation groups or settle for less than accurate collisions.  Hopefully this functionality is added in the future.

 

The Physics tab enables you to set the Physics properties of your actor:

image

 

Note the various sub settings you can set:

image

 

This is perhaps the most accessible and least confusing physics integration I have ever seen in a 2D game engine.  Physics properties are often cryptic and simply figuring out what a particular setting does is an exercise in frustration, especially for new game developers.  So bravo for making a complicated subject dead simple.

 

Finally there is the properties section:

image

 

Which contains the button for launching the Collision Group interface:

image

 

Collision groups are handy for determining how various groups interface with each other.  For example, a Bullet may collide with Actors, but not other bullets.  One nice feature with Stencyl is the link to help on each topic:

image

 

If the purpose of an editor isn’t obvious to you, you can click the How do ____ work button and be brought to a well written help web page.  This should keep newer developers from getting overly lost and encourages exploration.

 

Programming in Stencyl

 

As I mentioned earlier in both the Scene and Actor sections, programming is done via Behaviors and Events in Stencyl.  Behaviors can be added to both scenes and actors and each is a distinct thing.  The same is true for events.  If you are coming from another game engine or programming language, Behaviors are analogous to methods or functions and can be re-used ( a scene behavior can be used on several scenes, while an actor behavior can be used across multiple actors ).  There is also a variable type named an Attribute, which can be though of the same way you would consider a property.  If that made no sense think of it this way… a Behavior makes a scene or actor do stuff, while an Event tells a scene or actor that stuff happened while an attribute stores information about stuff.

 

Programming itself can be accomplished either by using predefined behaviors or by defining your own using a building block type programming interface.  Let’s take a look. 

 

We can create a simple actor like this one:

image

 

We can easily add an instance to our Scene using the Add to Scene button, or by going to the Actors panel in the Scene editor:

image

 

Now let’s add some logic to our Actor.  In the Dashboard, select your Actor and choose edit.  Now select Behaviors and you will be greeted with:

 

image

 

Clicking it allows you to select a pre-created Behavior or one you have already defined for your game:

image

 

There are several pre-defined behaviors and more you can download from StencylForge.  Let’s add a simple behavior to our Actor.  We simply want to move left and right automatically.  Select Motion->Back and Forth Horizontally

image

 

You can then set configurable attributes of that behavior:

image

 

Now run your game by hitting Test Game and your actor will move left and right 100 pixels:

s2

 

So you can add functionality to an Actor as simply as adding a behavior to it and an instance of that actor in your Scene.  Obviously in this case our animation isn’t ideal as it only makes sense when traveling to the left.

 

Let’s now flip the character if he’s going right.  This means our first programming experience.  We can do this either in the scene or in the character itself, in this case we do it in the Scene.  Edit the Scene, select Events then add a new Event.

image

 

First click Add Event, then Basics->When Updating.  These are the three lifecycle stages.  This will create a brick named always that we can then drop other bricks in to program the behavior of our game.  Create the following structure:

image

 

This brick will be called every frame.  We check to see if the user is going left (negative) or right(positive), in the case of positive, we scale –100% in width, which is the same as flipping.  Now running the code we see:

s3

 

You can also bundle together functionality it re-usable components using virtually the same manner with Behaviors

image

 

Now one of the coolest features of Stencyl, all this visual programming you’ve been doing… it’s ultimately just a code generator using the Haxe programming language.  Click Preview Code and you can see the code generated behind the scenes:

image

You can even edit the code using an external editor like Flash Develop or IntelliJ, the process of which I describe here.  This turns Stencyl into a rapid development Haxe/OpenFL code generator and you can define the remaining game logic using a traditional programming interface if you prefer.  You can also extend the Stencyl editor itself (using Java), as well as create new blocks completely, using Haxe.    It’s a good thing this functionality exists too, as it helps make up for one of Stencyl’s biggest flaws… there is no debugger.  You can do Print style output to the log which can be viewed in the Log Viewer, but there is very little debugging functionality (breakpoints, watches, etc ) built in.  You can however debug your code in an external IDE if you are comfortable working in the Haxe language.

 

Documentation and Community

 

One of the impressive features of Stencyl is it’s documentation.  Almost none of it is local however, so if you do not have an internet connection you are in trouble.  The Stencylpedia is your starting point for help.

image

 

There is also a class reference for Haxe programmers, as well as guides for programming extensions and more.  The quality of the documentation is quite solid, especially the more entry level materials. 

 

In addition to the Stencylpedia there is StencylForge, a built-in (free) store for downloading behaviors, actors, scenes, sounds and even complete games.

image 

 

There are a few existing books on Stencyl including Stencyl Essentials and Learning Stencyl 3.1.

 

There is also an active community forum available here.

 

 

The Flaws

image

Of course no tool is perfect and there are a few negatives to Stencyl.  The first and biggest limitation is it is limited mostly to 2D games with a tileset approach to level design.  If you aren’t creating this style of game Stencyl is probably not the right tool for you.  Perhaps the most glaring flaw with Stencyl is a memory leak that seems to be present.  I often received a message “You have reached 90% of memory usage, please restart”, sometimes quite almost right after loading Stencyl, other times after several hours had passed (it can be fixed though).  There have been a few other times where I wasn’t getting the behavior I expected and had to restart to fix things.  Saving changes is also quite slow and seems to be an all or nothing prospect.  Finally the debugging support is extremely weak.

 

The Verdict

I came into Stencyl expecting one thing and discovered something much different.  I had fairly low expectations, a simple click and build type experience that while accessible and easy to use, it would ultimately prove to be quite limited.  I was wrong.  Stencyl is certainly accessible, and provides a simple drag and drop visual style of programming experience.  What I was shocked at was the flexibility, wealth of tools included and advanced coding options.  Stencyl is not for everyone; if your game isn’t 2D tile/scene based for example.  However if you are just starting out or even if you are an experienced developer creating a relatively simple game, Stencyl might be the perfect tool for you.

 

In fact, Stencyl maybe just maybe became my primary recommendation for new developers looking to get started in game development.  It’s an approachable well documented game engine that has a long runway to explore as your skills improve.

 

The Video

Programming


4. January 2015

 

Gamefromscratch has a long running series taking an indepth look at various game engines available.  Today we are going to look at the Godot game engine, an open source C++ based game engine with a complete Unity-esque world editor.  Godot runs on Windows, Linux and Mac platforms and can target all of those, plus iOS, Android, PS3 and PS Vita, NaCL with HTML5 and Windows Phone both being in development.

 

In Godot’s own words:

Godot is an advanced, feature packed, multi-platform 2D and 3D game engine. It provides a huge set of common tools, so you can just focus on making your game without reinventing the wheel.

 

That description is incredibly apt as well, you will certainly be surprised by just how many tools are included.  Now let’s jump right in!

 

There is a video on this post available here (and embedded at bottom of the page) which goes in to a bit more detail.

 

The Editor

 

You get started with Godot by downloading the executable from the downloads page.  You probably expect this to be an installer, but you would be wrong.  Instead when you run it you get the Project Manager:

image

 

Here you can either create a new project or load an existing one.  Finally once you’ve selected or created, you are brought to the editor:

image

 

This is where the magic happens.  The above screenshot is of the Platformer demo being edited.  The left hand window is where your scene is composed.  As you can see from the four tabs above, you can work in 2D, 3D, Script editing or browse the built in help in this window.  The top left icons are actually menus and a lot of the functionality and tools are tucked away behind Scene and Import.

 

The top right hand dialog is your scene graph:

image

 

Here you can see ( and create/instance ) the items that make up your world.  Simply click the New Icon to add a new items to the world, or the + Icon to add a new instance instead.  The other icons are for wiring scripts and signals (events) up to the objects in your world.

 

Below the scene graph, you’ve got the Inspector window, which enables you to set properties of objects in your scene.  As you can see from the screen shot, Godot takes a very modular/component approach which is quite popular these days:

image

 

This enables you to visual inspect and edit properties of your game objects.  It also represents one of the first flaws of Godot… some of the controls are just awkward to use.  For example if you don’t hit enter after editing a text property, the values are lost.  Additionally modifying numeric fields can be a pain in the ass at times.  It’s all stuff that can be fixed with time ( Godot was only open sourced about a year ago after all ) but for now its clunky and somewhat annoying.

 

Coding

 

So that’s the visual editor… what about code? 

 

Well the majority of your programming is going to be done in GDScript, using the included editor.  GDScript is a Python-esque proprietary scripting language.  I don’t generally like this approach as it makes all the existing tools and editors worthless, lose the years of bug fixing, performance improvements, etc…  while forcing a learning curve on everyone that wants to use the engine.  That said, the idea behind a scripting language is they should be easy to use and learn.

 

The authors explained their decision in the FAQ:

 

The short answer is, we'd rather a programmer does the small effort to learn GDScript so he or she later has a seamless experience, than attracting him or her with a familiar programming language that results in a worse experience. We are OK if you would rather not give Godot a chance because of this, but we strongly encourage you to try it and see the benefits yourself.

The official languges for Godot are GDScript and C++.

GDScript is designed to integrate from the ground to the way Godot works, more than any other language, and is very simple and easy to learn. Takes at much a day or two to get comfortable and it's very easy to see the benefits once you do. Please do the effort to learn GDScript, you will not regret it.

Godot C++ API is also efficient and easy to use (the entire Godot editor is made with this API), and an excellent tool to optimize parts of a project, but trying to use it instead of GDScript for an entire game is, in most cases, a waste of time.

Yes, for more than a decade we tried in the past integrating several VMs (and even shipped games using them), such as Python, Squirrel and Lua (in fact we authored tolua++ in the past, one of the most popular C++ binders). None of them worked as well as GDScript does now.

More information about getting comfortable with GDScript or dynamically typed languages can be found here.

 

That covers the why anyways, now let’s look at the language itself.  As I said earlier, it’s a Python like (whitespace based) scripting language.  Let’s look at an example from the included demos:

extends RigidBody2D


const STATE_WALKING = 0
const STATE_DYING = 1

var state = STATE_WALKING
var direction = -1
var anim=""
var rc_left=null
var rc_right=null
var WALK_SPEED = 50

var bullet_class = preload("res://bullet.gd")

func _die():
   queue_free()

func _pre_explode():
   #stay there
   clear_shapes()
   set_mode(MODE_STATIC)
   get_node("sound").play("explode")
   

func _integrate_forces(s):

   var lv = s.get_linear_velocity()
   var new_anim=anim

   if (state==STATE_DYING):
      new_anim="explode"
   elif (state==STATE_WALKING):
      
      new_anim="walk"
      
      var wall_side=0.0
      
      for i in range(s.get_contact_count()):
         var cc = s.get_contact_collider_object(i)
         var dp = s.get_contact_local_normal(i)
         
         if (cc):
         
            
            if (cc extends bullet_class and not cc.disabled):
               set_mode(MODE_RIGID)
               state=STATE_DYING
               s.set_angular_velocity(sign(dp.x)*33.0)
               set_friction(true)
               cc.disable()
               get_node("sound").play("hit")
               
               break
            

         if (dp.x>0.9):
            wall_side=1.0
         elif (dp.x<-0.9):
            wall_side=-1.0
            
      if (wall_side!=0 and wall_side!=direction):
      
         direction=-direction
         get_node("sprite").set_scale( Vector2(-direction,1) )       
      if (direction<0 and not rc_left.is_colliding() and rc_right.is_colliding()):
         direction=-direction
         get_node("sprite").set_scale( Vector2(-direction,1) )
      elif (direction>0 and not rc_right.is_colliding() and rc_left.is_colliding()):
         direction=-direction
         get_node("sprite").set_scale( Vector2(-direction,1) )
         
         
      lv.x = direction * WALK_SPEED
         
   if( anim!=new_anim ):
      anim=new_anim
      get_node("anim").play(anim)
            
   s.set_linear_velocity(lv)


func _ready():
   rc_left=get_node("raycast_left")
   rc_right=get_node("raycast_right")

 

As someone raised on curly braces and semi colons it can take a bit of time to break muscle memory, but for the most part the language is pretty intuitive and easy to use.  You can see a quick language primer here.

Remember earlier I said the code editor was built into the engine, let’s take a look at that now:

image

 

As you can see, the editor does provide most of the common features you would expect from an IDE, a personal favorite being auto-completion.  Features like code intention, find and replace and auto indention are all available, things often missing from built in editors.   Like dealing with the Inspector window though their can be some annoyances, like the autocomplete window appearing as you are trying to cursor around your code, requiring you to hit Escape to dismiss it.  For the most part though the editing experience is solid and hopefully some of the warts disappear with time.

 

Now perhaps the biggest deal of all:

image

Debugging!  This is where so many home made scripting languages really suck, the lack of debugging.  Not Godot:

image

You can set breakpoints, step into/over your running code and most importantly inspect variable values and stack frames.  Once again, it’s the debugging experience that often makes working in scripting languages a pain in the ass, so this is nice to see!

 

Hey, What about C++???

 

Of course, one of the big appeals of Godot is going to be the C++ support, so where exactly does that come in?  Well first and most obviously, Godot is written in C++ and fully open source under the MIT license ( a very very very liberal license ), so you can of course do whatever you want.  I pulled the source from Github and built without issue in Visual Studio 2013 in just a few minutes.  The build process however is based around Scons, which means you have to Python 2.7x and Scons installed and configured, but neither is a big deal.

 

What about extending Godot, that is what the majority of people will want to do.  Well fortunately it’s quite easy to create C++ extensions, although again you need Scons and have to do a bit of configuration, but once you’ve done it once assuming you’ve got a properly configured development environment the process should be quick and mostly painless.  From the wiki page here is a sample C++ module:

 

Sumator.h

/* sumator.h */
#ifndef SUMATOR_H
#define SUMATOR_H

#include "reference.h"

class Sumator : public Reference {
    OBJ_TYPE(Sumator,Reference);

    int count;

protected:
    static void _bind_methods();
public:

    void add(int value);
    void reset();
    int get_total() const;

    Sumator();
};

#endif

Sumator.cpp

/* sumator.cpp */

#include "sumator.h"

void Sumator::add(int value) {

    count+=value;
}

void Sumator::reset() {

    count=0;
}

int Sumator::get_total() const {

    return count;
}

void Sumator::_bind_methods() const {

    ObjectTypeDB::bind_method("add",&Sumator::add);
    ObjectTypeDB::bind_method("reset",&Sumator::reset);
    ObjectTypeDB::bind_method("get_total",&Sumator::get_total);
}

Sumator::Sumator() {
    count=0;
}

 

Then in your script you can use it like:

var s = Sumator.new()
s.add(10)
s.add(20)
s.add(30)
print( s.get_total() )
s.reset()

 

If you inherit from Node2D or a derived class, it will be available in the editor.  You can expose properties to the inspector and otherwise treat your module like any other Node available.  Remember though, for productivity sake, you should really only be dropping to C++ as a last resource.  It is however quite simple to do.

 

Nodes, Nodes and more Nodes

At the heart of Godot, the world is essentially a tree of Nodes, so I suppose it’s worthwhile looking at some of the nodes available and how they work.  From the scene graph window, you add a new node to the world using this icon:

image

 

Next it’s a matter of picking which type, which could of course include modules you created yourself in C++.

image

 

As you can see from the small portion I’ve shown above, there are a LOT of built in nodes already available.  From UI controls, to physics controllers, path finding and AI tools, bounding containers, video players and more.  Essentially you create your game by composing scenes, which then are composed of nodes.  Once you’ve created a node you can then script it.  Simply select your node in the scene graph and then click the script icon:

image

 

Then a New Script dialog will be displayed:

image

 

And your script will be created:

image

 

As you can see, the script itself inherets from the node type you selected.  You can now script any and all logic attached to this particular Node.  Essentaily your game logic is implemented here.

 

In addition to wiring up scripts to game nodes, you can also wire up Signals.

image

 

Signals can be thought of as incoming events:

image

 

HELP!

 

So, what about Help then?  Well this is both a strength and weakness of Godot.  As you saw earlier, there is actually an integrated help tab.  You can look it up any time, or use press SHIFT + F1 while coding to get context sensitive help:

image

It’s invaluable, but unfortunately the resulting help file is often just a listing of methods/parameters and nothing more.  I often instead just keep the class reference from the Wiki open in a browser window.  For an open source project, the reference is pretty good, but it could still certainly use a lot more love.

 

Next are the tutorials, there’s a fairly good selection available on the Wiki but I think a good in-depth beginner series is really needed.  To someone that just downloaded Godot and is thinking “now what”… that presents a challenge. That said, I will probably be creating one, so this shouldn’t be an issue in time!

 

Finally, and perhaps most valuably, there are several demos included:

image

 

Publishing

 

So, once you’ve finished your game, how do you publish it to the various available platforms?  Well for starters you click the Export button:

image

 

You also need an export template, which is available from the Godot downloads site.  Additionally you need to  configure the tool chain for each platform, such as the Android SDK for Android, XCode for iOS ( and a Mac!  You can’t end run around the needing a Mac for iOS development requirement unfortunately), etc.  But the process is spelled out for you and they make it pretty easy.

 

Summary

 

I haven’t even really touched upon the plethora of tools tucked away in the editor…  need to import a font, there’s a tool for that.  There’s an improved Blender COLLADA plugin which just worked when I tried it.  There’s a tool for mapping controls to commands, there are tools for compressing and modifying textures on import, for modifying incoming 3D animations, etc…  Basically if you need to do it, there is probably a tool for it shoved in there somewhere.

 

On the other hand, the process itself can be pretty daunting.  Figuring out how to get input, a script’s life cycle etc isn’t immediately obvious.  It really is an engine you have to sit down with and just play around.  Sometimes you will hit a wall and it can be pretty damned frustrating.  However, it’s also a hell of a lot of fun and once it starts to click it is a great engine to work in.

 

I definitely recommend you check out Godot, especially if you are looking for an open source Unity like experience.  That said, calling this a Unity clone would certainly be doing it a disservice, Godot is a great little game engine on it’s own accord that deserves much more exposure.

 

The Video Version

 

Click here for the full resolution 1080p version.

Programming


29. December 2014

 

Shortly before the holidays began I received a review copy of Core HTML5 2D Game Programming and amid all the holiday insanity, I’ve been slowly making my way through this title.  As with all reviews, I don’t give star ratings, I think the value of a book is determined mostly by the perspective and requirements of the reader.  OfCoreHTML5 course, some books are just simply bad.  Bad grammar, bad topic choice, bad humour.  Fortunately that is not the case here.  From a technical perspective this is a good book (with one glaring flaw).  Now the question is, is it a good book for you?

 

First let’s talk about the target audience.  This book is not aimed at complete beginners, prior experience with JavaScript and HTML5 is assumed.  Some JavaScript related topics are covered ( dealing with this, profiling/debugging in Chrome, simple inheritance, etc. ) but if you don’t already understand some JavaScript and haven’t ever touched on HTML5 or CSS work, you will be lost.  No prior game programming experience is assumed, although you may struggle a bit with some of the terminology if completely new.  There is however a fairly solid glossary that while get you through.  For more experienced game developers, this probably isn’t the title for you.

 

Ultimately this is a learn by doing book.  Through the course of the book you are putting together a basic platforming game called Snail Bait, built using the assets of the open source Android title Replica Island.  The game is available to be played online at http://corehtml5games.com… or at least, it’s supposed to be.  When I go to that site I get:

 

image

 

Hmmm, that’s unfortunate.  I am not sure if this is an ongoing problem, or just temporary.  Judging by an earlier review on Amazon about the server being unavailable, this is a recurring problem.  It is however a bit of a big problem, as many of the code listings in this book are actually partial, so having access to the complete project is very important.  The book repeatedly references this site, so with it down, so is a great deal of the appeal of this book.  Unfortunately the publisher doesn’t appear to make the code available anywhere else, at least not the book’s version.

 

Now back to the actual contents of the book.  This book covers pretty much all aspects of what you need to make a complete 2D HTML5 game.  One critical thing to understand with this title is everything is created from scratch.  The book makes use of no existing libraries, so you learn how to do things from scratch.  There is merit to learning how to do everything yourself at least initially.  That said, you will probably make a better game using libraries that have already dealt with all the various cross browser issues and optimizations for you.

 

The book does cover a surprising number of topics, starting with handling the game loop and ending with basic network programming.  For each topic there are a number of callout notes on game development or HTML5 idiosyncrasies.  For the most part, they are topical and rarely feel superfluous.  In between it covers animation, graphics, input, hit detection, dealing with mobile (controls and resolutions), particles, audio, easing and more.  The coverage of each topic is fairly comprehensive and easily understood.  One thing you might want to note, this book is entirely about using canvas for rendering, with absolutely no coverage of WebGL.  Given the increasing support for WebGL ( IE and Safari are both finally on board ), this could be a pretty big negative.

 

As I mentioned earlier, the majority of the book is about creating a single game step by step using what you’ve learned up till this point.  The code snippets are clear but without access to the finished whole, trying to figure out how it all fits together is difficult.  There is however one chapter dedicated to putting all the pieces you’ve learned together to make a simpler but complete  game, Bodega’s Revenge.  Unfortunately, these are also partial code listings, so without access to the source code, readers may struggle filling in the pieces.

 

What’s my verdict on this book then?  The book itself is quite good.  If you have some basic JavaScript knowledge and are looking at learning how to do HTML5 canvas based game development from scratch, it’s a very good resource.  There is an impressive amount of information jammed into this book with no obvious missing pieces.  If you are looking at purchasing this title, be certain to check if the site is available before you do! 

 

I would highly suggest the author or publisher make the code available on a much more reliable source, such as Github.

Programming


13. November 2014

 

Welcome to the first ever Steam Powered Game Dev review, a look at game development tools available on Steam.  This post looks at FUSE character creator by Mixamo.  In addition to this text review, you can watch the entire thing in video form by clicking right here, or using the embedded player at the bottom.

 

title

Product

Fuse Character Creator

Product Type

3D Graphics Application

Steam Store Page

Website Link

Current MSRP

$99 USD

Steam Discount at Time

75% off

Product Website

Website Link

Available On

Windows, Mac




First let’s start with what Fuse is.   It’s a character creation package, for generating fully textured 3D character models.  If you’ve ever used Smith Micro’s Poser or Daz Studio, you should have a basic idea what to expect.  However, Fuse varies from those packages in some very significant ways.

 

  • It is entirely about character creation, there is absolutely no animation built in.  Don’t worry, this isn’t a big deal as we shall see shortly.
  • It is by far the easiest to use of the three.  Quite literally anyone could use Fuse successfully.
  • It makes for extremely customizable characters, both in regards to model and textures.
  • It has some of the most confusing pricing you will ever see!  ( Actually, Daz is worse! )
  •  

    Character Creation

     

    Let’s jump right in and you can see what I mean.  On it’s surface Fuse is remarkably simple.  You start of by selecting various body parts, like so:

    image

     

    Basically you go through 4 stages.  The first is to build your character model out of body parts.  The above screen shot shows an assembly with a Zombie head selected and torsos being chosen.  Currently for example, there are 34 different torso shapes to be chosen from, ranging from teen cartoon to adult skinny zombie. 

     

    Here is a fully assemble teen female character for example:

    image

     

    You can mix and match body parts however you’d like.  You may be asking at this point… what about creating your own body parts, can you do that?  Yes, you can, I will cover that shortly!

     

    Character Customization

     

    Now that you’ve assembled a basic character by setting the head, arms, torso and legs to use, it’s time to customize.  Simply click the Customize tab and continue, like so:

    image

     

    If you’ve ever played a video game that gave you an incredible amount of control over your character’s creation, you should have some idea of how the process works.  This however goes into a staggering level of detail, with control over pretty much every single facet of your character.  You’ve also always got the Randomize button, which you can simply keep spamming until it spits out something your like.

     

    In addition to using sliders, you can also use the mouse to interactively sculpt the features you want to change, like here with the nose selected:

    image

     

    Clothing your Character

     

    Next it’s time to cloth your character.  One again you simply click the clothing tab.  By the way, you can go back to any of the previous stages at any time if you require.  Clothing works pretty much the same way as character creation:

    image

     

    For each various body part you can choose from a number of different outfits or styles.  If you are wondering, yes, you can give women beards or dress men in thongs if that’s what floats your boat.  There is a decent selection of models available to get started but no doubt you want to know if you can import your own?  Once again, the answer is yes, and once again, we will get to that shortly.

     

    Texturing Your Character

     

    Now that we’ve got a fully dressed 3d modeled character, it’s time to customize the texturing.  This is an area where Fuse absolutely shines!  They have partnered with Allegorithmics to package in their Substance technology for texturing and it’s powerful stuff.  For example, when setting the characters skin texture, here is how it works:

    image

     

    So you can set a basic base skin color, then rapidly modify it using intuitive sliders like “age”, “eye shadow color”, “lipstick” etc.  Plus you have control over the end texture resolution, a critical requirement for games.  You can generate a texture anywhere from 64x64 to 2048x2048.

     

    It’s the sheer volume of controls available for substances that is most impressive, this is just for the skin component:

     

    Video_2014-11-13_145755

     

    You can configure each and every part of your character, using premades like “jean” and sliders like “dirt level” and “age”.  It makes texturing incredibly simple, although there is no option for placing decals or multi texturing right now.  You do however get a fair bit of control over shader performance:

    image

     

    So, essentially that is the process of creating and texturing a full 3D character.

     

    Now it comes to animation, and this is where things get a bit confusing…  but first…

     

    Getting Your Own Content In

     

    As I mentioned earlier, yes, you can import your own body parts and clothing into Fuse, as well as Substances.  However there is a bit of a gotcha, there always is.

    The process is actually quite simple.  You model and UV map in your favorite 3D application, then export in OBJ format, an ancient and simple 3D file format that pretty much every 3D application supports.  However, you do have to follow strict guidelines available here.

     

    Animating Your Character

     

    Although Fuse doesn’t do animation, it’s exactly what the company that make it, Mixamo, does.  Mixamo offers a cloud based animation service and Fuse can hook directly into it.  Basically to get started, you simply click the Animate button when your character is prepared:

    image

     

    Your character will then by automatically uploaded to Mixamo’s servers.  Advanced warning YOU NEED TO HAVE THE UNITY 3D PLAYER ALREADY INSTALLED!

    Otherwise your file will upload then you will get an error.  Pretty stupid that Fuse doesn’t check for it automatically, but c’est la vie.

     

    I’m going to go fairly light on my coverage of Mixamo, as it’s basically a completely different site and service.  You can see a bit more of it in action in the video if you wish.

     

    The basic process goes like this… when you hit Animate in Fuse, your character is uploaded to Mixamo and automatically rigged.  You can then apply different premade animations to your character ( or none at all if you wish ), then download your character.

     

    Here is Mixamo in action creating an animation sequence:

    image

     

    There are hundreds of animations available, some completely free, some for a fee.  We will discuss money in a moment.  Here again you have decent control over your character and you can sequence multiple animations into a single file.

     

    Next you download your file from Mixamo’s server.  Any file your created will be available, so you can re-download to your hearts content.  You simply go to your My Characters” page and select the character to download:

    image

     

    On the download page, you can select in what format you want the file to be downloaded:

    image

     

    You can come back at any time and select a different format, or use different settings.  Now let’s look at the finished project imported into Blender:

    image

     

    The character texture, with bones showing in x-ray mode.  There we have it… a fully rigged, textured character with a walk cycle.  All told it took me about 5 minutes to create this character.

     

    Oh, and you might be wondering, what if I don’t need animation, can I still use Fuse?  Yes, yes you can.  There is an option to export as OBJ format, which again, is available in pretty much every 3D application available.  Of course, the results wont be rigged.  You have a bit of control over the results, but not a ton.  Sadly I couldn’t locate a place to set a polygon budget for example.

    image

     

    I believe it is the simplest way to get a game usable rigged character into a 3D modeling application.  There are other options, Autodesk has their own Character Generator, there’s Make Human and of course Poser and Daz that I mentioned earlier.  Fuse however just hits that sweet spot between ease of use and power that I appreciate so much.  With the exception of the missing Unity Web Player, I encountered no technical issues at all.

     

    There is however the cost…

     

    The Cost

     

    Cost is an interesting subject and can be a bit confusing when dealing with Fuse.  First off, there are two versions of Fuse available on Steam, Fuse Basic and Fuse.

     

    Fuse Basic is a stripped down version, far less body parts, far less character pieces to work with, less textures, etc.  You can however download it completely free, and I encourage you to do so, if only to see if Fuse performs well on your PC.

     

    However, Fuse has one HUGE advantage over Fuse Basic, and something that makes it an incredible bargain.  If you buy Fuse on Steam, you get two free auto rigs a week.  This means that you can have Fuse rig two characters you send to Mixamos server each week.  Now we are about to see the value of Fuse when we look at Mixamo’s pricing.

     

    The are the “bundle plans” on an annual basis:

    image

     

    And here are the “À la carte” prices:

    image

     

    Suddenly those 2 free auto-rigs a week start becoming a hell of a good deal.  The $100 purchase of Fuse on Steam pays for itself after 2 characters are rigged!

     

    What tier you need ultimately comes back to your individual requirements.  Myself, I move at a snails pace, so I highly doubt I will be working on more than two different character riggings per week, plus I am capable of making my own animations if required.  If you are absolutely spitting out characters or use tons of animations however, one of the bundles may be the way to go.  The economics of Fuse Basic though are always bad, especially if you can find Fuse on sale like I did. 

     

    The Video Version

     

     

    Summary

     

    If you need 3D animated characters, Fuse is certainly worth looking at.  With the ability to import any body parts or props into Fuse, you can make pretty much any character you require, assuming you have the ability.  If you have no 3D modeling skill, the breadth of props available in Fuse probably aren’t enough to do everything you need.  If on the other hand you are a great modeler, but terrible animator, Fuse is absolutely perfect for you.

     

    There are a few things I wish that were different.  I wish you had more control over mesh generation and polygon counts specifically.  All told though, I have never encountered a package that enabled me to create animated and actually game usable models anywhere nearly as easy as Fuse does.  I certainly do not regret my purchase.

    Art


    12. August 2013

     

    So today on Safari Books Online came a book that was a complete flash from my past.  Computer Graphics: Principles and Practices 3rd edition has been released.  What’s so special about this book?

    cgpap3

    Three things… 

     

    First, it was the textbook I used to learn computer graphics a very long time ago.

    Second, it was one of the only ( incredibly expensive ) books I had to purchase for school that I actually found valuable.  ( Code Complete was the other book, if you were curious )

    Third, it’s one of the only dead tree books I have kept.  I am almost entirely digital these days, so you have to be a good book for me to keep you around, especially given the size of a few of the condos I’ve moved into over time, I’ve gone through a lot of book purges!  When you consider how incredibly out-dated it had become, the world of graphics has changed a great deal since the second edition of the book was released in 1990!  On top of that, all of the code examples where in Pascal, using a library I’d never heard of at the time, or used since.

     

    Fortunately with the release of the 3rd edition, I now have one less piece of dead tree fighting for space in my house!  There are a few things to know about this book, it’s has no code for OpenGL or Direct3D, it’s not really about that.  The book actually uses WPF for it’s examples, but don’t worry, the concepts are easily applied elsewhere. The entire point of this book is to teach graphics programming concepts, not really about the implementation.  If you don’t already know one of those APIs, you are going to want to pick up an additional book on your graphics library of choice ( if needed. )  That said, this will make you **understand** what you are doing with either of those graphics libraries.  You will find when reading this book, it doesn’t really matter what programming languages or library you use, you will be able to digest and adapt to your tools of choice without a lot of effort.  This book has been almost completely re-written at this point, and does cover the modern graphics pipeline.

     

    What does it cover?  Well, just about everything actually.  That’s why I kept it around all these years.  For example, here is the Table of Contents:

    1. Introduction
    2. Introduction to 2D Graphics Using WPF
    3. An Ancient Renderer Made Modern
    4. A 2D Graphics Test Bed
    5. An Introduction to Human Visual Perception
    6. Introduction to Fixed-Function 3D Graphics and Hierarchical Modeling
    7. Essential Mathematics and the Geometry of 2-Space and 3-Space
    8. A Simple Way to Describe Shape in 2D and 3D
    9. Functions on Meshes
    10. Transformations in Two Dimensions
    11. Transformations in Three Dimensions
    12. A 2D and 3D Transformation Library for Graphics
    13. Camera Specifications and Transformations
    14. Standard Approximations and Representations
    15. Ray Casting and Rasterizations
    16. Survey of Real-Time 3D Graphics Platforms
    17. Image Representation and Manipulation
    18. Images and Signal Processing
    19. Enlarging and Shrinking Images
    20. Textures and Texture Mapping
    21. Interaction Techniques
    22. Splines and Subdivision Curves
    23. Splines and Subdivision Surfaces
    24. Implicit Representations of Shape
    25. Meshes
    26. Light
    27. Materials and Scattering
    28. Color
    29. Light Transport
    30. Probability and Monte Carlo Integration
    31. Computing Solutions to the Rendering Equation: Theoretical Approaches
    32. Rendering in Practice
    33. Shaders
    34. Expressive Rendering
    35. Motion
    36. Visibility Determination
    37. Spatial Data Structures
    38. Modern Graphics Hardware

     

    … so as you may be able to tell, this isn’t a short book.  In fact it’s 1264 pages in length, which would be why this isn’t a proper review, I am not done the book.  In fact, it’s one of those book I will probably never read entirely front to back.  Instead I jump in to the areas I need, unless of course I struggle with the concepts being taught, then I tend to read the entire chapter until I’ve gotten the subject down.  Of course, I read chapters from time to time just for something to do.

     

    That’s another great part of this book.  I am no math wiz, I have forgotten far too much, so with many pure math texts I struggle.  This is why this book is very good.  It’s not simple by any means, but it doesn’t just throw an equation at you and leave you scratching your head.  Things are introduced in escalating difficulty, but if you have a late high school or first year university math education, you should be OK.

     

    The math is fully explained over the course of the book.  If you have trouble parsing out equations, they are explained fairly well in the book including how to decipher them.   The book doesn’t magically make math easy, but it does do an effective job of explaining it, so that even a non-genius can make sense of things.  Here for example is the excerpt on Euler Angles, and is typical of how things are explained:

     

    Example taken from book:


     

    11.2.2. Euler Angles

    Euler angles are a mechanism for creating a rotation through a sequence of three simpler rotations (called roll, pitch, and yaw). This decomposition into three simpler rotations can be done in several ways (yaw first, roll first, etc.); unfortunately, just about every possible way is used in some discipline. You’ll need to get used to the idea that there’s no single correct definition of Euler angles.

    The most commonly used definition in graphics describes a rotation by Euler angles (φ, θ, ψ) as a product of three rotations. The matrix M for the rotation is therefore a product of three others:

    1

    Thus, objects are first rotated by angle φ in the xy-plane, then by angle θ in the zx-plane, and then by angle ψ in the yz-plane. The number φ is called pitch, θ is called yaw, and ψ is called roll. If you imagine yourself flying in an airplane (see Figure 11.1) along the x-axis (with the y-axis pointing upward) there are three direction changes you can make: Turning left or right is called yawing,pointing up or down is called pitching, and rotating about the direction of travel is called rolling.These three are independent in the sense that you can apply any one without the others. You can, of course, also apply them in sequence.

    jet

     

    Figure 11.1: An airplane that flies along the x-axis can change direction by turning to the left or right (yawing), pointing up or down (pitching), or simply spinning about its axis (rolling).

    Writing this out in matrices, we have

    2

    3

    With the proper choice of φ, θ, and ψ, such products represent all possible rotations. To see this, we’ll show how to find φ, θ, and ψ from a rotation matrix M. In other words, having shown how to convert a (φ, θ, ψ) triple to a matrix, we’ll show how to convert a matrix M to a triple (φ′, θ′, ψ′), a triple with the property that if we convert it to a matrix, we’ll get M.

    The (1, 3) entry of M, according to Equation 11.14, must be sin θ, so θ is just the arcsine of this entry; the number thus computed will have a non-negative cosine. When cos θ ≠ = 0, the (1, 1) and (1, 2) entries of M are positive multiples of cos φ and – sin φ by the same multiplier; that means φ = atan2(–m21, m11). We can similarly compute ψ from the last entries in the second and third rows. In the case where cos θ = 0, the angles φ and ψ are not unique (much as the longitude of the North Pole is not unique). But if we pick φ = 0, we can use the lower-left corner and atan2 to compute a value for ψ. The code is given in Listing 11.1, where we are assuming the existence of a 3 × 3 matrix class, Mat33, which uses zero-based indexing. The angles returned are in radians, not degrees.

    Listing 11.1: Code to convert a rotation matrix to a set of Euler angles.


      1  void EulerFromRot(Mat33 m, out double psi,
      2                             out double theta,
      3                             out double phi)
      4   {
      5    theta = Math.asin(m[0,2]) 
    //using C# 0-based indexing!
      6    double costheta = Math.cos(th);
      7    if (Math.abs(costheta) == 0){
      8       phi = 0;
      9       psi = Math.atan2(m[2,1], m[1,1]);
    10    }
    11    else
    12    {
    13       phi = atan2(-m[0,1], m[0,0]);
    14       psi = atan2(-m[1,2], m[2,2]);
    15    }
    16
      }


    It remains to verify that the values of θ, φ, and ψ determined produce matrices which, when multiplied together, really do produce the given rotation matrix M, but this is a straightforward computation.


    Inline Exercise 11.3:

    Write a short program that creates a rotation matrix from Rodrigues’ formula (Equation 11.17 below) and computes from it the three Euler angles. Then use Equation 11.14 to build a matrix from these three angles, and confirm that it is, in fact, your original matrix. Use a random unit direction vector and rotation amount in Rodrigues’ formula.


    Aside from the special case where cos θ = 0 in the code above, we have a one-to-one mapping from rotations to (θ, φ, ψ) triples with –π/2 < θ ≤ π/2 and –π < φ, ψ ≤ π. Thus, the set of rotations in 3-space is three-dimensional.

    In general, you can imagine controlling the attitude of an object by specifying a rotation using θ, φ, and ψ. If you change any one of them, the rotation matrix changes a little, so you have a way of maneuvering around in SO(3). The cos θ = 0 situation is tricky, though. If θ = π/2, for instance, we find that multiple (φ, ψ) pairs give the same result; varying φ and ψ turns out to not produce independent changes in the attitude of the object. This phenomenon, in various forms, is called gimbal lock, and is one reason that Euler angles are not considered an ideal way to characterize rotations.

     



    If you can make sense of the above, you will be good with this book.  This sample is pretty typical of how things in this book are covered.  So if you are looking for a text for learning or brushing up on computer graphics Computer Graphics: Principles and Practices is probably one of the best.  With the exception of Physics, and library specific instructions, this book has pretty much everything you might need to know.

    General Programming


    AppGameKit Studio

    See More Tutorials on DevGa.me!

    Month List