18. November 2014


In this video tutorial, we create our first LibGDX project.  This tutorial covers that basic layout of a LibGDX application, adding new assets to a project and looks at how the initial project is composed and how multiple platforms are supported.  We then go through the initial code, then look in depth at coordinate systems, then move on to creating a sprite.  Finally we look at positioning, scaling and rotating a sprite with a SpriteBatch.


This tutorial assumes you already have your development environment setup and know how to run a LibGDX application in your chosen IDE.  If you do no, please watch these videos first.


The following is the video tutorial.  It was recorded in 1080p and the complete version can be viewed here.



The following is the final code generated:


package com.gamefromscratch;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class HelloWorld extends ApplicationAdapter {
   SpriteBatch batch;
   Texture img;
   Sprite sprite;
   public void create () {
      batch = new SpriteBatch();
      img = new Texture("HelloWorld.png");
      sprite = new Sprite(img);
            Gdx.graphics.getWidth()/2 - sprite.getWidth()/2,
            Gdx.graphics.getHeight()/2 - sprite.getHeight()/2);

   public void render () {
      Gdx.gl.glClearColor(0, 0, 0, 1);
      batch.draw(sprite, sprite.getX(),sprite.getY(),sprite.getWidth()/2,


Here is the image that was used in this tutorial:


Programming , , ,

17. November 2014


As you may be able to tell from some of my recent posts I’ve been working more and more often on my iPad when it comes to creating pixel graphics.  When working on my PC or Mac I have my trusty Wacom Intuos tablet, but on iPad its obviously a much different beast.  First off, unlike say the Surface Pro, the iPad screen simply isn’t made for working with a tablet, so most of the tablets that are on the market are basically glorified fake fingers.  This however is slowly changing as we will see shortly.


When it comes to choosing an iPad stylus you are given an amazing variety of options, but actually remarkably little in terms of difference.  Essentially what I am saying is, although there are literally hundreds of stylus available, other than ascetics, they are basically 99% identical.  Let’s look at the various types available.


The Fake Finger


As I said earlier, most stylus on the market are basically just a fake fingertip on a stick.  When you go to your local Best Buy, 95% of tablets fit this description.  Here is my trusty virtual finger:



This is a generic Targus stylus, which can be had on Amazon for about $10.  I picked this one because I found it attractive and comfortable to hold.  If you are looking at a stylus and its $20 or under, all of the following probably applies to it.  They will do the deed, but your contact can be best described as… mushy.  Here is the stylus in action:



Let’s just say, high precision work isn’t going to be fun with these.  Basically its about the same as using your finger tip, just without the rest of your hand to get in the way.


The Good

  • Cheap
  • More pen like than using your finger
  • Works on any device with any application

The Bad

  • low precision
  • resistance when dragging on screen can be awful
  • palm on screen gives applications fits.



Personally, I wanted a stylus with a bit more precision, which lead me…


The More Precise Finger


When you want to do highly detailed and sharp lines, a standard stylus is not a great option.  The contact surface is simply too fat and you have to spend a lot of time extremely zoomed in to pull it off.  Fortunately there is an option and it works incredibly well.

The Adonit Jot.  The Jot can be had for about $30, here’s mine:



As you can see, the tip is actually a clear flat disk on a pivot.  As I said earlier, it’s fragile, so you really want to make sure you put the cap on it when not using it.  It’s also magnetized, so it can stick to the side of your device.  I personally find it annoying as hell because it means I have to pull all the change of it before I can use it, and I’m not exaggerating either, the magnet on this thing is stupidly strong…


Here is a typical scene when I remove it from my pocket:


There is a nice rubberized grip, but the key feature is that tip, here it is in action:


It really does enable you to create very highly precise lines and the friction between the tip and screen is somewhat similar to paper and pencil.  The palm detection will get infuriating though, although I have found a very simple work around Ill share later.  I also have found at certain angles it stops tracking occasionally.


The Good

  • Reasonably inexpensive
  • Works on any device with any application
  • High Precision
  • Comfortable


The Bad

  • highly fragile tip, always use the cap when not in use!
  • 2 – 3x more money than a typical stylus
  • doesn’t track right at about a 45 degree angle
  • palm on screen causes fits


For high precision drawing, this is hands down my favorite.  The difference between using one of these and a standard stylus is night and day.  However sometimes the LAST thing you want is to be super precise.  If for example you are painting, you’d rather have that painterly feel instead.  Well, there is a stylus for you too!


The Paint Brush


Next up is Nomad Paintbrush Stylus, which retails for about $40.  Here’s mine:


The key feature here is the paint brush style tip:



It really feels like a paint brush when you use it.  It’s an impressive trick they have pulled off and it allows you to achieve effects, like feathering and flicking, that you simply can’t with other stylus.  That said, this is useful for painting and that is absolutely it.  Precision is almost impossible ( that’s kinda the point ), and even selecting buttons and such can be a bit irritating.


The Good

  • Effectively mimics a paint brush
  • It’s cool, admit it, you find it cool.  It looks cool, it feels cool, so far as stylus go, this one is pretty freaking cool.
  • Most “natural” feel all of stylus used, glides nicely on surface
  • Works on any device


The Bad

  • low precision, its by design of course, but it can get annoying
  • getting pretty pricey at $40
  • palm gets in the way



The Next Generation


The future is here and two new stylus are leading the pack!


The first is from Wacom, the Intuos Creative Stylus 2 for $80 and the Adoit Jot Touch for $100.  These two products are very similar in strengths and weaknesses.


The Wacom Intuos:



The Adoit Touch with PixelPoint:



Both of these offer 2048 levels of sensitivity, something unique to them in this roundup.  Both are Bluetooth powered.  Both have small “nubs” and both have palm detection software to prevent the annoyances that all of the above offer.


Neither is ready for prime time either, which is infuriating, as I so wanted to buy both of them!  That’s my inner gadget addiction talking, and that is a very strong addiction indeed.


So, what’s wrong?  It’s two fold, software support and execution.


The biggest problem is, in order to take advantage of what these stylus have to offer, it needs to be supported in the application.  Sadly each has only about half a dozen applications that support them.  When an application does support them, the reviews seem to be mixed.  I read review after review for both products trying to decide which one to purchase and in the end decided neither appears ready for prime time.  Too many applications I use ( ProCreate, iDraw, OneNote ) simply aren’t supported yet.  Many reviews state that palm detection didn’t work, or spoke of constant disconnects.


Make no mistake, Bluetooth stylus are the future, it’s just not quite the future yet.  Apparently when you use the right application and the device works properly, the experience is amazing.  I hope they get the kinks worked out quickly.


Palm Detection, Ghetto-Style


One common problem with all but the newest stylus is palm detection.  When you draw with pen and paper, the worst that happens if your palm touches the screen is you might smudge your work slightly.  On a tablet however, the outcome is quite different.  Either your drawing is disrupted completely, or worse, you draw where your palm touches.


The work around?



I decided to try drawing wearing my workout gloves.  Standard weight lifting gloves have a leather pad across the palm, and at least on an iPad Air, it completely prevented my palm from registering.  Of course, you do have to get used to drawing with a pair of gloves on, but really it becomes natural almost instantly.  A pair of cycling gloves should probably do the trick, you just want to make sure it’s thick at the point the palm makes contact.

Art ,

16. November 2014



First off, let's start of with a big disclaimer!  This is more of an experiment that worked than a tutorial, as I can’t actually recommend you do anything I just did!  Let’s just say, I did a few really hack worthy things to get this particular example to work.  That said, it does work and the results are cool enough I figured I’d share them.  So, there is the warning…  all the code in this example works, but it might be a really really really bad idea! ;)


Ok, disclaimer covered…  now on to what we are actually going to cover, using a 3D model in Phaser.  Out of the box Phaser doesn’t actually have any support for 3D, but Three.js certainly does.  So what we are going to do is use Three.js to load a model and render it to a canvas, which then can be used as the image source for a Phaser Sprite.  If you’ve got no prior experience with Three.js I previously did a two part ( part one, part two ) series on Three.js, from which this a lot of this code was copied.


So let’s jump right in with the code.  It’s heavily commented, but doesn’t really explain any Three.js or Phaser specifics, see earlier tutorials for that.  We are going to render a threejs scene to a canvas, and then use that canvas as a sprite.  In this example, the Threejs scene will be visible, while in real life you would set it to invisible.



<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <title>Model rendered in ThreeJS and used in Phaser</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.js"></script>
    <script src="phaser.js"></script>
    <script src="Main.js"></script>
<h1>Model rendered in ThreeJS and used in Phaser</h1>
<table width="600">
        <th>Canvas rendered in Phaser</th>
        <th>ThreeJS rendered to Canvas</th>
        <td width="300px" align="center"><div style="width:298px;height:298px;" id="content"></div></td>
        <td width="300px" align="center">
            <div id="hiddenContent" style="width:298px;height:298px;visibility:visible;"></div>



///<reference path="./three.d.ts"/>
/// <reference path="phaser.d.ts"/>

module Test {

    export class RunningState extends Phaser.State {

        // Create the Threejs variables we need

        // Create the Phaser variables

        // This flag indicates our model is loaded and ready to be poked and proded
        goTime:boolean = false;

        constructor() {

            // ThreeJS setup
            this.renderer = new THREE.WebGLRenderer({ alpha: true });

            this.renderer.setSize(256, 256);
            this.renderer.setClearColor(0x0000FF, 1);
            // ThreeJS renders to a (normally) hidden canvas in the hiddenContent div
            // In real life you'd set it's visiblity to false

            // Create the scene and a camera
            this.scene = new THREE.Scene();
            this.threeJSCamera = new THREE.PerspectiveCamera(75
                , 1
                , 0.1, 1000);

            this.threeJSCamera.position = new THREE.Vector3(0, 0, 1.5);

            // Like framebuffers, the results are upside down once rendered.
            // As I couldn't find a way to flip UVs in PIXI, I instead render the scene upside down
            // by rotating the camera 180 degrees on Z axis

        create() {
            // Set this because we want to display FPS details
            this.game.time.advancedTiming = true;

            // Load the model exported from Blender in threejs format
            // Model loads async
            var modelLoader = new THREE.JSONLoader();
            var that = this;
            modelLoader.load("model/model.jsm", (geometry, materials) => {

                // This is the callback for when our model is loaded, set everything up here
                this.mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(

                this.mesh.position.y -=1; // Center vertically about origin

                // add the loaded mesh and a light to the scene
                that.scene.add(new THREE.AmbientLight(new THREE.Color(1.0, 1.0, 1.0).

                // Start threejs up

                // For some reason, you dont get lighting for a while...
                // This is a gross hack... basically we wait a second and then create a Phaser Sprite
                // and then render the canvas to our sprite.
                setTimeout( () => {
                    that.sprite = this.game.add.sprite(0, 0, null);
                    // Set goTime flag so we know it's go time baby.
                    that.goTime = true;

        // This is the function that actually call Threejs's render
        // Then we set the Sprite's texture to the canvas
        // Warning, this may be horrible for performance.
        renderThreeJS(target:Phaser.Sprite) {
            if (this.renderer) {
                this.renderer.render(this.scene, this.threeJSCamera);

                if(target) {
                            .children[0], PIXI.scaleModes.DEFAULT));

        // Let's just print out debug framerate
            this.game.debug.text("FPS" + this.game.time.fps,0,20);

        // Just so we can see that updates to the ThreeJS scene result in the Sprite being updated
        // We simply rotate by 0.01 radians per frame... note this is running as fast as possible
        // So will rotate differently on different machines...
            if(this.goTime) {

        start() {

    export class SimpleGame{
            // Create a game, and our RunningState, passing true to make it start right away
            this.game = new Phaser.Game(256, 256, Phaser.WEBGL, 'content');

// On window load, create an instance of our SimpleGame
window.onload = () => {
    var three = new Test.SimpleGame();


And the code running:



Now there are a few horrific hacks in this code.  First off, there is a “warm up” in Threejs, where for a few ms, it renders without lighting… no clue why, so I just brute force by delaying for a second after Threejs rendering starts.  The next brutal hack is to get the Phaser texture to show, I destroy the previous version… there HAS to be a better way to do this.  Interestingly, in Chrome the results to the canvas are flipped.  However, on Safari they are not!  The joy of HTML5.


As you can see though, mixing 3D objects in a 2D Phaser game is very much possible and actually fairly easy.




13. November 2014


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




Fuse Character Creator

Product Type

3D Graphics Application

Steam Store Page

Website Link

Current MSRP

$99 USD

Steam Discount at Time

75% off

Product Website

Website Link

Available On

Windows, Mac

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


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

    Character Creation


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



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


    Here is a fully assemble teen female character for example:



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


    Character Customization


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



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


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



    Clothing your Character


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



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


    Texturing Your Character


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



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


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




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



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


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


    Getting Your Own Content In


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

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


    Animating Your Character


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



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

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


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


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


    Here is Mixamo in action creating an animation sequence:



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


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



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



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



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


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



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


    There is however the cost…


    The Cost


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


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


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


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



    And here are the “À la carte” prices:



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


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


    The Video Version





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


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

    Art , ,

    12. November 2014


    This one falls under the category of “extremely awesome news”, Microsoft just announced Visual Studio Community 2013 and it’s completely free.
    You may think to yourself… big deal, there is already Express and it’s free too.  Unlike Express however, Visual Studio 2013 Community is actually the complete version of Visual Studio, nothing has been stripped out.
    Here is the announcement from the Visual Studio blog:

    Visual Studio Community 2013 is a new edition that enables you to unleash the full power of Visual Studio to develop cross-platform solutions. Create apps in one unified IDE. Get Visual Studio extensions that incorporate new languages, features, and development tools into this IDE. (These extensions are available from the Visual Studio Gallery.) Find out more details about Visual Studio Community 2013  here.

    Download Visual Studio Community 2013.

    What's in Visual Studio Community 2013 

    • Professional-grade editing, code analysis, and debugging support 
    • Support for open-source workflows (Git)
    • Compilers for managed languages, C++ and more
    • Cross-platform mobile development for your preferred device and platform, including the web, Android, iOS, and Windows Phone with the free Visual Studio Tools for Apache Cordova extension
    • Take advantage of cloud services with simplified Azure SDK integration, and incorporate modern app analytics and telemetry with Application Insights
    • Access to all the Visual Studio 2013 extensions on the  Visual Studio Gallery
    • Visual Studio Community 2013 includes Update 4, which is a cumulative update of all previous Visual Studio 2013 updates

    Watch the  Visual Studio Community 2013 video to learn all about what you can do with this release:

    Introducing Visual Studio Community 2013 

    Several other Visual Studio 2013 products are available for download with Update 4, including the following:

    • Visual Studio 2013 Update 4 
    • Azure SDK for .NET 2.5 
    • Visual Studio Tools for Unity (VSTU) 2.0 Preview 
    • Kinect for Windows 2.0 SDK RTW 
    • Visual Studio Tools for Apache Cordova CTP3 
    • TypeScript 1.3 

    To get more details on these releases, go to the  release notes for Visual Studio 2013 Update 4.


    So, what's the catch? There's always a catch, right?


    Yes, there is a catch, but it’s a pretty generous one.  From the Community page:


    Q: Who can use Visual Studio Community? 
    A: Here’s how individual developers can use Visual Studio Community:
    • Any individual developer can use Visual Studio Community to create their own free or paid apps.
    Here’s how Visual Studio Community can be used in organizations:
    • An unlimited number of users within an organization can use Visual Studio Community for the following scenarios: in a classroom learning environment, for academic research, or for contributing to open source projects.
    • For all other usage scenarios: In non-enterprise organizations, up to 5 users can use Visual Studio Community. In enterprise organizations (meaning those with >250 PCs or > $1MM in annual revenue), no use is permitted beyond the open source, academic research, and classroom learning environment scenarios described above.

    Q: How does Visual Studio Community 2013 compare to other Visual Studio editions? 
    A: Visual Studio Community 2013 includes all the great functionality of Visual Studio Professional 2013, designed and optimized for individual developers, students, open source contributors, and small teams. 

    So, basically if you are part of a team with 5 or fewer members, and made less than a Million dollars last year… Visual Studio is now completely free.


    Merry XMas!


    Month List