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.

7 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 Godot Dragonbones (3.3.3 base) by Ozzadar
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
GitHub - DragonBones/DragonBonesJS: DragonBones TypeScript / JavaScript Runtime
And here how to use it with Pixi.js
DragonBonesJS/Pixi at master · DragonBones/DragonBonesJS · GitHub

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.

1 Like

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: GitHub - negimasato/timeliner: simple javascript timeline library for animation and prototyping 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: GitHub - jeremyckahn/mantra: A professional web animation tool for everyone 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: GitHub - vorg/timeline.js: A compact JavaScript animation library with a GUI timeline for fast editing. 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. DEFILM by paweljarosz

4 Likes

@Jojokyra as mentioned, this thread speaks to similar functionality to what you were talking about, if you feel anything is missing in the initil feature request for the timeline tool, please feel free to chime in here.

1 Like

I am here to support this feature request. If this feature is added, then it is going to be epic, and really easy and intuitive to do animations, and mainly making it fun!!

Just wanted to chime in to say that as a fledgling gamedev who has a long history of timeline animating, and trying to decide on and commit to a platform to develop on, this would have made my decision trivial.

Right now I am torn between GDevelop and Construct 3. GDevelope is much more approachable because of it’s better parameter referencing and documentation, and the Yarn integration in incredibly intuitive. On the other hand Contruct has really rubst timeline animation for complicated character movements and cutscenes!

1 Like

I’m having the same issue, the built in timeline animation tool in C3 is getting better and better and makes editing animations in GD5 a really slow experience.

It’s one of the big features I keep coming back to C3 for.

I support the addition of a timeline. Wanted to make cutscenes and interactive music games, but Gdevelop turns out to be rather limiting in that respect.

1 Like