iDevGames Forums
pan and scale the view in cocos2d - Printable Version

+- iDevGames Forums (
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: Game Programming Fundamentals (/forum-7.html)
+--- Thread: pan and scale the view in cocos2d (/thread-8666.html)

pan and scale the view in cocos2d - sefiroths - Feb 22, 2011 09:19 AM

i'd like to make some tests to learn cocos2d.
the application should make something similar to googlemap (scale, pan, and object on it that i can select)
i have readed many topics but i'm very confused. i don't know if use camera, parallax node, move layers....?
i'm trying to make a simple program for test: the 2d scene i'd like to display is:
1) background image as a map
2) some selectable points on background
3) some other sprite
4) on touch drag and drop i'll pan all objects, on second pan event i'll pan the object from the new location (not the beginning location)
5) scaling with two fingers with the center of scaling is the center of the screen
which implementation should i follow?

for some area selectable i have used sprites with events attached but
when i scale the background, the selectable object must be positioned on the map accordingly...
don't know how to make it
can somone halp me please?

RE: pan and scale the view in cocos2d - skyhawk - Feb 23, 2011 11:53 AM

1) ccsprite as child of the layer
2) ccsprites that that can either implement cctouch events, or your layer touchevents can simply handle them being special cases that can be touched
3) ccpsrites
4) ccTouchMoved
5) ccTouchesMoved

RE: pan and scale the view in cocos2d - sefiroths - Feb 24, 2011 09:57 AM

thanks for the answer.
i have followed your suggests but i have a little problem.
first what i have done:
0) create helloworld from cocos2d template
1) added sprite in init function with:
CCSprite *bg=[CCSprite spriteWithFile:@"blabla.png"];
  [self addChild:bg];

and a menu:
CCMenuItemImage *menuItem1=[CCMenuItemImage itemFromNormalImage:@"Icon-Small.png"
  selectedImage:@"Icon-Small.png" target:self                                            selector:@selector(doRead:)];
        CCMenuItemImage *menuItem2=[CCMenuItemImage itemFromNormalImage:@"Icon-Small-50.png"
        CCMenu *myMenu = [CCMenu menuWithItems:menuItem1,menuItem2,nil];
        [myMenu alignItemsVertically];
        myMenu.position=CGPointMake(20, 20);
        [self addChild:myMenu];

2) subclassed ccsprite with some touch events
-(BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event{
    oldLoc =[self convertTouchToNodeSpace: touch];
    return YES;

-(void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event{
    CGPoint location =[self convertTouchToNodeSpace: touch];

5) the scale...
if i scale bg.scale+=0.2 for example, it will be scaled with an anchorPoint that is not the center of the screen
if i scale self.scale+=0.2 works great, but the menu i added in init function will be scaled too...
do i have to add more layers and add to each other...i'm little confused.

RE: pan and scale the view in cocos2d - skyhawk - Feb 24, 2011 03:16 PM

layers are interactable constructs that house portions of your game. usually you'll have a HUD layer and a game layer.

regarding scaling: if you want something to scale at x,y at the middle of your sprite, insure your anchor point is .5,.5 I don't think your background is anchored at .5,.5
What I'm saying is I'm not entirely sure what you're asking in that regard.

RE: pan and scale the view in cocos2d - sefiroths - Feb 25, 2011 02:16 AM

hi thanks again, perhaps i've explained not well.
i'd like to make something like google in webview:
i can pan the background, but the background, when i scale, will be scaled as the anchorpoint is in the middle of the screen, not the middle of the image.

i'm very new with cocos2d.
is there some tutorial that explains how to make a HUD layer and game layer?

RE: pan and scale the view in cocos2d - sefiroths - Feb 28, 2011 06:06 AM

i don't know if this is a good solution or not...however:
i've added a CCNode called onlyScaleLayer and added to the scene with position ccp(center of the screen)
all images are added to this layer.
on the callback scale i scale the onlyScaleLayer, on pan i change the position of the images
any comment are appreciated

RE: pan and scale the view in cocos2d - skyhawk - Feb 28, 2011 11:00 AM

sounds right. though why would you change the position of the image, and not the position of the layer? I guess both work?

RE: pan and scale the view in cocos2d - sefiroths - Mar 1, 2011 01:58 AM

because if i change the position of the layer, when i'll scale after pan, all images will be scaled with the anchorpoint of the layer, that will not be in the center of the screen (because i've moved it woth layer.position)