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

I stumbled onto this project for timeline animations. I’m not sure it’s something Gdevelop team can use but here you go

1 Like

A timeline editor would be very, very desirable. The basis is there. Thanks to the tweening functions, you can easily create complex, beautiful animations. But it’s awful having to create everything by hand with timers.

1 Like

To add on this topic, more from animator perspective, rather than game developer. I struggled a lot with creating some simple animations for UI elements. For example appearance of popup, with a button and couple of text layers linked to it.

Everything can be done by events with tweens, but to get a somewhat real time feedback for this flow requires constant pressing of “Update” preview button and retriggering animations in preview window with additional user action. And there is still no way to emulate dragging of time indicator over timeline, that provides ability to fine tune, only option is to replay everything from start to finish.

Also I’m really missing ability to customize graphs for easing function, especially when there is no preset that fits ideally.

Adding timeline directly under canvas with intention to replicate After Effects or Animate sounds awesome, although it’s unclear how this implementation could live together with event sheet without conflicts. But even isolated “Animation Player” that will “take control” from event sheet for selected instances, until animation track is finished or manually turned off, would help greatly.

There was already mentioned a solution for Defold in this discussion DEFILM by paweljarosz, Cocos Creator have something similar Cocos Creator 3.8 Manual - Animation Clip

I know, that Spine support is now implemented, and it can help with this process, but it’s a paid 3rd party tool, and it’s still another application, I can’t adjust keyframes and look simultaneously on sprites animated in Spine and buttons/text layers moving in Gdevelop viewport. For cut scenes though, Spine should help a lot.

2 Likes