2.5D Modeling Tool

Posted in Games, Tools on December 24th, 2013 by admin

I quite like Lost Garden and was intrigued by his 2.5D modeling tool idea and finally having some free time over the holidays I decided to give it a quick go.

Click to try:

I took a few shortcuts to get something working quickly so there are a couple of changes to his basic design:

  • To make the rendering and boolean type operations simple to code I made it so every X/Z slice has to be rectangular. This means there are no N/E Ramps and no rounded N/S edges.
  • Rather than incorporating any rotation it seemed easier to just have the different rotations available as primitives.
  • Having only six handles for re-sizing leads to the middle set being confusing as it is unclear which face they are for re-sizing. I found adding a second pair allows for all scaling operations intuitively.
  • Implementing rounded edges for all the shape types was tricky and you really need to be able to selectively round different edges, instead I just added two types of fixed/rounded boxes as an example of what could be achieved with a more complete tool.


  • You can change the palette by double-clicking on a color.
  • The list on shapes on the right can be re-arranged by dragging.
  • Holes effect only shapes below them in the list.
  • Dragging the front face moves the shape up/down and left/right.
  • Dragging the top face moves the shape forward/back and left/right.
  • Models are compact enough to be URL encoded, so use that for saving/sharing.
  • The rendering engine needs a bit of work, better lighting/shadows and textures will make it look a lot better.
  • The rendering code is pretty simple and this could easily be implemented in JavaScript/HTML

Source code now available here: lgmodeler


Posted in Games, Helicopters on February 8th, 2011 by admin

It’s strange how my motivation to work on a project can shift very abruptly and I have suddenly have no desire to work on something that as little as an hour ago I found fascinating. This is why I never finish anything and I really need to find a way to keep my motivation focused on a single project through to completion.

Anyway my current fascination has jumped back to RC Helicopters, ignited by the newly released Align Trex100. The heli comes with a trainer cable for plugging into a simulator so I thought I would have another go at that:


Posted in Games on December 8th, 2010 by admin

Yet another started game that will never be finished. This is my first attempt at a platformer. I wanted to do a series of single screen puzzle/platform levels unlocking further levels in a Pyramid culminating in a boss at the top but only got as far as 3 rooms.

Click the screenshot to play:

Back To Games

Posted in Games on September 6th, 2010 by admin

A while back (before his Minecraft notoriety) I was supper impressed with Markus Pearsons tiny Eye of the Beholder remake:

I thought it would make a great competition and I finally got round to organising one over at JavaGaming
After getting off to a great start things petered out somewhat and we only ended up with 5 entries but there are a few fantastic ones, you can play them all by clicking below:

Content Generation for Programmers Pt2

Posted in Games, Tutorials on June 27th, 2009 by admin

In this part I will go over how to use paint and vector drawing programs to generate art assets with minimal talent. So first up you will need some drawing programs, one vector based and one pixel based. As this is targeted at hobbyist game developers I will only be using free software.

First up is Inkscape. This is a great vector drawing program and probably one of the most well designed free/open source pieces of software I have ever used. The ui is simple consistant and intuative. I won’t go into any depth on how to use the program as there are a plethora of good tutorials available.
Second up is GIMP a raster drawing tool. GIMP is less well designed but not too bad once you get used to it.

My general workflow for doing art assets is to do a rough sketch in Inkscape and then take it into GIMP to polish it off. Or if you are looking for a vector style or are afraid of GIMP (I wouldn’t blame you) then you can just export straight to a png for your game.

So first up fire up a copy of Inkscape. Set up your page to be how big you want your final sprite to be, for the Rally Car it is going to be 64×64. I like working with power of two sizes as it is easy to divide things into haves/quarters. I tend to like working with nodes always snapping to a fine grid in this case a 1×1 but you can change this around as needed. I like having major gridline every 4 minor grids. First I do a rough outline like so:

To do this I use the Bezier/Line tool. This is the tool I use almost exclusively, and coupled with the edit paths tool all you really need. These tools are used for creating new paths(shapes) and editing existing paths. You need to become very familiar with these two tools so read up and practice lots. Make sure you know what all the buttons in the tool-bar that comes up when you hit edit paths do. Paths consist of nodes connected by lines and can be open (a portion of the shape not having an outline) or closed (continuous outline). Lines can be either straight or curved, nodes can be corners or smooth. Here is a view of the nodes of the outline:


You can add a node to a path by just double clicking on an existing line when in the edit path tool is selected. You can curve a node by clicking anywhere on the segment and dragging it round, this will create a couple of handles that you can use for my precise control. To go back to a strait line just click once on the line to select the start and end nodes and hit the make straight button.

So lets keep going adding shapes until we have something that resembles a car:


And a few more details:


And were pretty much done, we could use this as it is in a game and it would look fine:


But it will like a lot better with just a few highlights. To do this we will move to GIMP for finer control. So here is the exported png file in gimp.


It is pretty blurry looking up close, and you wouldn’t know how to set individual pixels to achieve the look zoomed out. The anti-aliasing in Inkscape has actually done a lot of work for us and the down-sampling you get as a result can look quite good but is a little bit random. If you want an old-school sprite look you will have to read up on pixel art tutorials, but be warned you have to have a natural talent to get something that looks good.

First thing is to add a new layer so open up the layers dialog (Ctr+L) and hit the new button. Layers help by separating out different steps in the process and allow us to turn on/off a step and see the result at any time. The car actually looks ok as it is but it is remarkably easy to add a few touches that can really make it look a lot better. We are going to be lighting the sprite so lets switch the newly created layer to “soft light” mode. This changes the way the two layers are added together so that bright colours will brighten the layer underneath and dark colours will darken it (perfect for shading). Depending on the look you are going for choose a pencil tool (for cell shaded hard lighting edges) or a brush tool (softer more realistic looking shading). First we will do highlights so choose switch to white and select an appropriate sized brush and start drawing. It will take a little bit to get the hang of it but it is really easy to undo and by playing with the layer visibility you turn on and off shading to see the results with ease.

Here is what mine looked like after a few rough strokes:


It looks pretty good but if you take a look at the highlight layer you can see just how rough it looks:


Now lets add some shadows, it is already pretty dark so i’ll pick a shade of gray rather than black to do my shadows. Here is what it looks like after a few shadows:


And the corresponding lighting layer:


It takes a little bit of trial and error to get the hang of it you’ll be churning out sprites in no time.

A word on lighting. Lighting is a pretty complicated subject but understanding the basics can help a lot. There are two basic kinds of ways light interact with surfaces, specular and diffuse. If you look at the image below you can see both effects at work.


Diffusely lit surfaces are brighter when they are facing in the direction of the light. Specular lighting is bright when the surface is mirroring the light to your eye and so dependent on your point of view. It is responsible for the shinny bright highlights and is more prevalent on reflective surfaces.

The one problem with the Rally car is the lighting is only strictly valid for it’s current orientation. Because the light source doesn’t rotate with the car unless it is facing up the lighting is wrong. We have a fair tolerance for things like incorrect lighting and perspective so you can get away with it particularly if you are going for a heavily styled rather than realistic look.

Here are some examples of the ships in StrafeFighter, as you can see I often also mess with the colours in GIMP to get the look I am after:


Posted in Games on January 15th, 2009 by admin

My first entry in the Java4K contest. A simple Rhythm based game.
Click to play:



Posted in Games on November 25th, 2008 by admin

A 40×30 pixel EGA action adventure game. I got very sidetracked on this one (on synthesizers) and ended up not getting very far. This is the first game I have ever made with any music (or something approaching music).

Click to run:
PixelWarrior Screenshot


Posted in Games on September 20th, 2008 by admin

A train shunting puzzle game, click to run:


Posted in Games on June 7th, 2008 by admin

A simple puzzle game involving placing blocks to bounce a ball into a glass, didn’t really work out it’s too random to predict.


Posted in Games on May 16th, 2008 by admin

A 2D Rally game, click to run: