Convert skew to rotation + scale

Question

I'm working on a plugin for Unity that takes data extracted from a 2D animation software and convert them to work with Unity Animator.

I'm blocked with the "skew" property. Here are the data I got in the animation software when I skew my object on Y axis.

And here is what a custom (very artistic) drawing looks like:

After few manual tests in Unity I know it's possible, with 3D rotations and 2D scale to get the same result.

However I can't understand the mathematical logic behind the input and the needed output (my knowledge in mathematics is limited). Do you know how I can convert a skew into 3d transformations (rotation + scale)?

Any help would be greatly appreciated.

Answer 1

Skewing using perspective trick will be...well tricky, as it will depend of your fov etc... (maybe a bit simpler in orthographic but still, that would require more math using the projection to transform that 3D transformation into a 2D plane skew)

I would recommend trying to use a BaseMeshEffect (https://docs.unity3d.com/ScriptReference/UI.BaseMeshEffect.html) to directly skew the mesh from the UI element (skewing is then just moving the vertex Y up or down depending of its distance right or left from the center)

An example of that would be :

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class UIEffectTest : BaseMeshEffect
{
    public float skew = 1.0f;
    List<UIVertex> verts = new List<UIVertex>();
    public override void ModifyMesh(VertexHelper vh)
    {
        if (!IsActive())
            return;
        vh.GetUIVertexStream(verts);
        for(int i = 0; i < verts.Count; ++i)
        {
            UIVertex pos = verts[i];
            //just need to find the factor to match whatever your animator set in skew
            pos.position.y += pos.position.x * skew;
            verts[i] = pos;
        }
        vh.Clear();
        vh.AddUIVertexTriangleStream(verts);
    }
}

Put that on a gameobject with a UI element and it will change the mesh generated. This is the class used by the Outline/shadow effect (you can see it use din the UI bitbucket, here : https://bitbucket.org/Unity-Technologies/ui/src/0155c39e05ca5d7dcc97d9974256ef83bc122586/UnityEngine.UI/UI/Core/VertexModifiers/Shadow.cs?at=5.2&fileviewer=file-view-default)

Of course, this can be costly as it regenerate the vertex buffer each time the ui element is dirtied, but as usual profile and find what is worth optimizing if there is problems!