Welcome to my tutorial for creating a squishy platformer character. Here is a GIF of what we will be creating:
I hope you're excited! In this tutorial I assume you have a basic understanding of GameMaker Studio's UI and some understanding of code, if you don't, be sure to take my free GameMaker course.
There is a video version of this tutorial as well. Check it out.
The first thing you need to do is download this file and double click on it. The file will be named "platformer.gmz" and GameMaker should automatically open it. If you already have GameMaker open you will need to import the file using file > import. You will notice, the project already has basic platformer physics. We will be building on top of that code.
Open up the o_player's Create Event and double click on the code action. Add these two lines of code:
The reason we are creating our own draw_xscale and draw_yscale variables instead of using the built in image_xscale and image_yscale is because if we altered the built in variables we would also alter the collision box for our character. That would not be good. Creating our own variables allows us to manipulate the drawn scale of the character but leave the collision scale alone.
Open up the o_player's Step Event and double click the on the code action. There are two places where we need to add some stretching and squashing. The first is when the player jumps. Modify the player's jump code so that it looks like this:
We set the draw_yscale to 1.5 and the draw_xscale to 0.75. This will stretch the player vertically.
Detecting a landing is a little trickier. The method I am using asks 2 simple questions. Is there ground below us now, and was there air below us in our previous position? For this, we will need to use yprevious and for that to return the correct value we need to use it after we have moved the character. Add these lines of code to the very end of our code action:
Add a new Draw Event to the o_player. Drag over a code action from the control tab and add this line of code:
This simple line of code just hijacks the automatic Draw Event and replaces it with our version. All the other elements of our sprite will be drawn normally but we are now using our own draw_xscale and draw_yscale.
Run your game and you should see this:
Close! Not quite what we were going for, though. Our stretching and squashing are working fine but now we need to ease the draw_xscale and draw_yscale back towards their default value of 1.
For this we be will using GameMaker Studios built in lerp function. Lerp is short for linear interpolation. There are many ways to use this function but in our specific case, we will be using it to move our scale variables a percentage of the distance back to 1.
Open up the o_player's Step Event again and double click on the code action. Just before our landing code add these two lines:
Each step the players draw_xscale and draw_yscale will move 10% of the distance towards a target distance of 1. Here is a simple way to remember how the lerp function works:
new_value = lerp(current_value, target_value, percentage_to_move);
Run your game and now it should look just like the GIF I showed you at the start! Well done. You have now added your own stretch and squash to a platformer game and you have a basic understanding of GameMaker's built in lerp function. If you have any problems following along, here is the finished version.
Thanks for reading!
- Ben (@uheartbeast)
CHALLENGE: Use the lerp function to create smooth camera movement for this game.