Animation / timeline tool

This is basically a dream feature that I’m sure is hard as heck to implement.

Really wish GDevelop had a timeline / sequencer tool to be able to easily make cutscenes / things animate in a visual level. Construct 3 and Gamemaker Studio 2 have similar tools and they’re a life saver.

You can visually drag objects around on the screen and set pauses, motion, etc. Very useful for creating animated UIs or in game cutscenes. Similar to how you animate for Flash / Adobe Animate.

The way it’s set up now, you have to use a lot of timers, tweens, and trial and error. It’s pretty time consuming.

2 Likes

What happens if the “visual animation” is in conflict with the events or properties/behaviors of the objects?
I’m guessing it should be offered through a different type of scene, purely for cinematics/cutscenes, or do you mean to have it in usual game scenes?

I think something like DragonBones must be integrated into GDevelop 5, someone did this for Godot take a look https://ozzadar.itch.io/godot-dragonbones-3-3-3
Of course you maybe need to be a God in JavaScript to integrate this into GDevelop but hey we never know, maybe some of the GD devs can take a deep look into.
Here is the DragonBones repo
https://github.com/DragonBones/DragonBonesJS
And here how to use it with Pixi.js
https://github.com/DragonBones/DragonBonesJS/tree/master/Pixi

Absolutely, like Ulisses said, something like dragonbones! If I’m not mistaken, it can output code instead of images? So you don’t have a lot of PNGs to deal with.

Could be really helpful for animating UI or a cutscene / a lot of movement on screen.

Dragonbones was implemented a few years ago. My understanding is it got no usage and the maintainer dropped support, eventually breaking, so once that was discovered it was removed.

That said, an optimal implementation for any timeline editor would work like it does in Defold or unity. The timeline editor abstracts the code creation, rather than hardcoding pngs or hiding the code away.

Ah that’s a shame. ): I find myself creating a lot of tweens / animations and clumsily stitching them together with timers.

Another option would maybe be a Wait action, as much as 4ian is against it, it has its uses. Can’t see the animation on screen but at least it’ll cut down in timers and “when tween finishes” events.

Wait as an action has no uses more than a timer.

Someone made a wait action extension using timers if that makes it easier for you to visualize, though. It is in the extension list in the engine.

As far as timeline editors, I’ll do some digging on if there are viable editors out there that would be compatible and spit out any code, not like I could implement it or anything, but it would help contextualize viability as a feature request.

I tried looking for that Wait action a while ago and couldn’t find it in GD.

I went looking for some animation tool to integrate into GD and Dragonbones is probably the best bet? There’s Rive as well but it seems to have a subscription attached, unsure. If I come across another tool that could be useful I’ll post.

Nope, you’re right, I’m remembering the “repeat every X seconds”, which is just using timers and then resetting them for you. Sorry for the confusion.

For viability, if a contributor does think this is something that could be implemented:

Timeliner: https://github.com/negimasato/timeliner Seems to output x/y coords, rotations, and general tween outputs. Has interface included. This one seems like it might not be the most feature robust, but may be the easiest to adapt?
Mantra: https://github.com/jeremyckahn/mantra Not sure about this one. It’s very feature rich an actively maintained, but seems to need a separate animation library as well.
Timeline.js: https://github.com/vorg/timeline.js Pretty robust, but is “complete” so it doesn’t have any feature enhancements anymore.
Keyframes: https://keyframes.app Also pretty robust, but outputs CSS.

As an example of how some other engines have implemented it, here’s a Defold animation editor using the timeline concept. https://paweljarosz.itch.io/defilm

2 Likes