Skip to content
A tileset generator
JavaScript CSS HTML
Branch: dev
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Change to version 0.2.0 May 26, 2018
.babelrc Remove create-react-class dependence May 21, 2018
.browserslistrc Remove create-react-class dependence May 21, 2018
.gitignore Remove create-react-class dependence May 21, 2018
.jshintrc Initial Commit Sep 26, 2014
.postcssrc Remove create-react-class dependence May 21, 2018 Update Dec 5, 2014
package.json Change to version 0.2.0 May 26, 2018

Tileset Gen

Tileset gen it’s a tool to make draw tilesets easier!

In the last 3 months i finished two games, one to ludum dare 30 and another one to js13k games 2014. The two games are tile-based, have different terrains and each terrein need a tileset with 47 tiles to make all combinations. What means the i need to draw 47 different tiles to each terrain.

I wanted to make this process easier, so i was think a lot about make a tileset generator, something that receive a small tileset base, and output a tileset with 47 tiles, or 16 tiles or etc.

How it works

Let’s say that you want a tileset each tile 32x32 size. The size of the tileset base in this case had to be 64x96, and follow this pattern:

Base to generate a tileset 32x32 each tile

If you want 64x64 tiles, the base had to be 128x196. The math works like this:

32x32 tiles: width: 32 * 2 = 64; height: 32 * 3 = 96;

48x48 tiles: width: 48 * 2 = 96; height: 48 * 3 = 144;

64x64 tiles: width: 64 * 2 = 128; height: 64 * 3 = 196;

You got the idea!

Some examples:

Generate 32x32 tiles:

tileset base example 1

Generate 16x16 tiles:

 tileset base example 2

Generate 32x32 tiles that don't match corners:

tileset base example 2

This last base example it's for use with type 2 tile set (that generate 16 tiles), or with the type 3 (bitwise), that generate a tileset to use with the bitwise auto tile algorithm!

You can download these examples and use to test the app! When upload the tileset base, you need to set the tile size in the edit bar.

You can upload how much tileset base you want; you can delete them if you want; you can change the type of each tileset by clicking then; when all it’s done, you can download a png of everything.

The app it’s in alpha and I need feedback! Let me know if this app help you in something, and how did you think this can be better. Send me a tweet on @EdoardoLopes!

You can’t perform that action at this time.