# How can I skew a SpriteRenderer in an animation to grow a side and decrease the opposite side by the same amount?

I am interested in the maths and maybe the shader code. I am almost sure that this would be a great starting point but I do not have any knowledge about shaders and the language they are written in.

The little project is just an attempt to create a flippable sprite, like the one I did in WPF but more interesting because of the "closer" perception. The objective is to learn. I have two animations, one rotating around the Y axis and the other one is this skew that I do not know how to do.

On the web I have found old answers and answers that use Image instead of SpriteRenderer, some complex math that I cannot comprehend yet.

Ideally the animation would go through all these states, from left to right, and then in the inverse order, from right to left (blue means unflipped state, green means flipped state):

I have started working with Unity since less than a week and I have forgotten a lot of maths and geometry I learned in school. But I am eager to learn again.

Thank you.

• The easiest way to do this is probably to use a perspective camera (rather than the 2D default orthographic camera), and rotate the image so one edge is closer to the camera. The camera's projection will then create the trapezoidal shape. Is that acceptable for your needs, or do you need to do this in a shader or other approach? Nov 20, 2019 at 14:01
• @DMGregory Thank you. I will read more about the perspective camera and try your approach when I have time. Currently I think that it might not work for me because I might have other game objects that should be seen like in the default 2D orthographic camera. Nov 20, 2019 at 14:08
• @DMGregory The perspective camera works for me. I wonder why the default 2D camera is the orthographic camera. You can post an answer if you wish. Thank you very much. Nov 21, 2019 at 8:50
• Since you have your scene and I don't, it might work better for you to post an answer showing how you set up your scene objects to solve this problem with perspective. As for why to use orthographic, it ensures 2D content at any depth always lines up perfectly on screen, without parallax between near & far layers, which is useful for many 2D games. Nov 21, 2019 at 9:40

Having 3 sprite renderers in the scene, with a script attached which makes them rotate around the Y axis of each of them, and the Main Camera selected, it is visible in the screenshot below that I changed the Projection property of the Camera component inside the Inspector pane to Perspective (it is written with blue Projection and in the right there is a combo box). This makes the animations work the way I asked in the question.

Below there is one of the game objects with sprite renderer selected and the Inspector pane shows the usage of the Player Script (source code below).

# Script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerScript : MonoBehaviour
{
private SpriteRenderer sr;
public Color32 unflippedColor = new Color32(0, 255, 0, 255);
public Color32 flippedColor = new Color32(0, 0, 255, 255);

// Start is called before the first frame update
void Start()
{
sr = GetComponent<SpriteRenderer>();
StartCoroutine(FlipLoop());
}

private bool IsFlipped = false;

bool isUnflippedAngle(float a)
{
return !(a <= 90 || (a >= 270 && a <= 360));
}

IEnumerator FlipLoop()
{
while (true)
{
float startAngle = transform.rotation.eulerAngles.y;
float angle = Time.deltaTime * 15f;
transform.Rotate(new Vector3(0, 1, 0), angle);
float endAngle = transform.rotation.eulerAngles.y;

if (isUnflippedAngle(endAngle))
{
sr.color = unflippedColor;
IsFlipped = false;
}
else
{
sr.color = flippedColor;
IsFlipped = true;
}
yield return new WaitForEndOfFrame();
}
}

// Update is called once per frame
void Update()
{

}
}


Thank you.