Placing props on a map

Hello, I have some interactive props that I would like to place on my tiled map. Things like a door or a switch/trigger, etc. These sort of props have animations that are triggered on interaction as well as associated collisions, etc. - afaict tiled only supports looping animations. Are there any documented solutions or patterns for using Tiled to place game world objects?

For interactive or otherwise dynamic object, Objects are generally the way to go. Tile Objects have artwork (a tile) associated with them, and are good for things like doors and NPCs, and shape Objects have no artwork, and are good for things like waypoints/paths, zones of effect, etc.

Even for Tile Objects, animations are still just simple lists of frames with durations (Tiled shows them as loops, but that doesn’t mean you have to), because Tiled is not a game engine - it doesn’t do any game state, so it can’t know which animation to play. Generally, the logic handling animation states is in your game, not in Tiled. You can define the animations in Tiled, however. For example, you can have the “idle” animation on one tile, the “closing” animation on another, and “opening” on yet another (presumably since the door is animated, you have enough tiles for that; remember that the tile the animation is attached to does not have to be the first frame of the animation, or even used in the animation at all), and on the idle tile that you also use as the tile for your Object, you’d have custom properties that tell your game which tiles contain the other animations (to avoid using tile IDs, you can give the tiles names and use names to refer to them in your custom properties). Then in your game when you’re setting up the logic for the doors, you’d use that information to set up the appropriate animations. Since the “opening” and “closing” tiles would not be used directly in maps, you don’t have to worry about those animations looping in the map.

1 Like

Thanks that makes sense! I’ve been using aseprite for game entities / animations - it sounds like I can just import the same sprite sheet as a tile map and create an object from this to place in the map.

If the sprites are arranged in a grid, yes you can.

I also use Aseprite for my sprite animations (but not for actual tiles), but I don’t put those sprites into Tiled, I export the animation metadata from Aseprite (Aseprite offers this as an option in the Export Spritesheet dialog) and use it in my engine. My animation code is built around the animations I define in spritesheet. Tiled doesn’t know anything about them - seems wasteful to redefine animations after they’re already defined in Aseprite, and with Aseprite and the metadata it can export, I can make use of features like trimming the sprites to pack the sheet more tightly than a grid.
Maybe that’s another option to consider. You can still set up an Image Collection tileset with the “base” frame of each spritesheet (e.g. a tile for Door, a tile for Other Door, a tile for Treasure Chest) for use in Tile Objects, but you wouldn’t be doing any animations in Tiled.

1 Like

Thanks! Yes this is what I had in mind - continuing to use aseprite to drive the animations - I just want Tiled to be able to place things in the map and visualize it through the editor. The image collection with the base frame, that you mentioned, would take care of that. Is this what you currently do? Wondering how you currently generate such a resource, if this is what you do.

Currently I don’t include visuals with my dynamic entities in Tiled because I don’t have that many of them to warrant the visual distinction. I just use Rectangle Objects that have a File property pointing to the animation definition file, along with the other properties for each entity. For my current project, the size and class/colour of the Object is more than sufficient.

For my next project, I probably will want the visuals because there will be many more NPCs and such, so I’ll probably do what I described - make an image collection that contains a frame from each entity. Tiled already allows setting the subrect for an image for use in a tile, so I’d add the spritesheet(s) to the Image Collection, and then set their subrects so each one is just a single frame, and have the tiles point to the animation definition file with a custom property. Knowing me, I will probably write a script to automate this, so I’d just select the animation definition files and the script will add tiles that consist of each animation’s first Idle frame or something - the metadata is already available from Aseprite, might as well use it.

1 Like