Best way to use Tiled with texture packer/custom game engine?

Hello,

I am looking to use Tiled to create the simplest tile based game where assets come from a sprite sheet created using TexturePacker (https://www.codeandweb.com/texturepacker).

The game is made up of 64x64 tiles, with some objects (coins) to collect smaller in size and other taking up more than one tile (Tree).

What I would like to do, is to use Tiled to position the various images on screen and read its tile position ( tilesX, tilesY) and object properties.

I can use the source images from the raw directory before they are packed to add them one by one each one as a tile set.

My question is,

  1. could any kindly offer a better way?
  2. when I add an image smaller than my map tile size (such as a collectable coin), its not positioned centre, is there a way to do this?.

Many Thanks for any advice and for reading my question…

A better way than adding each image as its own tileset, is to add an “image collection” tileset and add all your images there:

There is currently no real nice way of centering your coin on a tile. Your options are basically:

  1. Put the coin in its own tileset and use the tileset’s “drawing offset” property to shift it to the center.
  2. Expand the coin’s graphic to be large enough to allow placing the coin in the center of a tile.
  3. Use an object layer to place your coins, then you can position them freely.

The second approach allows the coin to still be part of your single tileset, and it should actually not waste any texture space since the transparent pixels can be automatically cropped by TexturePacker.

Thank you for that information and quick response, very useful information for me.!

Making a smaller coin centred isn’t too much of an issue as its just display when designing, I can centre when I load the map. Also I could use a custom property or file name to identify the texture to load from the sprite sheet.

Thanks again.

I just want to ask something related to this and it is already here. So it will be BEST EVER FEATURE to work with spritesheets in Tiled! Current workflow for this not so good - add custom props to placed tile or to tile properties in the tileset. Is the only way to work with spritesheets?

What way are you looking for @T1mL3arn? What do you mean with spritesheets exactly? What do you find bad about the way tiled does it currently and what would you suggest to improve it?

Regards,
Ablu

Will be great feature to add tilesets based on spritesheets. Then work with them like with tilesets based on collection of images. The current method is time-consuming - need to manually set’s the related id from spritesheet to each tile in tileset. Also is possible to read names of source images during parsing map - best way, I believe, if we had spritesheet frames id exactly as filenames from which that spritesheet consist. Otherwise, back again to manually adding.

But with spritesheet, however, it lost the ability to add new images to tileset in Tiled.

I understand that exist so many formats and make and support for all is impossible.

Can you post an example of what you mean with a spritesheet? If you mean something like https://github.com/tales/sourceoftales/blob/master/tiles/dirt.png?

If so that is already possible. You can simply select Based on tileset image in the Type dropdown and set the tile size, spacing, etc there.

Regards,
Ablu

Frames in spritesheet can have different sizes.

Ah ok… Though I see no nice way to configure such tiles at the moment if they come from a single png…

First of all I think this is a little off topic so I would prefer not to continue discussion about such spritesheets here. I agree it would be nice for Tiled to support spritesheets where frames can have different sizes, but this raises challenges regarding defining where the frames are and for assignment of IDs especially when the spritesheet is later updated. It is hence an entirely different beast than supporting a workflow using TexturePacker, which was largely solved by the image collection tileset.

You’re welcome to elaborate on how you think spritesheets could become first-class citizens in Tiled in a new thread.

Just to re-cap, To support texture packer I will do the following…

1 - I will create a tile set using “collection of images” tile set type
from a working assets directory containing images/animations.

Tiled will create a TMX file containing tile assets like:

<image source="../../../texturepacker/collectables/coin.png" width="32" height="32"/>

2 - I will use texture packer to pack that same directory, it will
create entries that map to the texture packer sprite sheet as:

 <SubTexture name="collectables/coin" x="2" y="2" width="32" height="32"/>

3 - I will load and parse the TMX file in my custom game engine, and parse the trailing image source starting at /texturepacker which leaves me with path :

 collectables/coin.png

This is the key I will use to lookup the sprite sheet atlas - trimming “.png”.

Help this helps @T1mL3arn, Thanks again @bjorn.

btw - What could be a cool feature is to be able to add smart directories to a tile set in the same way texture packer does, I.e. listen to local file changes and dynamically add new files/folders etc… obviously a different topic :smile:.

1 Like