Tip or hack : use box2d for a perfect “swipe to move” cam (or dragable scene)

Read this if :

  • You want a dragable scene feature
  • You use Box2D in your game

Basically, when you make your “swipe to move” feature, you “link” the cam to the player’s finger movements. The result is a “flat” and not smooth cam movement. Plus, it stops directly when player release the touch. Even if he swipe fast. How to make it smooth ?

First method : Myself, yeah !

(I did that in my third game in the level choice.)

You can try to make yourself a fluid move : by calculate an estimated swipe speed and apply this speed in a “decreasing update loop”.
Performances are not very good (ok, depends of your skills, but with mine not 🙂 ), and your math is not perfect, but it works. More or less. But :

  • There is lots of work
  • Lots of calibrating
  • Lots of test on every devices
  • Tweaking
  • And the result is not “perfect”

Estimate the finger speed needs to take a reference point and compare the time and the direction to the final point.
You have a big risk that sometimes your feature make the cam make strange moves :

SmoothCam
Player moves / Result / Desired

 

To make this move perfect, you’ll need to simulate a mass that player lauch when he release the touch.

Hey, Wait ! That is exactly what do the mousejoint of box2D !!! And I Use it in my game.
The idea is here : just put a empty circle sensor body. And make your can chase it.

Second method : let pros do their stuffs

Principle in details :

  • Add a “mouse” body on your physic world (b_Mouse)
  • Be sure that it is not affected by eventual gravity and is sensor without contact check

Then, use your GameEngine events :

  • On Scene Touch (Down)
    • Teleport (SetTransform with box2d) the b_Mouse to the center cam
    • Make the cam chase your b_Mouse object
    • Configure a MouseJoint to it
  • On Scene Touch (Move)
    • Refresh your mouse joint with the distance X and distance Y
  • On Scene Touch (Up)
    • Release the MouseJoint and let the object move freely with its actual impulse. and let the chase camera do its job.

That’s all !

Soon : A video of the application of this technic on my Fifth game

Flavien

Making Android Games

You may also like...