2D Water with Interactive wave

I intend to make two dimensional water for platformer game. I managed to make a water surface with interactive waves. Have you guys any ideas to draw the body of water itself?

like for example how to draw polygons with water surface points as vertices?

and filled with a flat color.

What type of data do you currently have to represent your water?

I make node game object to make spring simutation, and make water surface game object for instance array of node.

If the surface is only “top down”, with no overlap, you could upload a set of spline control points to a shader, and render the water underneath the spline?

1 Like

Or dynamically update a mesh: a pair of vertices for each control point: one at the surface and one at the bottom.

2 Likes

It sound not to good for performance, I’m thinking about putting a transparent image behind a water simulation and making it as a canvas to draw polygons with shader and a point on the water surface as a reference? is that’s possible?

I am not sure I understand what you described. Anyway, I would say a mesh with a bunch of vertices should not be a problem for performance. You could also use a shader to draw the mesh for some kind of effect (blue near the surface, darker blue in the bottom). Further you could add particles with bubbles raising from the bottom (till some height you are sure is always in the water).

Just an idea…

1 Like

I mean implement this fragment shader by putting a transparent image with its own material to draw a polygon with the node game object position as its vertices. Think it’s good idea…

I just new to game dev and not sure with 3d stuff.

I imagine that your idea is use plain quad model and alter its vertices with vertex shader?

With our Mesh component, you can set a vertex buffer, which you can change at runtime. It doesn’t have to be a quad, but you can add as many/few vertices you need to render your water in a nice way. The mesh can be either 2D or 3D, it depends entirely on what you put into the mesh.

1 Like

I was exactly suggesting to draw a polygon, so same idea as yours!

How to draw a polygon? I would use a (planar) mesh.
As Mathias said, you add vertices and triangles to the mesh and let Defold draw it.

Try to use this image as a guide:

water_mesh

(sorry for the low quality hand draw picture… :slight_smile: )

1 Like

Oh! it’s the thing i’m not sure of, i never use mesh before. I have use quad model for draw post process though. So i make mesh object and just use this code? (3D meshes in Defold)

-- cube
local vertices = {
	0, 0, 0,
	0, 1, 0,
	1, 0, 0,
	1, 1, 0,
	1, 1, 1,
	0, 1, 0,
	0, 1, 1,
	0, 0, 1,
	1, 1, 1,
	1, 0, 1,
	1, 0, 0,
	0, 0, 1,
	0, 0, 0,
	0, 1, 0
}

-- create a buffer with a position stream
local buf = buffer.create(#vertices / 3, {
	{ name = hash("position"), type=buffer.VALUE_TYPE_FLOAT32, count = 3 }
})

-- get the position stream and write the vertices
local positions = buffer.get_stream(buf, "position")
for i, value in ipairs(vertices) do
	positions[i] = vertices[i]
end

-- set the buffer with the vertices on the mesh
local res = go.get("#mesh", "vertices")
resource.set_buffer(res, buf)

`

Yes, you use the mesh component in order to reproduce the picture I drew in my previous post. I would suggest to start with something simple: write the code to draw a mesh with many adjacent rectangles (as if the water was perfectly still).

1 Like

Oke! thak’s guys i will work for it. Sorry if my words aren’t easy to understand (i use google translate).

I will post the result soon (maybe tomorrow)…

no problem at all, but try DeepL Translate: The world's most accurate translator I would say it is way better.

Ciao!