Scratch Gravity

By Clarissa Littler / Scratch Coding Games for Kids / June 2019 Issue

Mix some math and some code to create dynamic games with realistic physics.

Platformers are a pretty common thing to make in Scratch, but in this issue we’re going to make a platformer with a little bit of a twist!

Now, you might remember the old Mario Galaxy games from the 00s. Unlike other Mario games, where there were platforms and terrain you jumped on and gravity always pulled from the top of the screen towards the bottom, the Mario Galaxy games involved Mario moving between “planetoids”, tiny planets whose gravity pulled Mario towards their center.

These planetoids were sometimes so small that there could be a bunch of them on the screen at once and the platforming would involve jumping from the gravitational influence of one planetoid to another, where Mario is pulled towards the center of the closest planetoid.

So, I was thinking about these games and I thought “how hard would it be to make a 2d platformer in Scratch that had this kind of gravity”. Well, happily I can tell you in this article that it’s not that hard! It just requires a few small tricks that I’m going to share with you!

There’s two parts to this tutorial. The first is that we want to show how to use basic trigonometric functions to make a sprite get pulled by gravity towards the center of a circular planetoid. The second is that we’re going to have our sprite get pulled towards different planetoids based on where they are at the time.

So to do the first part we’re going to make a tiny simple Scratch project with the Scratch cat and a single planetoid.

Let’s start a new project! Start by making a new sprite that’s a circle and place it somewhere on the screen.

Now we’re going to add some code to make our cat face in the right direction relative to the planetoid. We’re going to use a cute little trick of pointing towards the planetoid but then rotating 90 degrees counterclockwise in order to face like our sprite is standing on the planetoid.

Okay, so you can move around and see that your arc is rotating around the planet. Umm, but we need to actually fall towards the planet, right? Yeah, we’re going to need a little trig to do that. In particular, we need the fact that -sin(direction) is the y-component of gravity and cos(direction) is the x-component of gravity. We’re going to use separate x and y velocities in order to properly keep track of the speeds on each axis.

Now we can add a jump! The jump should be in the opposite direction of gravity.

Okay, so this isn’t bad! You can tweak this by writing code to “bump” the sprite out of the body of the planet if it starts to shift down. This is especially easier if you make your planetoids have two layers of color, one that acts like the ground for setting the velocity to zero and an interior layer of color that pushes the sprite up.

We’re ready to talk about the really wonky trick! So I’d shrink down our sprites a good bit because we want more room on the screen. My sprites look pretty tiny, like this:

So what we’re going to do now is generate a bunch of planetoids as clones. We’ll do that with the following code:

Our problem now is how we pick which planetoid to orbit. You can’t pick out clones by name, right? Well we can’t pick out a clone, but we can point at a particular sprite that just happens to always be sitting at the center of closest planetoid.

Let’s outline the steps.

First, make a new sprite. It doesn’t matter what it looks like, because you’re going to make it invisible, but I’d recommend making it small and making sure its single costume is centered. Mine is a little purple rectangle that has the following code on it:

As you might guess, this means that you need to create two variables X center and Y center. How do these variables get set? By the following key loop we add to our planetoid.

This code gets every planetoid to check how close they are to the player and, if they’re closer than the last planetoid checked, move the helper shape right to their center. Look at the code and see if you can make sense of how this if-statement ensures that, no matter how many times the helper shape moves around it always ends up at the closest planetoid by the end.

Finally, we can change our main sprite’s code just a little bit to send the message that moves our helper shape before pointing at it:

That’s it!

You can find my full project here.

Now you can add in enemies, make multiple screens, etc. to make it a fully fledged game. I thought this was a pretty cute trick though and I hope you get to make some fun games using it!

Learn More

Clarissa Littler

Clarissa has worked in mathematics, physics, and computer science research but spends much of her time now trying to make computer science education accessible to a broader audience.

View all posts