Box2D and the wraparound effect

From Wikipedia: Wraparound, in video games, is a gameplay variation on the single-screen in which space is finite but unbounded; objects leaving one side of the screen immediately reappear on the opposite side, maintaining speed and trajectory. This is referred to as “wraparound”, since the top and bottom of the screen wrap around to meet, as do the left and right sides (in mathematics, this is known as a Euclidean 2-torus).[1] Some games wrap around in some directions but not others, such as games of the Civilization series that wrap around left to right, or east and west but the top and bottom remain edges representing the North and South Pole (in mathematics, this is known as a cylinder).

In some games such as Asteroids there is no boundary and objects can travel over any part of the screen edge and reappear on the other side. Others such as Pac-Man, Hungry Horace and some games in the Bomberman series, have stages with a boundary surrounding most of the playing area but have few paths connecting the left side to the right, or the top to the bottom, that characters can travel on.

Since I received a couple of emails asking me to achieve a wraparound effect with Box2D, and since the original project which inspired the creation of an educational game with Box2D features it, I am showing you how do it.

It’s very simple, as long as you pay some attention to these three steps:

1) If your world has a floor, make the floor a little bigger than the visible area. In my case, the visible area is 640 pixels wide, while the floor is 800 pixels wide. I don’t want the body wrapping around to hit the side of the floor.

2) If you are moving a body with the mouse, that is you have a mouse joint, disable the effect or the joint will make your body react in a weird way when wrapping around.

3) In all other cases, just update body position using SetPosition method which preserves rotation and speed.

This is the example:

And this is the result:

Pick the box with the mouse and throw it off the screen.

Download the source code.

  • paul firth

    Here’s how you fix the warping problem you’ve got when you drag the block slightly over the edge:


    Cheers, Paul.

  • Antoan

    Wouldn’t it be more realistic if the part of the box that is out of the stage appeared from the opposite side? This could be achieved by using a second box, with the same inertia and speed as the original box. And when the user, for example, moves either of the two boxes with the mouse, the other box would “copy” the speed and inertia of the box being moved. It would require some complicated logic, though – for example, to determine whether the extra box appears from the left or from the right side of the original box. Maybe the easiest solution is to have TWO extra boxes – one with x coordinate always being the original box’s x coordinate MINUS 640 (the width of the stage), and another with x coordinate always being the original box’s x coordinate PLUS 640. And when one of the THREE boxes gets moved by the mouse, the other two “copy” the position and rotation of the moved box. Just a suggestion ;)

  • Chris


    I think Antoan is right – it would look way better to have a copy. That’s the same when using any kind of teleports (when you don’t cover it with any kind of sparkle or other overlay).

    Other then that – great article and code :)

  • Looks cool-

    It would be a bit of a waste to have two boxes, with the “same inertia, ect”. The main issue is just that these are just being drawn with the debug draw.

    When textures are added, then it would make sense just to draw the object twice- so you don’t have to add and remove physical objects to the world, with possible different results in collision.

    Nice tutorial!

    It’d be awesome to see one with scrolling+ textures- but I know you’ve already done some really good tutorials with texturing using box2d :D

  • Arrgh! I hate learning codes