[GSoC 2020] Improvements for Lottie Exporter Plugin

Development
, ,
21

We can use this link to follow on the development work of lottie: https://github.com/airbnb/lottie-web/blob/master/CHANGELOG.md
I was reading this and found out that image sequence has been supported now :smiley:

So this will surely help to track new features that we can use!

2 Likes
22

@KonstantinDmitriev How are characters in a Text Layer rendered in Synfig? For example how does synfig use the data in text_layer.sif to render the characters in a text layer?
Lottie uses bezier curves to generate each unique character in the text present in the layer, but I could not understand how Synfig does it. I am attaching a snippet of the rendered lottie JSON file from After Effects 2020 to show the same -> text_layer.json

2 Likes
23

We discussed this offline and currently I don’t have knowledge as per how the characters are rendered. Can someone point as where this text layer rendering happens. :slight_smile:
@ice0 @rodolforg

2 Likes
24

You will find all the needed info in the source of the module lyr_freetype

Check also render.cpp

It’s rendered as surface, not as curves
Hint: see libs Cairo / Pango / FreeType

3 Likes
25

Yes, it looks like Lottie doesn’t supports exporting Text (as characters).
So, it converts all text to curves.

In Synfig we use freetype library to convert text characters to pixels and show them on screen.

Synfig has no function to convert text layer into splines (regions/curves).

Implementing this in Python (as part of Synfig plugin) is a very tricky task and I do not think it worth doing so.

It makes sense to implement conversion of Text Layer to curves directly in Synfig, but I have 2 doubts here:

  1. Text Layer is in process of rewriting and its code will be changed much in future.
  2. Even if conversion code will be written, I am not sure how to (properly) trigger it before executing a plugin.

So, I suggest to skip Text Layer and proceed with other tasks.

Can we dedicate this time on implementing bones? :slight_smile:

2 Likes
26

So we discussed this problem offline and I think Saurabh has found a way around and he will be able to implement this.
@saurabh22 can you add more to this?

I guess this might not effect the lottie export for text layer, as the conversion is independent of the Synfig code. Please correct me if I am wrong here.

This can be done, but I leave it up to you guys to decide on this. @KonstantinDmitriev @saurabh22

1 Like
27

Yes, Lottie allows exporting of text-layers using two methods:

  1. Directly including all characters in the json file as glyphs which ultimately leads to the json file becoming extra large in some cases.
  2. Directly using text data which does not require us to bundle all the characters inside the json file.

I am currently using the second method as it is easier as well as efficient size-wise.
I have made some progress in making the text-layer in lottie format as well. Here is a sample animation → lottie_text

I think you are right as I feel the important things needed to generate the lottie format file won’t be changed.

2 Likes
28

@KonstantinDmitriev I think Text Layer can be done, should I finish it and then take up bones immediately after that?

29

This is awesome! I wasn’t aware that Lottie supports second method! :slight_smile:

Yes, you right. In this case this will not affect Lotties’s export for Text Layer.

Yes, then it’s better to finish Text Layer.

Also, I suggest to get back to reviewing the timeline ([GSoC 2020] Improvements for Lottie Exporter Plugin - #13 by saurabh22) and update the plan according with bones task. :slight_smile:

2 Likes
30

Weekly Report - June 1st - June 7th

  • How was the last week? What did you accomplish?
    Added support for Text Layer with position and size animation.
    Added tests for convert methods and gradient layers.
  • What is the #1 thing slowing you down?
    Documentation for lottie-web is not upto date and therefore to map properties there are confusions.
  • What do you want to have done by the end of next week?
    Get done with most of the things in text layer.

– Saurabh(saurabh22)

3 Likes
31

Great! Keep up the good work! :slight_smile:

1 Like
32

Weekly Report - June 8th - June 14th

  • How was the last week? What did you accomplish?
    Added Text Layer support for nearly all the parameters in Synfig. The parameters not yet supported are Kerning,Sharpen and Invert which do not have support in Lottie.
  • What is the #1 thing slowing you down?
    Nothing as such this week except for trying to find workarounds for invert support.
  • What do you want to have done by the end of next week?
    Finish up documentation for Text Layer and start work on Blur layer. Planning to take up on bones in the second coding period as I believe it’ll take two weeks atleast.

– Saurabh(saurabh22)

3 Likes
33

Weekly Report - June 15th - June 21st

  • How was the last week? What did you accomplish?
    Added support for blur layers for fast gaussian blur, gaussian blur, box blur, cross-hatch blur and disc blur. Note : Gaussian approximation is used for all blur types as only gaussian method is supported by Lottie.
  • What is the #1 thing slowing you down?
    Nothing as such this week.
  • What do you want to have done by the end of next week?
    Finish up the small details left in blur layer and complete its documentation. Also add Power, Vector X/Y convert methods.

– Saurabh(saurabh22)

3 Likes
34

Weekly Report - June 22nd - June 28th

  • How was the last week? What did you accomplish?
    Fixed support for blur layer and added Power, Vector X and Vector Y convert methods.
  • What is the #1 thing slowing you down?
    Text in a group layer.
  • What do you want to have done by the end of next week?
    Start working on Bone Convert method and get previous PRs accepted and merged.

– Saurabh(saurabh22)

4 Likes
35

Weekly Report - June 29th - July 5th

  • How was the last week? What did you accomplish?
    Added documentation for Blur Layer and Convert methods.
    Most of the last week was spent in understanding bone convert which will the focus for the next two weeks.
  • What is the #1 thing slowing you down?
    Nothing particular
  • What do you want to have done by the end of next week?
    Start committing work on Bone Convert method.

– Saurabh(saurabh22)

3 Likes
36

@saurabh22Ifyou will need any assistance with understanding bones - let me know. :slight_smile:

1 Like
37

@KonstantinDmitriev
I am trying to create bone_link functionality. I had some doubts over transformation. Suppose I have bone2 -> parent_bone . A simple_circle layer has its center linked to bone2 . I changed origin and angle of both bone2 and parent_bone. How will this transformation be calculated?

1 Like
38

Hi! Here I created a sample file for you, which illustrates how transformations are calculated - bones-lottie.sif (13 KB)

And here is a video with explanations -

I hope this helps!

2 Likes
39

@KonstantinDmitriev Thank you for the video explanation ^___^ . I found it really helpful.
After seeing your video, I tried to write down the mathematical equations which would be required to calculate a circle’s center which is linked to child_bone. The parent of child_bone is called parent_bone . Can you please tell me if these mathematical equations that I wrote for calculating the circle center is correct or not ? If not, then do tell me where I am going wrong :nerd_face:
The angles theta1 and theta2 shown in the picture below are bone_angles for parent_bone and child_bone respectively.

bone
bone1041×1280 79.2 KB

1 Like
40

Do you know Linear Algebra?
It’s all about affine transformations : matrices for 2D translation, rotation and scaling.

2 Likes