Generate map from existing layout?

[Grav]

Hi! I just learned about Tiled today, and instead of jumping right into the editor i thought it would be a good idea to write a post here and ask if you think Tiled is a good choice for me.

What I want to do is create a tilebased map from an existing layout. The layout is a simple landscape with different types of land use such as lake, grass, forest, etc.

The layout will, I think, be stored in a raster image file, a TIF file, but it could be converted to other image formats such as PNG or even a vector file. The image will contain a numbers of cells that could vary in size (32x32, 64x64 etc) depending on the resolution.

In the image, each type of of land use is represented by a specific value and color. Each cell in the image contains a value and color.

Is it possible to import such a layout / image into Tiled and turn it into a tilemap?

If so, the next step would be to replace the bland cells with more decorative tiles based on the cell’s value / color. Furthermore, I would like use the rule system in Tiled to create edges and things like that.

Is there a way to achieve this in Tiled?

Thanks in advance!

[Grav]

I found this post from bjorn in an old thread (Jan '15):

At the very least I would want to support opening images as tilemaps in Tiled, where it will automatically create a tileset that contains all the unique tile images. So far this just hasn’t become a priority and there’s just too many other things to work on.

What’s the status on this feature? Or is there some other way, a workaround?

[eishiya]

There’s no built-in feature for this, but you can write a custom import script and use JavaScript’s Tiled’s new (snapshot/1.5) image parsing capabilities to map from the image to tiles. You’d read the image’s width and height, make a new map document of this size, assign your tileset to it, then iterate through the image pixels and assign the appropriate tile based on the pixel colour for each pixel/cell.

It can be pretty challenging to work out how to actually put the tile data into a Tiled document and the documentation doesn’t provide an example, but hopefully this guide on the forum will help.

[bjorn (Thorbjørn Lindeijer)]

I think writing a custom importer is going to be a huge pain since it’s not just reading in pixels but 32x32 or even 64x64 cells, and figuring out duplicates in JavaScript is likely not going to be very efficient.

Indeed this is a feature that still hasn’t made it, but in the meantime there are some alternatives you could try to turn your image into a Tiled map + tileset, some of which I’ve mentioned here:

Map image to tmx

Nice tool! It’s an often requested feature so eventually I do hope to get around to building this right into Tiled as some kind of “import map from image” feature. Btw, I’m a bit wary of running binaries (which includes .jars), since there is no way to know what it’ll do. What about publishing the source code? Other tools that cover this use-case are Map-Tiler, ShoeBox and the scripts covered in this wiki page.

That said, it really should be as easy as choosing “Open Image as Map” from the File menu, choosing the tile size, and done.

[eishiya]

+1 for this feature! +2 if there’s an option to use an existing tileset instead of generating one from the image ;D

In addition to making it easier to import tiled maps drawn in Pyxel Edit and Aseprite for further editing, it would be a way to partially bypass the difficulty Tiled has with rearranged tilesets. Export a map as image (or images, for multiple layers*), rearrange the tileset, then reimport those images as layers with the new tileset **.

* Related feature: export each layer as a separate image. I believe tmxrasterizer can already sort of do this (at least it can output a specific layer). In addition to being useful for the above, this would be great in combination with the new parallax feature, since as of 1.5 Tiled will officially support layers that aren’t aligned statically. For me personally, this would be useful for creating stitched decorative versions of maps with parallax. I know this can already be done by manually hiding layers (and maybe by scripting)? but an “individual file per visible layer” option would be such a time saver. Export them as fileName_LayerOrder_Layer Name.ext :D

** I am asking to be able to import not just one image as a map, but several at once. Aseprite has a feature where importing sequentially numbered images prompts you to import them either as animation frames in one document or as individual documents, perhaps Tiled could do something similar with layer images? It would be fine if this was limited just to files with the same filename formatting as the export.

[Grav]

Thank you for setting me on the right track! I created my first tiemap during the weekend, using ShoeBox. It did exactly what I wanted.

Now I am trying to enhance the look of the map with automap. It’s a bit tricky, but I think I’ll get there.