Help with Morphing transition of Game Objects: 2D mobile

Hi all,

I am coding a mobile game with some friends and we are currently making a design decision. Our level scene consists of a 2d circular grid and block objects which can be moved along the radial or angular lines. Please see the below image for a graphical representation:

image

We have narrowed down our methods for achieving radial motion into two options.

  1. In the event that the block object must be moved up or down the radial lines of the grid, adjust the scale of the existing block game object relative to its change in radial position.

image

As can be seen from the images above, due to the shape of the original block the shape no longer fits within the boundaries of a given grid slot position at several points in its upward or downward path.

2)The other option we came up with is to create a series of n images, which represent n transitional sizes of the block as it moves up or down the radial line. In the event the object must move, we can “loop” through these images depending on what radial position the block must move to next.

This method could work, but requires a lot of extra images, and results in a “choppy” transition.

Now with the background info described, my question is: is there a method that would result in a much smoother transition, and that does not require an animation of many images? I am wondering if someone has run into a similar design problem before, and if there exist a module or library within Defold that can be used to help the design of this type of morph transition? Any help or links to further reading would be greatly appreciated.

Regards,

Augustino

I would say that you need a vertex shader: try a source image attached to a model that is just a square grid of, say, 4x4 segments; the shader takes in input two radius (min and max) and an angle and computes the positions of the vertexes changing the shape.

I know this is just a rough sketch of the whole process… but, in my opinion, it is a viable solution. I would say it is fairly easy, but not very easy :slight_smile:

EDIT: you just need to subdivide the curved sides in the model.

1 Like

Hi Rocco, thanks for the response!

I have never worked with vertex shaders, but have been doing some research since I saw your post yesterday. I found this post you made about creating a shader for bezier curves:

Would I have to create something similar to this in order to get the “curved” parts of the block image to morph as I move up or down?

EDIT: you just need to subdivide the curved sides in the model.

If possible, would be able to elaborate on this subdivision?

Any additional links or sources you’ve found helpful in understanding how to implement vertex shaders within defold would be greatly appreciated!

2 Likes

I suggest trying the mesh component instead. Create a function that generates correct vertex coordinates for the segment at given radial coordinates: angle start, angle end, radius start, radius end.
When animating, simply recreate the mesh on each frame.

2 Likes

In my opinion it is equivalent, but shaders are faster. I am writing the shader, almost done… I will post the project here.

1 Like

Here it is. Use at your own risk!

sector_shader.zip (1.4 MB)

EDIT: move the points with the mouse to deform the sprite.

1 Like

Ok thanks everyone for your help, I will look at all of this and go from there.

1 Like