Worms-Style 2D Water
Author
I have a graphics question, I am trying to figure out how to render semi-realistic water in my side-scrolling game, I would like to match as close to possible the Worms series water.
Screen Shots for one of the Worms games here: http://www.gamespot.com/psp/strategy/wormsopenwarfare2/index.html
And, an actual screen shot here: http://image.com.com/gamespot/images/2007/129/939169_20070510_screen008.jpg
If anyone knows how to do this or how to put me into the right direction, I would appreciate it.
That screenshot is tiny, so it's hard to tell how they do it. But here's how you could do it
* Render the scene without the water and save the result into a buffer
* Create an alpha channel where everything that is underwater is white and everything else is black
* Use bezier splines to create the wavey surface (you can animate them, too). Draw these into the alpha channel as well
* Blur the buffer (see first point). You can use the alpha channel to figure out which pixels need blurring and which don't
* Tint the buffer in blue (you can use a gradient for that for even more realism)
* Using the alpha channel as a mask, copy the blurred and tinted buffer back into the frame buffer
* Render the light streaks (You can actually make those in your image editing tool and randomly distribute them at load time, then fade them in and out every now and then)
Obviously this would best be implemented using shaders. If you do all your rendering in software, you should optimize the blurring as much as you can.
* Render the scene without the water and save the result into a buffer
* Create an alpha channel where everything that is underwater is white and everything else is black
* Use bezier splines to create the wavey surface (you can animate them, too). Draw these into the alpha channel as well
* Blur the buffer (see first point). You can use the alpha channel to figure out which pixels need blurring and which don't
* Tint the buffer in blue (you can use a gradient for that for even more realism)
* Using the alpha channel as a mask, copy the blurred and tinted buffer back into the frame buffer
* Render the light streaks (You can actually make those in your image editing tool and randomly distribute them at load time, then fade them in and out every now and then)
Obviously this would best be implemented using shaders. If you do all your rendering in software, you should optimize the blurring as much as you can.
Just had a look. It looks quite cool. The basic step seems to be a vertical gradient. Not quite sure how they do the top of the water. It seems like two lines that cross over a bit. As for the "shinyness", that looks like random gradients of varying brightness.
I guess it's just worth experimenting. Get some gradients going and play around with the colours until you get something nice and then go from there.
I guess it's just worth experimenting. Get some gradients going and play around with the colours until you get something nice and then go from there.
It's possible they're doing something as simple as modulating with a water texture and additively blending a "light streak" texture. The screenshot is pretty small, but I don't see anything too fancy going on.
Author
Thanks everyone for your quick replies,
At this moment, I am not too concerned with creating the water layer translucent, for right now I think the main purpose is trying to create the surface of the water.
Harry Hunt, as you mentioned about bezier splines would be useful, but you would have to figure out extra information like points for the curve, maximum height for the waves, getting the colors under the curve to display.
I am thinking about using pre-rendered images for each part of the wave, of which is animated. I need to go look at a video for it.
The screen shots' link I posted was from the new PSP game, which is why it's so small, the older games for the PC didn't look at great for the water effects.
At this moment, I am not too concerned with creating the water layer translucent, for right now I think the main purpose is trying to create the surface of the water.
Harry Hunt, as you mentioned about bezier splines would be useful, but you would have to figure out extra information like points for the curve, maximum height for the waves, getting the colors under the curve to display.
I am thinking about using pre-rendered images for each part of the wave, of which is animated. I need to go look at a video for it.
The screen shots' link I posted was from the new PSP game, which is why it's so small, the older games for the PC didn't look at great for the water effects.
Don't know if its a good idea, but maybe...
- Create a horizontal quadstrip, the upper vertices are used to simulate the waves
- A vertrex shader could adjust the (top) coordinates with a sinus or something
- The white top of the water could be calculated with a pixel shader (if y = near top, then less alpha, more white). Or draw a white line on top of it or something. As long as you waves are not too high, you don't need really much strips for a nice "curve".
- Draw at as a transparent layer on top of the rest. Eventually you could take a snapshot of your background, and place it in a pixelshader so that you can distort it a little bit.
- The white "god rays" that shine through the water... Uhmm... Make a horizontal tileable texture that holds these rays and paste it on top of the water layer. Eventually animate it with the wave sine, fade its strength in and out, and shift it into a direction. Eventually you can also draw the white-ish top of the water inside that texture, instead of drawing a white line or doing other pixel shader calculations to simulate the wave-tops.
- The bubbles are just sprites rendered on top.
- Like Harry said, blurring always looks nice with these kind of things.
Maybe that was usefull
Succes,
Rick
- Create a horizontal quadstrip, the upper vertices are used to simulate the waves
*----*----*----*| | | || | | || | | |*----*----*----*- A vertrex shader could adjust the (top) coordinates with a sinus or something
- The white top of the water could be calculated with a pixel shader (if y = near top, then less alpha, more white). Or draw a white line on top of it or something. As long as you waves are not too high, you don't need really much strips for a nice "curve".
- Draw at as a transparent layer on top of the rest. Eventually you could take a snapshot of your background, and place it in a pixelshader so that you can distort it a little bit.
- The white "god rays" that shine through the water... Uhmm... Make a horizontal tileable texture that holds these rays and paste it on top of the water layer. Eventually animate it with the wave sine, fade its strength in and out, and shift it into a direction. Eventually you can also draw the white-ish top of the water inside that texture, instead of drawing a white line or doing other pixel shader calculations to simulate the wave-tops.
- The bubbles are just sprites rendered on top.
- Like Harry said, blurring always looks nice with these kind of things.
Maybe that was usefull
Succes,
Rick
If I were implementing it, I would use OpenGL's stencil buffer and render a bunch of quads doing something like this:
Obviously it's hard to get a sinus contour in ascii art, but I hope you get the idea. Then after I've gotten the stencil buffer set up with this mask, I'd just render a translucent textured quad over the entire screen.
*-- --*| --*-- || | || | || | |*----*----*Obviously it's hard to get a sinus contour in ascii art, but I hope you get the idea. Then after I've gotten the stencil buffer set up with this mask, I'd just render a translucent textured quad over the entire screen.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement