This tutorial will explain how to interact with Box2D objects by swiping. I wrote this tutorial in response to this thread on the cocos2d forums.
b2Body *body; b2Fixture *fixture; b2RevoluteJoint *revoluteJoint; b2PrismaticJoint *prismaticJoint; b2DistanceJoint *distanceJoint; b2MouseJoint *mouseJoint; int touchHash;
Download the Box2DSwipe project from here. Once you’ve done that open up the project in Xcode and run it on the iOS Simulator. This should be the result:
You may notice that my screenshot above shows two circles. The big circle is the ball and the small circle is what I call the swipe body. The small circle only appears when you touch the screen. While your finger remains on the screen a Box2D mousejoint is constantly dragging the smaller circle towards your finger. Once you release your finger both the small circle and the mousejoint are destroyed.
How this project was made
- The Box2DSwipe project was created from the standard cocos2d Box2D template.
- The latest version of TRBox2D v0.5 was added the project. (direct link here).
- HelloWorldLayer.h and HelloWorldLayer.mm were customised & heavily commented
There’s not much exciting happening in the header file. Points of note are the import of the TRBox2D class and the addition of some variables to the interface. The code commenting should explain the variable purpose.
TRBox2D *ground; // The ground body (used for limiting the world to the screen size) TRBox2D *ball; // This is the physics body tied to a cocos2d sprite TRBox2D *swipe; // This is a small Box2D circle created when you put your finger on the screen
The implementation is broken down into two main parts: Physics and Touch Events. The physics part I’ve explained in other tutorials so I will focus on the touch events.
The first thing you will notice in the TOUCH HANDLING section of the HelloWorldLayer.mm file is this method:
createSwipeBodyAtPosition:(CGPoint)position size:(float)size sprite:(NSString*)sprite angle:(float)angle
Now what that method does is simply return a little TRBox2D circle to whatever part of your code asked for it. When you call the method you can vary the size of the circle or even specify a sprite to show when the circle appears as well as the angle of the sprite. Note that the circle will only appear when you have Box2D debug mode on. You turn off debug mode by commenting out world->DrawDebugData(); in the draw method.
The rest of the methods in the TOUCH HANDLING section are standard cocos2d ones for handling touch events. For the sake of simplicity I stripped out multitouch handling that I use in iSoccer. If you’re interested in learning about that let me know and I might extend this tutorial.
Anyway we’ve used three cocos2d touch handling methods: ccTouchesBegan, ccTouchesMoved and ccTouchesEnded. The first thing I do in any of those methods is to sort through the touches and make two variables touchLocation and touchLocationInWorld. touchLocation is for the cocos2d sprite location and touchLocationInWorld is for the related Box2D body location.
- The ccTouchesBegan method creates a swipe body if one doesn’t already exist and attaches a mousejoint to it.
- The ccTouchesMoved method changes the target of the mousejoint to wherever you touched.
- The ccTouchesEnded method destroys the swipe body and associated mouse joint.
If you liked this tutorial or found something wrong with it please let me know!
If you want to support my work and have an iPad please consider purchasing iSoccer *wink*
Go to the Tutorials Index