Page 1 of 1
How to "transform(?)" an image to be bouncy
Posted: Sun Jan 02, 2022 11:38 am
by Gunroar:Cannon()
I want to make a ui that bounces and stretches the menu grid when pressed. I don't know how to go about this, but I think transforms (and maybe shaders) wpuld be the way.
From this
To a bounce like
Kind of.
Edit:
How to do spaces in my comments?
Edit:
Thanks
Re: How to "transform(?)" an image to be bouncy
Posted: Sun Jan 02, 2022 1:24 pm
by pgimeno
If the deformation is not a parallelogram, I can only think of two ways: with a pixel shader, or making the shape be a grid (a mesh) and moving the vertices.
If it is a parallelogram, then Löve's transformation parameters suffice.
This is an example of a parallelogram deformation (in particular, a rectangle). This can be done with just love.graphics.draw parameters.
Code: Select all
+----+
| |
| |
| |
+----+
--------------------------
+------+
| |
| |
---------+------+---------
If you want e.g. the sides to curve, the difficulty increases considerably.
Example of bouncing parallelogram attached.
Gunroar:Cannon() wrote: ↑Sun Jan 02, 2022 11:38 am
Edit:
How to do spaces in my comments?
Edit the ASCII figure in a fixed font editor, then use [
code]...[
/code] tags.
Re: How to "transform(?)" an image to be bouncy
Posted: Mon Jan 03, 2022 9:16 am
by Gunroar:Cannon()
Oh, nice. Will examine it.
Though I was hoping for something where I won't have to mess with the way may ui lib draws its stuff...?