Is it possible to Skew or Shear UI elements in Unity

Questions & Answers
1

Hi, I would like to know if it is possible to Skew/Shear any of the UI elements such as Panels, Buttons etc. to achieve an effect similar to the one shown in the image below:

55349-skew.jpg

5

Update for Unity 2017.1+, use OnPopulateMesh(UI.VertexHelper vh)

using UnityEngine;
using UnityEngine.UI;

public class SkewedImage : Image
{
    [SerializeField]
    private float skewX;

    [SerializeField]
    private float skewY;

    protected override void OnPopulateMesh( VertexHelper vh )
    {
        base.OnPopulateMesh( vh );

        var r = GetPixelAdjustedRect();
        var v = new Vector4(r.x, r.y, r.x + r.width, r.y + r.height);

        Color32 color32 = color;
        vh.Clear();

        vh.AddVert( new Vector3( v.x - skewX, v.y - skewY ), color32, new Vector2( 0f, 0f ) );
        vh.AddVert( new Vector3( v.x + skewX, v.w - skewY ), color32, new Vector2( 0f, 1f ) );
        vh.AddVert( new Vector3( v.z + skewX, v.w + skewY ), color32, new Vector2( 1f, 1f ) );
        vh.AddVert( new Vector3( v.z - skewX, v.y + skewY ), color32, new Vector2( 1f, 0f ) );

        vh.AddTriangle( 0, 1, 2 );
        vh.AddTriangle( 2, 3, 0 );
    }
}

Note : You will have to set your Inspector in DebugMode or write a custom inspector if you want to change the values of skewX and skewY

3

Hey there,

Yes you can do this quite easily. Make a new class and Inherit from UnityEngine.UI.Image. Override the following function.

protected override void OnFillVBO(List<UIVertex> vbo);

That is the function that creates the panel you see. Just do the math for your verts and add them to the vbo list. Keep in mind the vbo list only excepts quads (groups of 4 verts).

Cheers,

4

Since the UI project is open-source, feel free to contribute to it. Debugging is not that easy but it is possible, though.

And if somebody commits ordinary matrix transformations, everyone will be happy.

6

Hey guys I know this is pretty old, but why I can’t get the image to fill after using OnPopulateMesh ?

7

@NIOS , sorry, i have some question for the last C# script that you post above. Why the dollar sign in this script are considered error when i put in Unity. (example : var y$$anonymous$$ = rectTransform.rect.yMin; ) Is there any step to put it on?

PS. Sorry for my lack of Unity programming, i’m just new here.
Thanks before

8

How could the skew effect be applied to the children as well?

2

Set your canvas to world space.