Initial setup for CCLayerPanZoom

Forums Programming cocos2d 3rd party extensions Initial setup for CCLayerPanZoom

This topic contains 4 replies, has 4 voices, and was last updated by  TheAmes 2 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
Author Posts
Author Posts
February 7, 2012 at 12:18 pm #239030



I have been trying to get this working with rubber edges and simply getting odd results. I am doing something wrong, but do not understand what. Please could someone help me.

As I understand it, this would be a reasonable setup:

Create a new scene. In the scene init method set up the scene, this involves:

-> Create a new CCLayerPanZoom object via the node method.

-> Set the mode to sheet mode

-> Create a background sprite.

-> Set the background anchor to (0,0)

-> Set the position to (0,0) (this is the default, so this step can be skipped).

Now this is where I get confused and make mistakes I think.

To get the rubber edges:

-> set the panBoundsRect to (0,0,1,1) or (0,0,w,h) where w,h are the width and height of the background respectively.

I have tried both of these with no successes. The bottom left rubber edge works correctly, but not the upper right. Do I need to set the content size of the CCLayerPanZoom object?

I am sorry if these are basic questions. I have tried to follow the readme and the sample project file that contains many “tests”, but I am getting lost in what are the essential details and what are to make the example with lots of tests work.

Any help is appreciated.


February 23, 2012 at 7:39 pm #364859


I’m also having problems with the same class. I’m trying to scroll a large CCNode which is, say, twice as wide and high as the screen. Does not seem to work at all, but as this ought to be the default thing this class was built to handle I guess I do something very wrong. My code is a bit like this:

self.scrollLayer = [[CCLayerPanZoom alloc] init];

self.scrollLayer.mode = kCCLayerPanZoomModeSheet;

int mapWidth = 2500;

int mapHeight = 1500;

self.scrollLayer.panBoundsRect = CGRectMake( 0, 0, mapWidth, mapHeight );

// zoom levels

self.scrollLayer.minScale = 1.0f;

self.scrollLayer.maxScale = 8.0f;

// no rubber effect

self.scrollLayer.rubberEffectRatio = 0.0f;

// center in the view

self.scrollLayer.position = ccp( 512, 384 );

// the position just seems to make it all more or less weird, this is for testing

map.position = ccp( mapWidth * 0.5f, mapHeight * 0.5f );

[self.scrollLayer addChild:map];

[self addChild:self.scrollLayer];

It works perfectly if my “map” is 1024×768. Then I can zoom in and then pan around nicely. But as soon as the map is bigger than the screen it never works.

February 23, 2012 at 10:03 pm #364860



I eventually got this working for my setting. This is how :-)

I extended this class and so put the setup code in the init method. I am sure this is not necessary, but I wanted to extend the class.s

self.mode = kCCLayerPanZoomModeSheet;

self.rubberEffectRatio = 0.5f;

self.maxScale = 1;

self.minScale = 0.25;

// This must be the size of scrollable area, i.e., the size of the content that you want to scroll.

self.contentSize = CGSizeMake(800, 500);

// This is the pannable window size – i.e., the size of the window that is a ‘view’ on to the scrollable content.

self.panBoundsRect = CGRectMake(0, 0, winSize.width, winSize.height);

I position content within this scrollable layer from (0,0) upwards.

I set the anchor point to (0,0) and the position to (0,0). This makes it fill the screen.

The content size and the panBoundsRect seem very important. Some cocos2d classes have a few methods which must be called in order. I can’t remember off the top of my head what they are, but I do remember that there was one class where setting field A would reset field B, thus you had to set A then B. Setting B then A would result in B being reset. I don’t know if a similar thing is happening with this class, but it took me ages to get this working and now it is.

The only problem I have is that I cannot control the initial zoom level. The zoom is set so that the whole content fits in to the screen (zoomed out quite a bit). This is okay as I want this and it is within the min/max zoom range. I don’t know what happens if it is not, or how to pick a different initial zoom.

Let me know if this helps (but I can’t reply until Monday).


February 23, 2012 at 10:11 pm #364861


For the initial zoom level, once the layer has been created, simply set panZoomLayer.scale = 1.0 (fully zoomed) or to whatever level you need.

March 6, 2012 at 9:57 am #364862


Any idea how to use this with LevelHelper?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.