Animated Tiles

[stefanbeller]

Tiles should easily be animated.
Either by using an animated gif or other animated format.
The other option would be to cycle through some tiles within one tileset.

[bjorn]

As far as I am aware, nobody uses animated gifs for animated tiles, apart maybe from some really rare browser games (that don't use canvas but some HTML table or CSS to lay out gifs on a grid?).

So while that may be a nice gimmick, the primary goal of this feature would be to find a good way to define an animation as a sequence of tiles from a tileset and a way to store that in the TMX format.

[Storyyeller]

Do you need the animations to appear inside the editor? Otherwise you can just add them automatically while doing the map format conversion to your game.

[bjorn]

@Storyyeller I think this feature is mainly about having a convenient user interface that allows you to define and preview the animation. Actually showing them while editing would also be nice, but that could also be annoying so then there needs to be a pause button or something. :-)

[ghost]

I guess an animation should be simply a sequence of tiles picked by the user, cycled in a millisecond interval specified by the user.

Probably one could choose specific tiles in a tileset that make up an animation, and they would disappear as separate tiles from the tile picker, and just merge to one single animated tile.

This could be done by having a "compose animation" button which then allows to select multiple tiles in the tile picker, and having a "complete animation" button which then removes all those selected tiles (they could simply become blank/unselectable) and leaves only the first, displaying it now animated with the given settings. If the new animated tile is selected, another "dissolve animation" button could allow to expand the tiles again to their individual original tiles.

All of those buttons would be part of the "Tilesets" window and become greyed out when not applicable.

This approach would not allow tile animations with varying speed transitions between frames, frames from multiple different tilesets or using the same tile for multiple animations. But on the other hand, it would be relatively easy to implement, so I believe (and would also be easy to use).

[ghost]

Well and there should be an animation speed input (text box or slider or something) which shows up during the compose animation step or when an animated tile is selected.

[mtwilliams]

Probably one could choose specific tiles in a tileset that make up an animation, and they would disappear as separate tiles from the tile picker, and just merge to one single animated tile.

Full control with sensible defaults would be preferred (at least by me) thus a new window would be the best bet. As for tile removal: tiles shouldn't be removed from the tile picker unless the user wants them to.

[stefanbeller]

I started implementing this feature.
For a proof of concept I implemented it as the mana project designed it.
In the mana project the animations are defined by tile properties, which define the frame and the duration of the frame.
So there are properties
animation-frame0 = tileid in current tileset
animation-frame1 = tileid in current tileset
animation-frame2 = tileid in current tileset
animation-frame3 = tileid in current tileset
and the durations by
animation-duration1 = multiples of 10ms
animation-duration2 = multiples of 10ms
animation-duration3 = multiples of 10ms
animation-duration4 = multiples of 10ms

This is generic, but not very usable. (Or a good properties editor would be needded)
@Yarcanox I wonder if the animation editor should be inside tiled, or if there should be an extra tool, which could produce tsx files?

[ghost]

I would prefer inside tiled for the sake of simplicity (wouldn't need another tool to be located, installed etc). But it doesn't really matter.

[ghost]

Since gif is color limited, I created a specific animation format for 2d games: http://devnewton.bci.im/projects/nanim

The tools I wrote are in java, but the format specification is made with protobuf so a C++ parser can be generated with zero development.

Note, that it is not a simple apng/mng/fli/flc alternative: it is made for being used with texture packing, so it could also be usefull for #286

[MichaelAquilina]

Stefanbeller its nice to see someone has already given this feature some attention i was recently trying to find a way of specifying animations in Tiled in a simple manner. Currently, the only way i see fit is to specify a number of properties as you have pointed out yourself - but this is far from ideal. Bjorn, do you think this could possibly be included in the next release?

[stefanbeller]

I rebased my attempt to the latest tiled version of bjorn.

[Bertram25]

Couldn't animations be integrated into the tmx format in some way? Using properties is a bit heavy, even if working, isn't it? (Yes, I'm also interested by that feature ;D)

[bjorn]

Well, the main goal of @stefanbeller was to support the animation properties used by The Mana World. Of coure I agree that a better integrated solution would be nicer.

[Bertram25]

@bjorn I'll join you on this point, even thinking that if a common and official format for animated tiles could be integrated in the tmx format specifications, it would be TMW to adapt itself to those, along with other projects (such as mine ;]). I could almost bet on it.

[Bertram25]

@stefanbeller @bjorn Do you think we could define a common spec for animated tiles here?

Maybe you even got something done?

[Disk1of5]

If tiled implemented sprite sheet animations could be defined based off of the animation sequence in the sprite sheet.
additionally if properly integrated into tiled you can choose what sequence of animation to start from.. and if the animation loops..

these are all idea's but if you look at other software that does similar functions as tiled allot of them are using common sprite sheets.

[bjorn]

@Disk1of5 Could you refer to those tools so that we may have a look at them? Also what is a "common sprite sheet"? I've seen sprite sheets take on many different forms, both regarding how to store the images (individually, on a regular grid like a tileset or on a packed texture) and how to store its animation (in the code or with XML files in various formats and with various different features).

[bjorn]

This feature can be very simple and it can be very complicated, depending on how far we want to take it.

• The system implemented by @stefanbeller allows declaring existing tiles as animated, and to build an animation consisting of tiles from the same tileset with individual frame durations. If that is enough then figuring out how to store it is a simple matter of translating the custom tile properties to appropriate XML elements, for example:

<tile id="...">
    <animation>
        <frame tileid="..." duration="..."/>
        <frame tileid="..." duration="..."/>
        ...
    </animation>
</tile>

• On the other hand, @Disk1of5 suggested one might be able to define multiple animations and declaring whether animations loop. I can see this is useful even in the context of animated tiles, for example if you got a door tile that has "open" and "close" animations that do not loop. Usually in this case you don't need Tiled to play the animation on the map. On the XML side, it's easy to add support for this by giving the animation element a name, a loop property and allowing multiple of them.
• If we allow defining sprite animations, for example to be used for tile objects, there's actually a lot of features that could still be added that exist in for example The Mana World:
  • Grouping animations by action and defining the direction for each. This could of course also be done using either special animation names or by allowing custom properties on animations.
  • Specifying pixel offsets per animation frame. Not hard to support.
  • Allowing the frames to be based on tiles from multiple tilesets. This would be a little tricky with the way Tiled is set up.
  • Other fancy stuff like storing the most common sequences (incremental tile ids with same duration) in a shorthand format or picking random frames.

We can't implement all these features immediately, but ideally we should make sure that such extensions could in theory be made later without breaking backwards compatibility.

And btw, most of the effort here will probably be in the UI, allowing the animations to be set up and changed, all with full undo/redo support of course. Saving/loading and animating a bunch of tiles is peanuts compared to that.

[Bertram25]

@bjorn Hi :)
I did. But I'll do it more thoroughly by the end of the week. Anybody else has tried it?

[Bertram25]

@bjorn Well, I tried it. Loading/sabing tmw files with animated data is just here and done. :)
Now, can you tell from a new map how I add an animation linked to a tile?
I was unable to find that.

Best regards,

[bjorn]

@Bertram25 Right, sorry I should have written a little manual. Here comes the tiny manual:

• Go to View -> Tile Animation Editor. This opens the animation editing window.
• Select a tile from the Tilesets view (in the Tiled main window).
• In the Tile Animation Editor window, drag & drop the tiles you want to use in the animation into the frame list, which is the area on the left. You can drag multiple at the same time.
• Double click a frame entry to edit its duration.
• You can use drag & drop to rearrange frames or select and press Delete to get rid of them.

If you have placed the tile you're editing the animation of on the map, you should see the animation playing there automatically and it will update as you change it.

[Bertram25]

@bjorn My bad, I should have seen it. It was rather obvious after all. :)

Tried it, and it's working great so far. (I didn't try exporting animated tiles data in something other than the tmx format yet.)

If you wanted feedback basically, here is some:

• When you open the tile animator view and forgot to select a tile, or didn't select the right one, when you click on the wanted tile, the animator view goes behind the main tiled window. I wondered whether a 'stay on top' option could be used in the dialog flags, for instance.
• When you select the tiles, you're able to select several of them. It seems Tiled is using the first one for animation, but maybe the tile selection should be reset to one tile to properly show which tile is being edited? Or maybe it's a feature?
• As a wish: Adding a right-click on tile shortcut could be nice. Same for the collision editor.
• When using a 16x16 tileset, the movie icon upon the tile isn't always shown after linking an animation to it. I didn't find a precise way to reproduce that so far, unfortunately.

Best regards,

[Clean3d]

@Bertram25 If you're using Linux, depending on your desktop environment you might be able to right-click the window and select "always on top".

@bjorn Everything seems to work well for me so far! I know I'm testing this pretty late, so I hope my input is useful somehow anyway.

The animated tiles get out of sync for me while I'm editing. I suppose this is inevitable if you have animations whose durations never align, but it might be nice to have some sort of "reset timing" option. I guess an example of where this might be useful would be if you have a terrain that's an animated shoreline, and the various tide frames need to sync up.

[Bertram25]

@Bertram25 If you're using Linux, depending on your desktop environment you might be able to right-click the window and select "always on top".

Already did. :) Yet, I am sure there is an OS independant solution to this.

[englercj]

Excited for this feature! Notice it was added to the 0.10 milestone, is there any ETA for v0.10.0?

[bjorn]

@englercj The milestone is just for organizing the release, and there's some smaller things still to do on this feature before the release hence I added it there. However, this feature is already available on the master branch (and the daily builds), so please try it out!

I can't give ETA on things that rely on my spare time. My last goal was to get 0.10 out in August, but it's currently looking like I'm not going to make it.

[bjorn]

Alright, animation preview pushed in 48fdd68. With that I'd like to close this task rather than keeping it open until it's perfect.

@Bertram25 I know I didn't get around to the "animated tile" marker change you suggested, but I hope you don't mind I'll keep that as a possible future enhancement and focus instead on getting 0.10 out.

@Clean3d Thanks for your feedback and indeed the thing with animations getting out of sync bothers me as well. I'll have to think of some solution for this later as well.

[Bertram25]

@Bertram25 I know I didn't get around to the "animated tile" marker change you suggested, but I hope you don't mind I'll keep that as a possible future enhancement and focus instead on getting 0.10 out.

Np. This isn't important.

[sudhalucky]

Hi @bjorn ,

I am very happy to see this feature rolled out in the last update.
I just wanted to know if the respective code to play the animation is available for Cocos 2d-x framework.
We are currently working on a tile map game which has lot of tile animations and I jumped out of joy when I saw the tile animation working perfectly.
May I please know the part of code to add in Cocos 2d-x v3.2 to make the tiles animate in my game.

Thanks a lot.
Sudhaker

[bjorn]

@sudhalucky Sorry but I don't have time to help you with that. This is something you have to talk to the cocos2d-x developers about. The feature is very new so it is understandable that cocos2d-x does not support it yet, and since it's not based on custom properties but adds new XML tags to the TMX format, support for this will have to be coded explicitly.

[sudhalucky]

@bjorn Thank you for your instant reply.
I have raised a feature request on Cocos2d-x forum and they did consider this for development.
For now I am writing my own code to parse the XML tags and play the animation.

However I observed one issue in the tool, once a tile is added to the animation list there is no way to remove the tile in the UI but to delete it from the XML by manually editing, I hope you are already working on this.

Sudhaker

[bjorn]

@sudhalucky Hmm, you should be able to select frames in the list and press the Delete key to remove them. Is this not working for you? If not, on which platform?

[alphaonex86]

Hello,

See my animation format: http://catchchallenger.first-world.info/wiki/Map_format in some case I need random offset to prevent all tile start at same animation level.
I plan update my format to your format into the next major version (into 2-5y).
Maybe can you think about animation + trigger, trigger declanched into menu on tile?

Cheers,

[bjorn]

@alphaonex86 Well, trigger could already be done by a custom property, but at the moment you can define only a single animation per tile. So if you want separate animations for opening and closing, in Tiled you may define this as one animation and then use custom properties to indicate when to play back which part of the animation.

[alphaonex86]

1. Having random starting frame is useful to do lava animation. It's same animation but start at different frame to have random place bubble.
2. My target is more have into tiled a generic way to visualize/edit multiple animation sequence on one tile. My idea it have multiple animation sequence, one without trigger (the default), other with trigger label, with repeat option.
   Why? Because like lot of game, I have implemented that's in my game via custom property, but a common way (but generic) to do that's and good support into the editor, will help the mapper to visualize better the map, and fire it self the trigger to visualizer it.
   Example:
   My door have one tile animation (then no animation), 2 trigger: open, close, each linked with opening/closing animation. After my application will fire it when it want. But if the editor will have menu to fire it too, it will be great.
   Maybe another issue?

[Rialgar]

I would really like to have multiple (named) animations on one tile, this is especially useful for objects, since these might change their animation during the game.
Some examples:

• Collectibles that make a little splosh when collected
• Enemies that can walk, stand, die, ...
• A Goal that shows a nice animation when reached

It would be great to have all these animation specifications in a single place, and I think the Tiled file would be an excellent location.

For the time being I will probably create each animation on the starting tile and add the names as custom properties.

[bjorn]

@Rialgar Yes, it's a feature that could be added. Maybe you could open a separate issue about it?

[hoangbv15]

Hello, apologies on commenting on a very old and closed issue, but I am genuinely wondering if there's a more efficient way of defining tile animations, other than selecting a tile, choosing "tile animation editor" menu option, drag and drop tiles, repeat.

My tile set has above 100 tiles, with each tile has its own animation. It does become a bit tedious going through the GUI to do the animation for all tiles.

The frames are put vertically on top of each other in a sprite sheet, so potentially could I manually edit the .tmx file with a text editor to add the animation myself? Or is there a better way to do it?