6
\$\begingroup\$

I see a lot of sprite catalogs for games provided as single PNG image, like the one below. enter image description here

I'm interested if I have to manually create tiles from that, or if there's some program that can split it into various tile combinations for me? For example, given the tile combination below, I will have to create a flat grass surface, and 8 other combinations with various edges. Is there something that can automate this task?

enter image description here

\$\endgroup\$
  • \$\begingroup\$ Try searching for nVidia texture atlas tool. You can also search for other open source texture atlas tools. The idea is to map different sets of UV coordinates to different sections of the texture. I believe many of these tools operate on an input of many separate images, and generate the final texture and a serializable formatted atlas file. \$\endgroup\$ – RandyGaul Dec 15 '13 at 23:41
  • 1
    \$\begingroup\$ I found renderhjs.net/shoebox which splits the atlas above into indivudual sprites like below, but does not seem to create the 9 fragments out of a sprite like I listed :/ \$\endgroup\$ – Alex Stone Dec 15 '13 at 23:48
  • \$\begingroup\$ Oh, do you want to create separate images from an already made texture atlas? I don't know of any programs to do this, sorry :(. Given a texture atlas a tool can definitely be made though. However, you're very unlikely to find a tool to split a raw texture into separate textures (since finding the separate images in a single texture is non-trivial). \$\endgroup\$ – RandyGaul Dec 15 '13 at 23:53
  • \$\begingroup\$ It's not clear to me if you want to rearrange tiles by hand, or if you want to do so programmatically in runtime. \$\endgroup\$ – Emanuele Paolini Dec 16 '13 at 7:35
  • 1
    \$\begingroup\$ possible duplicate of How to decompose sprite sheet \$\endgroup\$ – bummzack Dec 16 '13 at 9:11
7
\$\begingroup\$

Go to piskelapp.com , then choose 'Create new Piskel'. Click the menu on the right, and choose import your own image; select it, then put the number of size of each tile. After you are done editing, choose Export in separate images. Done!

\$\endgroup\$
2
\$\begingroup\$

If you're starting with a tileset with regular dimensions and layout (as in your example), and your goal is to create tile maps in Tiled, there is no need to use third-party tools. Tiled supports these natively and easily.

There are a few tutorials on using Tiled like this one, but it's very simple:

  • Create a new map, choose its dimensions and tile size
  • Add a new tileset from file, input its tile size and margin/spacing, if any (there is none in the example)

    New Tileset dialog

  • Start painting tiles. Your loaded tileset is in the sidebar.

    Tiled main screen

There are also other handy features in Tiled; the trees you see in the tileset will be loaded as separate tiles, but you can use Tiled's Brush features to draw those trees in one go. There's also the Terrain Tool which helps you paint tile transitions, after you've defined the border tiles.

From there, it's best to treat the tile maps as a whole, via the frameworks that support TMX maps, rather than individual tiles. For example, you would load and render tile layers, or draw all your "wall" tiles in the same layer and perform a layer collision. There is usually no need to split a properly-authored tile set into individual tiles.

\$\endgroup\$
2
\$\begingroup\$

After a bit of struggling, I found this info:

1) Shoebox is an app that takes the map like I listed in the question and attempts to Extract Sprites, typically a whole blob of terrain

Shoebox sprite settings

enter image description here

2) What I wanted to do next was split this image into 9 tiles, and be able to reassemble them in various combinations. Shoebox also seems to be able to do this (Extract Tiles). This creates a TMX files

Shoebox bitmap settings

3) It seems that the next step is to import the resulting .TMX map into a tile map editor, like Tiled: http://www.mapeditor.org/download.html . From the video, it seems that I would be able to rearrange tiles and create various combinations I need.

It appears that ShoeBox has a bug on mac where it appends the folder name before the png file name (Line 4) within the TMX file, so I had to remove it manually :

name="[REMOVE FOLDER]base_.... 

.tmx file

List of frameworks that support TMX maps: https://github.com/bjorn/tiled/wiki/Support-for-TMX-maps

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.