Hi guyz!
Is there any way to do skew transformation for sprite? I was very surprised when managed that Unity doesnt support skew directly.
Thanks.
Probably with a custom shader, but nothing built in.
–Eric
You can do the old-school way, just rotate it. I have used that for 2d animation and works works pretty well. (you have to keep an eye on the curves, and will probably need a couple of extra keys if you are using the animator). with the sort order, you can skew the heck out of it and doesn’t cause a problem, at least not that I have encountered yet.
Hi there… really old topic but does anyone have any idea if the ability to Skew a sprite is on the horizon. I can’t find any mention to this on the roadmap. I understand that if you had a skew property on sprites or transforms that it would probably need to affect the physics and also keep that in step, but I’m not really after that. I wish there was just some way that I could cleanly and manually override the transform matrix of a sprite. In our case we have animators that commonly use skew to achieve their 2d animation and because of this one missing ability it’s causing us to have to create our own animation playback system that creates mesh on the fly, but this would of course have no native unity integration with the 2d dopesheet / timeline and no way to make it work nicely with mecanim. We don’t need these animated sprites to be in step with physics, we just want a pipeline for our artists to be able to create 2d animations that can come in as native animations within Unity, any ideas anyone or plans Unity to add something to allow us to achieve this. We’ve voted for the skew feature request using all 10 votes and been waiting for over a year now and still no word. Thanks, Jason
any developments on this three years later =)?
6 years later?
Actually yes.
While skewing specifically is just too narrow to be feature of its own, there’s the Animation2D package now.
With it you can attach bones to a SpriteSkin. So make the skin mesh a quad around the sprite, attach a bone to the top corners only and another one to the bottom corners. Then you can skew the sprite as you wish by moving the bones accordingly.
Alternatively, the new Sprite package does also expose the mesh to the programmer. You can do everything the SpriteSkin does, with your custom script and not require bones etc.
That said, a shader based solution is probably still a better idea.
Nice! Do you know if this supports UI panels with child images and text?
Oh, it’s not fur UIs, only for sprites…
One way to do that would be to use a separate camera to render what you want onto a render texture and then use that texture in the material you give to the sprite renderer.
I would need a separate render texture for every panel since each one would have different skew 
Not sure if a mobile game can handle that.
Better if you find a solution without skewing! Is it meant to be actually important for gameplay?
It’s only for visual purposes. I am trying to achieve the effect used in Homescapes to fade in/out the UI:
The only way I think this can be achieved is by skeweing the UI.
here’s how it looks
That is not skewing, that’s squishing/stretching. They are simply not-uniformly scaling in their animation: eg the x scale is slightly out of phase with the y scale, making it bulge in a given direction.
What is generally called “skewing” is turning a rectangle into a parallelogram.
That is not directly supported but can be achieved via Transform Abuse™.
Transform abuse involves scaling, rotating, de-scaling and finally de-rotating in a stack of transforms.
It can work in both SpriteRenderer- and CanvasRender-drawn things. Pretty sure it would also work on MeshRenderer-drawn things.
Here’s what it looks like. See notes in the GameObject names themselves, or look in the attached scene.
9235056–1290255–TransformAbuseSkewing.unitypackage (127 KB)
3 Likes
Interesting. Wonder if they actually do it with vertex displacement of any kind or rather with movement in a 3D camera. When you tilt a 2D plane seen by a 3d camera, towards the cam, you also get some skewing effects!
Try setring the UI to world mode, make the UI elements small and up close to the cam and experiment with rotation and movement.
In every case don’t waste much time with UI eyecandy! Good gameplay is a magnitude more important. As an indie you should focus on that.
@Kurt-Dekker o.o My mind is a bit blown right now. Had no idea transforms can do that. Feels so unintuitive despite not even being 3D.
I gotta check out that package!
2 Likes
Thanks for your replies @Kurt-Dekker @DragonCoder
I’m thinking about going the Transform Abuse route 
Now I just need to figure out how to set each transform value based on some skewing and scaling input values, since I want to be able to modify those at runtime.
Any ideas on how that could be achieved?
I need to convert a matrix like that:
(scaleX, skewY, 0, 0)
(skewX, scaleY, 0, 0)
(0, 0, 1, 0)
(0, 0, 0, 1)
Into a chain of transforms 
It’s a good impulse, to make some kind of script that takes your “desired skew” inputs and then translates them into the chain of TransformAbuse steps. I actually started and then lost interest…
The following is an incomplete script for the Transform Abuse™ method. Maybe you can finish it?
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// @kurtdkker - INCOMPLETE script... this is a super hacky
// way to skew sprites on the horizontal in Unity3D.
//
// This is also known as Transform Abuse(tm).
//
// To use: drop this on a sprite.
//
// TODO: fix the magic numbers below.
public class HorizontalSkew : MonoBehaviour
{
[Range(0.0f, 0.9f)]
public float SkewAmount;
Transform Maker( Transform parent)
{
GameObject go = new GameObject();
go.transform.SetParent( parent);
go.transform.localPosition = Vector3.zero;
go.transform.localRotation = Quaternion.identity;
return go.transform;
}
Transform a,b,c,d;
void Start ()
{
Transform originalParent = transform.parent;
a = Maker( originalParent);
b = Maker( a);
c = Maker( b);
d = Maker( c);
transform.SetParent( d);
}
void Update ()
{
float xScale1 = 1.0f - SkewAmount;
const float SafeMinimum = 0.01f;
if (xScale1 < SafeMinimum)
{
xScale1 = SafeMinimum;
}
a.localScale = new Vector3( xScale1, 1, 1);
float angle1 = Mathf.Asin( SkewAmount);
angle1 *= Mathf.Rad2Deg;
b.localRotation = Quaternion.Euler( 0, 0, angle1);
float xScale2 = 1.0f / xScale1;
c.localScale = new Vector3( xScale2, 1, 1);
// this is incorrect: it's actually some trig function
// or expression, at least that's my intuition, and I'm
// presently too lazy to hassle with finding it.
float angle2 = angle1 * 1.5f;
angle2 = -angle2;
d.localRotation = Quaternion.Euler( 0, 0, angle2);
}
}
1 Like