- Home /
How to skew/shear a 2D sprite without perspective?
Ok, so I have searched for days and have found a variety of solutions to this issue that I am not sure of how to apply, because I have limited technical knowledge.
My situation, in high detail, is: I am developing a mobile game. A variety of 2D sprites move towards the camera, and the game detects whether the user is holding down on these sprites when they intersect a certain object. As such, the 2D sprites have 2D colliders to detect whether they are in the object. This part of the game works fine. The issue is, I need a way to skew the 2D sprites. I am using Unity 2018.4.21f1. The solutions I have thought of, attempted, or tried are below:
I have tried the SpriteShape package, but it doesn't seem to be able to skew a sprite
Placing the gameObject with the sprite as a child of a gameObject with a rectangular mesh, and editing the vertices of the mesh. Although I have not tested this, I believe editing the vertices of the mesh will not change the sprite.
alternatively to the above, placing the sprite within a rectangular/quad container, but I don't know how to affect individual vertices, and changing the container may not affect the sprite
Shaders, but I am not sure what these would achieve
Matrices, but idk wth a 4x4 transformation matrix is and how it works
Keep in mind that the skew must be an affine transformation, not perspective/rotation. If anyone knows how to achieve this or skew a 2D sprite, please help and provide a solution with explanation.
Images of examples of how I would like to skew sprites are provided below. On the left are the original sprites. On the right are ways the sprite could be skewed with its 4 quad vertices adjusted. The examples provided are very simple. Also remember I require colliders for the sprites, so creating a rectangular sprite with transparent areas would not work.
EDIT: Update
So I have done more research, still no solution, but I do believe a potential solution lies in accessing the rect of a sprite (basically the second dotpoint, trying to enclose the shape in a rectangle and modify the rectangle such that the shape is also modified) and applying some sort of matrix transformation. Pedro Gimeno's answer here seems to be what I would want to do to manipulate the rectangle around the sprite. However, I am not able to comprehend his answer due to the lack of my own understanding and the detail in the answer, and am also unsure of how to apply the answer to the sprite in my game.
Also, to clarify, in the image: The exact transformations occurring are: rectangle to parallelogram (notice how both top and bottom width stay the same), rectangle to trapezium (notice that bottom AND top width has been changed, by pushing vertices of top closer and vertices of bottom further, which skews the rectangle), circle to ellipse (however, similarly to the rectangle to trapezium example, the circle could be skewed in a similar way, causing the curvature to no longer be symmetrical). Hopefully this edit helps.
Answer by gamebalance · Sep 09, 2021 at 04:45 PM
For exactly this purpose there might be a side way solution to make 2d sprite skew in Unity. Go to edit sprite. Go to skinning editor.
There create a new vertex and make 4 of them.
Move each other to each corner.
Make a bone on top and another on the bottom.
Go to weights editor and attach 2 top vertexes to the bone1, attach 2 bottom vertexes to the bone2.
Here I do this way for rays in my upcoming game "Stop yourself" by Progamix:
Oh. And to make bones appear - add component Sprite Skin where you sprite renderer is. And click Create Bones
I'll try this out when I get the chance and let you know if it works for me (it might be a while though). Thank you so much for helping!
Your answer
Follow this Question
Related Questions
Sprite colors not displaying properly after I click play 2 Answers
why are my sprites pixeleted in the game view? 1 Answer
Dynamic offset & tiling for SpriteRenderer 4 Answers
" " rect lies (partially) outside of texture. Will not generate Sprite for this Slice. 0 Answers
How can i make my sprites look crisp like in scene mode ? 3 Answers