Is it possible to make 2D sprites deform and stretch?

Hello all! I’m a rusty game developer that hasn’t touched an engine in about a year. I used Unreal Engine for about 3 years, but after the lag, bad optimization, shipping unfinished features as “finished” (Lumen) I’m done with it. I’m looking to get into another engine now, and Defold looks very good. I love the lightweight size.

My main question is 2D related. I want to make a game that has interactable 2D movement, similar to the title screen from Mario 64 (attached,) where the sprite will deform and stretch based on the player’s cursor/touch input. I was wondering if this was possible to do in Defold, and if so, how? Do you need to use an external program, like Spine 2D or Rive? What is the best way to do it?

If this is possible, I will start learning the program. Thank you!

mario-64-loading-screen

1 Like

With sprite component you can only change scale (so across X,Y,Z). If you want something like grab and stretch towards the given direction like on the gif (that is 3D though), you would need to use a Mesh component:

Mesh is a 3D component actually, but you can create a mesh that is 2D - parallel to your camera, e.g. by simply having all “Z” coordinates 0 and treating the rest like 2D (X,Y only):

A good video about meshes in Defold:

With meshes you can do precisely this - “grab” a point and move it away - the “triangle” between the 3 points will be stretched :wink: The more triangles you have the better.

Everything like this is possible in Defold, but bear in mind this will involve a lot of mathematics, imagine setting position of each such point in code.

Second option is to use Spine or Rive components, and afaik Sprite Loop will soon receive a mesh support. These tools might definitely simplify this, but you might not have a needed runtime control over each point.

3 Likes

I think you could also do these kind of thing with Model morph target animations:

For example, with this kind of Mario model, you have some constraint set to the deformation, the user cannot deform it however he wants. You could prepare models with defined morph weights (for 2d, just a flat or a thin quad model), and just animate these. This could simplify the mesh deformation calculation.
Combine with bones rig, this could be really nice.

I think it depends if you want like “every sprite can be deformed however you like”, then use a mesh, or “each object is crafted to be deformed a precise way”, then use model morph targets.

1 Like
1 Like

Thank you both for the replies. Using a mesh and grabbing a point seems ideal! It seems like that’s how it’s usually done in other games.

From doing more research, it looks like the standard is to make animations in Spine 2D, then export the animations into your engine of choice. If I made mesh deformations in Spine, then exported it, could I then access the points of that mesh at runtime to move it around? Or could I only make pre-made animations?

1 Like

Sorry to double post but I just found the Sprite Loop thread. I’m really impressed by the integration with Defold, and the capability of the program!

I think I’m sold on this engine. So the easiest way (afaik) to implement something similar to what I want would be:

-Make some premade animations in a separate program (i.e. Sprite Loop or Spine) where the sprite deforms.
-In Defold, call those animations when certain actions are done. This gives the appearance of deforming without actually deforming.

I think that’s probably a lot easier to implement for a beginner. Thank you both for the help, I’m excited to start my journey with Defold! :slightly_smiling_face: I’ll be sure to post again if I have any more questions. Time to hit the Learning Hub!

5 Likes