3

Well, I'm trying to study XNA, and I'm trying to make a California Games-inspired surfing game.

I got the surfer guy done, and it's working very well but I don't have any idea on how I should draw the wave coming and animate it. If you don't remember what the game looks like, here it is. The wave I'm talking about is the one which is coming from the left at around the 00:40 mark:

enter image description here

Moondustt
  • 141
  • 3
  • I think the wave could be some OpenGL pixel effect. Or pheraphs could be obtained by using some "base" frames and playing with opacity, moving and scaling effects (in this way you will not have to play with Open GL). However I suspect that the most reasonable way to do this is by associating OpengGL with a mathematical function modelling the beheaviour of the wave (it seems to go in steps and definitely it takes in account the x position and the time) – mm24 Jul 17 '13 at 14:01
  • Damn, it's not possible to do that just animating some images? =/ – Moondustt Jul 17 '13 at 14:10
  • I guess so, but you still need to code the beheaviour of those images and, as seen on the video, some of the images "blink". Most of the frameworks for 2D games should allow this. Google it for XNA :) – mm24 Jul 17 '13 at 14:15
  • Making it blink and i don't think it's hard part for me but, i don't know how I should draw that, a big wave of the size of the screen and animate it maybe? – Moondustt Jul 17 '13 at 14:18
  • I would make the wave an object made of different frames (maybe an array of frames where each frame is a drawing). Then I would show and move the frames according to the state of the mathematical function (e.g. at moment 0 show white frame on top, at moment 0+1 move white frame and show blue frame etc.. till a cycle is complete). I would model the function on a piece of paper first and not directly on your computer, drawing things helps me a lot to visualize the problem and find the rigth algorithm to solve it :). – mm24 Jul 17 '13 at 14:21
  • you may want to look also at this answer: http://gamedev.stackexchange.com/questions/40501/how-to-make-2d-water-like-in-this-video – mm24 Jul 17 '13 at 14:27
  • that nostalgia hit me hard. – Timothy Groote Jul 17 '13 at 14:38
  • eh, it just looks like they are changing the tile. And continuously doing it to the neighbor with a timing offset. – Sidar Jul 17 '13 at 17:22

1 Answers1

2

The effect is pretty primitive by modern standards. Fundamentally, it looks like you can break the wave effect down into columns where each column is a simple sprite that is falling downward under the influence of a gravity-like force, leaving behind contrail-style sprites that are fixed in position.

The falling sprite for each column is a noisy water sprite:

enter image description here

The fixed contrail sprites, which don't move, are more stable-looking water reproductions:

enter image description here enter image description here

The specific image used for each fixed sprite or the leading moving sprite can be adjusted based on that sprite's current vertical position. That's how you can get the curved appearance of the wave over time (there's a different angle to the leading, noisy sprite depending on how close the wave column is to the bottom of the screen.

You can't do this entirely in the sprite sheet, obviously, you'll have to write code for it. But once you get it working for a single column, you can simulate the full wave effect by having multiple columns, starting new ones as the wave advances across the screen. Roughly, they'd look like

12345
-----
||||/
|||/
++/

where 1-5 are different copies of the single column effect started at slightly different times.