Best way to zoom and pan a 2D cocos2d iphone game

Question

What's the best way to implement a pan-able zoomable game map with Cocos2d for iPhone. It would be like Mobile Safari except with a game map that doesn't fit completely on screen. Or like how it's done with Angry Birds, Cut the rope, etc.

This would not be a side scrolling game, just a fixed game area that you can zoom in/out of.

I'm new so if there are tutorials for this that would be great.

Thanks

Katlynkatmai

Answer 1

but i ll recommend Overwriting the VISIT function of your Layer you want to Scale, and handle the Scaling by either glOrthof or glScalef

I wouldn't overwrite the visit function... just add your layer to the touch dispatcher:

[[CCTouchDispatcher sharedDispatcher] addStandardDelegate:self priority:0];

And implement the delegate functions:

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

inside this functions if you notice that the user is panning/zooming, just update the scene position / scale properties.

To find if the user is panning or zooming, check this InputController helper class here: https://github.com/caxaria/LoopingMenu

Hope it helps,

Fluffy

Answer 2

You absolutely should not follow the advice by Joao Caxaria, who seems to have unnecessarily reimplemented the entire UIGestureRecognizer API himself!

You can simply use UIKit's available gesture recognizers and attach them to the sharedDirector's openGLView, as specified in the chosen answer in the link below. These allow for pan, pinch, tap etc. detection. You can even use a UILongPressGestureRecognizer to detect dragging.

cocos2d-iOS - Gesture recognisers

Acroter

Answer 3

if you are not going to use Physics in your game, then its very simple you will find a lot of tutorials on zoom/pan , just set your world SCALE in the touchesMoved zoom/pan code.

but if you are going for Angry Bird like stuff, then you can use the Box2d/Chipmunk physics engine(comes with cocos2d), but for building the Physics world like Angry birds you will either have to write your own Level Editor or you can use LevelSVG(by Cocos2d people) kindof thing to visually make the world in SVG editor and Parse it to BOX2d.

As for the Zoom/pan with Physics bodies in your world, it will work as long as your Physics world is in your LAYER which you are trying to SCALE.

but i ll recommend Overwriting the VISIT function of your Layer you want to Scale, and handle the Scaling by either glOrthof or glScalef

Myosin