Procedural Tileset Generator

Visit the Tileset Explorer  to browse community rated tilesets.

Version 2 update:

The tool has been updated to version 2. With it comes a number of new features:

1. Improved and simplified user interface
2. Minor mutations and color copy/pasting
3. More complex shapes and more effects
4. Palette selector with in-built palettes
5. Platform randomization for isometric walkable surfaces
6. Save and load tileset data
7. Improved Godot Autotile export with multiple variations of the same tiles

Here is a short video of using the tool to generate a tileset for Godot:

Example of using the platform feature:

About

The Procedural Tileset Generator is a HTML5 tool for generating randomly generated pixelart. The tool can be used for brainstorming, or for actually generating pixelart for games.

How to use the tool

• Select the desired tile size and color palette. The in-built color palettes are all from the lospec user-uploaded palette list with the same names. You can also load your own color palette image using the palette selector.
• Right click to create new tiles until you find something you like.
• Left click a tile to mutate it into more variations of itself. You can also use more specialized forms of mutations using the keys indicated at the bottom of the tool.
• Click middle mouse or space while hovering a tile to save it to your tileset. Do the same in the tileset to remove it again.
• Click "A" while hovering a tile to create a Godot autotile set. This enters the autotile editing mode in which there are new keyboard shortcuts. Press "A" again to close the autotile, or "S" to discard it.
• While in autotile editing mode you can switch variation using the 1-9 keys. Mutated tiles in the variations have a random chance to be used instead of the default (variation 1) tiles. The probability can be adjusted. Red tiles are the same as the default tiles and will not be saved.
• Click "export tileset" and give it a name. The tileset can be imported into Godot by copying the .TRES and .PNG files into the same directory. A .CSV file is also saved with a list of the different regions (similarly sized tiles in the tileset). This file can be used for a custom importer.

Export image format

Tilesets are exported as lossless .PNG images, with the tiles laid out in 12 column wide rows (+12 more columns if "outline in background" is used).

There are multiple ways to handle outlines between tiles in pixelart. The outlines can either be between each tile, or behind the tiles and only visible outside the tile edges.

In the tilesets, tiles are spaced out by tile size + 3 pixels. If the tile size is 24 pixels, the spacing is 27 pixels.  This is to account for a 1 pixel outline on one or both sides of the tile. In addition, a 1 pixel spacing is added to avoid texture bleeding between tiles.

For example, 24 pixel tiles would have an actual size of 26 pixels, drawn with a step of 24 pixels ingame. In the tileset, the tiles are spaced out by 27 pixels in the following format:

Outline between tiles:
Outline 1 px, Tile 23 px, Outline 1 px, Spacing 2 px, Outline 1 px, Tile 23 px...
Outline in background:
Outline 1 px, Tile 24 px, Outline 1 px, Spacing 1 px, Outline 1 px, Tile 24 px...

Illustration (you can download the image and use a 27 pixel grid to see the tile alignment):

Examples I've created a number of example tilesets using this tool, and sample maps using the Tiled map editor. The samples are shown in the screenshots ->

Development

The inspiration of this tool came from the time spent developing The Infinite Armada spaceship generator. I knew it could be done much better, so I wrote an improved version of the spaceship generator. I even tried out exporting 3D models of the spaceships:



The experiment was successful, but it's not very useful. It's a neat proof of concept, but that's not all procedural generation is. Instead I decided to create something actually useful: A tool for generating simple tiles.

How it works

The tool works through a combination of pre-made sprites and random operations.  The sprites act like templates, and are merged, spliced, rotated, cut and so on. A random heightmap is created for each sprite.  Details are additional smaller sprites combined with the base template using a wide variety of different joining operations.

The loaded color palette is transformed into a series of different tonal ranges per color. A series of different materials are created with a large number of randomly generated parameters for things such as shadow strength, color index, dithering and bumpmaps.

The materials are randomly assigned to the different sprites. In addition the materials can apply bumpmaps and colors based on a number of patterns:

Finally the sprites are rendered pixel by pixel using a combination of raycasting for shadows and 2D rasterization. Lighting is calculated per pixel based on the sprite heightmaps. Tiles are tiled by padding the edges and wrapping shadows.

New variations of existing tiles are created using principles from genetic algorithms by randomly mutating their chromosomes (the ~2KB parameters defining a tile). The chance of producing the same tile twice is astronomically low, although you may recognise some of the more obvious base templates.

Attribution

The tool uses a few open-source libraries.

For PNG exporting and importing, UPNG is used with the pako dependency:
https://github.com/photopea/UPNG.js/
https://github.com/nodeca/pako

For doing conversions between the RGB and CIELAB color space, code from color-convert is used: https://github.com/Qix-/color-convert

For comparing colors, the Delta-E 1984 algorithm is used, through code adapted from https://github.com/zschuessler/DeltaE

Hope you find it useful! Please report any bugs you find.

Featured artworks:

Here are some great artworks produced with the aid of the generator:

by HouseRule.