Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
13 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by JLaiCCS · Feb 18, 2021 at 02:21 AM · sprites2d spritesdistortionmatrix4x4distort

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.alt text

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.

sharedscreenshot.jpg (45.5 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
1

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: alt text


rays-skew.jpg (18.0 kB)
Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image gamebalance · Sep 09, 2021 at 04:47 PM 0
Share

Oh. And to make bones appear - add component Sprite Skin where you sprite renderer is. And click Create Bones

avatar image JLaiCCS gamebalance · Sep 09, 2021 at 11:58 PM 0
Share

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

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

123 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How to make "circle" sprite’s border more smooth? 1 Answer

Why are my sprites being distorted? 1 Answer

How can I use one 2D sprite with different pivot points? 0 Answers

How to flip hitboxes if my 2D Sprite is Flipped in AnimationsEditor ? [Unity2D] 1 Answer

PNG / SVG (Vector Graphics) sprites quality 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges