Rotation:

So first off let’s address the rotation problem. I tried a bunch of different ways to get a two finger touch to rotate a shape. Already in place was a system for attaching chipmunk pivot joints and having shapes be dragged around like that. One might think that simply ensuring that the second touch always attached a pivot to the same shape as the first would work…. and that person would be right to a certain extent. The problem is that the two touches are very rarely always at the same distance apart, creating a quite visible pull/push on the shape that can become quite sporadic. Going down the route of trying to reposition the pivots on the shape led to even more frustration (though I’m pretty sure there’s probably a solution using it!).

Well anyway, I suddenly fell upon a pretty simple solution to all this pivot madness. If I just always made the second touch form a very long chipmunk groove joint that went through the first touch. What the heck is a groove joint you say? You can picture it basically as a zipline: there’s two points and between those two points you can slide [a body] back and forth freely, but you must stay on the imaginary line that passes thru those two points and not go past either point. In our case we’re going to form a very long zipline that goes thru and beyond our two touch points (anchored to the shape) and let the second touch zip around anywhere on that line effectively letting the touches get closer to or further from each other but forcing the shape to rotate if the angle between the touch points changes.

This all might be too hard to visualize, so here’s a picture of it in action:

The gray circles are the touch points and the blue line is the groove joint; the two ends of the groove joint go way offscreen ensuring that the touch will never hit them.

I’ll just mention that there is a sticky scenario that you have to consider with this method. If the user lifts their first touch, the original mobile bro’s code would delete the joint associated with that touch. This creates a weird problem where the shape will basically just fall away from you a la’ the zip line (groove joint). So instead, we must always delete the groove joint first, and swap around a few variables so the controller object thinks that you have just one touch again.

Sidebar:

Phew, that rotation problem was stickier than I imagined. On to our next objective: Get the sidebar in better operating condition. So right now there’s just a background with a sidebar thing painted on it. That’s fine for now because I’m not really sure what that will visually entail, but I do know that I will need some sort of object to handle its behavior no matter what.

@interface ShapeSideBar : CCSprite<CCTargetedTouchDelegate> { Game *_game; NSMutableArray *_blocks; } +(id) shapeSideBarWithGame:(Game*)game; -(id) initWithGame:(Game*)game; @end

I start with this as my object, figuring a sprite implementation will probably be the best idea if I want to still leverage the power of batched sprite sheet drawing method and pass the blocks back and forth between the sidebar and the “world” easily. I just make a transparent sprite in the sprite sheet to use for now.

Simple goals first: let’s just write some code to be able to drop shapes onto the sidebar (and have them stick) and be able to drag them off again.

-(void) world2SideBar:(Block*)block { CGPoint pt = ccp(30, 10+[_blocks count]*30); [_blocks addObject:block]; [block runAction:[CCMoveTo actionWithDuration:.4 position:pt]]; block.sideBarMode = YES; }

I originally was removing the block from it’s parent and adding it to the sideBar as a child, but for some reason that pauses the block’s actions and doesn’t unfreeze them no matter what I do…. this is a potential cocos2d bug. So instead I just leave it with its original parent for now.

You’re probably wonder what the sideBarMode property is; well I realized a cpCCSprite instance for our blocks wasn’t enough and created a derived class called Block. “sideBarMode” just removes the shape from SpaceManager (not delete), rotates the shape to 0 degrees, and scales the shape to 0.5f. When it’s off it just reverses those effects.

Ok, now to get some touch code to get it back off:

- (BOOL)ccTouchBegan:(UITouch*)touch withEvent:(UIEvent *)event { CGPoint pt = [self convertTouchToNodeSpace:touch]; for (Block *block in _blocks) { if (CGRectContainsPoint([block boundingBox], pt)) { [self sideBar2world:block]; return NO; } } return NO; }

Here we do a little bit of trickery that works pretty well. Loop over all the blocks and find the one that the touch is in, get that block out of the sidebar and return NO. Returning NO will let our other touch controller get the touch and since the shape is right under it, it will start dragging it around!

I think we fulfilled all our goals for today, they were a bit painful so let’s outline a fun goal for next time:

Draw some more art assets and….

Begin animating the blocks with goofy “personalities”

See you next time!