The physics of the Adventures of Tinger

Tinger Physics

After releasing the game The Adventures of Tinger a week or two ago, I got a few mails by people who were asking how the physics simulation was done in this game. I'll try to clear things up in this post, please feal free to post a comment if you still have any questions.

The physics engine used is version 1.4. of the flash port of the box2d engine by Erin Catto. It's probably best if you have a mild understanding of that engine and how it works to understand this article.

Box2D is a powerful physics engine in many ways. One excellent feature is its speed, which enables you to place many objects in one scene without loosing to much cpu power. In fact The Adventures of Tinger is pretty cpu costly, but that is due to the complex graphics.

Physics Demo

To start of, here is a version of the game with physics debug data drawn onto the regular gamegraphics. It's about 7 megs to load, so please be patient if you have a slow connection.

Tinger physics demo
( arrows for walking, space for jumping, a and s for shooting )

You can see all of the collission objects outlined in this demo. The circle objects have an extra line that indicates the rotation value of the circle object. Some of the objects that you are able to jump through from beneath change their color depending on whether tinger can collide with them or not.

Making tinger walk

I chose to simulate all the characters in the game with simple collission circles. The problem with a physics engine is of course, that once you add an impulse to an object, it will start moving until it is slowed down by friction. However In a jump and run game you want to make the character stop as soon as the player lets go of the arrow keys.

I achieve this by settings the x component of linear velocity directly to a specified value. If the player lets go of the arrow keys, the engine checks wether Tinger is standing on ground (collission with an object with zero mass). If that is the case, the x component of the linear velocity gets set to zero. If Tinger is in the air, he will continue moving in the same direction. It is necessary to keep the y component, otherwise your character will not be able to fall or jump correctly. To prevent the character from slipping down slopes, I actually set the y component of linear velocity to zero as long as he is touching ground.

The character collission circles of the character don't rotate. The angle at which the characters stand is determined by the collission vector between every character and the ground object it is standing on. Letting the collission object determine it's angle correctly by it self seemed to be the harder choice. If I hadn't used circles, it might have worked.

The Heightfield Terrain

What I consider a special features of the game ist that you don't have square platforms to walk on, but you can actually walk up and down hills that have proper hill-like forms. The problem with box2d is, it can't handle concave polygons. The solution here was to tape together a bunch of convex 4 point polygons to simulate a concarve polygon. You can see a screenshot of the editor and what the game engine actually creates out of the editor information below:

Tinger Physics
Tinger Physics

Performance Tuning

For perfomance tuning all the objects that are not on screen are removed from the physics engine. The game engine is not tile based but based on single objects in the scene which move along as tinger walks. Every scene object which is supposed to take part in the physics simulation gehts assigned to a physics object which can be created in an editor I wrote. It's pretty easy to find out which objects are off screen and don't have to be computed. Although box2d probably could cope with all objects being computed all the time, this does save some valuable cpu time.

I had to write a few extension to the engine to handle certain features like collission objects which can be jumped through in one way and that you can't pass in the other way. As far as I know as3 doesn't inline getter and setter methods, so I do quite a lot of operations directly on the member variables of the physics objects. I can't say for sure though if that brought any speed. There are sites on the web that say it does, so you'd best read about that issue elsewhere.

Thats all folks

I hope some of the techniques I used became clearer. Please leave a comment if you have any specific questions

17.08.2008 | back to top | write comment | 45 comments

comments

harilalkm

Fri 29 August 2008 @ 05:52

hello david,
am harilal working as a actionscript programmer....
it's a fantastic game....
can you mention the technologies used in this game....
is it Adobe Flash?
then how would u use c library in it...
can you pls help me in it...
regards

dave

Fri 12 September 2008 @ 12:15

Hi Harilal,
the game is done in flash with actionscript 3. It's not possible to use a c library in flash, but in the case of box2d phzysics engine, there is an actionscript 3 port, that means native as3 code ported from the c sources.
dave

Derwin

Fri 12 September 2008 @ 16:18

Hi!
You've done an amazing work on this game.
I'm also doing a platform game with Box2D AS3 and I have a question.
Could you give us more details on your way to handle passing through platform?
Thank you!

dave

Sun 28 September 2008 @ 16:36

Hi Florian,
every iteration step you just have to check whether the object you want your character to be able to jump through is above or below the character. Depending on that you just set the collissionmasks apropriately.
Dave

cj

Mon 13 October 2008 @ 06:42

hi i am curious about the box2d editor you used to make the uneven terrain, was this something you created? if so, i'm curious the method you used to build it. neat game! thanks.
cj

Dave

Tue 14 October 2008 @ 15:58

hi cj,
what exactly isn't clear about the editor? I tried to describe who it works in the above article. Just let me know and i'll try to explain.

David

Fri 17 October 2008 @ 14:31

I agree with cj, The explination of the editor isn't so clear, we want to know how the editor works in providing the engine with the map i.e taking a collection of points and outputting a height terrain for your character to walk on.

Dave

Sun 19 October 2008 @ 17:16

well, what you basically create in the editor is an array of points from left to right. You can take these points an create a box for the character to walk on between each following pair of points.
So in box2d you can create a body and fill it with as many shapes as there are points in your editor. every shape then has to form a box of which the topside musst align to the line between two of the points in your point array from the editor. For calculating the vertices of each box you can use simple maths. 2 of the points you already know from the point array, the other two can be created by making sure the sides of the box are aligned at an 90 degrees angle.
The bottom line is, the heighfield terrain is just a bunch of squares fittet along the collection of points.

Denis

Wed 22 October 2008 @ 22:07

Hi Dave,
First: congratulations, this is a really excellent job. I came over here while reading the box2d forum, looking for examples of a jump'n run game, just like yours (which is just fantastic, haven't I already said that ?).
I discovered b2d yesterday, and I'm really amazed by how powerful this is.
I've just begun to create my own game, using some of your techniques, such as setting linear velocity to zero on arrows keys up, but I can't manage to detect whereas the character is touching the ground or not.
You wrote that you achive this by detecting the "collission with an object with zero mass"...
I understand how it works in theory but I don't know how to handle collisions at all, how would I do that ?
Thanks !
Denis(my english isn't perfect, sorry)

Denis

Wed 22 October 2008 @ 23:09

Well, I wasn't documentated enough; I had to create a class a class that extends b2ContactListener and add the listener to my world; it's ok now. :)
Thanks again.

dave

Thu 23 October 2008 @ 02:01

ok then ;)

Dan

Thu 06 November 2008 @ 21:56

Hi Dave, I was wondering if you could elaborate on how to create a contact listener - I was looking at the documentation but I wasn't able to figure out how to do it...I tried checking the ContactList on the body against another body (on keypress) but I think that was an old way of doing it before vr.2.0?? Anyhow, I would really appreciate being pushed in the right direction
Thanks

Dave

Thu 06 November 2008 @ 22:03

Hey Dan,
you're right. Checking the contact list against an object is the way to go for v1.4. of box2d. I haven't looked in to v2. so I don't think I can be of any help to you on that one. Have you tried getting help from the box2d community?
Dave

Ivan

Tue 24 March 2009 @ 07:04

Hi,
First of all I want to congtratulat you for your game, It's preatty impressive, and it motivate me a lot. I'm kind of new with box2d, I read some tutorials and I start learning from it. However I would like to know how do you achive on the game the horizontal smoth scrolling with box2d?
Thank you
Ivan

dave

Tue 24 March 2009 @ 08:41

Hi Ivan,
I'm not quite sure I understand what you mean with smooth scrolling. The background images are blurred, if that is what you mean. If you're talking about the perspective movement of the background, that is done manually outside of box2d. Is that any help to you?
Dave

Ivan

Tue 24 March 2009 @ 15:42

Hi Dave,
Thank you for your quick response, and yes that's what I mean, The perspective movement of the background + all the rest of the objects(items,bodies,enemies,etc)
I was confuse if that illusion of the actor walking trough with the world moving was possible to achieve it with box2dAS3 or if we have to do it outside of it. And what i mean with the smooth movement it's beacuse I was creating a platform game with Actionscript 3.0 but sine there are a lot of movieclips to move, it moves slow and unrealistic.
Thank you again.
Ivan Hueso

Ivan

Tue 24 March 2009 @ 15:49

Hi Dave,
Thank you for your quick response, and yes that's what I mean, The perspective movement of the background + all the rest of the objects(items,bodies,enemies,etc)
I was confuse if that illusion of the actor walking trough with the world moving was possible to achieve it with box2dAS3 or if we have to do it outside of it. And what i mean with the smooth movement it's beacuse I was creating a platform game with Actionscript 3.0 but sine there are a lot of movieclips to move, it moves slow and unrealistic.
Thank you again.
Ivan Hueso

Guy

Fri 17 April 2009 @ 12:34

Hi Dave,
First of all, great work on the game - it looks really great.
I wanted to ask how you implemented the side scrolling in the game? I tried using a really wide movieclip and slide it around the canvas but that seems silly and also hangs when the movie clips gets to an X of about -2500.
Did you chop the level into a few slices and changed the ones which are out of view? or come up with some other way to do it?
Thanks,
Guy,

dave

Fri 17 April 2009 @ 19:41

Hi Guy,
actually all the objects in the game are Movieclips which are repositioned on every frameupdate. The images in the background are relatively big movieClips, but I think none exceed around 1000px in width. You can remove out of bounds movieclips from the displaylist this way, which saves a lot of cpu.
Hope that helps you
Dave

David

Mon 08 June 2009 @ 02:38

Hello Dave,
First of all, I would like to say that the programming, graphics and overall design of this game blows my mind! It's unbelievably remarkable! One question I would like to ask, however. I notice that on your editor, you create a line and I'm assuming that the editor algorithmically creates polygons to simulate that path. Could you describe in a little detail the math involved in that? I have no idea what this method would be called so it's not something I can easily google =). Thanks!

dave

Mon 08 June 2009 @ 17:16

Hi David,
yes, polygons are created automatically. For every line segment a 4 point polygon is created. Two of your points are defined by the endings of the lines and the other two are offset by a few pixels from the first two. You need to calculate the directions vector for the original line and rotate it by pi/2 to get the offset direction. You can just multiply this direction vector by the amount you want to offset the new points. This you then add to the coordinates of the 1st and 2nd point to get the coordinates of the 3rd and 4th point.
I hope that is not too confusing. The only maths involved is a 2d rotation, you can find that with google.
Dave

sawrub

Sun 13 September 2009 @ 19:45

Hi Dave,
First of all, congratulations on the brilliant game. I'm starting out with box2D on platform games, and this has to definitely be my benchmark for quality and execution. And thanks a million for the snappy tutorial.
However I would like to know more about the terrain editor you feature in the post via screenshots. What editor is that? Is it something you created, or is it available for use? It looks like a life saver to me, coz I'm looking for something like that to design my terrain.

Dave

Sun 13 September 2009 @ 20:05

Hey Sawrub,
thank you for your praise.
The editor is something I wrote myself and unfortunately it is taylored to the Tingergame and the games own XML format. In the current form it's of no use to anyone else unfortunately so it's not available. The time I had for the project didn't allow for a more general implementation of the editor.

sawrub

Sun 13 September 2009 @ 20:37

Hi Dave,
First of all, congratulations on the brilliant game. I'm starting out with box2D on platform games, and this has to definitely be my benchmark for quality and execution. And thanks a million for the snappy tutorial.
However I would like to know more about the terrain editor you feature in the post via screenshots. What editor is that? Is it something you created, or is it available for use? It looks like a life saver to me, coz I'm looking for something like that to design my terrain.

TattooGeek

Tue 20 October 2009 @ 06:42

Hi Dave,
The game looks and plays great.
I have a question about the movement of terrain. How did you get the level around the character to scroll in relation to the characters movement?
Are you moving the character or just everything around it?
Thanks a million

TattooGeek

Tue 20 October 2009 @ 06:42

Hi Dave,
The game looks and plays great.
I have a question about the movement of terrain. How did you get the level around the character to scroll in relation to the characters movement?
Are you moving the character or just everything around it?
Thanks a million

TattooGeek

Tue 20 October 2009 @ 06:47

Hi Dave,
The game looks and plays great.
I have a question about the movement of terrain. How did you get the level around the character to scroll in relation to the characters movement?
Are you moving the character or just everything around it?
Thanks a million

Robin

Tue 27 October 2009 @ 23:07

@TattooGeek:
i don't know how this works for actionscript, but you should really just be moving your "camera", or your viewport ortho in opengl

Daniel

Sun 15 November 2009 @ 03:23

i am curious about the floor which you can jump through from below - did you figure out a way to make this work if the object is sloped (for example 1/2 the stage in length at 45 degrees)

Dave

Mon 16 November 2009 @ 09:22

Hello Daniel,
actually the way it is coded at the moment, the character would have to pass the centre of mass of the jump-throughable object to make it solid. there are no real slopes that have this function in the game, but the way I'd go about it is to build a slope out of many little straight objects which have their own calculation whether to be solid or not going on.
Dave

Zach

Sun 21 February 2010 @ 23:07

Hey,
I'm also interested in the method you used to scroll the world.
Also, you should seriously consider releasing that level editor. I'd pay to use something like that.

Dave

Thu 25 February 2010 @ 20:07

Zach, what exactly don't you understand about the scrolling? Basically it's just a giant movieclip which moves along.
David

Zach

Sun 07 March 2010 @ 17:40

So is the entire level one long movie clip? like 5000 wide by 640 high or something similar? And you have a function that scrolls the level along with the key presses?

Dave

Mon 08 March 2010 @ 11:29

Yes basically. The long movieclip has children which are the tiles of the level, and they get activated and deactivated depending on if they're visible to the player.
Dave

iain

Wed 29 September 2010 @ 17:28

Hi,
This is s great game. I am trying to make something similar but am finding it difficult to make the character move correctly. How do you sense if you are on the ground for jumping? What friction values etc do you use to get such a nice motion? Thanks.

Dave

Wed 29 September 2010 @ 19:19

well basically it's all handled by box2d. You'll have to try around with the parameters. But you can always ask your collission objects if they're touching something else (like the round).

Matej

Wed 05 January 2011 @ 19:48

Awsome!

Strid

Thu 14 April 2011 @ 23:52

Hey, i'm just curious, how much time did it take for you to develop the game and the editor?
The editor looks like kinda complex.

Dave

Fri 15 April 2011 @ 19:40

It took about 4-5 month, but not full-time. I'd guess about 6-8 weeks if I had done it full-time. The editor works on the same engine as the game, so it only has a few extra functions to move stuff around and create the bounding boxes for physics etc.

sinasquax

Sun 18 December 2011 @ 16:52

Hello, great game and great article !!!
When you say that all objects not showed are removed, do you delete bodies or do you set their sleep mode ?
Thank you

Dave

Mon 19 December 2011 @ 18:48

Hey,
I completely remove them from box2d, which means deleting them.
Dave

Sameer

Fri 30 December 2011 @ 07:23

Hey,
I love the game!! and thank you for the tutorial. I'm trying to setup my first platform scroller game and you've inspired me :). My question relates to the big movie clip that you have for the level. How did you create the physics bounding boxes for the small platforms? Are these done on the fly using an XML file? So each movieclip maps to a set of properties in the xml which you use to create the physics body dynamically?
Thanks :)

David

Mon 02 January 2012 @ 13:22

Hi Sameer,
that is exactly how it is done.
David

Bill

Mon 20 February 2012 @ 04:35

Hi David,
Can we have the source code? I don't find any good tutorials for a platform game who mix Box2D and AS3.
I can pay for this.
Thx.

Tom

Thu 27 December 2012 @ 20:44

Hi Dave, excellent post thanks.
One question I have is I can't seem to prevent my character from sliding down the slopes. I've tried setting the y of setLinearVelocity to 0, but it still moves. Are you creating your own gravity using setLinearVelocity, or using box2D for this?
Thanks
Tom

Name

Robotcheck
To verify you are a human,
please enter the number "4" in this field.

EMail ( won't be published )

Webpage

Comment

No HTML allowed. Linebreaks will be created automatically.