CodeCombat programming game goes open source

6. January 2014


What exactly is Code Combat?  Well it’s a game that attempts to teach programming by having the player use programming to control the player.  Here I am running through the tutorial portion:




It’s most of what you expect in programming, cleverly disguised as a game.  In this particular case, you double click your hero to edit his “spell”, which is the analog of a function.  On the right you can see I define the players actions in the plan() function, using a list of available “spells”, which as you can see from the bottom, are simply the available methods.


I only played for a very brief period of time but I can see how it could be effective.  It is very subtely introducing programmer concepts like debugging, breakpoints, functions, etc… while truly feeling like a game.  That said, I am an established programmer, so it is hard to look at this through the lens of someone who isn’t new.  I can see some tripping blocks… this for example is never explained, nor is the “.” (dot) character.  It could be at a later point, I am not sure, but at this point the user is just parroting what is expected of them.


Regardless, it is an interesting experiment, the game aspects seem well polished and gamification of programming is a clever concept.  Also, it is completely free I believe.  This does leave me some questions about their business model, but that’s not really my or your issue, now is it?  The best I can guess is CodeCombat is ultimately a recruiting tool… a way to gauge programming ability in prospective hires.  The downside I see here is their demographic is going to skew heavily towards self taught complete beginners, at least initially.  Again though, their business model is their issue.


What you may find interesting is, they have open sourced the project.


Yes, we just open-sourced the last year of our lives–all the code, art, and music for CodeCombat–under the MIT and Creative Commons licenses.

“Wait. You’re a for-profit startup, but you’re giving away all of your code? Are you crazy?”

Nope! Closed source may be the choice made by virtually every startup and every game studio, but we believe this is a convention that needs rethinking. CodeCombat is already a community project, with hundreds of players volunteering to create levels, write documentation, help beginners, playtest, and even translate the game into seventeen languages so far. Now the programmers can join the party, too.

Our mission is to teach you to code. Until we have over nine thousand levels taking you all the way from beginner to Bellard, why not jump into a novice-friendly open source project to keep learning? We aren’t just dumping the code out there and calling it a day–we’ve worked hard to make it simple to contribute. You don’t need to know git, you don’t need to have anything installed, and you don’t even need to know how to code to help with some of the issues on our GitHub.

Or, if you’re into compilers, programming languages, physics simulations, geometry, design, user experience, AI, performance tuning, audio processing, RTS games, RPGs, i18n / L10n, security, 2.5D vector graphics, TDD, databases, voice/video chat, IDEs, or debuggers, then you will love hacking on this project. With cool tech, detailed issues, extensive developer documentation, a friendly dev setup script, and the CodeCombat team ready to help you implement your ideas, this is the perfect open source game to get into. Don’t be shy!


Code/art/music all released under MIT and Creative Commons license.  They went with Creative Commons By license for assets, which means if you use their assets in a derived work you need to credit them as the original creator.  All told, very liberal terms and a boon to developers, even those just looking for assets to play with.  The code is under the MIT license, which so far as source code licenses goes, is about the most liberal.  “Don’t sue us” is about the only caveat of that license.  So, this is truly and honestly an open sourced project.


The code is available on github.  The project is written in CoffeeScript.  If you are unfamiliar with CoffeeScript, its basically a compiler layered over JavaScript ( like Dart or TypeScript ) that attempts to get rid of some of JavaScripts (many!) warts.  It’s a mature language, so you should have no trouble finding resources for picking it up.  If you are already familiar with an existing OO language ( and especially JavaScript ), you will have no problem picking up CoffeeScript.


If you are new to programming and looking for a fun way to learn, or are established as a programmer and are looking for a project to get involved with, this is certainly a new option for you.


Godot Unity like game engine going open source

5. January 2014


There is a new entrant in the game engine space, the Godot game engine from Okam Studio.  The engine was apparently used for in-house projects and is over a decade in the making.  The editor runs on Linux, Windows and OSX and can target desktop, mobile, consoles as well as HTML.





From observation, the engine appears to be similar to Unity, but powered by C++.  It uses a custom scripting language that appears LUA like.


In the developers own words:

We’ll be opening a game engine that has more than a decade of work (and several iterations) as MIT license soon.

It’s not an engine made by hobbyists, this is a production tool used to develop and publish plenty of games for PC, Consoles and Mobile. It’s currently in beta stage, meaning it’s feature complete and fully usable, but lacks very little fine tuning and testing. It has a similar feature set to Unity (little less stuff on 3D front, much more stuff on the 2D front, debugging). and runs on all the popular desktop and mobile platforms, as well as on the web (through asm.js).

Unlike almost any other game engine with this level of features, the editor runs fine in Linux, as well as Windows and OSX, and supports one click deploy.


Apparently the engine is being released under the MIT open source license ( a very generous license ) and is undergoing polish before complete release.  If you are interested in early access, contact


I’ll be keep an eye on this one… a C++ powered Unity like engine is sure to be interesting to many.  Not sure exactly when it will drop but for now we are … Waiting for Godot.


Ok… that was bad.   More details as I get them.

News, Programming

Substance Designer 4 texturing tool currently on sale on Steam

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

Project Anarchy 2013.2.5 announcement

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!

News ,

LibGDX Tutorial 9: Scene2D Part 4–UI Skins

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.

Programming ,