Hi everyone, I was looking for an UIScrollView like solution for cocos2d-x and all I could find is this great class named CCScrollView created by GParvaneh:
http://www.givp.org/blog/2010/12/30/scrolling-menus-in-cocos2d
So I took its code and ported it into c++ and works great now. (tested on airplay-sdk platform)
I've attached the new class.
I would be happy if this class will be part of the official cocos2d & cocos2d-x.

Enjoy.
Leo

update 27-6-2011: update files & add CCScrollLayerButton class (explained later in this post)

Awesome. I will run it at Wednesday, after my short holiday finishes.

@walzer
this implementation is something like page indicator, not uitableview.

WenSheng play with this source in this afternoon, and show me the effect.
I would like to add a "extra" folder parallels to cocos2dx, or a new repository on github, to place these funny & helpful classes.
Riq is facing the same question now, waiting for his resolution.

Hi，leo, we have created the "cocos2d-x-extensions" repository here http://github.com/cocos2d/cocos2d-x-extensions/
Can you add a test code to show how to use your class, and commit to the extension repository?

the usage is very simple:

@
CCMutableArray<CCLayer*> layers;
layers.addObject(layer1);
layers.addObject(layer2);
layers.addObject(layer3);
layers.addObject(layer4);

CCScrollLayer* pScrollLayer = CCScrollLayer::layerWithLayers(&layers, 0);
pScrollLayer->setPosition(ccp(0,0));
addChild(pScrollLayer,0);
@

I don't know how to use git I'll be happy if you can apply it for me.

it seemed no one has tested on android at all, even failed to compile. there is no CGPoint but CCPoint.

cocos2d::CGPoint is used in a very very old version

An updated version is attached. (using CCPoint)
I've also added class called "CCScrollLayerButton" - this class is used to create buttons that can be put inside scrollable layer and allow dragging the layer without pressing the button. the actual result is when tapping the button it activates the selector method and when dragging the button it dragged with the scrollable layer.

an example of usage:

@
CCMutableArray<CCLayer*> layers;
layers.addObject(layer1);
layers.addObject(layer2);
layers.addObject(layer3);
layers.addObject(layer4);

CCScrollLayer* pScrollLayer = CCScrollLayer::layerWithLayers(&layers, 0);
pScrollLayer->setPosition(ccp(0,0));
addChild(pScrollLayer,0);

// add scrollable buttons to layer 1
CCScrollLayerButton* level1Button = CCScrollLayerButton::buttonWithFile("menus/Level1Button.png",
this,
menu_selector(LevelSelection::play1));
CCScrollLayerButton* level2Button = CCScrollLayerButton::buttonWithFile("menus/Level2Button.png",
this,
menu_selector(LevelSelection::play2));
layer1->addChild(level1Button);
layer1->addChild(level2Button);
@

CCScrollButton is so awesome! very Thank you to you.

But, I find a simple bug but very critical error.
if you have none target and selector, program have a error.

so I try to fix some source like that as* ccTouchEnded ( CCTouch* pTouch, CCEvent* pEvent )*

if ( target != null && selector != null ) {
( target->*selector ) ( this );
}

but I am not sure.
is it correct?

Your fix is correct, but why would you want a Button without a selector? You can simply use CCSprite.

Sometimes I make a source without selector.

such as

CCScrollLayerButton* level2Button = CCScrollLayerButton::buttonWithFile("sprite.png", null, null );

I got a reason why I remove a menu_selector. Because I don't know what I do for button event.

I work for some great programmer, so I hope they should fill in button event.

And I just start to program for 2 month with c++.

I test some code using your source.

I put it MenuItemSprite instead of CCSprite.

Hm may be it is not complete code. However, I am sure if you want to change some function, it will be helpful.

button change a image with selected Sprite. oh ye!

> class CCScrollLayerButton  : public CCMenuItemSprite, CCTargetedTouchDelegate
> {
> ......
> }

> CCScrollLayerButton::initWithFile ( CCNode* normal, CCNode* selected, CCNode* disabled, SelectorProtocol* target, SEL_MenuHandler selector )
> {
> KDbool init = CCMenuItemSprite::initFromNormalSprite ( normal, selected, disabled, target, selector );
> 
> if ( !init )
> {
> return false;
> }
> ..... 
> 
> }

I got a normal sprite ( or ccprogress .. etc ) rect. Sometimes, CCProgress has a size parameter with 9.patch png.
I just get a basic size with nomal sprite.

> CCRect CCScrollLayerButton::rect ( KDvoid )
> {
> CCSize s = this->getNormalImage ( ) ->getContentSize ( );   
> return CCRectMake ( -s.cx / 2, -s.cy / 2, s.cx, s.cy );
> }

> CCScrollLayerButton* CCScrollLayerButton::buttonWithFile ( CCNode* normal, CCNode* selected, CCNode* disabled, SelectorProtocol* target, SEL_MenuHandler selector )
> {
> CCScrollLayerButton *pRet = new CCScrollLayerButton ( );
> 
> if ( pRet && pRet->initWithFile ( normal, selected, disabled, target, selector ) )
> {
> pRet->autorelease ( );
> return pRet;
> }
> 
> CC_SAFE_DELETE ( pRet )
> 
> return KD_NULL;
> }

What's the license on this?

Whatever you choose...

How to decrease the scroll width and height.

Scroll height and width.

it's good... well done.

i want reduce the layer size how can i do this.plz help me

Hi everybody, i hope you'll can help me.
I work since 2 weeks with cocos2d, and I want to make a scrolling menu. I just saw this class, CCScrollLayer, and I want to know how can I use it to make my menu. (And what is the SCrollLayerButton ?) How can i use it ?

Thank you in advance.

Simply add the created CCScrollableButton to your scrollable layer and it will work.
If the user tap the button it will run the callback function, if the user will drag the button, the whole layer will be scrolled.

Okay thanks a lot! I use the scroll layer class and it's work very well ;)!
I will try to include the button !

You welcome! You may try my game as a thanks!
http://www.roymam.com/rollypoly

well, i would like to make a scrollable area, and when i scroll that area, all that is out of this area is not visible, how can I do that ?

best regards

The only way to do this with the current implementation is to add a top layer above the scrollable layer that hides everything beside that area, maybe using a png with a transparent box within it.

I used this solution in my project ! I changed some strings =) very usefull, thanks !