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 https://github.com/bjorn/tiled/issues/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.

[Disk1of5]

Hey @bjorn http://tide.codeplex.com/ http://dambots.com/dame-editor/ is an example of a tile editor utilizing a sprite sheet as for standardizing a sprite sheet i have been using a commercial solution that outputs to a open source standard. http://www.codeandweb.com/texturepacker

But your right there are MANY formats.. i'm gonna say my 2 cents would be to adopt LibGDX's format of sprite sheet handling for the following reasons 1) Opens source 2) a GUI has been developed for it https://code.google.com/p/libgdx-texturepacker-gui/ 3) its Java so it works on All Platforms. 3) there is a alternative robust solution (as mention above) if required.

A idea would be that a TMX tile set would be loaded from a sprite sheet, animated TMX tiles are detected as an array of animations.. the editor could define the animation properties (speed, looping, starting frame etc)..

not something easy to incorporate but these are features that would help tiled grow.

My current project is using Spine for player character animation and objects, and Tiled for mapping, my method of animating my tiled map is having a pace holder tile and in the properties defining that its an animation and a link to the sprite sheet at render time.. also i use tiled objects as place holders for parallax layers This works at run time good.. but isn't the most ideal solution for artists and mappers to see what the finish product looks like just in tiled..

i wish i knew more about QT to help contribute :(

Thanks!

[bjorn]

@Disk1of5 Hmm, as I see it TexturePacker and libgdx-texturepacker-gui have very little to do with sprite animation. All they do it stick individual images onto a single texture. It is not very interesting to support their output directly in Tiled, because the output is very dynamic (the images may need to be split over multiple textures and their arrangement and order can change completely when one of your images changes size a little). In combination with such tools, I think it would be much more useful for Tiled to refer to the individual images that these tools are packing together. Then in your engine/game you have those file names and should be able to map that to whichever texture atlas the packing tools have decided to put them.

I will have a look at how tIDE and DAME support animation.

Btw, the main thing holding back Tiled development currently is that I have very little time for it. If you want to help with that you can sponsor me a little each week and help towards my goal of getting enough money to compensate for giving up one day a week at my current full time job. See https://www.gittip.com/bjorn

[Bertram25]

Hi,

So finally, and as for the TMX specs, are we ok with:

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

as for the looping, we could even add:

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

Regards,

[englercj]

Was this issue ever revisited? I am currently setting a properties on a tile to describe the animation, but there isn't a good way to get the id of a tile easily (in large tilesets), so this process is non-trivial. Some solution that allowed me to easily build an animated tile based on a tileset would be fantastic.

[johnfn]

+1 Would love this feature. Just finished Ludum Dare and Tiled was generally a joy to work with, but this was the one feature I was wishing Tiled had.

[englercj]

Right now I'm naming objects, and then creating an animated sprite based on the name and a map of tiles that it should use as frames. Would be so much better to just do that in tiled.

[Bertram25]

Let's make things advance ;) How much for the first version of this feature? Animated tiles with optional loop support (viewable in the editor)

[bjorn]

@Bertram25 Are you asking people how much they are willing to pay or are you asking me to name a price?

[Bertram25]

@bjorn I'd rather say name your price. :) If it's too high for me alone, then I'll ask the others how much they are ready to bring so we can divide it. It's a key feature for everyone including myself, and you deserve it, that's why I'm ready to commission it.

[bjorn]

Ok, one issue is that I will not have time for this before November unless I am allowed to take days off before that. Other than that, I think I will need at least two days of work to do it properly, so 400 € would be my goal for this feature. This may seem a little much but note that it includes VAT and income tax.

To allow everybody who is interested to contribute to getting this feature sponsored, I would suggest using BountySource to add your contribution: https://www.bountysource.com/issues/128179-animated-tiles. BountySource will take your money up front, but it will only be paid out to me (or whoever else decides to implement this feature) when this feature is available in Tiled.

[Bertram25]

Ok, Paypal is currently reviewing my payment but I added 35€. Please everyone, even one count!

[kheftel-old]

I chipped in $15 using paypal. Hope it helps. Paypal is reviewing my payment just like @Bertram25's

[Syynth]

I sent $15 as well. I would happily pay more if I had it right now.

[Bertram25]

38 + 15 + 15 = 68. Yeah :)

[rappo]

Hey guys, I'm from Bountysource. I talked with @bjorn about this already in IRC (#Bountysource on freenode), but the hold up with Paypal processing is on Paypal's end. We talked with them on the phone and they're not sure what caused the delay, but they're looking into and they believe it's because of a recent change on their end. They'll keep us posted, so I'll let you guys know as soon as I do. Sorry about that!

[bjorn]

Thanks a lot guys! All bounties so far are recognized by Bountysource now. Once I have some time I'll try to raise additional awareness to get more people to fund this feature. Please feel free to already make some publicity yourself!

[Bertram25]

Added something there, more specs related: :) http://forums.themanaworld.org/viewtopic.php?f=4&t=17710

[Bertram25]

Added another $15. I hope this will start to tempt you. ;)

[bjorn]

Thanks @Bertram25, though as I previously said I will not have time to start on this before next month. The amount is also still far away from the goal I set, but there may be a bigger sponsor coming up for this feature.

[Bertram25]

Hi @bjorn,

I hope you're going well, btw.

Sure. Don't worry, I didn't forget about your availability, and I'm not the kind pushing people to do things quicker as I know the involvement needed in front of the few dev spare time we both may have. I just wanted to raise the interest again (for you but also for others). ;)

Best regards,

[Bertram25]

Hi @bjorn ,

I've seen you've set a goal of $550 for this feature. While I've got no problem with this, could you describe a bit more specifically what we would get for such a goal. I'm sure this would help the feature overall interest, and help me and others advertise it.

Regards,

[bjorn]

@Bertram25 I just noticed they added that goal feature and $550 reflects the original target I had stated here (400 euro). What I would implement for this would be support for single animations to be associated with tiles with per-frame duration, including an editor for selecting the tiles and setting the durations and the live previewing of animated tiles on the map.

I should note though that there is already a sponsor that plans to cover the remaining amount of this feature! I plan to work on this over my Christmas holiday (probably starting around the 16th of December).

[Bertram25]

I should note though that there is already a sponsor that plans to cover the remaining amount of this feature! I plan to work on this over my Christmas holiday (probably starting around the 16th of December).

OMG, this is great!! :D

Thanks for the explanation of the planned feature. This will be a nice Christmas present for everybody involved here! :) I hope you and your family are going well in those winter and Christmas times.

Best regards,

[englercj]

@bjorn Fantastic! I am really looking forward to it!

[bjorn]

Sorry for the delay after announcing that I planned to start on this around the 16th of December. Due to the work on #552 taking longer than expected and then hitting the family visiting part of the holiday it's now two weeks later.

I'll start on this feature now, but I have only the weekend left of the holidays so I'll have to make the best of the evenings and weekends.

[Bertram25]

@bjorn It's good to see you working on key features, whatever they are. Take the time needed. Happy New Year!

[bjorn]

Thanks @Bertram25, and a Happy New Year to you too!

[bjorn]

So, the progress so far is that the core classes have been adapted to store the animation data, saving and loading has been implemented for the TMX format and Tiled is rendering the animations on the map view (currently updating the entire view when a frame changes, so that tile layers, brush preview and tile objects all update correctly).

I've also made it support the TMW way described by @stefanbeller at https://github.com/bjorn/tiled/issues/57#issuecomment-4441490 to make it easy for people who were using that style to switch to the new format.

The changes have been pushed to the master branch, so daily builds are made. The Windows one is already updated and Max OS X will follow soon.

Next I plan to start working on an editor window where you can define the animations. I will try to make this work based on drag and drop. I expect progress on this to be slow since I only have the evenings to work on it, but I'll do my best to finish it next weekend.

[Bertram25]

Hi @bjorn,

Thanks for all the work done on this already! It's not urgent at all, and maybe it's already done, but maybe you should add an animation to the example map so people can easily get what it looks like?

Best regards!

[bjorn]

@Bertram25 It would certainly be nice to add an example, and in fact the examples need to be extended a lot since they don't use any of the new features added in the last years. However, I don't have some nice tile animation ready so for now you can check it out with the Evol Online repository for example:

https://gitorious.org/evol/clientdata

Just open maps/000-1.tmx which has animated wave movements or maps/000-2-1.tmx which has some subtly animated candles. You can save the files to have those animations stored in the TMX format.

[bjorn]

Just a quick screenshot showing the progress so far with the tile animation editor, using the Evol Online map as example:

The idea is that you would be able to drag tiles into the list of frames, and drag frames around within the list, but that's still to be done. I think it may be a little confusing that there's two times the same tileset, once for selecting which tile to edit the animation of and one for selecting frames for in the animation. But at the moment I wouldn't know how else to do it. Hopefully it's not confusing at all.

[Bertram25]

@bjorn Great screenie. :D

I can understand why you "duplicated" the tileset view as it must simplify a lot the drag'n'drop code. (And personnally, I don't mind. The animation editor is only there when you're animating, so it's a different workflow.)

Now I've got several questions (I didn't try the master version, yet):

• Is the "preview" text a placeholder to tell "You'll be able to see the resulting animation live here."?
• Once you've animated certain tiles on your tileset, how do you know which one is corresponding to an animation?
• Have you implemented an option to enable/disable the animations in the main view?

Thanks a lot for the hard work on it. I know many, many people will like it. :) :+1: