A tiny Node app to extrude tiles in tilesets to avoid bleeding issues.
You can read more about the bleeding problem and solution here. This CLI app handles both tilesets with and without margin & spacing.
Interested in learning more about how to use tilemaps in Phaser 3? Check out my blog post series about building modular worlds with tilemaps. It explains the concept of a tilemap, and of course, it uses extruded tiles
Make sure you have node and npm installed:
npm install --global tile-extruder
(Or, you can run tile-extruder directly without globally installing in npm 5.2 and greater via
Open a terminal in the folder and run a command with the following arguments:
An example usage for a 8 x 16 tile size tileset with no margin or spacing:
tile-extruder --tileWidth 8 --tileHeight 16 --input ./tilesets/borders-tileset.png --output ./tilesets/borders-tileset-extruded.png
An example usage for a 16 x 16 tile size tileset with 5px margin and 10px spacing:
tile-extruder --tileWidth 16 --tileHeight 16 --margin 5 --spacing 10 --input ./tilesets/mario-tileset.png --output ./tilesets/mario-tileset-extruded.png
Additional usage information:
A small CLI to extrude tiles. Use --help for more information. Options: -V, --version output the version number -w, --tileWidth <integer> tile width in pixels -h, --tileHeight <integer> tile height in pixels -i, --input <path> the path to the tileset you want to extrude -o, --output <path> the path to output the extruded tileset image -c, --color [hex=0x00000000] RGBA hex color to use for the background color, only matters if there's margin or spacing (default: transparent) -m, --margin [integer=0] number of pixels between tiles and the edge of the tileset image (default: 0) -s, --spacing [integer=0] number of pixels between neighboring tiles (default: 0) -h, --help output usage information
Spacing is the number of pixels between neighboring tiles. Margin is the number of pixels between the edges of the image and the tiles. Or, more visually explained:
Using the Extruded Tileset
This tool was built for a Phaser & Tiled project, so here's how to integrate with that pipeline.
If you've already built a map in Tiled with a non-extruded tileset and are looking to replace it with an extruded tileset, you've got a couple options:
- Extrude the tileset and then update your existing tileset in Tiled. In the "Tilesets" panel, click on the edit tileset icon (the wrench) and then click on "Tileset Properties" under the Tileset menu bar item. Edit the "Image" field, replacing the tileset image with the new extruded image and updating to the margin and spacing.
- If you'd rather leave your Tiled file alone, you can just adjust things on the Phaser side. See this example. You want to load the extruded tileset image, and then when you create your tileset, specify the appropriate margin and spacing:
// Parameters: name in Tiled, phaser cache key, tile width, tile height, margin, spacing const tileset = map.addTilesetImage("tileset", "tileset-extruded", 48, 48, 1, 2);
Note: you'll have to adjust your margin & spacing because of the extrusion. If you had no margin & spacing, then the new margin is 1px and the spacing is 2px.