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.
Select your desired tile size, outline type, and other settings.
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 mutate the same time multiple times until you find a particular color/outline or other detail you want.
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.
Export the tileset once done.
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:
Illustration (you can download the image and use a 27 pixel grid to see the tile alignment):
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 ->
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.
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.
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 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.
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.
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.
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 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.
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.
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.
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.