UPDATE:

The generator now has the ability to export and preview tilemap templates for Godot autotile. Here are a few examples:


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.

The default color palette loaded is Sweetie 16.

How to use the tool

  1. Load the desired color palette as a PNG image. You can pick another palette from lospec or from any other image (50 colors max), or just use the default palette.
  2. Select your desired tile size, outline type, and other settings.
  3. Right click to create new tiles until you find something you like.
  4. Left click a tile to mutate it into more variations of itself. You can mutate the same time multiple times until you find a particular color/outline or other detail you want.
  5. Middle click/Z while hovering to add or remove a tile from the tileset. A complete tilemap for Godot autotile can be generated by pressing X over a tile. The tiles are aligned according to the generic Godot tilemap template. The tilemap details can be randomized by pressing S while hovering over it, and the tilemap edges can be adjusted by pressing A.
  6. Export the tileset once done.

Export 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.

Updated 4 days ago
Published 18 days ago
StatusReleased
CategoryTool
PlatformsHTML5
Rating
(13)
AuthorDonitz
Tagsasset, development, Game Design, gamedev, Generator, Pixel Art, Procedural Generation, sprites, Tilemap based tools, Tileset

Development log

Comments

Log in with itch.io to leave a comment.

A few more things:

  • Is the blurriness fixable? I have seen it mask some issues and details in generated sprites
  • Is there any possibility for generating transitions between two generated tilesets?
  • Is there a reason the program accepts palettes with less than 50 colors?
  • Is there a possibility to generate a door-orientated tilesheet? Something like below, with the top showing the tileset base and the bottom showing an example.


  • Are you sure the ship generator would be useless? I could use it as a basic blueprint for level design, and I figure others could use it for placeholders.

I'll try to answer all the questions.

The blurriness is probably only in Chrome. I tried everything to disable it, but I can't get rid of it without upscaling the canvas. It looks sharp in Firefox.

Transitions between generated tilsets. Yes, it's kinda possible, but there is no user interface for it yet. It would be possible to interpolate between two tilesets, but it may look rather strange if the sprites are changing. For what particular use case do you think it would be useful?

The program accepts palettes up to 50 colors because that's the number of colors I could fit into 5 light levels with 256 values. Anything between 2 and 50 should work fine.

I have added a few more door templates, so if you keep randomizing a bit you should find a few doors.

The ship generator is too specific an art-style. It would only work if that's the exact style of ship you're going for.

(3 edits)
  • Not what I expected for the blurriness, but it makes sense. Google is bad about that with textures, doing the same in slides, docs, spreadsheets, and most other programs in Drive. Firefox works well.
  • I needed to merge my second and fourth points in the original post. The first instance where seamless tiling between two is desirable is with multi-tile doors. The image I put with red and black (I just realized how bad it was to include black) shows an ideal tiling (You can safely assume that multi-tile doors are rectangles split in half horizontally somehow). Elsewhere, it is more decorative than anything, though it allows a more complete auto tiling in Tiled.
  • So you cannot increase the number in the palettes? 64 seems more logical to keep to a power-of-two scale.
  • I covered that in my second above, but if you want to add some more decorative elements, you may wish to add chair, desk, wire, and electrical box-like decorations (distortion is fine). Possibly add enemy/player generation?
  • The specific art style is meaningless if we can modify it. In my case, I wanted the ships to match the tiles generated.

I noticed almost all of the outputs do not fit the grid and are larger than the option selected. I notice erratically sized blocks that throw the whole sprite sheet off. Below are examples.

supposedly 16 by 16 or 24 by 24

I do not even know what the size actually is, should be 32 by 32

I also noticed "outline in background" exports wrongly:



(1 edit)

The outline backgrounds are exported on the same tileset with a 12 column offset. It's clearer if there is a full row of tiles.

So, it is effectively a shadow sprite?

(1 edit)

Not quite shadows. It's for rendering a 1 pixel outline surrounding the tiles. They need to be rendered before the real tiles.

https://img.itch.zone/aW1hZ2UvMTMzODUxOS83ODE2MjEwLnBuZw==/original/giPjD3.png

These probably should be explained in a help tab within the program.

(5 edits)

I can explain. The actual size of the tiles in the output image is tile size + 3 pixels per tile. This is because the outline takes up 1 pixel on one or both sides of the tile depending on outline mode. Then there is a final 1 pixel spacing to prevent texture bleeding. This is to avoid rendering the outline twice between two tiles, which tends to look quite bad.

So:
Outline between tiles:
Outline 1 px, Tile 23 px, Outline 1 px, Spacing 2 px, Outline 1 px, Tile 23 px...
Outline behind tiles:
Outline 1 px, Tile 24 px, Outline 1 px, Spacing 1 px, Outline 1 px, Tile 24 px...

When used ingame, the tiles are still rendered with a spacing of 24 pixels between each tile, but the tile size may be slightly bigger to account for the outlines.

(2 edits)

Unfortunately, some tiles are even larger. On the first image, check the widths of the tiles. One of the corner tiles is 2 pixels larger than that.

(1 edit)

That's due to the padding done when tiling the sides, in which tiled sides are extended out into the outline area, so there becomes a 1 pixel overlap of the tiles when they are put side by side. It should be fairly harmless, but it could be removed.

It throws me off when I attempt to clean the images in Piskel (which does not support tile padding).

Deleted 12 days ago
(1 edit)

Thanks. I got the larger of the two images set up properly in tiled. Getting the autotiles set up.

I got a different sprite sheet working in tiled. May try the other tiles, though I noticed uneven spacing in one of the sheets.

(1 edit)

Thank you for the inspiration. These tiles are unaltered.

(+1)

Looks very nice!

Thank you again.

I only altered the background by tinting the layer in Tiled.

(+1)

Cool! Almost looks like a fractal.

(2 edits)


(1 edit)

I'm just getting started with pixel art. Your program has taught me a lot. I consider you a mentor.


(1 edit) (+1)

I am humbled. I think this tool mostly highlights how important lighting is in pixel art.

Your art is very nice, and it also shows how important the human factor is in art. Procedural generation can not replace that.

This is amazing - have been trying it for hours already. :) Is it possible to have it as a 64x64 as well, or is it possible to save the 32x32 in a 64x64 size?

(2 edits)

Thanks!

I didn't draw any template sprites for 64x64 tiles since most of the detail sprites are smaller than that. It would be like very large tiles with very small details, like how the 8x8 tiles now are very small tiles with very large details.

Ah, I see. Don't know how the technical part work :) Anyway,awesome job on the bits so far. For my eyes, I struggle with the 32x32 details in recent years, even with glasses. XD

(1 edit)

Most retro games tend to just upscale the entire game without any interpolation, such as x2 or x3 pixels per pixel. Additionally you can add an interlacing and blur effect on the screen to make it look smoother. I did it in Surgevania

I see. well, I don't know how to make games, so I might find something out there that can make single pixel to 2x for me without smoothing it.?. :)

(2 edits)

You can use GIMP and rescale the image with interpolation mode None, but more often than not you tend to do it inside the game engine itself.

This is an excellent tool - very fun to mess with and the output consistently looks great :)

I rarely comment, but the project is too good to go by without saying anything, just want to congratulate you, I found the project very awesome to the point where I thought it was using AI before I got the explanation, even If i don't believe in using random generative tiles directly, they could be a great starting point and inspiration, I hope you github the project.

Thank you! I'll consider making a github repo for the source code.

Impressive work. Very nice how varied the generation outputs are.

(+1)

Dude, this is the coolest thing that is on this website. I would love to see see a version of this that I could interface with somewhere other than a web app. Don't get me wrong, I will definitely be playing with seeing what  I can get out of it, but possibly if there is a version of this that could be extended to interface with it from command line, it could become even more cool in my opinion. 
Either way, great job.

(1 edit)

particularly what I'm thinking of is parsing the options for what to keep and what to toss; a targeted, brute force approach to getting what you want out of it. It's already very equipped to help you do that, it just takes interfacing with the web app as long as it takes to do it.

(3 edits)

Thank you!

I think the block creation part would work using node.js in command line with barely any changes, though there aren't a lot of input parameters to configure as of now. Just about everything (except for the few options listed in the app) are taken from a random byte array of about 1 kilobyte, and that byte array mutating is what causes changes in the tiles.

A brute force approach could be made really easily (heck, the whole  chromosome/mutation concept is ripped straight from genetic algorithms), it's just a matter about defining a good fitness criteria, and then using classical GA methods to evolve tiles towards the goal.