Tracking the Ball's movements

Right now there is no code to "link" the Chipmunk simulation with the graphics in a way that the ball moves correctly. This is done by extending the tick method and reading the new positions from Chipmunk with which we update our image's coordinates. This process can be achieved in many different ways (i.e. you store a list of items to be checked and/or updated) but luckily for us Chipmunk is designed to keep things as simple and as abstract as possible. This next piece of code is something you usually need to write once and rarely bother to update it unless there is one or another detail that was left out.

So, in the last part we created a shape, which is linked with a particular body, and we also stored a reference to our UIImageView in the same shape. This means all the data we need is at a central location, with this in mind Chipmunk offers us a convenient function:

cpSpaceHashEach(cpSpaceHash * hash, cpSpaceHashIterator func, void * data)

This function takes a hash (an array), a function to be called for each element in the array and optionally a custom data parameter.

So, go to the tick method and add this code after the cpSpaceStep call already there:

// Call our function for each shape

cpSpaceHashEach(space->activeShapes, &updateShape, nil);

As explained before, it will call the function updateShape (which we will implement next) for the activeShapes array. We'll discuss the meaning of "active" shapes in more details when we implement the floor, so don't worry about that detail right now.

Now we need to implement our updateShape function, start by adding this to the header, after the other method declarations is a good place:

void updateShape(void *ptr, void* unused); // Updates a shape's visual representation (i.e. sprite)

And then, this code on the implementation file:

// Updates a shape's visual representation (i.e. sprite)

void updateShape(void *ptr, void* unused) {

// Get our shape

cpShape *shape = (cpShape*)ptr;

// Make sure everything is as expected or tip & exit

if(shape == nil || shape->body == nil || shape->data == nil) {

NSLog(@"Unexpected shape please debug here...");

return;

}

// Lastly checks if the object is an UIView of any kind

// and update its position accordingly

if([shape->data isKindOfClass:[UIView class]]) {

[(UIView *)shape->data setCenter:CGPointMake(shape->body->p.x, 480-shape->body->p.y)];

}

else

NSLog(@"The shape data wasn't updateable using this code.");

}

This last piece of code does several things although only 1 or 2 of its lines are actually required. I added several checks and some warnings to let you know what problems to look for, but the important bit is the like where we update our view's position. Take special attention to the fact that I don't directly assign the Y coordinates, this is because Chipmunk's coordinate system is different from Cocoa's. Cocoa's coordinate origin is located at the top-left of the screen while Chipmunk's is at the bottom-left of the screen. Since different frameworks have different coordinate systems take some special attention to this when you're implementing something by your own. Cocos2D shares the same coordinate system as Chipmunk for example.

Now that we finally seem to have all we need to have the ball moving, it's time to build the project and run it. If you followed the instructions correctly you should see the ball falling and steadily increasing its descending speed. It also won't take much time for you to realize the incompleteness of this project, the ball passes right through the supposed floor. That's the next step in our journey.