Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
14. November 2015


CastleDB is a light weight database written in Haxe with data composed of sheets.  It makes storing structured data extremely simple, much like working with an Excel spreadsheet and much simpler than a traditional database.  The resulting data is stored in JSON making it easily used in almost any game engine or programming language.   Most interestingly you can treat 2D game levels just like any other data using the newly built in level editor.


There is an HD video version of this guide available here.  It covers mostly the same details as this tutorial but goes into a bit more depth of using the level editor.


Let’s first take a look at the database side of things.  Even without the level editing abilities, games are often in need of simple database services.  Simply download and extract the archive for your appropriate platform:



Then run cdb.exe.  The interface looks like this:



Start by creating a new sheet by clicking Create a sheet.  This is comparable to creating a new table in a database.



Simply name your sheet and click Create.


Next we add some columns to our newly created sheet, same basic process.



Next pick the column type.



Optionally tick Required if the field cant be left empty.



You could select List and link to another database creating complex relationships.  Now we can populate a a database using the “New Line” command.  Select a type like Sprite (Image) and the appropriate dialog is displayed.



Now save the cdb file somewhere and you can access the data with code relatively easily.  First create a source file with the following contents, the black magic that links your cdb file to haxe code.

package com.gamefromscratch.castledemo.db;
private typedef Init = haxe.macro.MacroType < ["new.cdb")] > ;


And now you can consume it like:

package com.gamefromscratch.castledemo;

import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.Lib;
import haxe.Resource;

import com.gamefromscratch.castledemo.db.MyData;
class Main 
	static function main() 
		#if js


Pretty simple over all.  Now what was that about a level editor?


Well… remember back when you created the first sheet?  You may remember a little checkbox “Create Level”.



Well this creates a table just like any other with some prepopulated values:



Width and Height are the number of cells that compose your level, the rest will be populated shortly.  Notice the Edit button that appears now?  Click it.


TADA!  Level editor.

The level editor can work in tiles or objects, let’s start with a single object layer for our background image.  Click the New Layer button at the top right.


Name it then click create.  Now click the File… button and we will select our background tiles.



Your image will now appear ready for painting, like so:



In Tile mode, simply select the tile, or tiles you wish to paint with like so:



Now back on your layer make sure you are in Tiles mode:



And paint away:



You can also work in object mode, which allows you to place sets of tiles without being confined to the grid.  First, define a set of tiles as an object:



Now you can switch your level to object mode and draw using the created objects instead.


Now perhaps coolest of all, you can also instance data easily enough.  For example, we could add and place NPCs on our map, first we extend the map sheet to have an addition field, a List called npc, like so:


The List contains a reference to our monster table for example, x,y coordinates and an id.  Now if you head back to your map, you will see you’ve got an additional layer created:



Which you can now use to place NPCs or other data in your world.  You could do the same thing for collision data, whatever you wish.

This is only scratching the surface of what the level editor can do, there is even auto-tiling support built in.  Be sure to watch the video version for a more in-depth idea of the level editors capabilities.  Then when you are all done, it’s ultimately just data that you’ve been working with.


Now the downside is, there is no level loader when you are done.  So whatever engine or game you are importing the result into, it’s still just data.  It’s going to be your responsibility to display it all on screen.


The Video


28. October 2015


So I find myself needing to create a new website and this created a world of complications with one very easy solution, which I’m assuming you can guess from the title above…


I started some 5ish years ago and the state of the web has changed a great deal since then.  I had a dedicated server from other projects, so the sky was the limit when it came to choosing a server technology.  I had little idea what GFS would evolve into or how much control I would require over my CMS, so as a programmer I went with the language/technology I was most comfortable with at the time, C#/  Instead of doing everything myself I built the site around BlogEngine.  It’s served me well enough, but in this age of mobile, SEO and responsive design, it’s a needlessly complicated mess.


I did a recent redesign of the site, but in the end I want to do a clean break.  Problem is, you can’t.  I have years of Google search engine juice, thousands of in-bound links and many other things that would break if I ported to a new site.  Beyond that, ugly or not, creaky or not, GameFromScratch is still my baby and I couldn’t just put her out to pasture.


After some thought on the subject I figured out how to go forward.  GameFromScratch is going to continue exactly as it is.  I will continue hosting 100% of my content here, I will add new blog posts and tutorial series here just like normal.  However, “finished” tutorial series will also be available on another home.  With the exception of perhaps pissing Google off due to duplicate content, I think it’s the best of both worlds.  People can continue to enjoy as it is today, while people using it for straight reference material can enjoy a much cleaner and hopefully faster site.  Also it gives me the opportunity to introduce a slightly shorter and more accurate URL.  Win/win for everyone I hope.


This however lead me to the same challenge I had years ago… choosing a technology.  Now though I have come to realize less is more.  I have no desire to use a gigantic bloated CMS like Wordpress or Drupal.  More to the point I have absolutely no desire to install another server or database technology (and potential security loophole) on my servers.  I also had, have and always will continue to have a gigantic aversion to PHP, which winnows down the field a heck of a lot.  On the other hand, I also have little desire to manually craft a site from scratch.


Enter Jeykll.


Jeykll is what you could call a “Static Site Generator”.  Basically its the framework to create a site within, couple with some tools that generate the site for you.  No database, no server technology, nothing.  The end result is simply a folder full of clean, modern HTML that can be deployed however you want.  This means no added security risks, no performance overhead and extremely simple backups.  It does however provide a framework of local tools that make your development process a heck of a lot faster than just writing HTML.


I am still very new to Jekyll, but so far it ticks all of the boxes I need.  The only real complication in the scenario is Ruby, the language it depends on.  As a language/ecosystem, Ruby seems horrifically fragile and it’s 10x worse on Windows where it is a bit of a red headed step child.  Point blank, getting and keeping your Ruby stack running is going to be by far the most challenging part of the process.


Anyways, if you find yourself needing to create a website, consider checking out Jekyll, I’ve created a small video about it available here or embedded below.


I looked at a few other options that you might wish to be aware of and why I personally didn’t go with them.


  • Adobe Muse
    • It was a nice editor and with it’s themes provided a great deal of what I needed.  The resulting code though wasn’t extremely clean, it has a rather hefty pricetag, and worse of all, once you commit to Muse you have to stick to Muse to generate new versions of your website.
  • Siteleaf
    • Siteleaf is very similar in basic process to Jekyll.  With a few major differences.  First, it includes web hosting options as well as an in cloud content editor.  Second, it’s got a price tag attached.  Third, it simply didn’t work on Windows… bit of a deal breaker there.  It’s not really Siteleaf’s fault, it’s Ruby, but still a rather large deal breaker for me.
  • Dozens of other static site generators
    • You certainly aren’t starved for choice in this category.  That said, if in doubt, go with the one with the biggest community.  That’s Jekyll.  I was tempted to find one that was built on top of Node instead of Ruby for a better Windows experience, but with Jekyll releasing version 3 with less dependencies and a smoother Windows experience, this became unimportant.
  • Wordpress/BlogEngine/Drupal et al
    • What can I say, they are still an option.  Jekyll certainly isnt for everyone.  Each of these CMSs is absolutely huge, some are downright dinosaurs at this point.  On the other hand… there is no scaffolding, no hosting requirements, a huge community of people you can contract work out to, etc.  If you are not moderately tech savvy, these are still most likely your best best.  Just be aware, you pay for that convenience when something goes wrong… it goes REALLY wrong.  Then again, you can also hire someone to fix it.

Totally Off Topic

22. October 2015


As part of the ongoing Tiled Map Editor tutorial this part looks at using Object Layers, which can be used to interface your tiled map with your games code.  This particular example includes the code using TypeScript and the Phaser game library.  If you need more information on Phaser I’ve done a tutorial series here.


The video of this tutorial is available here or embedded below.


The Code



<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="app.js"></script>
    <div id="content"></div>


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

class ObjectEntity {
    height: number;
    name: string;
    properties: any;
    rectange: boolean;
    rotation: number;
    type: string;
    visible: boolean;
    width: number;
    x: number;
    y: number;

class SimpleGame {
    game: Phaser.Game;
    map: Phaser.Tilemap;
    layer: Phaser.TilemapLayer;
    player: Phaser.Sprite;
    winZone: Phaser.Rectangle;

    constructor() { = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload, update: this.update, render: this.render
    preload() {"ItsTheMap", "newMap.json", null, Phaser.Tilemap.TILED_JSON);
        var img ="HF2_A2", "HF2_A2.png");"Decepticon", "decepticonLarge.png");
    update() {

        if (this.winZone.contains(this.player.x + this.player.width/2,this.player.y + this.player.height/2))
            alert("You Win!");

    render() {
    create() { ="ItsTheMap", 32, 32, 64, 32);"HF2_A2","HF2_A2");"Background").resizeWorld();

        this.player = new Phaser.Sprite(, 0, 0, "Decepticon");
        this.player.width = 64;
        this.player.height = 64;, 1);;

        var something =["GameObjects"][0];
        var start = <ObjectEntity>["GameObjects"][0];
        var end = <ObjectEntity>["GameObjects"][1];

        this.winZone = new Phaser.Rectangle(end.x, end.y, end.width, end.height);

        this.player.position.set(start.x, start.y); => {
            this.player.position.add(-32, 0);
        }); => {
            this.player.position.add(32, 0);
        }); => {
        }); => {
            this.player.position.add(0, 32);

window.onload = () => {
    var game = new SimpleGame();



The Video


Art Design Programming

14. October 2015


Tiled is a popular open source map editor for creating 2D maps using tiled graphics.  I have used Tiled in several previous tutorials and no doubt will be using Tiled in several future series, so instead of covering it partially over and over again, I decided to do a Tiled video tutorial series that I will simply link to.  This is that tutorial series.  As I add new tutorials I will link them below.


Right now the contents consist of:


An earlier text based introduction to Tiled from GameFromScratch is available here.

If you are interested in learning out to make isometric tiles in Blender check this tutorial.


Previous tutorials that have used Tiled include:


Direct version of the videos embedded below:

Art Programming

13. August 2015


Paradox ships with a full 3D editor named Paradox Studio.  In this tutorial we are going to take a look at what it can do and how it works. 


Once again, there is an HD video version of this tutorial available.


Paradox Studio Introduction


This is Paradox Studio:



This is where you can import assets, create entities, add components and instantiate them into scenes.  In a nutshell, it’s where you can visually compose the elements of your game.  Using Studio is strictly optional ( as is using Visual Studio ) but it can make your life a great deal simpler.


The majority of panels are configurable, can be minimized or re-docked in whatever pattern you prefer:



I am going to cover each panel one at a time.


Scene Graph


This is where you compose the entities that make up your game.  All game elements are entities, which in turn are containers for components, that can themselves consume or use assets.  Don’t worry, we will cover this in more detail later.  Just think of it this way… the Scene Graph is the stuff that composes your world, and all the “stuff” in your game is ultimately an Entity.  In the above screen shot, you can see the default scene created when you create a new project, it consists of a Scene that has a Sphere(Mesh), Ground(Mesh), Camera(Camera), Directional Light(Light) and Skybox(Light) entities.


If you create multiple scenes (I’ll show you how shortly), they will appear across the top in tab form.



This is only panel that cannot be minimized or moved, although it can be resized.  I suppose I should point out that the Scenegraph and 3D view are actually the same window, but they serve very different functions, so I will treat them as a separate windows for this tutorial.


You can create new entities using the imageicon, which will drop down the following menu:



Remember, an Entity is simply a container for Components, all of which have a default component called Transform, that allows them to be positioned in the world.  This means you can create the equivalent of a Point light entity by creating an Empty entity and adding a Light component to it.  We will see the component options later on.  When you create a new entity, it will be created (and automatically selected) in the 3D view:



Clicking the small magnifying glass beside the entity will automatically focus the 3D view on that entity, zooming in on it.


One last important concept to understand is parenting.  If you create a new entity with an entity selected, the new entity will be parented to the selected entity, like so:



The newly created light will now inherit transforms applied to it’s parent, but can also be transformed independently.  The inheritance only goes down the genealogy, not up.



Solution Explorer



The ultimate file format for a Paradox project is actually an sln file, in other words, a Visual Studio Solution file.  On top of that, Paradox provides a format for bundling codes and assets together, the package ( pdxpkg file extension ).  The Solution Explorer is where you manage the contents and dependencies of your project.


You can create sub folders to better organize your assets:



Even create entire new packages:



You can also create new assets directly from the Solution explorer:



Asset View




The asset view shows you the assets in the currently selected folder from the Solution View.  You can select an Asset (to edit it’s properties in the Property Grid, which we will cover shortly) by left clicking it. 

You can create new assets, or import existing ones, using these two toolbar buttons:


You can also import an asset using drag and drop from Windows Explorer:



You can also drag and drop Assets to the 3D view to create new Entities.  Here for example is dragging and dropping a 3D model asset.



Asset Preview / History / References

These three panels are all actually separate, but by default appear together and are pretty straight forward, so I will cover them as a single entity.  Much of the functionality in these panels requires you to select an asset in the asset view.

Action History


Simply a stack of actions you’ve performed.  You can undo/redo using the typical CTRL+Z | CTRL+Y hotkey.  In all honesty, not sure why you would use this panel.  It’s display only, you cant change anything.


Asset Preview


A handy quick preview of how an asset would look.  The above screenshot is with a material asset selected, you can then pick a geometric shape to apply your material to.  For 3D models, it instead loads a simple model viewer.  Can be controlled via the mouse, scroll wheel zoom, right button pans and left button orbits the camera.




There are two modes of operation for this panel, References and Referencers.  It’s a great way to see what assets/entities use an asset, and in turn, what assets an asset depends on.  The above example is the Referencers tab with the default Sphere material selected, you can see that the Sphere Procedural Model uses this asset.


Property Grid



This is probably the most important panel in Paradox Studio.  The contents are entirely dynamic, depending on what you have selected in the editor.  The above example shows the properties with a Material asset select.  As you can see, numerous material properties can be configured here.  The settings vary from asset type to asset type.  Below for example shows a Model asset selected:



This nicely illustrates the relationship between assets.  Remember earlier when I selected the Sphere Material and it showed the Procedural Model as a Referencer?  Well this is where that reference was set.  You can see that the material attached is a Sphere Material ( the example I showed earlier in the Property Grid ).  You can easily select these relationships by clicking the Hand icon:



This will in turn bring up the Asset Picker dialog, and show compatible assets:



As you can see, you can access the entire solution, in case your asset exists in a different folder or package entirely.


The Property Grid functionality changes completely however if you have an Entity from the Scenegraph selected instead of an Asset, like so:



This is where you can both configure existing, or add new components to your entity.  As I said earlier, Entities are simply containers for components.  The above example is a camera, which you can see is composed of a Transform component and a Camera component.

You can also add new components to an entity using the Add Component button.



I will cover the entire process in more detail later, including how to do this all using code instead.


3D View


Finally we have the 3D view ( which technically is the same panel as the Scene graph as mentioned earlier ).  This is a 3D representation of your game world.  As we saw earlier, we can create new instances of an asset by dragging and dropping.  You can also easily select and transform assets in your scene.  If you are comfortable with a 3D application like Max or Maya this concept should be immediately comfortable to you.


You can move, rotate and scale using the toolbar across the top. 


Or using the following hot keys:

  • Q – Select
  • W – Translate/Move
  • E – Rotate
  • R – Scale

When you select an object, a 3d manipulator widget is displayed, like this one for rotating:


Each color corresponds with a particular axis, so the blue circle rotates around the Z axis, green around the Y and red around the X.  You can also use the grey ball in the middle to transform along all 3 axis at the same time.

You can also use these control bar buttons:


To configure which coordinates the manipulator should work on, world space, local space, or camera.




Across the top of the application is the above toolbar.  The icon on the far left opens the project in Visual Studio.  The grayed out button syncs changes between the two.  The next button enables you to compile your code, Visual Studio is not required.  The play icon enables you to run your game and it will run for the platform selected in the drop down to the right.  The final button enables live scripting, something we will talk about later.



Using the View menu you can toggle the visibility of every single panel we just discussed.



Pressing Ctrl + Shift + D or Help Menu->Show Debug Window, brings up the above invaluable tool.  It contains the various logs and handy debugging details as your game runs.  If something goes wrong, this is the first place you should go for details.


The Video



AppGameKit Studio

See More Tutorials on!

Month List