About depixelizing

Depixelizing pixel artVectored version
Depixelizing pixel art

In my search for a solution to make my graphics scalable I heard a rumor about Nintendo having released their pixels-to-vector algorithm as open source! Could this be true? I haven’t found any reliable information of this yet.

What I am talking about is something like Johannes Kopf and Dani Lischinski had developed and described in their paper Depixelizing Pixel Art. Sadly, their solution is not available for public and it seems that I end up looking this paper after every search attempt… There is something going on at the SNES scene, for example xBr 2.2, but real time shaders aren’t exactly what am looking for.

Inaria Java..

This is a bit old stuff, but I wanted to share it with you. Inaria is a very simple role playing game that was originally created by Anthony Salter as a result of 40-hours game project. When Anthony released source code for Inaria, someone took initiative and ported it to C#. After trying out C# version I began my own Java port of Inaria and here are the results.

The basic game play should be equal to Anthony’s version. I also added some eye candy and improvements to the user interface. E.g. actions have shortcut keys, buttons are animated when pressed and there are some fading effects and animations added.

Select either Inaria Java without Line of Sight or with Line of Sight.

Requires Java Runtime 1.5 or newer to play this game.

Blog acting weirdly..

If you have wondered where expandable code examples have gone and what has happened to non-expandable ones, they have not gone anywhere. I am just making some changes to WordPress to make my own updates easier in the future. I have been implementing new plugin for WordPress and because I have no sandbox installation of WordPress to play with I am doing changes in live.

When I started to write my blog I had no means to present code examples in visually appealing way. First I modified WordPress style sheets and added new css class .code to apply into my examples. Soon after I started to add longer examples and noticed that they destroy the readability of the post. So I created expandable code blocks.

These blocks were created using javascript and embedded php code – needless to say they were really hard to use and extremely prone to errors. So I started to experiment different ways to do the same. In my best attempt I managed to get rid of javascript inside posts but php was still needed, and I was not happy with the solution.

Then I figured out that WordPress plugin is the way to go. It is possible to add new tags using plugin and it is not even hard to do so. Couple hours later I had two new tags to play with and everything looked great for a while. Then I remembered that I still had some customisations in the WordPress style sheets and a javascript file, that my plugin is dependent of, located under some WordPress directories. So I started to move these files under plugin but before I managed to get my job done, I had to stop for a night. And this is where we are now. Hopefully I have time to finish what I have already started today so you can enjoy reading the blog again.

Please, bear with me..

I am starting to like C#’s versatility

I have been coding small utility for my own use. This utility is about parsing rss feeds and juggling with files. Names of the files come from feed, so I may get anything. This project is also a learning project for C# and .NET, so it is not always clear how to achieve certain outcomes.

A problem I faced with file names is that they can contain illegal characters and therefore I would have to strip or replace illegal characters from the original string. How can this be done using C#? The answer is Regular expressions. Just by looking the example below you will see how versatile C# really is.

public static string ValidFilenameFromString(string name)
string invalidChars = Regex.Escape(new string(Path.GetInvalidFileNameChars()));
string invalidRegexpStr = string.Format(@”[{0}]+”, invalidChars);
return Regex.Replace(name, invalidRegexpStr, “_”);

Deform algorithms for dehexifying process

In my last post I talked about how to make hexagon map look less dull using dehexifying algorithm. I mentioned that we need to deform vertices but I did not give any examples how to do it. As you probably remember we need to do deformation in two steps, first for the hexagon vertices and later for segment vertices.

Deforming the hexagon vertices is pretty straightforward. We just move all the vertices by certain random amount. One thing to remember though, do not move any vertex more than half the width of the hexagon, and tag vertices that have already been deformed because same vertex can be referenced by several hexagons. Below is a very simple deformation algorithm implemented in Java.
[xscode etext=”Click to show example code” ctext=”Click to hide example code”]
// Vertex
class Vertex {
static Random R = new Random();

public float x;
public float y;
boolean deformed;

public void deform(float range) {
if (!deformed) {
deformed = true;
x += (R.nextFloat() – 0.5f) * range;
y += (R.nextFloat() – 0.5f) * range;

// Hexagon
class Hexagon {
List<Vertex> vertices;

public void deformVertices(int size) {
for (Vertex v in vertices) {
Next I will show the simplest possible segment deformation algorithm. It is virtually same as Hexagon vertex deformation algorithm except for the range of deformation and how it is calculated. I have added Rules class to maintain creation variables. In example below we query segment deformation range from Rules class using method segmentVertexDeformRange() which takes number of vertices in the segment as parameter.

Using the number of vertices as damping factor we have better control of what the deformation result will look like. It is also good for preventing overflows in deformation which would result in silly looking hexagons.

In Hexagon class we just loop through every segment and call deformVertices() for each one. In Segment class deform() is called for each Vertex referenced by the segment.
[xscode etext=”Click to show example code” ctext=”Click to hide example code”]
// Hexagon
class Hexagon {
List<Segment> segments;

public void deformSegments() {
for (Segment s in segments) {

// Segment
class Segment {
List<Vertex> vertices;

public void deformVertices(float range) {
for (Vertex v in vertices) {
In this naive solution borders can appear jagged. Jagginess can be controlled by tweaking the Rules, but what if we wanted smoothly curved borders? One possible solution would be the use of splines. Below is a sample implementation that uses Java 2D API for this task.
[xscode etext=”Click to show example code” ctext=”Click to hide example code”]
class Segment {
public void deformSplines(float range) {

void createSplineVertices() {
// Create path
Path2D.Float path = new Path2D.Float();
Vertex v = vertices[0];
path.moveTo(v.x, v.y);
for (int i = 1; i < vertices.size; i++) {
Vertex vold = v;
v = vertices[i];
Point2D.Float[] cps = randomControlPoints(vold, v);
path.curveTo(cps[0].x, cps[0].y, cps[1].x, cps[1].y, v.x, v,y);

// Collect new vertices from path
List<Vertex> cubicVertices = new ArrayList<Vertex>();
PathIterator pi = path.getPathIterator(null);
FlatteningPathIterator fi = new FlatteningPathIterator(pi, 0.1f);
while (!fi.isDone()) {
float[] p = new float[6];
cubicVertices.add(new Vertex(p[0], p[1]));

// Preserve reference starting and ending points
cubicVertices[0] = vertices[0];
cubicVertices[cubicVertices.size() – 1] = vertices[vertices.size() – 1];

// Apply new vertices
vertices = cubicVertices;

Point2D.Float[] randomControlPoints(Vertex b, Vertex e) {
Point2D.Float[] cps = new Point2D.Float[2];
float r = b.distanceFrom(e) / 2.0f;
float a = R.nextFloat() * PI_2;
cps[0].x = b.x + r * cos(a);
cps[0].y = b.y + r * sin(a);
a = R.nextFloat() * PI_2;
cps[1].x = e.x + r * cos(a);
cps[1].y = e.y + r * sin(a);
return cps;
It is possible to mix naive and curved implementations to create even more realistic looking tiles. Just add random threshold point that will decide which implementation to use for the segment.
[xscode etext=”Click to show example code” ctext=”Click to hide example code”]
class Segment {
public void deformRandomly(float range) {
if (R.nextFloat() <= Rules.percentageOfCurvedSegments() / 100.0f) {
} else {
We have seen that using deform algorithms it is possible to create realistic looking map tiles for hexagon maps. Deformation can be done in many ways and I have shown two different algorithms to do this. Next I would suggest you to experiment with different algorithms to generate even more realistic looking tiles.

Dehexifying a hex map. Say what?

Hexagon has appealing characteristics for a map tile. It has six neighbours and the distance from any hexagon to its neighbour is exactly same. More traditional square based map tile has eight neighbours and distance varies from 1 to 1.414.., depending on in which direction particular neighbour is located at. However, they both have one characteristic in common, they look dull.

If you take a closer look at Small World map you will see that map tiles have hexagonal aspect and they do not look dull. Tiles have pretty strong border in high contrast which separates tiles from each other. Hexagon segments have been deformed and the tiles are textured using hand drawn textures with some extra details on top of them. These little finishing touches make them look great and pretty hard to spot hexagon aspect when you look at the map.

As a part of Farout project I have been playing around with Dehexifying algorithm to make hexagon map looks something like Small World map in the image above. Algorithm is simple, yet the results are quite stunning. Algorithm can be divided into following steps:

  1. Create vertices for hexagon map (in my implementation caller gives number of hexagons in horizontal and vertical direction, and width of one hexagon as parameters)
  2. Connect vertices into segments, every segment contains exactly two vertices at this point (segments reference to vertices, therefore altering one vertex affects every other segment using same vertex)
  3. Create hexagons from segments (hexagons reference segments, therefore modifying one segment alters other hexagons using same segment)
  4. Deform the vertices (this could be done before step 3 it just happens to be 4th step in my implementation)
  5. Split segments into several vertices. Number of vertices created for segment depends on the segment’s length after step 4. The longer the segment is the more vertices will be created.
  6. Deform newly created vertices to make segments non planar.


Dehexifying algorithm steps
Dehexifying algorithm steps


After these six steps hexagon map looks surprisingly lot like a Small World map, depending on how well your deforming algorithms work. One has to remember that this is just a model for the dehexified map – what it really looks like depends on rendering algorithm, which I will talk more about in my next post.

Dehexified map example
Dehexified map example with textured rendering

Heavy infantry graphic tile evolution

Human heavy infantry graphic tile evolution
Human heavy infantry graphic tile evolution


Here is an example image of how difficult it is to make use of old 8-bit graphics in a modern game development. The first image on the left was drawn way back in the late 80’s. It was the first attempt to create a heavy infantry icon to our game, then called Warmaster for Amiga OS. The second to the right is just a doubled image of a later SVGA-version for Windows. Third image is a experiment with HQ2X – an attempt to speed up the graphic design process. It’s better than the plain nearest neighbour scaling but we have to admit it lacks the detail and refinement of a hand crafted icon. Although pixel editing is slow and considered a skill from the past, we’ll have to stick to it unless there soon pops out a powerful pixel-to-vector-converter somewhere.

Graphics, my preciousssss graphics..

Long time ago we had a small game project called DragonWars. It was a strategy game using hexagon maps and hand drawn graphics. Unit graphics are nice  but the  problem with them is the size.  Units are 16px * 16px which is way too small for today’s modern games. Therefore Juha has been playing around with different scaling algorithms to see how we could use those old graphics without the need to fully redraw them. The most promising algorithms have been Hq4x and Microsoft research center’s Depixeling the Pixel art -project (DPA from now on).

Hq4x is widely available while the DPA has no reference implementation available. What makes DPA more appealing in our eyes is the fact that DPA generates vector graphics from the raster graphics while hq4x just scales the raster graphics into new fixed size raster graphics. For our longer plans vector graphics would be ideal but for now we will have to stick with raster graphics and hq4x.

If Juha gives me his permission I will later post some example icons to this blog.

A new fresh start!

It’s been a while.. Me and my friend Juha have been brainstroming ideas for a new multiplayer strategy game. We are both fans of Small World, really great board game from Days of Wonder. It is the game we play during our biannual meetings (warning: Finnish pages) and we even have a competition based on this game.

Therefore it is no surprise we have taken some ideas from the game that we are so fond of. Some of the rules are from a game concept we designed like almost ten years ago, but then forgotten because of other interests in life. We both felt that now is a perfect time to start a new project called Farout.

Farout is a game of conquer, diplomacy and economics. Who earns the most victory points wins. There are several different ways to earn victory points and most of them require use of army. Rules are still work in progress and the development will not start until we are both content with the rules.

All kind of information about Games and Game programming