Panthera - Animation Software for Defold

The Defoldmine
#1

panthera_logo

Github-sponsors Ko-Fi BuyMeACoffee

Panthera - the online tool for visual creation animation for Defold

Panthera main purpose - give your the huge speed up at Defold animation flow even with more accuracy. You not required to do animations via code and run the game every change to see the changes. Make animations in the Panthera and export it via code right into the game!

Panthera Online Editor Link
Panthera Editor GitHub

Overview

Panthera is the online editor for animation, made for Defold on Druid. I’ve start this project for myself to make easier animation creation for a lot of stuff (I’ve used it almost for GUI simple animations)

Since the workflow: “write animate code → build → test → repeat” is a quite time consuming, it’s should help you :slight_smile:

You can see twitter thread with some gifs of this editor: https://twitter.com/insalitygames/status/1538076834709049344
You can see the Panthera GUI export example here: -- The animation file is generated with Panthera Animation Software-- https:// - Pastebin.com

Also there is a small tutorial video to get primary ideas of Panthera: in 7 minutes

Online editor features

  • Custom online editor, full Druid powered Defold project
  • Several animations per project are supported!
  • Export animation as code for GO and GUI nodes to Defold via animate functions.
  • Ability to copy export code directly without download file flow
  • Properties supported: position, scale, size, rotation, color, slice9
  • Add different triggers at specific time (events, set node state, set images and set pivot)
  • Use stub node or upload image for every node
  • Create you nodes layout as in your game scene or export *.gui or *.collection files right into the editor!
  • Save, load, copy, import or export your projects

Manual

See the Manual here to learn Panthera Editor

Issues and Suggestions

If you have any issues, questions or suggestions please create an issue or write right here!

Note

It’s first Panthera Demo release. Probably a lot of stuff will work bad, also undo/redo is currently disabled (and autosave works not pretty well without it, so use save button now)
I need your comments and experience with this.

There are a lot of things to do, like animation list, more export variants, more control etc. But it will be in the future :slight_smile:

52 Likes
Any plan on a built-in animation editor?
Procedural animations (by Lampogolovii)
Commercialization of Defold developer tools
#2

Here is example of exported animation, works for GUI and GO
But GO have several restrictions, so size and slice9 property will be not animated

16 Likes
#3

Omg this looks absolutely amazing. I’ve actually tried to make something like this but I found creating it was taking longer than the slow method of code - test - recode. I cannot wait to get started on this and will download it first thing tomorrow morning. Thanks for your hard work.

8 Likes
#4

Well done @Insality ! This will be useful to a lot of Defold developers.

7 Likes
#5

I’m really looking forward to trying this. Looks amazing!

I was trying to animate a main menu intro and background, and this seems like it will save me tons of time.

6 Likes
#6

Used this yesterday to set up a sequence for my game, and I was amazed by how easy the process became when using Panthera. While normally it would have taken several hours of work to get something working, I was able to get it done within just an hour.
Thanks for creating this awesome and much needed tool :heart:

7 Likes
#7

Thanks! This is sounds great!
I’m glad what Panthera can save you a hours of work!

Probably, you can share your results here. All is ok working?

6 Likes
#8

It still is missing some finishing touches, will definitely share later.

Yep. Loved the experience of using it. Everything felt well designed and smooth. Even the exported file is very readable and easy to edit to add more custom logic.

7 Likes
#9

Wow it looks amazing

I’ll give it a try as soon as possible :sunglasses:

Thank you!

4 Likes
#10

This is fantastic! Exactly what I intended for my old defanimate-project, but so much more polished, great work! :smiley:

7 Likes
#11

Panthera 0.8 Release

promo_animationspromo_copy

Hello! Here is the update for Panthera Editor. I’m using it pretty often, so I adjust several stuff to work with it in more comfortable way.

So, here is rough changelog:

  • Animations! Now we able to create several animations for one node setup in the Editor. On export, different animations will be exported in different functions. The exported code API slightly changed:
    • Animation.create(nodes, options, is_skip_autoplay). In options you able to define default animation. By default it is “default” :smiley: . The is_skip_autoplay says don’t play animation at start.
    • Animation.play(animation, options). Now you able to override default options, pointed on creation. This options is: animation_id, speed, is_loop, is_relative, is_skip_init, callback and callback_event.
    • The is_skip_init flag is required to don’t setup node initial state on animation start. It can be useful to escape the sharp transitions between animations.
    • Panthera project format was changed, but there is migration and all should be ok.
  • Code Export! The HTML export was improved. Now it can remember your last save path. And more important feature is Copy Export
    • Copy Export allows you copy animation code directly from Panthera Editor. It also can speed up your animation setup workflow, since it’s just copy & paste
    • Two buttons on status bar with Copy Export and Export to allows you don’t open the project window to do export :tada:
  • More node setup! I’ve added the blend mode and is enabled to node settings. Blend mode was required for me to better adjust animations for lights and other types of particles. With is enabled you can setup initial node state without spawn trigger key at animation start.
  • Hotkeys changed! Now hotkeys assigned mostly to SHIFT + (X) due the HTML version. It should work better now
  • Undo/Redo! Still disabled :laughing:. Since it not very critical for me, but sometime!
  • JSON Project Export! Now include every used image, so you can easily share animation project between your computers or even with your teammates (also in VCS too?)

Link as always on GitHub

Have a good day :white_heart:

24 Likes
#12

how this work? please learn me. I cant move box ((

video on this forum cant see

#14

Hello! You can read the Panthera’s Manual here

In short: then time on timeline is zero, you change the initial state of the current animation. If you move timeline to any other time - you can add a timeline keys of changed properties by changing them and click on property with :large_orange_diamond: icon

3 Likes
#15

Awesome job! It is working great and very efficient. Any plans to opensource it? for people to add features to it?

Thanks

#16

Thanks for the feedback!

Sorry, currently I have no any plans to opensource it. But if you have any suggestions or improves, you can make an issue at github and make some donations to prioritize somehow your features :smiley:

1 Like
#17

I made the introduction / tutorial video to get faster into Panthera

In this video we will create simple slider GUI component animation:
panthera_slider_tutorial

Introduction covers:

  • Animation create with import images and *gui file
  • Add several animations, create timeline keys
  • Import animation into Defold and run it
  • Show workflow how to update animation faster via just copy/paste
  • Several options and how it’s affected on animation
  • How to bind nodes directly into animation

In just 7 minutes!

15 Likes
#18

Amazing work!! Thanks so much for this. Can’t wait to build nice GUI animations.
BTW, you work on Druid (especially the grid/datalist components) makes my life sooo much easier, I thank you every day that I’m using your library! Keep up the good work!

4 Likes
#19

Looks amazing! Can’t wait to play with it. :laughing:

2 Likes
#20

maybe you can do checkbox with play all list animation repeatly? from first list item to last

#21

There is no sense to make this in animation

You can do it via animation callbacks, something like:

animation_file.play(animation_data, {
	animation_id = "anim1",
	callback = function()
		animation_file.play(animation_data, {
			animation_id = "anim2",
			callback = function()
				-- play other
			end
		})
	end
})