DefAnimator, visual animator for Defold

[sven]

As some of you might have read on our public slack, we have had two hack days this week where we had the opportunity to do some fun projects using Defold. I decided to do something I have been thinking about for a while, a tool created in Defold! So without a long introduction, let me introduce my hack result; DefAnimator 0.1

Screenshot

Video

http://forum.defold.com:/uploads/default/original/2X/2/21e09c9b794c40191a4dc8c2f6e13639d436c16e.mov

DefAnimator is a (super non-official ;)) visual animation tool built as a regular Defold project. The idea is that you can use it to author simple GO animations visually with keyframes, then save the animations as Lua-modules and use in your own game/project.

The output from the save functionality creates a Lua module that returns a function consisting of chained go.animation calls.

Example usage

local my_animation = require "my_animation" -- my_animation.lua was saved using the tool and is located in the project directory

function init(self)
    my_animation("gameobject_id") -- starts the generated animation on GO /gameobject_id
end

Implementation details

• GUI was done using dirtylarry, with some modifications and custom “theme”.
• Some OS native interaction using LuaJit FFI, including:
  • Native “Save/Open File” dialogs using defold-dialogs
  • Native context menus using a lib I’m planning to release soon-ish.

Future plans

• Being able to use DefAnimator as a library in your own project. Meaning that you could in theory just depend on DefAnimator to animate your own GOs (create a .collection with your own GO, add the supplied defanimator.gui and it “Should just work ™”.

Download

I want to release it as open source eventually, but for now here is a (a bit buggy ) OSX version.
DefAnimator.zip (2.3 MB)

Known bugs and limitations

• The timeline is a bit wonky, you can only select keyframes on the current property you have selected (visualised as lighter gray in the left most column).
• Playback preview does not loop.
• Playback preview does not handle different easing options, but the saved file will.
• Opening/Loading previously saved animations does not work currently.

[britzl]

This is a really brilliant showcase of what can be done with Defold and Lua. Well done Sven!

[88.josh]

I am really looking forward to checking this out.

[AGulev]

I try to use your program.
When I clicked to “Save As” nothing happens.

[sven]

Whoops, my bad! Fixed and updated the Zip in the original post, but here is a direct link: DefAnimator.zip

[gianmichele]

Eheh was searching for something else and this came back.

Wish we had something similar in the editor

[TheKing0x9]

I can die for it (and then respawn to use it )

[COCO]

what’s going on about it now?
after 3 years？

[88.josh]

hi! Is there any chance I could get a working version of this? The archive is damaged and can’t be opened (not the zip, the app itself)

[sven]

Can you try this version @88.josh?
animator_0.2.zip (2.4 MB)

@COCO haven’t made any progress on this, I really should release it open source.

[88.josh]

Okay, I can open the app, but it appears to immediately close. that’s a shame. I’d really love to have a play around with this! don’t worry if it’s too much work

[sven]

Could you try running the binary inside the app folder through a terminal? Animator.app/Contents/MacOS/Animator
You should be able to see the logs there since I build it for debug.

[88.josh]

INFO:DLIB: Log server started on port 53029
INFO:ENGINE: Engine service started on port 8001
INFO:ENGINE: Defold Engine 1.2.162 (e07f3bb)
INFO:ENGINE: Loading data from: dmanif:/Users/joshrackstraw/Downloads/animator_0.2/Animator.app/Contents/Resources/game.dmanifest
INFO:ENGINE: Initialised sound device ‘default’
ERROR:SCRIPT: main/dialogs.lua:5: dlopen(native_libs/nfd, 5): image not found
stack traceback:
[C]: in function ‘load’
main/dialogs.lua:5: in main chunk
[C]: in function ‘require’
main/main.gui_script:3: in main chunk
WARNING:RESOURCE: Unable to create resource: /main/main.gui_scriptc
WARNING:RESOURCE: Unable to create resource: /main/main.guic
WARNING:RESOURCE: Unable to create resource: /main/main_generated_1.goc
ERROR:GAMEOBJECT: Could not instantiate game object from prototype /main/main_generated_1.goc.
WARNING:RESOURCE: Unable to create resource: /main/main.collectionc
logout
Saving session…
…copying shared history…
…saving history…truncating history files…
…completed.
Deleting expired sessions…109 completed.
[Process completed]

[sven]

Ahhhh, right! Now I remember, I had to do some hack to get dynamic images to load. Let me see if I remember what I actually did.

[sven]

Managed to remember what I did last time, actually wrote a thing about it apparently. (http://svenandersson.se/2016/loading-dynamic-libraries-from-inside-macos-app-folder.html)

Fixed version: animator_0.2.1.zip (2.4 MB)

[88.josh]

Okay, I can’t get this one to work either. And you know what? I’m going to have to make this myself (unless sven can make it open source )

Key features:

Ability to animate tint, scale, euler, position using keyframes along a timeline.

I think that’s it. Even if I have to import images myself in the editor and get the animations out via debug everytime i want to do this, it’s still going to be useful for me.

[ross.grams]

Release the source, Sven. We will fix it. The Collective has spoken.

[88.josh]

My efforts are not going badly! I have timelines and I can select different objects and different points on the time line. I also have a play button.

the only downside is that I have no idea how to actually do the animations once the play button is pressed. My idea is that for each attribute to animate (i.e. “position.x” to create a table with

1. the object,
2. the attribute,
3. a nested table with the keyframes and target values

{
"gui.get_node(“object1”), “position.x”, {0 = 0, 0.5 = 0, 1 = 20}
}

the target animation here would be the position.x waiting for the first half of the animation, then sliding to 20 during the second half. And aside from actually doing the animation, I’d also like to print something like gui.animate(“object1”…) in the debug. And even then i won’t be able to do automatic easing.

Any help?

[88.josh]

okay got it! like in Sven’s example, it’s chained animations using callbacks! and that means you CAN do easing! okay WE DON’T NEED THE SOURCE CODE ANYMORE, I’M GONNA MAKE THE SOURCE CODE MYSELF

edit: I DON’T KNOW HOW TO DYNAMICALLY CREATE FUNCTIONS CAN ANYONE HELP
edit: OKAY I THINK I CAN USE A GENERIC FUNCTION AND A COUNTER AND MSG.POST()

[Pawel]

Maybe you could push your project on Github so we can help developing it?

P.S. I wish there could be more hackathon days in Defold team! Maybe even we can prepare something like that, in community? What do you think?