Scrolling the Tile Map in Cocos2D

Question

I have a problem that I just cannot understand; probably because I do not have the right knowledge.

I have a TMX card made in Tiled. The map is larger than the screen size (32x32pixels and 100x100 tiles). I want you to be able to move the map by scrolling the screen.

I looked at various tutorials online and looked at paddle.m example, but still can't get it to work. All the tutorials I came across are focused on moving the focused sprite around the map ... Again, I want you to be able to move the map by scrolling / moving the screen; same as scrolling your iPod or moving the image around.

Can anyone help?

Here is my ccTouchMoved code

-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint touchPointMap = [touch locationInView: [touch view]]; touchPointMap = [[CCDirector sharedDirector] convertToGL: touchPointMap]; touchPointMap = [self convertToNodeSpace: touchPointMap]; CCLOG(@"Touch Point Map %lf, %lf", touchPointMap.x, touchPointMap.y); self.position = CGPointMake(touchPointMap.x, touchPointMap.y); } 

To illustrate the problem that I see on the screen when I scroll the screen using the code above: It seems that if I touch the center of the screen, the lower left corner of the map will move to this touching coordinate and will move with my touch until my touch raised. The bottom left corner of the map will always move to where I start the touch. In addition, when the card moves, it flashes like crazy and, if moved excessively, completely disappears.

Thanks again, really appreciate. Best and best wishes, Hiro

Answer 1

I found a solution to the problem. There is a very bright person in the Cocos2D community who wrote a controller to not only pan organically, but also to zoom in and out.

Link to the controller, example and watching a movie

You do not need to write your own touchBegan, Moved, and End methods; This controller does everything for you.

My init

 self.theMap = [CCTMXTiledMap tiledMapWithTMXFile: @"city_map.tmx"]; self.bgLayer = [theMap layerNamed:@"bg"]; // boundingRect is the area you wish to pan around CGRect boundingRect = CGRectMake(0, 0, 32*50, 16*50); theMap.anchorPoint = ccp(0,0); [self addChild: theMap z: -1]; // _controller is declared in the @interface as an object of CCPanZoomController _controller = [[CCPanZoomController controllerWithNode:self] retain]; _controller.boundingRect = boundingRect; _controller.zoomOutLimit = _controller.optimalZoomOutLimit; _controller.zoomInLimit = 2.0f; [_controller enableWithTouchPriority:0 swallowsTouches:YES];