How to make a gravity-based platformer

Favourite 215 favourites
Tutorial written by sqiddsterOriginally published on 10th, March 2012 - 5 revisions

There has been a bit of interest and intrigue about how I made the gravity mechanics in AirScape. So I have decided to write my first tutorial on how I did it, and show how simple it really is.

The first thing I must say, is that this method was conceived by Yann Granjon. I did not come up with the idea, I simply implemented it. He helped very much through the production of the game and it would not have been the same without him!

The basics

The most important thing to consider for this to work is the ability of the Platform behavior to change gravity angle. Once we know this works, the important thing to consider is, how will the game know which gravity direction to set at which point?

So Yann suggested, and I implemented, gravity zones.

(Sorry for blurry pictures, they seem to have lost quality on upload)

Level 1 overview with two types of gravity zones

Here you can see an overview of level 1-1. The main thing we are interested in, is the colored zones surrounding the landmass.

These shapes are all frames of the same object, 'gravzone'. There are about 5 shapes, all for different purposes.

There are two types of gravzone. "Relative", and "Non-Relative." This is just decided by a boolean.

The code

The code is very simple. Here are the basics:

The basic code for gravity shifting

Basically, there is an angle for any gravzone. This angle is determined based on whether or not the gravzone is relative.

Generally, the rounded gravzones are relative, and the straight ones are not. The difference is that the relative gravzones attract towards a single point, which allows rounded surfaces, whereas non-rounded gravzones only attract towards a specified angle (this angle is usually just specified by the angle of the gravzone itself.)

So anyway, back to the code. All it does is, for each gravzone the player is overlapping, determine the correct angle (determined by gravzone.a for non-relative, or angle(player.x,player.y,gravzone.x,gravzone.y) for relative) and then turns this angle into two vectors. It does this so that the vectors can be ADDED to the previous vectors, and we end up with a vector pointing in the average direction of the angles specified by all gravzones the player is overlapping at that moment.

This is so that I can overlap two or more gravzones, and end up pulled towards the average of their angles.

Flipping 180

There comes a small problem when flipping 180 degrees. Basically, the average of the angles cancels out and the player falls in an awkward direction. So I integrated another invisible object, the flip_assist.

The yellow bars are the flip_assist

This overrides the traditional gravity programming while the player is overlapping the flip_assist.

The flipping code

This code basically switches the standard gravity angle for a gravity angle manually set by the flip-assist, and then lets it switch back to normal when the player is no longer overlapping one.

There are actually two flip_assists for every yellow bar you see, so the player can flip back and forth. This necessitates the 'cannot_reset_flip' boolean so the game doesn't get confused.

And that is pretty much it. With a bit of angle lerping:

This lets the screen follow the player smoothly

We have the basic mechanics of the game.

Here are some examples of levels to get a better idea:

Some of these were very time consuming

Hope you enjoyed the tutorial. Make sure you let me know if I missed anything!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


Funbit 3,128 rep

Nice1, i will try this technique for my upcoming game.
First one to enter my credits list = sqiddster :)

Saturday, March 10, 2012 at 6:48:03 PM
JohnnySix 12.0k rep

Interesting to see how this was executed, fascinating reading, this should be in the top 10 tutorials.

Really liked the game also, unique gameplay, great graphics and an interesting premise. :D

Sunday, March 11, 2012 at 5:30:12 AM
Merlino 6,748 rep

Very nice!

Wednesday, March 14, 2012 at 2:10:19 PM
gaboduarte 13.8k rep

Woo hoo! This is great!

Thursday, March 15, 2012 at 4:58:15 PM
cademonteiro 5,008 rep

Great !! congrats dude !

Thursday, March 15, 2012 at 5:09:22 PM
davisbeasley 6,574 rep

Great to see advanced techniques like this explained, the Construct2 system just keeps expanding...

Thursday, March 15, 2012 at 5:48:00 PM
taltal 5,232 rep

this is great
i will use it...

Thursday, March 15, 2012 at 6:12:09 PM
cjr1974 5,114 rep

Thanks for the info..was interesting!!

Thursday, March 15, 2012 at 9:48:51 PM
kittiewan 12.5k rep

Thanks for sharing this! Great tutorial.

Thursday, March 29, 2012 at 5:31:29 AM
necromaster 8,358 rep

You can read a review of AirScape over at

There are some pics over there for some more level inspiration

Monday, May 07, 2012 at 2:04:04 AM
smdkhaki 2,174 rep

capx file please

Wednesday, May 16, 2012 at 5:25:24 PM
sqiddster 32.8k rep

@smdkhaki Sorry, I can't really share the whole capx file. If you have any specific questions, feel free to PM me and I will be happy to answer them ;)

Wednesday, May 16, 2012 at 8:06:53 PM
Mucaro 3,144 rep

Your game is more interesting than Angry Birds 1, really.

Thursday, June 07, 2012 at 12:40:11 AM
sqiddster 32.8k rep

Thank you ;)

Thursday, June 07, 2012 at 2:21:39 AM
jogosgratispro 23.4k rep

This is by far one of the coolest browser games I've ever seen in my life. Congrats!

Thursday, July 05, 2012 at 2:27:18 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.