People who have visited this shit

GMS Tutorial - Wavy Bushes


Hello again folks! I'm back and well i was asked again for a tutorial, this time was @Cyll11  who asked me for this one, anyhow, this tutorial will be a lot quicker than others, is a very simple thing "Wavy Sprites" as always i'll be using GameMaker, this time i'll be using the version  GameMaker:Studio 2 sooo, let's begin then!


First of all, this will be the sprites you'll need, one for the bushes and another sprite for the leaves particles, that last one is optional though, you can have particles or not, really it isn't something that important for this tutorial.

Next you'll need 2 important scripts approach and mouse_over just so everything would be more easy.


The approach Script

This is a pretty simple easing function where the current value approaches to the ending value by some percent of the difference between the current value and the ending value

So for example if you put in the function something like:

var x = 0;
       x += approach(x, 100, 0.1);

x will increase its value by 10 since at the beginning the difference between x=0 and 100 is... well, 100, so 100 * 0.1 is 10 and that's what we're adding to the x value, so then the difference between x=10 and 100 is now 90 and again the same process 90*0.1 = 9 and so on and so forth, you get the idea right? pretty easy, if i got you actually more confused well, sorry, anyhow this isn't that important, just a little of extra information for those who might need it




The mouse_over Script

The mouse_over script is also one quite easy, actually more easy than the previous script and also really helpful, you can exclude this one since i'll be using it only for this tutorial purpose, but in your game you might want to change this for something like place_meeting with the player or something that would make the bush move, since i'm not making any playable characters in this example i'll be using the mouse_over function to "add force" to the bush




Coding

So now! let's start with the actual coding of the objects, first of all, let's start creating the bush object, we'll add 5 variables to start with
  • start_add: This will behave as an auxiliary variable that will hold the amount the time variable will be increasing in.
  • add: At the moment just set it equal to the start_add value, this one will change when colliding with some objects, like a player entity, an enemy, etc. For this example we'll be using the mouse to collide with.
  • move: A boolean variable that tells if whether the bush is able to shake when colliding with the mouse or not.
  • off: This is how much pixels the sprite will be waving, the greater the number, the wavier.
  • time: This will track the time that has passed since the instance was created, this is mostly to use in a sin function


Now let's move onto the Draw Event of the bush object, let's go piece by piece in this one.
Soo, this is what is actually doing the "Wavy Effect" first we set 2 variables wave and wave_delay

  • wave: This will hold how much the sprite will be waving over time, sin(time)*off if you know how sin and cos functions work over time this should be pretty easy to understand, if not, here's a GIF that pretty much explains it.

  • wave_delay: Basically the same as the wave variable but with the time variable being over by 500, just to give a nice offset to the sprite "waviness"


Also there is the time variable being increased by the add value, next is the draw_sprite_pos function of GML which let's you draw a sprite stretched in 4 joints for more information you can check out the official GML manual




So finally! to end with this tutorial, we have the "shake" part of the bush so when something collides with the bush it shakes, just a small effect.

First we declare the collide variable that in this case we'll use the mouse_over function we made earlier, in your actual game you might actually want to set that to a place_meeting function or something like that, then if the collide is true and move is true we'll add more velocity to the time variable by adding 3 times the value of the add function using the approach function we also made earlier so the change doesn't look so abrupt, the rest of the code i think you'll be able to understand it pretty easily, even though, if you still have some questions i'll leave a download link to the project

So that's everything for this tutorial folks! hopefully this was of some sort of use for you, any questions or observations you can leave a comment down bellow :)

Download this project



Comentarios

  1. Sorry if I'm wrong, but it seems that your approach function is the same as built in function lerp(). All approach functions I've seen and use myself are approaching by set value and not by percents of remainder.
    Still amazing tutorial, I was wondering if there's function for warping sprite but somehow didn't find it. I had idea for fake 3D top down house walls.

    ResponderBorrar

Publicar un comentario

Entradas populares