Help with Morphing transition of Game Objects: 2D mobile

[Aug_FP]

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:

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.
   
   

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

[roccosaienz]

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

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

[Aug_FP]

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:

Shader for (cubic) bezier curve

Hi there! Following a suggestion of @Pkeod, I am posting here a minimal Defold project with a shader for drawing cubic bezier curves. You can use the mouse to move the start and end points and the control points. The controls points define the tangents at the start and end points of the curve. (Note that moving a start/end point does not move the corresponding control point, this may look strange if you are used to a vector drawing program…). Some notes. A (planar) Bezier cubic curve is ju…

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!

[sergey.lerg]

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.

[roccosaienz]

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

[roccosaienz]

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.

[Aug_FP]

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