GameFromScratch Guide to Getting Kids Started in Game Development

16. September 2014


It is getting more and more common for kids of younger and younger ages to show interest in game development.  In this day and age there is a wealth of information out there, possibly too much information at times.  This guide is intended to help parents or younger readers get started in the world of game development.  So, what exactly does this mean?  First it means I will focus on technologies that are appropriate to beginners.  Second, it means I am making no assumptions about your technical abilities, in fact, I am assuming you have none.  So if it ever feels like I am insulting your intelligence or speaking down to you, I am not!  On the other hand, if I am unclear or confusing at some point, please let me know and I will try to clarify.



How young is too young?


This is perhaps one of the most common questions asked.  How old do I ( or my child ) have to be to get started in game development?  This is a question with an impossible answer as all kids are different.  On the extremely low end of the range ( and using the right tools ), an incredibly motivated 6 year old would probably be able to have some success.  On the other range of the spectrum, a typical 12 year old should have the educational foundation and mental abilities to succeed.  The actual age is bound to be somewhere in the middle.


There are a few critical things to be aware of up front. 


The first is motivation.  Motivation is more likely to be the biggest hurdle to success, not mental ability.  If your child absolutely loves creating stuff ( loving to play video games is massively different than loving to create video games ) and is willing to trial and error, they are perfect for game development!


The second is managing expectations.  This is where we lose the most potential game developers out there, regardless to age.  Game development doesn’t have to be exceptionally hard, but it is certainly complex.  Your child is not going to be creating massive modern games like Call Of Duty or NHL any time soon.  Nor are they going to create an MMO ( online game like World of Warcraft ).  They need to start small, very small and work their way up from there.


A key way to put it is, if your child’s mindset is “I am going to create the next Minecraft”, they are going to fail and fail hard.  On the other hand, if their mindset is “I am going to create the next Minecraft, eventually”, they have perhaps the perfect mentality to succeed.  Knowing the difference there is critical.  Like almost any other skill, you need to start small and build on your successes.  Starting too big will just result in failure and frustration.  For the record, I believe I was about 8 when I started programming using Atari BASIC.



What is Game Development anyways?


This section is going to get slightly more technical, but not overly so.  Game Development is an umbrella term, it includes many different skills all coming together to create a greater whole.  Think about Game Development like you would an car maker.  There is no single skill involved in making a car, instead you have engineers, graphic designers, manufacturers, quality assurance and more all coming together to make a car.  In the case of a game however, it’s still possible for all of these different tasks to be performed by a single person.  There are a number of highly successful games out there that were written, drawn and scored by the same person.  It is important to realize though, this generally isn’t the case.  Basically what I am saying is game development isn't a single task, it’s multiple.  While your child may really enjoy one part, they may dislike another part.  It’s also important when looking at what tools to use to see if they come with art or sound examples to get your child started, so they don’t have to do everything all at once.


If you look at a modern game’s credits, you will literally see hundreds of different names and job titles contributed to the project.  When just getting started however, there are really only two tasks to focus on. Creating the game and creating the stuff that goes in the game.


Let’s look at the board game Monopoly as an example.  Two major sets of skills went in to making that game.  First you had to create the game…  design the board layout, make the dice rules, write up all the game cards, etc.  Then you had to create the contents of the games, the pictures that went on the board, the drawings on each card, the little plastic houses, etc.


In video games, it’s really no different.  You have the task of creating the game, generally called programming and the task of creating stuff to populate your game, be it art, animation or music/sound.  These skills are completely different but are generally required for a game.  This actual tutorial is going to focus mostly on programming, when a child is interested in game development, this is generally what they mean.  A child interested in being a game artist for example, has probably already got their face buried in a notebook, sketching away!  This by the way is the perfect approach for them too, as the difference between “an artist” and a “game artist” is miniscule.  If you do however want to explore computer art for games a bit closer, read this guide.



What is Programming?


So, chances when you are talking about game development you are actually talking about game programming.  What is programming?  The simplest definition I can give is programming is the art of telling the computer what to do.  In the case of game programming, this means doing stuff like “when the user pushes the UP arrow do this” or “when player health equals 0, draw that”.


Now how you program games, that’s a much trickier conversation and one of the biggest things that you will struggle with.  Perhaps more importantly, it’s the thing that is going to be most dependent on your child.  We don’t all think the same way and we don’t all express ideas the same.  In some cases a child might take to one particular style while a completely different child would possibly despise it. 


For the most part for game programming there are three different ways to tell the computer what to do ( and often a combination of all 3 ):


Visually – this is a very common approach for beginners and for game development in general ( Unreal Engine 4, one of the most commonly used commercial game technologies has a Visual scripting interface called Blueprint for example ).  In Visual programming languages you generally drag and drop to draw your game screen, then wire it all together in a flow chart like experience  Basically it’s the programming equivalent of creating a flow chart.  If your child is a visual thinker, this may be the best route for them.


Here is an example of a Visual game development tool, Construct:


Scripting Languages – With scripting languages you tell a computer what to do using small text files.  You often still draw your game using a visual editor like the picture above, but when actually telling the computer what to do, instead of filling in text boxes or creating flow charts, you use code.


Here is an example of the LUA scripting language, using a 2D game library named LÖVE:


This little bit of text tells to computer to load an image with the filename “whale.png” and then to draw it on screen.


Traditional Programming Languages – Finally a lot of game development is done in traditional programming languages.  Common names include C++, Java, C# and more.  I should start straight away by saying, I do not recommend young programmers start by using a traditional or more accurately, a compiled programming language for several reasons.


The big question you may have is, what’s the difference between a scripting and compiled programming language?  A lot of it is technical and beyond the scope of this article but most of it comes down to complexity.  Dealing with a compiled language leaves you dealing with a number of things you simply don’t have to worry about with scripting languages.  Things like compiling ( the act of turning the text you write into something the computer can understand ), linking ( can’t easily explain this one ) and more. 


Perhaps more importantly, it’s purpose.  Scripting languages are generally much more focused in what they do and are designed to make things easier for the developer.  Put in the simplest terms, scripting languages are generally a lot easier to learn and use.  If you do want to learn more about traditional programming languages, you can read this guide.  It is a much more technical guide than this one.  If your child is in their teens, this may be an appropriate place to start.  That of course isn’t to say that teenagers ( and older ) are too old for the stuff recommended below.


In the end you will often find game development tools offer both a visual system and a scripting language, where much of the game is created using drag and drop but portions can be controlled using a scripting language.



IDE, Library, what???


OK, one last topic to cover before we get into it.  There are a bunch of terms and expressions that get thrown around that might be confusing.  I am going to quickly cover some of them.


Language – This is the programming language used.  Just like we used English, Spanish, German etc to talk to each other, we use different languages to talk to computers.  In the example above the programming language was Lua.

IDE – Integrated Development Environment.  This is a bundling of a number of tasks all into a single application.  Not all suggestions will have an IDE, meaning you need to use different programs to do different things.  Generally an IDE includes a text editor, a programming language and various tools all in a single spot.

Library – Think of a library like someone doing a bunch of work for you.  Generally even the “simple stuff” isn’t actually part of the language, things like drawing on the screen.  Instead people write that stuff and make it available to you as libraries.  In some cases, like GameMaker or Construct, it’s all bundled together for you.  In other cases, like Lua, you pick a library to go with the programming language.  Each approach has advantages and disadvantages.  For example, Gamemaker bundling everything together makes life easier to get started, but with Lua, if they don’t like a particular library, they can simply use a different one.

Sprite – A sprite is a graphic used in a game, for example the player.  A sprite can be a single image or could contain multiple for animations.  The exact meaning of a Sprite changes from engine to engine, but is always a visible thing in the game that moves.  If you’ve played Super Mario Brothers, Mario, the turtles, fireballs, etc… would be considered sprites.  The world however, such as pipes and the sky, would not generally be considered sprites.

HTML 5 – This one can get a bit confusing.  HTML5 is the most current version of HTML ( Hyper Text Markup Language ) which is the language of the web.  When you load a webpage in your browser or phone, generally it’s an HTML document that you are looking at.  The confusing part is, HTML5 is actually an umbrella term for a number of technologies that work together to make the web work.  Those include HTML itself, which is a language that describes the contents of a webpage, CSS which is another language that describes how a webpage should look, and finally JavaScript, which is a scripting language that controls the logic.  People often use the terms HTML, HTML5 and JavaScript interchangeably, although this isn’t technically true.  HTML5 can be used to create games and doesn’t have to be run in a web browser.

Debugger – When your game doesn’t run correctly, it can be tricky to figure out why.  Some packages ship with something called a debugger, which is a tool to help you identify problems or “bugs” in your game.  It is a somewhat advanced feature for beginners, but at the point you need one, a debugger can be invaluable.  For additional information on debugging click here, although advanced warning, that is a highly technical article.




Kid Friendly Game Development Options


Now after all of that we get to the meat of the article… the actual suggestions for development tools to introduce your child to the world of game development.  This is by no means an all inclusive list!  For each example I will list what’s included, an example of how it works, positives and negatives, the costs if any and links to books available, if applicable.  One last very important thing to note…  any of these options is a valid one, there really isn’t a single ‘best” choice.  Tailor your decision to best match your kids interests.  If you first choice doesn’t work out, try a different one.


The following list is in no particular order.




Scratch is an MIT backed project aimed at teaching kids aged 8 to 16 to learn how to program.  There is a massive community built around Scratch, which has been around since 2006.  There is a special focus on being family friendly.  Scratch is run entirely in the web browser, you simply go to the web page and start programming.  If you want to save your work, you need to register, but it’s a simply form and doesn’t even email you for verification.


Scratch is firmly in the visual programming languages category.  Your child works by dragging actors onto a scene, then controls them using Lego-like programming blocks.  The blocks are a good parallel to actual programming language structure, so if they switch to scripting or traditional programming, it will make immediate sense.  There is a good amount of documentation available and you can find literally thousands of sample scratch programs to learn from.


Perhaps the most valuable part of scratch is it comes preloaded with all kinds of content for your child to get started with.  However it also has the ability to import graphics and audio you create yourself or get from the community, allow an easy transition between programming and making game assets.



Scratch running in Chrome:



Loading a new Sprite



Programming in Scratch:


The above is a script attached to the blue dog.  It’s in two parts, first is when the Green flag ( Go ) is clicked.  It makes the dog visible, moves to a certain position on screen, then moves by one step over and over.  The other waits until it gets the collide message from the other dog, when it does it goes back to the starting position, changes the scene then hides itself.  Each Sprite has it’s own script.  The programming blocks are drag and dropped from the programming palate:


The Programming Palate:


These are the blocks you use to program in Scratch.  Above are the “Looks” options.  As you can see, there are a number of different categories to choose from.

Includes or Alternatives:

Scratch is an all in one solution, so you need no other tools to work in Scratch.  It also ships with a large variety of sample scenes, backgrounds and sounds to start with.


Scratch is completely free and run by sponsorship donations.




Scratch also makes an iPad application called ScratchJr which is aimed at children 5 to 8.  It is also completely free.  Since there is nothing to buy, or download and you don’t even have to register to try Scratch, it is probably the easiest option to try out in this list.




Construct 2



Construct2 is another visual programming based game engine.  You create games in Construct2 using a drag and drop interface and control logic using a flow chart like event system.  If the functionality you need isn’t available in Construct2, you can create your own plugins using JavaScript, although this is certainly an advanced feature and is strictly optional, Construct2 is meant to be controlled using the event system.  The ultimate output of Construct2 is HTML5, which can be exported to run on a number of platforms such as mobile ( Android, iOS, Windows Mobile ), browsers and desktop.


Construct2 is a great deal more complex than Scratch, which has a two fold impact.  First, Construct certainly has a higher learning curve than Scratch, so it isn’t suitable for younger children and does not take a teaching approach.  On the other hand, it is meant to provide an easy to learn tool capable of creating professional games, instead of for learning.  This means there is a lot more runway before your child runs into any limitations.  There are many professionally shipped games that were created in Construct 2. 


There is a good deal of documentation available, including a complete references and a PDF manual available for download.  There is a very active community and strong forum for support.


Construct is an application installed on your computer.  Construct requires a computer running Windows.  There is no Mac option currently available.



Construct 2 Main Window:



Event Sheets


This is the primary way of programming a Construct 2 game.  The example above is part of the code controlling how the player responds to input, taken from one of the included samples that shows creating a simple shooting game.



Behaviors allow you add quickly add predefined behavior to a game object.

Integrated Image Editor:



Includes or Alternatives:

Construct 2 is an all in one solution that contains everything you need to get started.  Out of the box however it does not contain a ton of content to get started with.  They do however have a free asset pack available for download. ( Warning, that is a direct download link.  Click it and the 38mb archive of assets will start downloading ).  If you move beyond the free version, you get more assets included.

If you do get into creating plugins, you will need to download the JavaScript SDK, which is available for free.  In this case you will need to provide your own text editing environment, Construct does not include one.


Construct2 has tiered pricing.

  • There is a free version available to download.  The free version is only able to create games that run in your browser.  It also includes less bundled assets and has a number of limitations on the complexity of game that can be created.  This limits shouldn’t be too much of a problem at least initially.
  • The Personal Edition is currently 129USD, is able to create Desktop, iPhone and Android games and includes much more bundled assets like sounds, songs and sprites.
  • Finally, there is a Business Edition, which is exactly the same as Personal Edition, except it costs more and is required if you make more than 5,000USD from your Construct2 games.  Basically if you have this problem, it’s a good problem to have!








Game Maker



GameMaker is an all in one game creation system that is a hybrid providing both a visual programming interface, as well as a scripting language, their own proprietary language GML.  GameMaker initially exports to Windows only, but for a fee can also create games for iOS, Android, Web, Windows Phone and more.


Programming in GameMaker can be done in a flow chart like manner, similar to Construct2.  It also adds the option of programming in their own scripting language GML.  This is both a plus and a minus.  The ability to program using a Scripting language in addition to the visual system gives the user a great deal of flexibility.  It is however a more complex process.  Since the language is proprietary to GameMaker, if they move to a different environment, a lot of their knowledge will be less useful.  That said, general programming concepts stay pretty much the same from language to language, so this isn’t as big of a problem as it might sound.


Other than assets to get started with, GameMaker quite literally ships with everything you might need out of the box, although the quality of the tools varies.  You are able to create graphics, sounds and levels in addition to programming, all in one single application.  GameMaker has been used to make some very successful commercial games such as Spelunky and Retro City Rampage ( not for children ).


GameMaker is one of the more complex options on this list and is probably not appropriate for pre-teen level children.  For older children though, it offers a lot of flexibility and a ton of options should they wish to share or sell their games eventually.  Obviously this changes from child to child, so there is no hard set rule.  Just be aware, compared to say Scratch, the difficulty level here is much higher. 



Main Interface:


Visual Programming:



(Script for firing a bullet)


Level Editor:


Sprite Editor:


Includes or Alternatives:

GameMaker is an all in one solution and contains everything you will need to make a game including code editing, image creation and editing, map designer and more.  It also includes a built in debugger, useful for hunting down problems.  The standard version however comes with very little in the way of included samples to get started with.  In fact, there are none.  However there is a very active community and tons of examples and tutorials available online.  The quality of the materials varies massively and curation by Yoyo Games is lacking, so finding the best starting material can be a bit of a challenge.  For all of the screenshots and code samples in this entry, I used material from this tutorial.



GameMaker licensing can be a bit confusing, as their pricing structure has changed and not all material is updated.

The version you initially download is heavily restricted by the number of resources and scripts it can support.

You can however update to the Standard edition by simply registering an email address, which will be verified and you will then be sent a product key.

Then there is a “Professional” version for $100 USD that adds functionality for working with other developers ( you will not need at this point ).  The biggest difference is the Professional version can buy additional modules that support exporting to platforms other than Windows.  Each platform is generally $200 USD.  So for example, if you want to export your game to play on Android and iOS it will cost $500.  $100 for Professional, then $200 for each platform. 

Finally there is a “Master” version, which is basically Pro with all of the different export platforms enabled.  It’s $800USD currently.

For a new developer, the registered Standard edition is most likely good enough.  If you do need Professional, keep an eye on the Steam Store, it is made available for sale quite often.  To add to the confusion, the Standard edition you can download for free is $50USD on Steam.  DO NOT BUY IT!




Note, it is not necessary to use the included tools.  For example, if you want to use another graphics program to create sprites, or to import graphics from another source, this is perfectly possible!


Lua with LOVE



Lua is a scripting language, while LOVE is a library for making games ( see the descriptions earlier for definition of a library ).  Lua was a programming language created for non-programmers and has become increasingly popular as a scripting language for commercial games, such as these.  That is one large advantage to choosing this option over say, Gamemaker’s custom scripting language, GML.  Lua is used elsewhere and fairly commonly, so it is a skill that will carry forward very well.    As a language it is fairly simple to learn.


LÖVE is the library you use to create games using the Lua programming language.  LÖVE provides pretty much all of the functionality you need to create 2D games including drawing graphics, playing sound, controlling input, loading files, etc. 


LÖVE and Lua isn’t a turn key solution like some of the others however, you still need a text editor to create and edit your scripts, a drawing program for creating art, and audio programming for recording sounds, a map maker for creating maps, etc.  Fortunately all of these things are freely available and I have recommendations below.  You do however have to download each one separately.  LÖVE however comes with no assets like graphics or sounds to get started, but sites like Open Game Art and FreeSound can help you get started.  It is however, yet another thing you have to locate and download.


The biggest negative about LOVE is the lack of platform support.  Currently LOVE can only create games for computers, although mobile targets are in the works.



Sample Lua/LOVE Code:


Zerobrane Studio:


Includes or Alternatives:

The LOVE library contains Lua, so all you need to get started is here with the getting started documentation here.  However that just gives you Lua and LOVE and nothing else.  You still need a text editor to create your code, plus art and sound programs.


For straight text editing, two very popular choices are Notepad++ and Sublime Text.

However, for Lua development I would recommend ZeroBrane Studio which is a more integrated development environment (IDE) that allows things like code suggestions and debugging.  Oh, plus it’s free, which is nice.

For art creation, Paint.NET, GIMP and Inkscape are three very popular free options, the last two however have a pretty hefty learning curve.

For creating levels and maps, Tiled is a very popular and free choice.


On the alternatives front, LUA is the scripting language for a number of popular game development tools including Corona, Gideros and Marmalade Quick.  None are as easy to learn as LOVE however, which is why I recommend LOVE over all.  They do however illustrate how learning Lua is a skill that transfers well to other projects.



Both Lua and LOVE are free.  ZeroBrane is a pay way you like product.



Only one of these books is specifically about LOVE programming.

Lua also have a free reference manual available online.


The name of the library is actually LÖVE with an umlaut over the O.  While cute, coupled with the commonness of the word love makes searching for help incredibly annoying.  When using Google, always add “lua” to search expressions.


Python with PyGame



Like the Lua and LÖVE option, this is a programming language and game library combination.  Very similar to the LÖVE library, PyGame is a very beginner friendly library.  Python is the programming language used in this pairing.  Python is a popular scripting language, although less so in game development.  It is an extremely popular language in the world of 3D graphics, such as at Pixar.   It is also quite commonly used by IT professionals to automate tasks, so even outside game development, Python can be a very valuable skill.  Python has been used to make several games.


PyGame also provides most of the common functionality you would expect in a game such as audio, input and graphics.  You also need to provide your own text editor, graphics, sounds, etc.  However unlike LÖVE, PyGame does ship with several examples and some sample assets to get started with.



Python Code in PyCharm


Includes or Alternatives:

See the recommendations for LÖVE above, most of the same tools can be used.

ZeroBrane studio however is not an option for Python.  I would personally recommend checking out PyCharm, which has a free version available.  It is however a somewhat complicated editor.  Of course, you can still use whatever text editor you would like, such as the earlier recommendations of Notepad++ or Sublime Text.



Python and PyGame are both free.  PyCharm is available in a free version.



Python is a more complicated language than Lua, so its is recommended only for older children.  On the other hand, programming in Python is also much closer to programming in traditional languages, so the experience of learning Python will be closest to what professional programming generally feels like.

Sadly, there are two versions of Python, something that has plagued the language for a very long time.  Most of the time you want to use the 2.x version of the language.


HTML5 with various


HTML5 is a somewhat confusing term these days.  Basically HTML is the language of web browsers while Javascript is the language that enables HTML to do stuff.  With each generation of web browser, the ability to create games has gotten more and more impressive.


Javascript is an interesting proposition for learning with as your kids probably already have experience in using a web browser.  Then can simply open a text file, type some code, save and load in the webpage and play.  It’s a very nice feedback loop.  Unfortunately there are some downsides here too.  While a pretty straight forward programming language, Javascript has some horrible flaws that make it hard to recommend to a complete beginner.  On top, each browser has tons of flaws, that also add a layer of complication on top.  Finally there are just so many options when it comes to HTML game development, unlike Lua or Python, that making a recommendation could actually take another article even longer than this one!


If you child is interested in working on HTML5 games, it is a good option to persue with the right library.  Two very good options, that provide game functionality and deal with some of the browser lunacy are Phaser and CreateJS, but there are literally hundreds of options.  Both of those libraries are straight forward, well documented and commonly used.


Like Python and Lua, HTML5 is not an integrated solution, so you need to provide your own text editor, graphics, etc.  However, pretty much every modern browser has build in tools to make development easier.





Stencyl is a visually programmed game creation kit that bills itself as “the quickest and easiest way to make games”, which may actually be true!  In functionality it is very similar to Construct2, you program by drawing out your scene, then adding behaviors visually.  It is an all in one solution with an integrated image editor, although you can always import assets created in external tools.  There is no way to script in Stencyl, although you can create extensions using a programming language called Haxe, if there is functionality you need that is not available in Stencyl.  This however is advanced functionality and is probably beyond your child’s current ability level.  You can however download pre-made extensions from the marketplace.


Stencyl runs on Windows, Linux and Mac and by default can only create web (Flash) applications.  The ability to target other platforms like desktop computers (outside their browser), as well as iOS and Android is available for a cost (see below).  While it doesn’t ship with a ton of assets, it does make them very easily available.  In addition the help available online is very good.





Defining Behaviors:


Level Editing:


Program Flow:


Includes or Alternatives:

This is a pretty all in one solution.  Unless you delve into Haxe extension programming, basically everything is here with the initial download, or is linked directly from inside the application.


Stencyl is available for free, but limited to applications that run in Flash, either in the integrated player or your browser.  Published games will have a Stencyl splashscreen when they load.

For $99, there is Studio that enables you to target desktop computers outside of the Flash player.  The splashscreen is removed in this version.

For $199, you gain the ability to target iOS and Android.






Lego Mindstorm



Right off the top let me just say, this stuff is expensive Name Your Link'>Name Your Link'>really expensive.  However if your child shows an interest in robotics or is an avid Lego fan, this can be a very good introduction to programming.  Mindstorm Lego is basically a simple robot creation kit using lego.  The key part is it ships with a programmable piece that enables you to program your robot’s behavior.  Mindstorm enables a nice progression, your child can start by building in Lego, then start controlling the robot using the desktop or iPad application, then graduate to actually programming logic.


Lego Mindstorm enables you to simply control your creations, or program them using the EV3 software, a flow chart like process.  They do however make tools available allowing you to get as low leveled as you want to. 


Even though it’s somewhat off topic, I mention Mindstorm because it can be an ideal introduction to more (literally) hands on children to the concepts of programming.  Literally being able to see cause and effect in the real world can be very valuable.



Programming Mindstorm:


A Mindstorm robot assembled:

LEGO Mindstorm robot

Includes or Alternatives:



Name Your Link'>Name Your Link'>Lots!


EBooks of the manual ( pdf link ) and teaching guide ( pdf link ) are available online.


This is pushing the definition of “game programming”, but certainly is a very tactile introduction to many of the same skills that go into game development.  Also I have to say, had my parents purchased this for me as I child I would have considered nominating them for parent of the year awards.  When my daughter gets a bit older I am certainly buying this, but then, is it for her, or me? :)



Honourable Mentions


All lists must end at some point, and this one is no exception.  The following are other recommendations I have for parents looking to get their kids into game programming, but for whatever reason didn’t make the main list.  If nothing above appeals to you, be sure to check some of these options out.


Minecraft Modding

If your kids play games, there is probably a pretty good chance you have already been exposed to Minecraft.  Modding is the act of modifying an existing game and Minecraft happens to be a very popular game to mod.  Modifying an existing game can often be a great way, or at least motivation, for learning programming.  There is a HUGE community of people that mod Minecraft.  The downside is, it’s done in the Java programming language and it certainly isn’t suitable for young children.  If your child is very interested in Minecraft though, this could be a good approach to take.  You can learn more here.



GameSalad is another visual game creation kit in the veins of Stencyl and Construct2 mentioned above.  It has been used to create professional games, there is a free version available as well as paid versions for other targeting other platforms.  I personally have no experience with GameSalad.



Codea is an iPad application for creating games on the iPad.  It currently costs $10USD.  It uses the Lua programming language and provides it’s own library for creating games that is very easy to learn.  It comes with code editing tools, debugger and tools to hook up with your computer.  You can later hook it up to a Mac and actually create a game for publishing.  However, typing code on an iPad keyboard is extremely unfun, so a bluetooth keyboard is pretty much essential.  It does however come with tons of examples and is actually a great option for a young developer who has an iPad, especially if that’s all they have.


Kodu or Project Spark


This is a game that is about creating games.  Basically it’s a game you can modify to do just about anything.  Kodu is a visual programming language created by Microsoft.  Project Spark is a modified version of Kodu being released shortly for the XBox One console.  It’s pretty far from normal game programming, but many of the concepts ( and the end result! ) are very similar.


Code Combat

Code combat is an interesting concept.  It’s a web based game where you control your character through programming.  As you progress in the game, it teaches harder concepts.  Basically you learn to program while playing a game.  It was originally created to teach Javascript, but has since added a number of other languages.  I believe it is completely free, so you’ve got nothing to lose by trying.



Alice is a integrated programming solution designed to teach programming.  In their own words:

Alice is an innovative 3D programming environment that makes it easy to create an animation for telling a story, playing an interactive game, or a video to share on the web. Alice is a freely available teaching tool designed to be a student's first exposure to object-oriented programming. It allows students to learn fundamental programming concepts in the context of creating animated movies and simple video games. In Alice, 3-D objects (e.g., people, animals, and vehicles) populate a virtual world and students create a program to animate the objects.

Alice is maintained by Carnegie Mellon university and is completely free.



RPGMaker Ace is a product similar to GameMaker specifically for creating one type of games, Role Playing Games, generally along the Japanese style.  Their tagline is literally “Simple enough for a child; powerful enough for a developer.”  There are some commerically created games available that were written using RPGMaker.  If your child is really in to this style of game, RPGMaker could be a great introduction to game programming.  RPGMaker is $70, although quite often on sale on Steam.  Ironically enough, as I write this, it is on sale for 75% off.





Of course I only scratched the surface of the options available, but I think I got the majority of options in that list.  If you think there is something else I should have put in this document, let me know!  I tried to make this clear to people of all technical levels, but no doubt I’ve made mistakes.  If I lost you somewhere, please let me know and I will try to clarify.  The most important thing to remember, all children are different, so one approach that works for one child may fail with another.  Pick the option above that you think most fits with your child's personality, but if it doesn’t seem to be a good fit, remember there’s a dozen other options!


I hope that was useful.  Good luck.

Programming, General, Design, Art , , ,

Guest Tutorial: Making Flappy Bird using Overlap2D and LibGDX

8. September 2014


The following is a guest tutorial by Avetis showing how to use LibGDX and Overlap2D to create an Angry Birds like game.  Overlap2D is a level and UI editor handy for separating game coding from content creation.  Keep in mind, Overlap2D is fairly young, currently at 0.0.4 version. Now, on with the tutorial!


Making Flappy Bird with Overlap2D – Overlappy Tutorial




In this tutorial we are going to create a FlappyBird clone game (for learning purposes only) using Java, LibGDX framework and accelerate it all by moving our UI, Level, and Asset management into Overlap2D Editor. One thing I figured while coding is that you can’t make a quick tutorial about a flappy bird clone, ever. It’s going to be long if we want details. It is easier though to use the explain approach instead of step by step guide.  So I am going to share all the sources and resources, and then go with you through setting this all up, show how things work, and hopefully this all will make sense.



Java knowledge, basic LibGDX experience, computer, time. Make sure you use latest Overlap2D editor and runtimes (v 0.0.4 or higher)

Get latest LibGDX project setup here: ( Details here )
Get latest Overlap2D editor here:


First - Get Game Assets (Resources)

First let’s download the assets. I made a small pack of images I found on the internet with Flappy Bird images, animations and font. You can get it here:



Setting up Your Overlap2D Project


Unzip your Overlap2D zip file, and run the Overlap2D.jar.

First things first, you are currently viewing demo project, so go to File and Create New Project. Call it OverlappyBird and then create the scene size, let it be 480 width, 800 in height. It’s a standard small mobile device resolution, and since Flappy Bird is a portrait game, it should be just right. Click Create Project.
You have now created an empty project and it’s ready for setup, now you need to import the assets. Here we have 3 types of assets, first is just image textures, and second is a sprite animation for bird itself, and lastly the TTF font for score label. I have separated them in folders so you can import easily. Click on File, import to library.

First click on “…” button near the import images text field to select your images; locate them, select all. When done click on import and they all will get imported to your assets area on the right middle panel. Then open same the dialog again, and this time find Import Sprite Animations (note: not spine, but sprite) Click on “…” button there and locate bird.atlas file. Click Import, and it will get added to your assets list as well.

Lastly open import dialog again, and import font, by locating ttf file.

Your project setup is ready.


Making The Main Scene


First let’s see how main scene looks in Overlap2D when it is finished:



I decided to make several layers to have things organized, bg layer for background image that is not moving, default layer for pipes and bird itself, ground layer for moving the ground that is covering pipes, ui layer for “get ready” popups and score labels, and finally dlg layer for end game dialog. The reason I am not putting dialog inside ui layer is that I can position it in its layer correctly, and later hide that layer so it will not intervene with my work.  So, go ahead and create this layers in the order I described from bottom to top. (bg layer goes below them all, and you can rearrange them by drag-and-dropping)

I also recommend you to open my example project (provided with resources). Open it with Overlap2D and see how things are positioned and grouped. (To open a project, click file, open, and then locate .pit file inside project.)

Compose your own project like I did,. Put background on bg layer, and add bird on default layer. Make sure it looks like the picture above.

The ground is going to be a moving part, so we need to have 2 of this near each other for seamless movement. Put two grounds near each other and then group them into composites, like on this picture, do not forget to give identifier to it for later use.



For the pipes we are going to do the following trick. First of all we are going to put pipes on top of each other with a gap, and convert them into composite, and then add to library to have kind of a prefab for a pipe column. Later in code we are going to pre-load 3 of this because there is never more than 3 columns of pipes visible on screen, so we can re-use the ones that are left of the screen for next pipe iteration.


Now some of the pipes are going to vary in position on Y axis. So there are a minimum and maximum values that it should not be below or above. To avoid having this values in code, I just put 2 of pipe columns on screen: one at the lowest point and the other at the highest, and give them identifiers in order to read those values from code later.




Next click on bird in properties box and add 2 custom variables, by clicking on custom variables button. First is jump_speed=400, and second is gravity=1000 (so you can later tweak game from editor not from code)



Next up, put a “hint” and “get ready” assets convert them into composite as they always go together and give them id to hide show from game. They should go to ui layer.


Making Menu Scene


This one is easier: click on File, Scenes, Create New Scene, and choose MenuScene as name.

Make sure to put up all things just like on this picture. And note that you should make a composite for ground agai n (as we do not yet share prefabs between the scenes).

Put a Play button as image and give it an id to add listeners later in your code.

Here is how it should look:




Overlap2D Part DONE!

Looks pretty good! Both scenes are set up and ready for some coding. Most importantly your scene and UI are very flexible and code-independent.




Setting up LibGDX Project and Getting Ready to Code:


Download the LibGDX setup application and setup an empty project (make sure to have checked box2d and freetype fonts), import it to your eclipse or other IDE, run the desktop app to make sure it works, then strip it from LibGDX picture  and make it just a black screen.

Make sure your desktop launcher has code to specify screen size of 480x800 (config variables in launcher).

We are going to render everything using a simple LibGDX Stage, so the code structure will be the following: GameStage extending Stage that will load all the Overlap2D data and display it; Main class that will be rendering GameStage in its render method.

For all the rest we are going to use iScript functionality of Overlap2D. Let me go a bit in depth for that. Overlap2D runtime provides an interface that you can implement to create a “brain” of any composite item. Basically it is your way of attaching logic to an object. In this example we are going to create 3 iScripts, one is going to get attached to entire mainScreen and be a GameScreenScript with all game logic, other will be MenuScreenScript for menu, and the last one will be BirdScript that we will attach to the bird. It is important to mention that you cannot attach script to an image, or sprite animation, so I have converted bird animation to composite item in order to do it (right click, convert into composite).


You can find the full project on my github:

Here are the well commented sources:

package com.underwater.demo.overflappy;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;

 * This is our ApplicationListener the main thing that things start in libGDX
public class OverflappyBird extends ApplicationAdapter {
    * GameStage will be holding both menu and main game
   private GameStage stage;
   public void create () {
      stage = new GameStage();

   public void render () {
      // Clearing the screen before each render, 0, 0, 1);;
      // calling stage act method and passing delta time passed since last call
      // drawing all actors

package com.underwater.demo.overflappy;


import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.uwsoft.editor.renderer.DefaultAssetManager;
import com.uwsoft.editor.renderer.SceneLoader;

 * GameStage 
public class GameStage extends Stage {
   // Speed of pixels per second of how fast things move left (required both for 
                                                               menu and the game,
                                                               thus put here)
   public float gameSpeed = 200;

   // Overlap2D  provides this easy asset manager that loads things as they are 
   provided by default when exporting from overlap
   private DefaultAssetManager assetManager;
   public GameStage() {
      // Set this is input processor so all actors would be able to listen to 
      touch events
      // Initializing asset manager
      assetManager = new DefaultAssetManager();
      // providing the list of sprite animations which is one in this case, to 
      avoid directory listing coding
      assetManager.spriteAnimationNames = new String[1]; assetManager.
                                          spriteAnimationNames[0] = "bird";
      // loading assets into memory
      // Menu goes first
   public void initMenu() {
      // Creating Scene loader which can load an Overlap2D scene
      SceneLoader menuLoader = new SceneLoader(assetManager);
      // loading MenuScene.dt from assets folder
      menuLoader.loadScene(Gdx.files.internal("scenes" + File.separator + 
      // Initializing iScript MenuSceneScript that will be holding all menu 
      logic, and passing this stage for later use
      MenuScreenScript menuScript = new MenuScreenScript(this);
      // adding this script to the root scene of menu which is hold in 
      // Adding root actor to stage
   public void initGame() {
      // Creating Scene loader which can load an Overlap2D scene
      SceneLoader mainLoader = new SceneLoader(assetManager);
      // loading MainScene.dt from assets folder
      mainLoader.loadScene(Gdx.files.internal("scenes" + File.separator + 
      // Initializing iScript GameSceneScript that will be holding all game, and 
      passing this stage for later use
      GameScreenScript gameScript = new GameScreenScript(this, mainLoader);
      // adding this script to the root scene of game which is hold in 
      // Adding root actor to stage


package com.underwater.demo.overflappy;

import java.util.ArrayList;

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Touchable;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.scenes.scene2d.actions.AddAction;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.uwsoft.editor.renderer.SceneLoader;
import com.uwsoft.editor.renderer.script.IScript;

 * iScript for entire game logic
public class GameScreenScript implements IScript {
    * reference to GameStage
   private GameStage stage;
    * Main actor that holds root of game screen
   private CompositeItem game;
   // Screen loader reference to be later used to retrieve prefabs from library
   private SceneLoader loader;
   // Game over Dialog actor
   private CompositeItem gameOverDlg;
    * this will be holding 2-ground system composite item 
   private CompositeItem groundRotator;
    * Instead of holding bird actor we are going to hold birdscript that will 
    provide all bird logic and methods.
    * Also it will have bird actor inside
   private BirdScript bird;
   // Hint Box actor the one that shown in begining of game
   private CompositeItem hintBox;
   // some helping booleans
   private boolean gameStarted = false;
   private boolean groundStop = false;
   // going to hold what is the possible low and high position for a pipe column
   private float minPipe;
   private float maxPipe;
   private int gameScore = 0;
   private LabelItem scoreLbl;
   // Going to hold 3 pipes here to reuse as pipe pool
   private ArrayList<CompositeItem> pipes = new ArrayList<CompositeItem>();
   public GameScreenScript(GameStage stage, SceneLoader loader) {
      this.stage = stage;
      this.loader = loader;
   public void init(CompositeItem gameItem) {
      game = gameItem;
      gameScore = 0;
      // Creating and holding BirdScript that will hold entire bird logic.
      bird = new BirdScript(stage);
      groundRotator = game.getCompositeById("groundRotator");
      hintBox = game.getCompositeById("hintBox");
      scoreLbl = game.getLabelById("scoreLbl");
      // Adding listeners to listen for taps to make bird jump
      game.addListener(new ClickListener() {
         public boolean touchDown (InputEvent event, float x, float y, int 
                                   pointer, int button) {
            return true;
         public void touchUp (InputEvent event, float x, float y, int pointer, 
                              int button) {
            // screen tap was done
      // Loading min/max positions from level editor
      minPipe = game.getCompositeById("minPipe").getY();
      maxPipe = game.getCompositeById("maxPipe").getY();

      // Retrieving 3 pipe columns from library putting them into array,
      // and adding on screen in minus coordinates so the will becom "availible"
      for(int i = 0;  i < 3; i++) {
         CompositeItem pipe = loader.getLibraryAsActor("pipeGroup");             
      // Making sure first pipe will be added not sooner then 3 seconds from now
                     Runnable() {
         public void run() {
      // hiding game over dialog
      gameOverDlg = game.getCompositeById("gameOverDlg");
      // it should not listen for taps

   public void act(float delta) {
      // if game is not yet started or started (but most importantly not ended, 
                                                ground is moving) 
      if(!groundStop) {
         groundRotator.setX(groundRotator.getX() - delta * stage.gameSpeed);     
         if(groundRotator.getX() < -groundRotator.getWidth()/2) groundRotator.
      // if game is started, so first tap fone, then we dhould check for 
      collisions and move pipes
      if(gameStarted) {
         for(int i = 0; i < pipes.size(); i++) {
            // get pipe
            CompositeItem pipe = pipes.get(i);
            // move it if it has positive coordinate
            if(pipe.getX() > -pipe.getWidth()) {
               // if pipe was right of thebird, and will now become left of the 
               bird, add to score
               if(pipe.getX() >= bird.getBirdCenter().x && pipe.getX() - delta * 
                  stage.gameSpeed < bird.getBirdCenter().x) {
               pipe.setX(pipe.getX() - delta * stage.gameSpeed);
            //check for collision with bird
      // update scorel label
    * Check for bird versus pipe row collision
   private void collisionCheck() {
      // iterate through all 3 pipes
      for(int i = 0; i < pipes.size(); i++) {
         CompositeItem pipe = pipes.get(i);
         // to make it easy going to think about bird as circle with 5 radius 
         Vector2 birdPoint = bird.getBirdCenter();
         // Is there collision? if yes stop the game and allow bird to fall
         if(birdPoint.x+5 > pipe.getX() && birdPoint.x - 5 < pipe.getX() + pipe.
            getWidth() && (pipe.getY() + 532 > birdPoint.y - 5 || pipe.getY()+
            701 < birdPoint.y + 5)) {
         // Did bird hit the ground? not only stop the game but also 
         // disable gravity to keep from further falling, and consider bird dead 
         ( animations stop )
         if(birdPoint.y-5 < groundRotator.getY()+groundRotator.getHeight()) {
            if(!groundStop) {
            // killitwithfire
    * Stops the game
   private void stopGame() {
      gameStarted = false;
      groundStop = true;
      // show end game dialog
    * showing end game dialog
   public void showEndDialog() {
      // enabling touch back, showing
      // setting transparency to full
      gameOverDlg.getColor().a = 0;
      // and fading it in
      // setting play button listener to replay the game
      gameOverDlg.getImageById("playBtn").addListener(new ClickListener() {
         public boolean touchDown (InputEvent event, float x, float y, int 
                                   pointer, int button) {
            return true;
         public void touchUp (InputEvent event, float x, float y, int pointer, 
                              int button) {
    * Called when screen is tapped
   private void screenTap() {
      // if ground is not moving then bird is dead no actin required on tapp
      if(groundStop) return;
      // if game started just jump the bird
      if(gameStarted) {
      } else {
         // if game is not yet started, start the game and jump the bird
         gameStarted = true;
         // and also enable gravity from now on
    * get's availible pipe
    * availible pipe is any pipe that is left of screen and not visible
   public CompositeItem getAvailablePipe() {
      for(int i = 0; i < pipes.size(); i++) {
         if(pipes.get(i).getX() <= -pipes.get(i).getWidth()) {
            return pipes.get(i);
      return null;
    * this is called every X time to put a new pipe on the right
   public void putPipe() { 
      // getting availible pipe
      CompositeItem pipe = getAvailablePipe();
      // when you die at bad moment, it can be null sometimes
      if(pipe == null) return;
      // put pipe column on the random hight from min to max range
      pipe.setY(MathUtils.random(minPipe, maxPipe));
      // schedule next pipe to be put in 1.3 seconds
                     Runnable() {
         public void run() {
            // call itself



package com.underwater.demo.overflappy;

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.uwsoft.editor.renderer.script.IScript;

 * iScript for menu logic
public class MenuScreenScript implements IScript {
    * reference to GameStage
   private GameStage stage;
    * this is the main root menu actor to work with
   private CompositeItem menu;
    * this will be holding 2-ground system composite item 
   private CompositeItem groundRotator;
    * this will be the bird sprite animation displayed in center of screen
   private SpriteAnimation bird;
   // this variables are used to wiggle bird up and down with sin function
   private float iterator = 0;
   private float birdInitialPos;
   public MenuScreenScript(GameStage stage) {
      this.stage = stage;

   public void init(CompositeItem menuItem) {
      menu = menuItem;
      // Finding playButton by id and storing in variable
      ImageItem playBtn = menuItem.getImageById("playBtn");
      // Finding ground composite and storing in variable 
      groundRotator = menuItem.getCompositeById("groundRotator");
      // Finding bird and storing in variable
      bird = menuItem.getSpriteAnimationById("bird");
      // let's remember where bird was initially
      birdInitialPos = bird.getY();
      // Adding a Click listener to playButton so we can start game when clicked
      playBtn.addListener(new ClickListener() {
         // Need to keep touch down in order for touch up to work normal (libGDX 
         public boolean touchDown (InputEvent event, float x, float y, int 
                                   pointer, int button) {
            return true;
         public void touchUp (InputEvent event, float x, float y, int pointer, 
                              int button) {
            // when finger is up, ask stage to load the game
    * This is called every frame
   public void act(float delta) {
      // moving ground left with game speed multiplied by delta as delta shows 
      what part of second was passed since last call
      groundRotator.setX(groundRotator.getX() - delta * stage.gameSpeed);     
      // if ground rotator got half way left, we can just put it back to 0, and 
      to eye it will look like it endlessly moves
      if(groundRotator.getX() < -groundRotator.getWidth()/2) groundRotator.setX(
      // Now this part is to wiggle bird up and down, we are going change 
      iterator based on time passed
      iterator += delta*400;
      // Then figure out the bird offset from it's original position based on 
      iterator which is based on time passed, and do it with sinus function
      float birdOffset = MathUtils.sinDeg(iterator)*5;
      // put bird on it's original pos + offset
      bird.setY(birdInitialPos + birdOffset); 


package com.underwater.demo.overflappy;

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.uwsoft.editor.renderer.script.IScript;

 * Bird Script
 * @author azakhary
 * This is brain of the bird, it's physics and everything
public class BirdScript implements IScript {

    * reference to GameStage
   private GameStage stage;
   // Bird composite item actor
   private CompositeItem bird;
   // Inside bird composite actor there is the bird sprite animation actor
   private SpriteAnimation birdAnimation;
   // used to wiggle the bird in the air using Sine function
   private float iterator = 0;
   // current vertical velocity of the bird
   private float currVerticalVelocity = 0;
   // boolean to know if gravity is enabled or not
   private boolean isGravityEnabled = false;
   // to avoid jumping to rotation bird will try to always rotate a bit towards 
   desired rotation
   private float desiredRotation;
   // is it alive?
   private boolean isAlive = true;
   public BirdScript(GameStage stage) {
      this.stage = stage;
   public void init(CompositeItem item) {
      bird = item;
      // find animation from the composite
      birdAnimation = bird.getSpriteAnimationById("birdAnimation");
      // set origin of the bird in it's center, so it will rotate normally
      bird.setOrigin(bird.getWidth()/2, bird.getHeight()/2);
      // set desired rotation to current rotation which is 0
      desiredRotation = bird.getRotation();

   public void act(float delta) {
      if(!isGravityEnabled && isAlive) {
         // Wiggling when no gravity only
         iterator += delta*400;
         float birdOffset = MathUtils.sinDeg(iterator)*5;
      // aplying gravity every frame
      // moving to new position based on current vertical velocity
      bird.setY(bird.getY() + delta*currVerticalVelocity);
      // manage bird rotation based on it's vertical speed
    * manage bird rotation based on it's vertical speed
    * this is a part of code that is not interesting boring and whatever..
   private void manageRotation(float delta) {
      if(isGravityEnabled) {
         if(currVerticalVelocity > -200) {
            float rotation = currVerticalVelocity+200;
            desiredRotation = rotation/15f;
         if(currVerticalVelocity <= -200) {
            float rotation = currVerticalVelocity+200;
            if(rotation < -400) rotation = -400;
            desiredRotation = rotation/4.4f;
         if(desiredRotation != bird.getRotation()) {
            if(desiredRotation > bird.getRotation()) {
               bird.setRotation(bird.getRotation() + 900*delta);
               if(desiredRotation < bird.getRotation()) bird.setRotation(
            if(desiredRotation < bird.getRotation()) {
               bird.setRotation(bird.getRotation() - 900*delta);
               if(desiredRotation > bird.getRotation()) bird.setRotation(
   public void enableGravity() {
      isGravityEnabled = true;
   public void disableGravity() {
      isGravityEnabled = false;
   public void jump() {
      // if bird is dead do not jump (I think I checked it somewhere already)
      if(!isAlive) return;
      // if bird is higher then screen then do not jump
      if(bird.getY() > stage.getHeight()) return;
      // if jumped get the custom variable jump_speed from bird actor and set it 
      as current vertical velocity
      currVerticalVelocity = bird.getCustomVariables().getFloatVariable(
    * Apply gravity each frame (get's delta time since last frame)
   private void gravity(float delta) {
      if(isGravityEnabled) {
         // change curernt velocity based on gravity (gravity changes velocity 
                                                      every second by gravity 
         currVerticalVelocity -= delta*bird.getCustomVariables().
   public CompositeItem getBird() {
      return bird;
   // get's the bird center coordinates as vector 2 needed for collision 
   detection in GameScreenScript
   public Vector2 getBirdCenter() {
      Vector2 vec = new Vector2(bird.getX() + bird.getWidth()/2, bird.getY() + 
      return vec;
   // Kills the bird, for reals
   public void die() {
      currVerticalVelocity = 0;  
      isAlive = false;
      desiredRotation = 0; 


Programming, Design , , ,

Roadblock number one! Dynamically mounting weapons is proving harder than I expected.

4. February 2014


In my head this part of the process of creating a dynamically equipped character in 3D and rendering it to 2D was going to be a breeze.  Conceptually it went something like this...


  • Create a named bone in parent object where the weapon could attach.
  • Create a named bone in the child object where the weapon starts.
  • Find bone one, attach bone two.
  • Go enjoy a beer in smug satisfaction.


Sadly it doesn’t quite work like that.


There are a couple problems here.

1- LibGDX doesn’t have a SceneGraph.  A Scene Graph is basically a data structure that holds relationships in the world.  Essentially this is what scene2D actually is.  Well, LibGDX sorta has a SceneGraph in the form of Model, which is a graph of nodes that compose the model.  There however isn’t a layer above this for creating relationships between models.  This sadly means I can’t (out of the box) do something like myTank.attachObjectAt(turrent,(3,3,3));


2- Modifying bones in LibGDX doesn’t actually seem to do anything.  My first though was… well this is easy enough then, Ill just set the GlobalTransform of the child bone to the location of the parent bone.  This however doesn’t do anything.  I might be missing something here, in fact I probably am.  But I couldn’t get changes to a bone to propagate to the attached model.  This one is likely user error, but after playing around with it for a few days, I am still no further ahead.


3- Bones don’t have direction.  Well, that’s not accurate, bones don’t point in a direction.  Here for example is a sample hierarchy of bones exported in text readable format:

{"id": "Armature",
   "rotation": [-0.497507, 0.502480, -0.502480, 0.497507],
   "scale": [ 1.000000, 1.000000, 1.000000],
   "translation": [ 0.066099, 0.006002, -0.045762],

   "children": [
      {"id": "Bone_Torso",
      "rotation": [-0.498947, 0.501051, -0.501042, -0.498955],
      "scale": [ 1.000000, 1.000000, 1.000000],

      "children": [
         { "id": "Bone_UpArm",
        "rotation": [ 0.007421, -0.000071, -0.009516, 0.999927],
        "scale": [ 1.000000, 1.000000, 1.000000],
        "translation": [ 1.728194, 0.000000, -0.000000],

      "children": [
         {"id": "Bone_LowArm",
         "rotation": [ 0.999846, 0.012394, -0.000030, 0.012397],
         "scale": [ 1.000000, 1.000000, 1.000000],
         "translation": [ 1.663039, 0.000000, 0.000000],

      "children": [
         {"id": "Bone_Hand",
         "rotation": [ 0.999737, -0.016222, -0.000425, 0.016225],
         "scale": [ 1.000000, 1.000000, 1.000000],
         "translation": [ 1.676268, 0.000000, -0.000000]}

As you can see, you have the Armature, which is basically the root of the skeleton.  It’s translation is the start location of the bones in local space ( of the model ).  Each bone within is therefore offset from the bone above it in the hierarchy.  What is lacking ( for me ), is a direction.  As an aside, I can actually confer the direction using the distance between (in this example) Bone_Hand and Bone_LowArm.  This of course requires two bones on both the parent and child models.


Consider this bad drawing.


You have a tank and a turret like so, with the red dots representing bone positions:




So long as your tank and turret are modelled with consistent coordinate systems ( aka, both same scale, same facings, etc ), you can simply locate the tank bone and offset the turret relative, like so:



In this simple example, it works perfectly!


Let’s consider a slightly more advanced situation however. Lets say we are diehard Warhammer fans and want to add sponsons to the side of our tank.

Once again, by modelling consistently with the tank and sponson, we can get:



Yay future tank now looks a hell of a lot like the world’s first tank…  but this is pretty much what we want.  Now lets mount one to the other side of the tank.




Ah shi… that’s not right.  Our second gun is INSIDE the tank.


The problem here is, we can’t depend on the coordinates of the both models matching up anymore.  We need to figure out direction when mounting the new weapon to the tank.  This means we need a facing direction for the bone, and this is something we don’t have.


Again, this problem has proven trickier then expected.  I will share some of my failed approaches shortly as this post got pretty long.


Creating dynamically equipped characters in 2D and 3D games

9. January 2014


Right off the hop for my new game I have to deal with a problem that many games have to deal with but one that could have a huge impact on how my game is structured, so I am going to address it with a proof of concept right up front.   That thing, as the title probably spoils, is character customization.


As I said earlier, this is a pretty common problem in games and something you see questions about quite often if you hang around game development forums for any period of time.  So what do I mean with character customization?  Ever played Diablo or a similar title?  When you change your gear in Diablo, your character is updated on screen.  This behaviour is pretty much expected in this day and age… personally I really hate when I am playing an RPG and the weapon I equip has no affect on my avatar.  That said, it is certainly a non-trivial problem and one that could have a pretty big impact on your game.


Let’s start by taking a look at the various options… at least the ones I can think of.


2D - Pre-render all possible configurations

Of course, brute forcing it is always a possibility and in a few cases may actually be ideal.  Basically for a 2D game, you simply create every combination of sprite for every combination of equipment.  So if you have an animation sequence for “walk_left” and “walk_right”, you would have to create a version for each possible equipable item.  So you might have “walk_left_with_axe” and “walk_left_with_sword” sprite sheets for the different weapon combinations.  If you are rendering your spritesheets automatically from a 3D application, this could actually be the easiest approach.  Of course there are some seriously massive downsides to this approach.  Memory usage quickly becomes outrageous.  For each piece of equipment you double the size of your original sprite sheet for example.  Once you start adding more and more options, this approach quickly becomes unfeasible.  If you only have a very small amount of customization ( two or three weapon options ), this approach may appeal due to it’s simplicity.  With anything more than a couple combinations though, this approach is pretty much useless.


2D – Pre-rendered spritesheet + pre-rendered weapon animation frames.

You can use a regular sprite sheet and simply keep the weapons separate.  So basically you have two separate sprite sheets, one of the character without weapons, one with just the weapons.  Then at run-time you combine them.   Consider these two sprite sheets ( taken from a StackOverflow question ).

Animated Character:

Player SpriteSheet


Weapon SpriteSheet

Then at run-time you combine the two sprites together depending on what is equipped.

In fact, if your weapon isn’t animated ( as in, it doesn’t move, like a sword, as opposed to a weapon like a whip or nunchucks ) you can get by using a hard point system, where you define the mount position of the weapon ( for example, the players right hand ) and orientation.  Basically for each frame of animation, you provide an x and y coordinate as well as rotation amount that represents where and how the weapon should be mounted.  Then at runtime you combine the two sprites, positioning and rotating the weapon sprite relative to the mount/hardpoint. This way, you only need a single image per equipable weapon.

This approach has a couple downsides.  First, you need a separate data file to hold mount point data and possibly a tool to generate it.  Second, it makes bounding/hit detection more difficult as the mounted weapon may exceed the dimensions of the originating sprite.  Third, you need to deal with z-depth issues, you cant simply paste the weapon on top of the sprite, as what happens when the character is walking right but carrying the weapon in the left hand?  To handle this your workflow needs to basically be: render obscured weapons, render character sprite, render foreground weapons.  Finally, weapons with their own animation, like a whip snapping, would require even more effort.

All told, this is probably the easiest while still flexible system for 2D animation.  It requires a bit more work than simply brute forcing your sprite sheets, but the payoffs in reduced size and complexity are well worth it, especially if you have more than a couple items.  One other big win about this approach is then weapons can be re-used across different sprites, a huge win!  Then you can model a single sword and it will be available to all sprite sheets with hard/mount point information available.


3D - Bone/hardpoint system

If your game is pure 3D this is often the way you want to go.  If you character is a knight for example, in your 3D modelling application you create named hard points in your model, either as bones or as an object of some form such as a null object, point or invisible box.  Then at runtime you bind other models to those locations.  So for example, if you equip a long sword and shield, your code searches for the “right_arm_shield” bone and uses it as the parent object for a shield 3D model.  Then you bind a sword to say… the “left_arm_hand” bone.  You can see an example of this behaviour in this UDK example.

This approach is basically identical to the last 2D method mentioned except in 3D and that you dont generally need to define your own hardpoint system, as most 3D packages and engines already support it out of the box, either by binding to a bone or by accessing and parenting 3D objects to named locations.  Like working in 2D, then your weapon and character are two separate entities, like so:


One of the major advantages of 3D over 2D is flexibility.  Most animations in 2D need to be pre-calculated, while in 3D you have a great deal more flexibility with the computer filling in the blanks for you.  Unlike in 2D, additional 3D animations add very little to the data file sizes.


2D Bone based animation

One of the major downsides to 2D animation is, as you add more animations, it takes up more space.  People have been working on solutions, one of the most common of which is 2D bone animation.  How exactly can you use bones on a 2D image file you ask?  That’s a good question!  In 3D, its pretty simple… the motion/influence of the bone transforms the attached geometry.  In 2D, there is no geometry, so how can you do this?

Well, the simple version is, you cut your bitmap or vector image up into body parts.  So instead of a single image of an animated character, you instead of an image for the foot, lower leg, upper leg, torso, waist, shoulder, left upper arm, etc…  Then you can draw 2D bones that control the animation of this hierarchy of images.  There are applications/libraries that support this, making it mostly transparent for you.  Here is one such example from Spine from Esoteric Software.


The character:

Creating Bones


It looks like a single image ( and you can see a couple bones being drawn in the foot/leg area ), but it is actually composed of a few dozen source images:

Set Parent


Basically the workflow goes, you create your traditional image in your regular art program, except instead of creating a single image, you create dozens of hopefully seamless ones representing each body part.  You stitch them together, setting the drawing order ( what’s covering what ), then define bones to create animations.  This has the double advantage of massively decreasing space requirements while simplifying the animation process.  The downsides are creating your initial image are a great deal more difficult and of course, you need to buy ( or roll your own ) bone system, such as Spine. 


Spine is not the only option, there is also Spriter from BrashSoftware and probably others I am unaware of.  Both of these are commercial packages, but then, both are dirt cheap ( IMHO ) with price tags between $25 and $250 dollars, with $60 and $25 dollars being the norm with each package respectively.

The nice thing about taking this segmented bone approach… you basically get the ability to swap components or bind weapons for free.


2.5D hybrid approach

2 1/2D is becoming more and more popular these days.  Essentially a 2.5D game is a 3D game with 2D assets ( such as 2D sprites over a 3D background ), but more commonly its 3D sprites over a 2D background.  How does this work?

Well there are two basic approaches.  You model, texture, animate your 3D model as per normal.  Any character customization you perform you would do as if you were working in full 3D.  Now is where the two different approaches vary, depending on performance, the hardware you are running on, etc…  You can either generate a sprite sheet dynamically.  Essentially when your character is loaded or you change equipment, in the background your game renders a sprite sheet of your updated character containing every animation frame, then you use this sheet as if it was a normal 2D sprite sheet.  The other option is, you render your character each time it moves.  Creating a spritesheet consumes more memory, but very little GPU or CPU demand.  Generating your characters current animation frame dynamically on the other hand, takes almost no memory, but at a much higher CPU/GPU burden.  Which is right for your game is obviously up to you.

Of course the 2.5D approach certainly has it’s share of problems too.  First off, it is the most complicated of the bunch.  Second, you cant do any “by hand” calculations on your generated sprite/spritesheets, as they are now being rendered dynamically.  This means no ability to create pre-calculated bounding volumes for example.  On the other hand, the 2.5D approach gives you most of the advantages of 3D ( compact animation data structure, easy programmable modification, ability to alter texture mapping, lighting effects, etc… ) that 3D does, but with the simplicity of dealing with a traditional 2D world.

One animation to rule them all!

You may be thinking WAHOO… I can cut my work way down now!  All I need to do is animate an attack sequence and then I can simply substitute the different weapon images.  Not so fast I am sorry to say.  Think about it this way…  are the images for swinging an AXE and a Sword the same?  What about a pole arm?  You are still going to have several different animations to support different classes of weapons, but these techniques will still vastly reduce the amount of data and work required while allowing a ton of customization.



So then, what am I going to do?

So, which approach am I taking?  Ultimately I am going to require a great deal of customization, going far beyond the examples described above.  One such example scenario is a Mech with a customizable left weapon… this weapon could be an arm holding a gun, a turret containing one or more guns, or possibly even a large pack of rockets.  Each “weapon” could have it’s own animation set.  Oh, and I am much more proficient in 3D than 2D.  On the other hand, the game itself is a 2D game and I would prefer to keep it that way for the simplicity that brings in a number of areas ( level creation tools, path-finding and other AI tasks, physics, cheating at art, etc… ).  As a result, I am going to try the 2.5D approach, where the mech is created and animated in 3D, dynamically equipped, then rendered to 2D.  I am going to try both pre-rendering sprite sheets and dynamically rendering a single frame and see what the overhead of each is.  I actually have the compounded issue of dealing with enemy characters that are also dynamically generated, so any impact will be magnified many time over!

If I can’t get adequate performance from each approach, I may be forced to go full 3D and emulating a 2D look.  As I said, it’s one of those things that can have a major impact on your game!  That said, I am pretty confident performance wont be too much of a factor.  My immediate take away task list is:

  • get a LibGDX project set up that can load and render an textured, animated 3D model exported from Blender. I am pretty new to 3D in LibGDX ( okay… completely new to it )
  • bind another model to a bone on this model ( aka, a sword to a hand bone )
  • try to dynamically generate a sprite sheet of the character’s complete animation.  Measure resulting memory usage and time required to generate sheet
  • re-architect the code to instead generate each frame of animation per frame on demand.
  • scale both scenarios up to include multiple instances and see results on performance
  • measure performance impact of each approach on both desktop and mobile.


The outcome of this experiment will ultimately decide what approach I take.  Stay tuned if that process sounds interesting!


Oh, and of course, these are only the scenarios I could come up with for dealing with dynamically equipped characters, if you have another idea, please share it!

Design, Programming , , ,

Creating a game sprite: The Concept

7. August 2013


This isn’t an area I spend a ton of time on, as I haven’t got much talent for drawing.  That said, if I just fire up Blender and start modelling I tend to be a lot slower then if I nail down the basics of my concept, at least the proportions and overall shape, before even beginning to model.


In this case my concept was pretty simple… I want to make a jet that is a throwback to classic planes of old like the twin tailed Lockheed P38 Lightning or the DeHavilland Vampire, except with wing mounted engines like the Me-262.  However, I want it to appear near-future modern, like a contemporary of the F22 Raptor or F35 Lightning II.


For non plane buffs, I basically want:


This (P38):



Or This (Vampire):



With engines like these (Me-262):



But more modern/futuristic, like this ( F22 ):




Got it?  So basically I want a retro style twin tailed jet that looks futuristic.


So, time for some doodling!  I have a tendency to start with something really quick, break it down into individual pieces and go from there.  This way I get mostly the correct perspective, but I can work on smaller details instead of big picture… I can also quickly decide what works and what doesn’t.


For this, I worked entirely on my iPad Mini using a 5 dollar stylus and the application iDraw, which is a vector based graphic suite for iOS and MacOS.  Obviously any sketching app would work, as would paper if you have access to a scanner or digital camera.


Here is my first brain dump of the concept, side and top view:



I'm relatively happy with the top view, but hate the under-wing engine and am not a fan at all of the side profile.  I am thinking wingmounted engines don't work too well with the look I am shooting for here.


Instead I am going to switch to a single jet engine, like the Vampire pictured above.  Let’s clean up the tail section a bit and move to a single centrally mounted engine, again top and side view:



OK, I'm pretty happy with that look over all, now I’m going to look at the top and wing layout.  I start with:



Not really a fan.  Doesn’t make a ton of sense for the wing to extend out in front of the air intake.  Instead I decide to extend the air intake forward quite a bit, like so:



I like the overall shape better, it’s starting to look more modern, but I am still not a fan of the cockpit, nor have I nailed down the side profile yet.


On to the side profile.  I start with a quick sketch of the side, now using the forward wing, air intake and single engine. 



I did a quick sketch in black and it’s too fat and not very modern.  Drew over it in red more to my liking.


Now it’s a matter of figuring out the cockpit I am still not happy with, as well as the front view.



Started with a 3/4 view of the cockpit area, a rough front sketch, then a slightly cleaner one.  Over all, I’m pretty happy with the front profile.


So, I’ve got my basic design down, now the most important part, as a modelling aid and so I get the proportions generally right, I trace over the side and top view of my design using the line tool and end up with this:



The basic outline for the side and top profile of our jet.  I am certainly going to win no awards for artistic talent, but it should be sufficient for my needs and over all, I’m fairly pleased with the design concept.


You will see how we use it in the next part when we fire up Blender.

Art, Design


Phaser 2.1.1 released

12. September 2014



Apparently on September the 9th Phaser 2.1 was released  followed quickly by the ohhhh oops Phaser 2.1.1 hotfix release.  It is important to note that this releasePhaser Logo has some code breaking changes in it, so read carefully before upgrading to see how your code might be impacted!



The release notes:


Version 2.1.1. of Phaser is an emergency point release. It addresses a potential race condition that could happen in States that tried to change state from the create method but had an empty preloader or pre-cached assets.

The list of changes below are from 2.1.0 - 9th September 2014

New Features
  • Updated to p2.js 0.6.0 - this was an API breaking change, so please see the p2.js section of this change log specifically if you're using p2 in your game.
  • If you are using CocoonJS, please set your game render type to CANVAS and not WEBGL or AUTO. You should also disable any of the ScaleManager screen resizing or margin setting code. By default in this mode CocoonJS will now set 'screencanvas=true' which helps with performance significantly.
  • Ninja Physics is no longer included in the build files by default. Not enough people were using it, and not enough contributions were coming in to help polish it up, so we've saved the space and removed it. It's still available in the grunt build files if you require it, but we're deprecating it from the core library at this time. It will make a return in Phaser3 when we move to a modular class system.
  • ScaleManager has a new scaleMode called RESIZE which will tell Phaser to track the size of the parent container (either a dom element or the browser window if none given) and set the canvas size to match it. If the parent changes size the canvas will resize as well, keeping a 1:1 pixel ratio. There is also a new ScaleManager.setResizeCallback method which will let you define your own function to handle resize events from the game, such as re-positioning sprites for a fluid responsive layout (#642)
  • The width and height given to the Phaser.Game constructor can now be numbers or strings in which case the value is treated as a percentage. For example a value of "100%" for the width and height will tell Phaser to size the game to match the parent container dimensions exactly (or the browser window if no parent is given). Equally a size of "50%" would tell it to be half the size of the parent. The values are retained even through resize events, allowing it to maintain a percentage size based on the parent even as it updates.
  • Device will now detect for Kindle and PS Vita (thanks @lucbloom)
  • Device will now detect for Cordova (thanks @videlais #1102)
  • Arcade Physics Body.skipQuadTree is a new boolean that if set to true when you collide the Sprite against a Group it will tell Phaser to skip using a QuadTree for that collision. This is handy if this Body is especially large.
  • Arcade Physics World.skipQuadTree will disable the use of all QuadTrees in collision methods, which can help performance in tightly packed scenes.
  • Cordova 'deviceready' event check added (thanks @videlais #1120)
  • Loader.useXDomainRequest boolean added. If true (the default is false, unless the browser is detected as being IE9 specifically) it will use XDomainRequest when loading JSON files instead of xhr. In rare IE edge-cases this may be required. You'll know if you need it (#1131 #1116)
  • Added support for Tiled objects type field (thanks @rex64 #1111)
  • Tile properties are now copied from the Tiled JSON data to the Phaser.Tile objects when parsed (thanks @beeglebug #1126)
  • All Images now have a frameData value, even if it's only one frame. This removes lots of engine code needed to check if images are sprite sheets or not, and simplifies game code too (thanks @lucbloom #1059)
  • Added a new Phaser.Rope object. This allows for a series of 'chained' Sprites and extends the Rope support built into Pixi. Access it via game.add.rope (thanks @codevinsky #1030)
  • Phaser.Device.isAndroidStockBrowser will inform you if your game is running in a stock Android browser (rather than Chrome) where you may wish to scale down effects, disable WebGL, etc (thanks @lucbloom #989)
  • Phaser.Camera has a new property position which is a Point object that allows you to get or set the camera position without having to read both the x and y values (thanks @Zielak#1015)
  • TileSprite now has the alive property, which should help with some Group operations (thanks @jonkelling #1085)
  • Events.onDestroy is a new signal that is dispatched whenever the parent is being destroyed. It's dispatched at the start of the destroy process, allowing you to perform any additional house cleaning needed (thanks @jonkelling #1084)
  • Group.onDestroy is a new signal that is dispatched whenever the Group is being destroyed. It's dispatched at the start of the destroy process, allowing you to perform any additional house cleaning needed (thanks @jonkelling #1084)
  • ScaleManager.destroy now removes the window and document event listeners, which are no longer created anonymously (thanks @eguneys #1092)
  • Input.Gamepad.destroy now destroys all connected SinglePads and clears event listeners.
  • SinglePad.destroy now clears all associated GamepadButton objects and signals.
  • Device.node and Device.nodeWebKit are two new properties (thanks @videlais #1129)
  • and my values are get and set in meters with no pixel conversion taking place.
  • and my values are get and set in meters with no pixel conversion taking place.
  • Pointer.dirty is a new boolean that is set by the InputHandler. It tells the Pointer to re-check all interactive objects it may be over on the next update, regardless if it has moved position or not. This helps solve issues where you may have a Button that on click generates a pop-up window that now obscures the Button (thanks @jflowers45 #882)
  • SoundManager.destroy is a new method that will destroy all current sounds and reset any callbacks.
  • StateManager.clearCurrentState now handles the process of clearing down the current state and is now called if the Game is destroyed.
  • Game.destroy now clears the current state, activating its shutdown callback if it had one. It also now destroys the SoundManager, stopping any currently running sounds (#1092)
  • Animation.onUpdate is a new event that is dispatched each time the animation frame changes. Due to its intensive nature it is disabled by default. Enable it withAnimation.enableUpdate = true (#902)
  • Device now has new features to support detection of running inside a CocoonJS.App (thanks@videlais #1150)
  • Support for CocoonJS.App's 'onSuspended' and 'onActivated' events, making it so that the timers and sounds are stopped/started and muted/unmuted when the user swaps an app from the background to the fore or the reverse (thanks @videlais #1152)
  • Canvas.removeFromDOM(canvas) will remove a canvas element from the DOM.
  • Game.destroy now removes the games canvas element from the DOM.
  • ScaleManager.setMinMax(minWidth, minHeight, maxWidth, maxHeight) is a handy function to allow you to set all the min/max dimensions in one call.
  • ArcadePhysics.collide and overlap can now accept 2 Arrays of objects to be used in the collision checks (thanks @ctmartinez1992 #1158)
  • RetroFont has a new property called frameData which contains the Frame objects for each of the letters in the font, which can be used by Sprites.
  • Phaser.Canvas.setImageRenderingCrisp now sets image-rendering: pixelated, perfect for pixel art, which is now supported in Chrome 38.
  • Phaser.Mouse will now add a listener to the window to detect mouseup events. This is used to detect if the player releases the mouse while outside of the game canvas. Previously Pointer objects incorrectly thought they were still pressed when you returned the mouse over the canvas (#1167)
  • Rectangle.centerOn(x,y) allows you to quickly center a Rectangle on the given coordinates.
  • Group.addMultiple allows you to pass an array of game objects and they'll all be added to the Group in turn.
  • The StateManager will now check if a State has a method called resize. If it does, and if the game is running in the RESIZE Scale Mode then this method will be called whenever the game resizes. It will be passed two parameters: width and height that will match the games new dimensions. Resizing can happen as a result of either the parent container changing shape, or the browser window resizing.
  • Rectangle.topRight returns a Point object that represents the top-right coordinate of the Rectangle.
  • The grunt script now builds a new version of Phaser without any physics (including Arcade Physics), Tilemaps or Particles. This build is called phaser-no-physics.js and works stand-alone. Please note that things like the GameObjectFactory aren't changed, so they will still try and create a Tilemap for example should you ask them to (thanks @eguneys #1172)
  • Camera.roundPx is a new boolean. If set to true it will call view.floor as part of its update loop, keeping its boundary to integer values. Set to false to disable this from happening (#1141)
  • Phaser.Easing.Default is a new property that is used when a specific type of ease isn't given. It defaults to Linear.None but can be overridden to anything (thanks @alvinsight)
  • TypeScript definition updates to help fix for the noimplicitany option (thanks @Waog#1088)
  • TypeScript definitions fixes and updates (thanks @clark-stevenson @englercj @saikobeeand @rhmoller)
  • All of the Pixi geom classes have been removed from the build file as they aren't needed (the Phaser.Geom classes overwrite them), saving some space in the process.
  • Improved consistency of clone methods on geometry classes (thanks @beeglebug #1130)
  • Removed Cache.isSpriteSheet method as no longer required (see #1059)
  • Added Cache.getFrameCount to return the number of frames in a FrameData.
  • Input.setMoveCallback has been removed due to deprecation.
  • BitmapData.refreshBuffer has been removed and replaced with BitmapData.update.
  • BitmapData.drawSprite has been removed due to deprecation. Use BitmapData.draw instead.
  • Pointer.moveCallback has been removed due to deprecation.
  • SinglePad.addButton has been removed due to deprecation.
  • P2.Body.loadData has been removed due to deprecation.
  • P2.World.defaultFriction and defaultRestitution have been removed due to deprecation.
  • Canvas.create noCocoon parameter has been removed due to deprecation.
  • Color.getColorInfo, RGBtoHexstring, RGBtoWebstring and colorToHexstring has been removed due to deprecation.
  • P2.PointProxy.x and y values are now returned in pixels (previously they were returned in meters). See for meter values.
  • P2.InversePointProxy.x and y values are now returned in pixels (previously they were returned in meters). See for meter values.
  • Arcade.overlap and collide are now more consistent about allowing a Group vs. Group or Group vs. Array of Groups set (thanks @pyromanfo #877 #1147)
  • The Pointer move callbacks are now sent an extra parameter: fromClick allowing your callbacks to distinguish between the Pointer just moving, or moving as a result of being pressed down (thanks @iforce2d #1055)
  • GamePad and SinglePad onAxisCallback parameters have changed. You are now sent: this (a reference to the SinglePad that caused the callback), the axis index and the axis value in that order.
  • If Time.elapsed was > Time.timeCap it would reset the elapsed value to be 1 / 60. It's now set to Time.timeCap and Time.timeCap defaults to 1 / 60 * 1000 as it's a ms value (thanks@casensiom #899)
  • Tiled polylines are now imported into the map objects property as well as map collision (#1117)
  • Tile.setCollision now adjusts the tiles interesting faces list as well, this allows you to create one-way jump tiles without using custom callbacks on a specific tile basis (thanks@RafaelOliveira #886)
  • Stage.offset has been moved to ScaleManager.offset
  • Stage.bounds has been removed, you can access it via Stage.getBounds.
  • Stage.checkOffsetInterval has been moved to ScaleManager.trackParentInterval
  • ScaleManager.hasResized signal has been removed. Use ScaleManager.setResizeCallback instead.
  • The World bounds can now be set to any size, including smaller than the game dimensions. Before it was locked to a minimum size of the game canvas, but it can now be anything.
  • ScaleManager.orientationSprite has been removed because it never displayed correctly anyway (it would be distorted by the game scale), it will be bought back in a future version by way of a custom orientation state.
  • ArcadePhysics.overlap has been updated so that the Body.overlapX/Y properties are set to the amount the two bodies overlapped by. Previously they were zero and only populated during the separation phase, but now the data is available for just overlap checks as well. You can then use these values in your ovrelap callback as required - note that they are changed for every check, so a Sprite overlap tested against 10 other sprites will have the overlapX/Y values updated 10 times in a single collision pass, so you can only safely use the values in the callback (#641)
  • Cache.getImage now returns null if the requested image wasn't found.
  • BitmapData now returns a reference to itself from all of its drawing related methods, allowing for easy function chaining.
  • The default size of a BitmapData if no width/height is given has been changed from 100x100 to 256x256.
  • Phaser.Text.destroy will now destroy the base texture by default (#1162)
  • BitmapData.copyPixels is now called BitmapData.copyRect and the method signature has changed.
  • BitmapData.draw method signature has changed significantly.
  • Phaser.Canvas.getSmoothingEnabled will return true if the given context has image smoothing enabled, otherwise false.
  • Math.numberArrayStep is a new method that allows you to return an array of numbers frommin to max including an optional step parameter (thanks @codevinsky #1170)
  • Removed redundant if check from StateManager.preUpdate (thanks @FedeOmoto #1173)
Bug Fixes
  • Remove escaping backslashes from RetroFont text set documentation (thanks @jackrugile#1051)
  • Phaser.Loader was incorrectly getting the responseText from _xhr instead of _ajax on IE9 xDomainRequests (thanks @lardratboy #1050)
  • Phaser.Physics.P2.addPolygon now takes a nested array again (thanks @wayfu #1060)
  • Fix for previous PR #1028 where the P2.setBoundsToWorld call was overriding setBoundsToWorld in the P2 constructor (thanks @Dumtard #1028)
  • Fix for scale issues in CocoonJS using webgl renderer and screencanvas (thanks@txusinho #1064)
  • Resolves issue with pixel perfect click / over detection on Sprites that used trimmed image atlases for animations or frames > 0.
  • Group.swap() updates the Z index values properly (thanks @Blank101 #1090)
  • Device now recognises ChromeOS as a desktop (thanks @alvinsight @hilts-vaughan#1091)
  • Fixed Point.rotate bug (thanks @gamedolphin #1107)
  • InputHandler.checkBoundsRect was incorrectly assigning a property in Sprites fixed to the camera being dragged left (thanks @CraigBeswetherick #1093)
  • Swapped argument order of Rectangle.containsRect (thanks @beeglebug #1095 #1125)
  • The Game configuration object "renderer" property was being wrongly assigned to Game.renderer instead of renderType (thanks @FedeOmoto #1127)
  • Fixed Group.removeBetweens default endIndex (thanks @darfux #1142)
  • Debug.cameraInfo no longer crashes if the camera bounds are nulled (thanks @wayfu#1143)
  • Camera.setBoundsToWorld no longer crashes if the camera bounds are nulled (thanks@wayfu #1143)
  • Fixed the resolution uniform type in the SampleFilter (thanks @VictoryRice #1137)
  • Calling P2.Body.destroy or ArcadePhysics.Body.destroy wouldn't null the parent sprite body, causing it to error in the next update (thanks @jonathanhooker #1077)
  • BitmapFonts are now correctly added to the Cache._bitmapFont array and returned via Cache.getBitmapFont (thanks @prudolfs #1076)
  • InputHandler docs updated to avoid Pointer data-type confusion (#1097)
  • If you used a single Game configuration object and didn't specify the enableDebug property it would crash on Debug.preUpdate (thanks @luizbills #1053)
  • The P2.World.postBroadphaseHandler now checks if the returned pairs array is empty or not before processing it (thanks @wayfu #934)
  • Tilemap.hasTile now checks the Tile.index value and will return false if the index is -1 (i.e. a non-active tile) (thanks @elgansayer #859)
  • Sound.restart used to cause the Sound to double-up if it was already playing when called. Now correctly stops the sound before restarting it (thanks @wombatbuddy #1136)
  • GamePad axis detection now works again properly in Firefox (#1035)
  • GamepadButton.justPressed and justReleased now correctly report if the button has just been pressed or released (thanks @padpadpad #1019)
  • TilemapParser.getEmptyData now correct adds an empty bodies array into layers. This fixes an issue where p2 couldn't convert a csv map into collision tiles (thanks @sru #845)
  • CocoonJS doesn't support mouse wheel events so they've been moved into a conditional check (thanks @videlais #1151)
  • ScaleManager window.resize handler would constantly dispatch enterPortrait and enterLandscape events on window resizing, regardless if it actually entered that orientation or not.
  • Added Sound._muteVolume which stops Firefox and IE9 crashing if you try to unmute a sound that hasn't yet been muted, which can also happen as a result of a game visibility change (thanks @osmanzeki #1108 #1123)
  • P2.World.getSprings used to return an empty array, but now returns all the Springs in the world (#1134)
  • Tween.generateData would skip the end values in the data array. They are now included as the object in the final array element.
  • Rectangle.bottom setter swapped the order of the calculation (thanks @JakeCoxon #1165)
  • Phaser.Text wouldn't render the text to its local canvas if you passed the text on the constructor and didn't add it to the display list. If a string is given it now updates the local canvas on creation.
  • Signal.removeAll would ignore the context parameter and remove all bindings regardless (thanks @alect #1168)
  • P2.Body.addCapsule didn't use to pass the radius value through pxm, but now does so you have to specify it in pixels, not meters.
p2.js 0.6.0 Changes and New Features
  • DistanceConstraint signature changed to take the new localAnchors.
  • World.createDistanceConstraint signature changed to include new local anchors (thanks@rhmoller #1169)
  • RevoluteConstraint signature changed to include worldPivot.
  • P2.Body now uses the new Body.type value instead of Body.motionState, however as P2.Body already have a property called type we have left the motionState getter/setter in for now.
  • World.enableBodySleeping has been removed and replaced with World.sleepMode.
  • Phaser P2.Springs are now LinearSprings by default.
  • World.createRotationalSpring will now let you create rotational springs.
Breaking changes
  • Renamed property .motionState to .type in class Body.
  • Changed constructor of RevoluteConstraint. Now the local pivots are passed as options instead of direct arguments. See the constraints demo.
  • Removed World.prototype.toJSON and .fromJSON.
  • Removed properties .enableBodySleeping and .enableIslandSleeping from World instances. The enum .sleepMode can be used instead. See the sleep demo.
  • Converted Spring to a base class for the new LinearSpring and RotationalSpring classes. LinearSpring can be used as the old Spring.
  • Utils.ARRAY_TYPE can now be overridden by injecting a global called P2_ARRAY_TYPE. Support for GLMAT_ARRAY_TYPE has been removed.
Other changes
  • Added flag .enableFrictionReduction to Narrowphase.
  • Added RevoluteConstraint.prototype.setLimits.
  • Added PrismaticConstraint.prototype.setLimits.
  • LockConstraint, DistanceConstraint, and GearConstraint can now be constructed from current body transforms.
  • RevoluteConstraint can now be constructed from the current body transforms and a world point.
  • Material id can now be passed via constructor.
  • ContactMaterial instances now have a property .contactSkinSize.
  • Added method Body.prototype.getAABB.
  • Limits for DistanceConstraint. See the DistanceConstraint demo.
  • Added Body.prototype.overlaps.
  • Added class OverlapKeeper.
  • If substepping is used in World.prototype.step, the substeps are aborted if slower than real time.
  • Added Heightfield/Convex and Heightfield/Circle collision support.
  • Added property .overlapKeeper to World.
  • EventEmitter.prototype.has can now check if any listeners were added to a given topic.
  • Added Utils.defaults.


In reading through the changes, I do not believe any of the GameFromScratch Phaser tutorial series will be impacted if you use the newest version.

News ,

Cocos2D 3.1 and SpriteBuilder 1.2 released

12. September 2014


I just received the following announcement from the Cocos2D team, which oddly is not yet on their site.  There has been a new release of the seminal Cocos2D library, as well as a new version of the SpriteBuilder tool.


SpriteBuilder 1.2 and Cocos2D 3.2 are here!




We are pleased to announce the launch of brand new versions of SpriteBuilder and Cocos2D-Swift! The biggest news in the 1.2 version of SpriteBuilder (change log) is the addition of the packages feature. Packages give you greater control over how you can share SpriteBuilder content, including images, audio files, and more. It allows you to group resources together and to export or import them as a single unit for ease of management. This is great if you want to share elements used in your game, either between your own projects or with the SpriteBuilder community. We're working on packages support in Cocos2D 3.3 that will make this feature even more useful for game developers, so stay tuned!


Cocos2D 3.2 adds the new and exciting CCEffects API, which allows you to add blurs, color, reflections, and many other cool effects to your sprites with only a single line of code! Check out our latest blog post for more details on CCEffects.


Cocos2D 3.2 also introduces a change to project templates that will streamline and simplify developer workflow. In effect, SpriteBuilder is now the official way to generate Cocos2D projects, as the Cocos2D-specific Xcode templates have been removed. This change makes it easier to upgrade projects to later versions of Cocos2D and eliminates a code path that was difficult to maintain and test. SpriteBuilder is free and open source as well as being the official IDE for Cocos2D, but it's not required for use with a Cocos2D codebase beyond the project creation step.



Download SpriteBuilder from the Mac App Store (includes Cocos2D-Swift) ›


Learn more about SpriteBuilder on our community forum!


Cocos2D is an open source 2D game framework for building games with Objective C and XCode.  You can download it here.

News ,

Two new open source game tool releases. DT3, a 3D game engine and a generic level editor from Sony

3. September 2014


Over the past day there have been a pair of announcements on reddit that are relevant to game developers.  The first is Sony released and open source generic 3D level editor, generically enough called ATF Level Editor.  ATF stands for Authoring Tools Framework, which they open sourced earlier, ATF is a framework of mostly C# based components for making game tool development easier.  It was used to build games such as The Last of Us, and games in the KillZone series.


As to the level editor, in Sony’s own words:


The LevelEditor is a software tool used to design levels (maps, campaigns, and virtual worlds) for a video game. A level editor is used by a game designer.


The standalone LevelEditor is a fully functional modern level editor. Using the LevelEditor, you can design a game world for any video game engine. You can create and lay out terrain, place static game objects in the world (such as rocks, plants, street lights, or buildings), place light sources for game objects, and place Linears for dynamic game objects.


The LevelEditor leverages the Authoring Tools Framework and C# for user interface and data management, and leverages the power of C++ and Microsoft® DirectX® 11 for 3D rendering.


Originally built from the Authoring Tools Framework, the LevelEditor offers a WYSIWYG interface and a variety of features that support asset management, game object creation, scene layout, and cross-team development. The LevelEditor can also be customized and extended by creating plug-ins. For more about the Level Editor's capabilities, see LevelEditor Features & Benefits.


The following LevelEditor features help you construct game levels efficiently and collaboratively:

  • Work with a variety of file formats
  • Associate assets with game objects
  • Position, rotate, scale, and snap game objects precisely
  • Edit game object properties
  • Show or hide groups of game objects to unclutter the view as you work
  • Construct Linears (lines and curves)


Screenshot of the Editor in action:




The editor is available on Github and you can get more information on the Wiki.  The documentation is available here.


This looks like a great option for people that want to roll their own engine, but still want great tooling support.  All that is required to integrate within your own pipeline is a converter to read Sony’s XML output.



Donkey Tech 3 Engine


The next announcement was the open source release of the Donkey Tech 3 engine.  This was an in-house developed game engine that supports the most popular platforms ( desktop and mobile ).  The code is primarily C++/ Qt based.  The engine itself includes a 3D component based world editor as well as a visual graph scripting system, somewhat similar to Unreal’s Blueprint system.


Documentation is incredibly sparse, there isn’t even really an overview of what the engine does.  Here is the author’s reddit post:


DT3: Donkey Tech 3 by Smells Like Donkey Software Inc.

EDIT: Funny. I forgot the link to the engine. It's HERE

Here's my game engine that I have been meaning to open source for years now. It has a full editor, node based scripting system, DSP audio effects, Particles systems, and supports 2D or 3D games. It's built to be completely generic as to what kinds of games you want to make.

Here's some videos of it in action: Editor, Scripting, Sound, Keyframing

More Info: DT2 Portal - slightly older version of the engine

I hope you find it useful. Enjoy!


Here is a description of the previous version of the engine:


DT2 contains many cutting edge features to make rapid game development possible:

  • Fully Open Source (when released!)
  • Customizable editor based on Qt 5.0.2.
  • Extensive Visual scripting system featuring lazy updates for faster evaluation.
  • Asset packaging system.
  • Fully integrated and flexible GUI system with FreeType Font support.
  • OpenGL and OpenAL support.
  • Flexible file format support for WAV, OBJ, FBX, 3DS, PNG, JPEG2000, PVR, Ogg Vorbis and Ogg Theora as well as many optimized (and proprietary) formats.
  • Hot loading of all resources for faster artist iterations.
  • Sprite and Bone (GPU skinning) animation systems.
  • Streaming audio sound effects with OpenAL with built in DSP filter framework. Streaming music system for hardware accelerated music playback where available.
  • Streams both ASCII and obfuscated binary file formats for reading and writing level data. Save anywhere is fully supported.
  • Built in networking for multiplayer games over UDP. Full network serialization.
  • Integrated profiling tools.
  • Pluggable Renderer. Deferred shading renderer on Mac and PC enables hundreds of simultaneous dynamic lights.
  • Hardware Shader Support. Examples of Normal mapping, Parallax mapping, etc.
  • Modern C++ programming methodology.
  • Supported platforms include Mac OS X, Windows 7&8, iPhone, Android and WinRT. Future ports to game consoles.
  • Very flexible particle system built on visual scripting system.
  • Multithreading support.
  • Integrated Unit testing framework.
  • Optional Plug-ins for Chipmunk Physics, Bullet Physics, Ogg Vorbis, Ogg Theora, FBX, as well as proprietary 2D Sprite tools.


Here is a video showing scripting within the engine:


The game engine code, a sample game and an empty project can all be download on Github.

News ,

LibGDX 1.3 released

9. August 2014


LibGDX, the cross platform, Java based, open source gaming library for iOS, Android, HTML5 and Desktop has just reached version 1.3.  The details of the new release:



  • API Addition: Added Input.isKeyJustPressed
  • API Addition: multiple recipients are now supported by MessageDispatcher, see
  • API Change: State#onMessage now takes the message receiver as argument.
  • API Addition: added StackStateMachine to the gdx-ai extension.
  • API change: ShapeRenderer: rect methods accept scale, more methods can work under both line and fill types, auto shape type changing.
  • API change: Built-in ShapeRenderer debugging for Stage, see
  • Files#getLocalStoragePath now returns the actual path instead of the empty string synonym on desktop (LWJGL and JGLFW).
  • Fixed and improved xorshift128+ PRNG implementation.
  • Added support for Tiled’s animated tiles, and varying frame duration tile animations.
  • Fixed an issue with time granularity in MessageDispatcher.
  • Updated to Android API level 19 and build tools 19.1.0 which will require the latest Eclipse ADT 23.02, see for how things are broken this time…
  • Updated to RoboVM 0.0.14 and RoboVM Gradle plugin version 0.0.10
  • API Addition: added FreeTypeFontLoader so you can transparently load BitmapFonts generated through gdx-freetype via AssetManager, see
  • Preferences put methods now return “this” for chaining
  • Fixed issue 2048 where MessageDispatcher was dispatching delayed messages immediately.
  • API Addition: 3d particle system and accompanying editor, contributed by lordjone, see pull request 2005
  • API Addition: extended shape classes like Circle, Ellipse etc. with hashcode/equals and other helper methods, see pull request #2018
  • minor API change: fixed a bug in handling of atlasPrefixes, see pull request 2023
  • Bullet: btManifoldPoint member getters/setters changed from btVector3 to Vector3, also it is no longer pooled, instead static instances are used for callback methods
  • Added Intersector#intersectRayRay to detect if two 2D rays intersect, see pull request 2132
  • Bullet: ClosestRayResultCallback, AllHitsRayResultCallback, LocalConvexResult, ClosestConvexResultCallback and subclasses now use getter/setters taking a Vector3 instead of btVector3, see pull request #2175
  • 2d particle system supports pre-multiplied alpha.
  • Bullet: btIDebugDrawer/DebugDrawer now use pooled Vector3 instances instead of btVector3, see pull request #2174



You can download the LibGDX setup app here.  Of course, has a complete set of LibGDX tutorials to get you started.

Programming, News ,

How my upcoming vacation lead to a new game dev project

30. July 2014


It’s that time of year… time to put everything on hold for a while, get away for a bit and consume far too much food and drink.  Yes, GameFromScratch is about to go on vacation for a few days.  Bonus points if you can figure out where I am going from the picture below!




… anyways, being a game developer, do we ever really take vacation?  We are seemingly always thinking about how to accomplish something or other in our head.  This trip will no doubt be no different…


Actually, it will be different on one level.  I recently acquired a full sized iPad Air ( until now, I’ve only had a Mini ) and I am thinking about doing an entire series of creating games entirely on an iPad.  Let’s see just how much you can accomplish entirely on an iPad.  This means coding, game asset creation, everything on the iPad.


I’ve actually already purchased a number of items required.  I purchased a license of Codea back when I first got my iPad Mini, but I found the limited screen size to be a rather big annoyance.  I also have purchased several different drawing programs, including Paper, PhotoShop, ArtRage and iDraw.  I even have a functioning blog packaging, so I can right about the process.  Not really certain how I will tackle audio creation.  Another major downside is asset sharing…  this is one of the major limitations of iOS, sharing data between apps is pretty horrible.  The defacto workaround seems to be DropBox, but that depends entirely on how well the hotel’s Wifi works.  It could end up being a fun little side project.  Or it could be a complete waste of time… I guess we shall see.


Fortunately what it will be is a good LUA refresher, which I need for an upcoming and much larger project I am embarking on when I return.  More news on that later.


So anyways, that’s what I am about to do… if goes silent until next Wednesday… guess that means the hotel wireless was pretty awful.  In which case, have a great week!

News, Totally Off Topic