Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
26. December 2013


Substance Designer is a visual texture creation tool which is currently 66% off on Steam, selling for 33.99$.  It’s a flash sale and only 2 1/2 hours to go, so you might want to act quick.

Substance 4 integrates with most 3D modelling applications including Max, Maya, Modo as well as engines such as Unity and UDK.  Of course you can generate a texture in SD4 and use it in any application.

Think it may be a late Christmas gift for myself.

Art News

19. December 2013


I just received the following email from Havok:


Project Anarchy December updates!



Happy Holidays Fellow Anarchists!


We can't believe how fast the year has gone by. We announced Project Anarchy in March, launched in June, and ended the Beta in November. Here’s a recap what's been going on:

Project Anarchy 2013.2.5 is Out!
Some highlights of the new release include:

  • vPlayer - replaces vSceneViewer and features an improved UI for debugging options and scene selection, improved interaction with vFileServe, better camera configuration, and a consistent interface and feature set across all platforms
  • New vGameSolution Creator – helps you quickly create a new Visual Studio project with all the necessary configurations for Windows, Android, and Tizen
  • A newly rewritten vFileServe tool
Additional enhancements to vForge: gui improvements, workspaces for sharing projects, improved rendering features, new file system classes, a new logging system and integrated documentation in vForge. Check out the release notes for more information.


Project Anarchy Mobile Game Dev Challenge

If you haven't entered the Project Anarchy Mobile Game Dev Challenge yet, you should! You can win up to $100,000! Also note, if you submit your game content by February 1, 2014 you’ll be eligible to receive feedback from Havok’s support team on how you can improve your game for final submission. We’ll also choose up to ten Early Submission Finalists to showcase and promote their games at Havok's GDC booth in March, and one lucky winner will get $10,000 cash (and will still be eligible to win the $100,000 grand prize)! Check out the details and sign up here!

We’ve Added Autodesk Scaleform for Free!
We’ve integrated the full version of Autodesk Scaleform software into Project Anarchy. Now you can design innovative user interfaces seamlessly across many platforms and use the Adobe Creative Suite to create menus, UI elements and 2D graphics. More details can be found here.

New PC Exporter License Available Q1 Next Year!

We announced the PC Exporter for Project Anarchy, allowing you to release your mobile projects on PC! Licensing will be available during Q1 next year, priced at $499 per seat.

Upcoming Events

  • January 15: Project Anarchy Open House at Havok. We'll be hosting an Open House night at Havok's San Francisco office for Project Anarchy users who want to share their games and get advice from the Havok team. If you are in the San Francisco area, be sure to swing by! You can RSVP on our Eventbrite page.

We'll check in with you next year!

-The Project Anarchy Team


PC Export for 500$?  Impressed!


18. December 2013


One of the nicest features of Scene2D is the UI layer built over top of it.  Scene2D.ui provides a series of widgets that make creating a UI an breeze, something often lacking in game development libraries.  That said, there is one very confusing stumbling block before you can get to work with UI… Skins.


A skin is a collection of files that go together to make up your user interface.

First is a JSON file ( JavaScript Object Notation ), which is a popular JavaScript based data storage format, like XML light.  In the JSON file you describe the various properties of your skin such as how your widgets should look. 

Next is a texture atlas.  We looked at using TexturePacker to make a texture atlas back in the graphics tutorial.  The texture atlas describes the layout of all the images that make up your UI.  This is a .atlas extension file.

Along with the texture atlas, you’ve also got the actual image that TexturePacker generated.

Finally you have the fnt and the associated image.  We covered fonts back in the Hello World tutorial.


This can all seem pretty daunting, especially starting from scratch.  Fortunately there is a skin included in the LibGDX tests.  The files you are interested in are uiskin.atlas, uiskin.json, uiskin.png, default.png and default.fnt.  Simply download and place each of these files in the Android assets/data folder of your project.  If you are downloading from the Github link I provided, be sure to download the RAW version of each file!


Let’s take a quick look at some of the above files for a better idea of what goes into them.  I will ignore the font files, we already covered that.  The atlas and png file we’ve already covered as well, but here is uiskin.png, so you’ve got some idea what is included:



These are the various graphics that go in to creating the UI.  Let’s take a look at uiskin.json:



{ { default-font: { file: default.fnt } }, {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }
com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
    dialogDim: { name: white, color: { r: 0, g: 0, b: 0, a: 0.45 } }
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
    default: { down: default-round-down, up: default-round },
    toggle: { down: default-round-down, checked: default-round-down, up: default-round }
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
    default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
    toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white, 
    downFontColor: red }
com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
    default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, 
    vScrollKnob: default-round-large }
com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
    default: {
        font: default-font, fontColor: white, background: default-select,
        scrollStyle: default,
        listStyle: { font: default-font, selection: default-select-selection }
com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
    default-vertical: { handle: default-splitpane-vertical },
    default-horizontal: { handle: default-splitpane }
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
    default: { titleFont: default-font, background: default-window, titleFontColor: white },
    dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
    default-horizontal: { background: default-slider, knob: default-slider-knob }
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
    default: { font: default-font, fontColor: white }
com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
    default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
    default: { checkboxOn: check-on, checkboxOff: check-off, font: default-font, fontColor: white }
com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
    default: { fontColorUnselected: white, selection: default-rect-pad, fontColorSelected: white, font: default-font }
com.badlogic.gdx.scenes.scene2d.ui.Touchpad$TouchpadStyle: {
    default: { background: default-pane, knob: default-round-large }
com.badlogic.gdx.scenes.scene2d.ui.Tree$TreeStyle: {
    default: { minus: tree-minus, plus: tree-plus, selection: default-select-selection }


If you’ve ever used CSS, this should look immediately familiar.  You are essentially telling LibGDX how to style each class by using the fully qualified Java class name.  Let’s take a look at a particular example we are going to be using shortly, TextButton.


com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
    default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
    toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, 
fontColor: white, 
    downFontColor: red }


You are setting the values for the class TextButtonStyle or on of the classes it is derived from.  You may notice for fontColor, “white” is passed.  If you look up in the skin, you can see how its defined: {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }


You can see “white” is a Color with the values 1/1/1 for rgb and 1 for alpha… in other words, white Smile

The other key thing is the value for down.  As you can see from the TextButtonStyle, down is a Drawable.  The value specified, default-round-down is an entry in the atlas file:

  rotate: false
  xy: 99, 29
  size: 12, 20
  split: 5, 5, 5, 4
  orig: 12, 20
  offset: 0, 0
  index: -1

This is specifying the size and location within the uiskin.png file.  More details about skins can be found on the wiki.


Now that you have your skin files, let’s take a look at a sample using Scene2d.ui:

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;

public class UIDemo implements ApplicationListener {
    private SpriteBatch batch;
    private Skin skin;
    private Stage stage;

    public void create() {        
        batch = new SpriteBatch();
        skin = new Skin(Gdx.files.internal("data/uiskin.json"));
        stage = new Stage();

        final TextButton button = new TextButton("Click me", skin, "default");
        button.setPosition( /2 - 100f, - 10f);
        button.addListener(new ClickListener(){
            public void clicked(InputEvent event, float x, float y){
                button.setText("You clicked the button");

    public void dispose() {

    public void render() {       , 1, 1, 1);;

    public void resize(int width, int height) {

    public void pause() {

    public void resume() {


You run this app and you should see:



Most of this is pretty familiar at this point.  We create a Skin object and load it using the typical file IO calls.  The file you want to load is the json config, uiskin.json.  This file points to all all of the other files, they will be loaded automatically by the Skin.  Next we create a TextButton, the values passed in to the constructor are the text to display on the button, the skin and the value in the skin to use.  If you look at the entry for the TextButton in the skin JSON file see:

com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
    default: { down: default-round-down, up: default-round },
    toggle: { down: default-round-down, checked: default-round-down, up: default-round }

You are saying you want to use the “default” entry.  Coincidentally, if you dont specify anything, default will be used.  We position and size the button and set up a click listener that simply changes the displayed text when the button is clicked.  Now the cool part… UI widgets like TextButton are simply Actors, so they work just like other Scene2D actors, add it to the stage and it’s ready to go.


Scene2D ui is a fairly involved topic so I will follow up with a more advanced example next tutorial.


13. December 2013


Sorry for the bad pun, I really am.  Not sorry enough not to make it mind you!

Anyways… Love 0.9.0 was released today.  In case you haven’t heard of it, Love is a 2D Lua based game development framework that was previously featured in the Battle of the Lua Game Engines post.  From the release notes:


After a very long year-and-eight-months since the previous version’s release, LÖVE 0.9.0 is out at last!

The full changelog is massive, easily the biggest in LÖVE’s history (when counting by number of individual changes listed). It can be viewed down below as well as in the Wiki. Here are some of the more noteworthy items:
LuaJIT is now being used by LÖVE by default for most operating systems. Depending on what’s bottlenecking your game’s performance right now, your framerate could skyrocket just by updating to 0.9.0!

ENet: real-time networking in games is a complicated topic. Thankfully, people have created libraries to help deal with some of the lower-level nuts and bolts. One such library is ENet. LÖVE 0.9.0 includes the lua-enet wrapper for the ENet library (alongside the existing general-purpose LuaSocket library), so you can easily use ENet’s features in your games with require("enet").

love.joystick: previous versions of LÖVE had support for joysticks and gamepads, but the love.joystick module was lacking in some key areas.
Version 0.9.0’s joystick module has been completely revamped – Joysticks are now actual LÖVE objects, they can be hot-plugged and removed at will (with event callbacks to match), gamepad motor vibration is now supported, and issues with differences in gamepad buttons and axes across operating systems and gamepad models is now much easier to deal with thanks to the new abstracted Gamepad API.

Windows (not the Microsoft variety): functions for dealing with LÖVE’s window have been split from into the brand-new love.windowmodule. The new module also includes new functionality (and better handling of the window in general, thanks to SDL 2): it’s now possible to use resizable, borderless, and “fullscreen-desktop” / “fullscreen-windowed” windows, as well as to choose which monitor the window will use. Along with some general house-cleaning of this module and performance improvements to, ParticleSystems, and SpriteBatches, lots of new graphics functionality has been added. Arbitrarily textured and colored polygons can be created thanks to Mesh objects.Shader objects (renamed from PixelEffects) can now be vertex shaders as well as pixel shaders. Mipmapping support has been added to images, compressed texture formats can be used now, and that’s only a handful of the new features in

love.math: Another new module! This one includes mathematical functionality relevant to games: a PRNG (and random number generator objects), polygon triangulation, Bézier curve objects, a Simplex noise generator, and more goodies.

love.thread: The thread module has an entirely new way to communicate between threads: Channel objects. It's much more flexible than the old API.
There are many more new features, but reading paragraphs about them can get tedious. Check them out on the wiki!

LÖVE 0.9.0 breaks compatibility with nearly every 0.8.0 game.

Several functions have been renamed (and some functionality has been changed or removed) in order to provide a more consistent and clean API experience. Often this will mean simply renaming some functions your game uses, but it will be rare for a game to work completely in both 0.8.0 and 0.9.0 unless it is written to do so.
Check the wiki! It will tell you what the new name of a renamed function is.

0.9.0’s Mac OS X system requirements are higher than 0.8.0’s: it now requires Mac OS 10.6+ and at least an Intel Core 2 CPU (~september 2006 or newer).


Full change log available here

Head on over here to get started.


12. December 2013


OpenFL, the popular cross platform gaming library formerly known as NME have recently released version 1.2.  The biggest addition is Tizen support.  Full releaseimage notes are below:


We are happy to announce that OpenFL 1.2 is now available, and includes a brand-new platform target, Tizen!

Tizen is a new device platform, supported by Intel, Samsung, The Linux Foundation and other members of the Tizen Association. Through partnership with OpenFL Technologies, Tizen is helping support our development, so we can continue to create free and open-source software for you.

OpenFL 1.2 marks a transition, we have a brand-new library we are co-developing called “lime”, which we will speak more about in the future. We want to open our codebase to a wider audience, both to collaborate and to also enable further innovation in game frameworks and APIs. As we continue to invest into OpenFL, we are also opening doors to share the build tools and platform support of OpenFL across multiple frameworks.

In addition to Tizen support, we have made specific investment in streaming audio support, as well as other fixes and improvements. You will need some new libraries (“lime” and “lime-tools”) for this release, so run “openfl setup” again to be sure that you have everything you need to get going.

Other fixes include better multi-core support for parallel C++ builds, improved support for error output on mobile, we added “Assets.getMusic” for specifically requesting streaming audio (regardless of what is set in your project file), context lost events for Android when using OpenGLView (other platforms retain the GL context during a resize) and other audio fixes.


run ‘haxelib upgrade’ to get the newest version, otherwise head on over to the OpenFL webpage.


See More Tutorials on!

Month List