Kingsize Quest

Let's Try to Build a Game!

This page is about making a game with minimal effort.

I've often wanted to make games. But my ideas were always too big for the time I was willing to invest. And many aspects of game development turned out to be challanging.

Take pixel art for example, which looks easy enough at first. But an indie artist easily spends a year on assets and animation.

So what to do? Well, it would help for example to:
* Forget about animation, and use simple key poses instead.
* Create the game world as a high level map only,
* and using simple 2D backdrops for locations.
* Use whitespace in graphics.
* etc.

I Already Have a Font

I used to draw pixel fonts for fun. So after having the basic idea for this game I spent some time designing. It turned out very readable for its size, while having identity too. I used BitFontMaker2, which exports in truetype format. Language support is equal to ISO-8859-1.

!"#$%&'()*+,-./0123456789:;<=>?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`
abcdefghijklmnopqrstuvwxyz{|}~€¡¢£¤¥¦§«»¿
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

Pixel Art for Lazies

Transformations can save a lot of drawing effort. Take this scissors for example, which uses rotations for a crude animation. I plan to use filters and shadow to create shading effects and outlines. Pixel art purists may not approve, but casual gamers don't care. Here's how it works:

A PNG spritesheet with two 20×30 images at (0,0) and (20,0).
(it has a transparent background, btw)

Parts are combined using transformations and appropriate arguments to ctx.drawImage(). A ctx.filter = 'brightness(0.85)' is good for overlapping parts with the same color.

A combination of Canvas- and SVG filters can be used to create single-color backdrop layers: ctx.filter = 'brightness(0) url(#teal)'. I prefer to use an SVG color matrix for an exact replacement color. I also use a CSS filter: blur(0.5px) to smooth rough edges on rotated parts.

This outline effect needs additional passes. It uses 2 for each scissors half, with ctx.shadowBlur = 2. An exterior-only outline requires an additional 2 passes to redraw the interior.

Et voilà; a graphics style that looks quirky enough, but requires minimal drawing effort. The outline separates the light colors from whitespace nicely.

A good pixel editor is a must, so I bought Aseprite. Now let's draw a spritesheet for a single character. And then create some kind of tool to adjust limbs for poses... But first:

Choosing a Color Palette

Pixel art uses limited palettes, but choosing from the 16.8 million RGB colors can be a challange. I often keep on tweaking, so I prefer to work with the 4096 colors of the 3-digit hex notation instead.

A simple Palette Editor would be handy. This one creates a GIMP palette format, which I can use in Aseprite. The Ctrl-C button copies it to the clipboard. Simply paste into a *.gpl file and import.

What About a Workflow?

This is it for now, the rest I'll make up as I go along:
1 Define the color palette needed, and create a *.gpl file.
2 Import it in Aseprite, and use it for drawing.
3 ...

Credits