# How do I make a sprite appear to sway with the wind?

I'm trying to find a method to simulate the effects of wind on various sprites in a side-view 2D scene. What relatively simple technique could I use for this?

What I have in mind is to give these sprites a "spring" effect that I could hand a force that rotates them in a specific direction and eventually degrade the force and bring the sprite back to its "resting" rotation over time with a little bit of rebound/wobble/sway... I don't understand how I can mathematically create the elastic/spring effect using rotation, taking into account things like mass, resistance, or stiffness. How would I go about doing this in code? It doesn't have to be super realistic.

I'm hoping to set up a global wind variable that gets applied to sprites starting on one side of the screen and making its way to the other to look like a gust of wind passed through. I should be able to accomplish this once I have a method for applying a wind force to a single sprite.

How can I do this?

• This is not a complete answer: trig functions (sine/cosine) tend to create that swaying-back-and-forth effect. Maybe with a decay to eventually stop, this could be part (or all) of your solution. Apr 27, 2014 at 14:54

I use the following method in a 3D scene for grass and vegetation animation, but is easily transformed to 2D geometry.
The method is as simple as offsetting vertices of wind-affected geometry by some sine fuction. (vertex shader code follows)

float3 wind = sin(time+(pos.x+pos.y+pos.z)*0.1f)*wind_direction.xyz*wind_strength;
pos+=wind;


Here time is a shader constant which is an ever increasing number (system time for example). The pos variable is the vertex position of which I add every component to time when calculating sin for a nice variety, so it seems like wind travels nicely across the screen. 0.1f is just a magic number. I just multiplied by it because it seemed nice after some tweaking (it makes the waves seem bigger). wind_direction and wind_strength are the wind parameters, a three component vector and a float.

If you want to use this with 2D sprites then you just need to forget the z component of the vectors (making them only two-component vectors) and it will work the same.

If you can't use vertex shaders for some reason it should also be applicable on the cpu, but you need to store the default vertex positions (or corners) for your sprite, but draw your sprites with your modified vertices (corners).

I hope I could help, also please note that this is not physically correct wind effect, but only something that is easy to compute and nice to look at. You can also check out this effect if you would be interested in this youtube video. The grass field and the tree leaves are both animated by this function.

• That's interesting. Unfortunately I don't have any experience with shaders, I have no clue where to begin with a technique like that. Apr 27, 2014 at 19:00
• Well maybe you have a container for your sprite, maybe a quad which you draw your sprite onto. You should execute this code for the rectangle's corners, transforming them every frame then draw your sprite onto that transformed (and slightly deformed) quad. However I don't know if you can do that with XNA's basic spritebatch drawing in case you are using that. :( Apr 27, 2014 at 20:38
• I believe the XNA spritebatch handles all of that under the hood with a custom shader. Apr 28, 2014 at 19:40
• Definitely, but spritebatch.begin has an overload where you can specify an Effect (a shader). I haven't used that one when I worked with XNA though, sorry. Apr 28, 2014 at 20:30
• I've been experimenting with that overload and hopefully I can get some understanding of the subject. Thanks for the help! Apr 29, 2014 at 11:46