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)

I found another way to do what i wanted, i used the GL_SCISSOR_TEST in the function called visit which is called when i want to draw my ScrollLayer. Like that :

void CCScrollLayer::visit() {
screenSize = CCDirector::sharedDirector()->getWinSize();
glEnable(GL_SCISSOR_TEST);
cocos2d::CCDirector::sharedDirector()->getOpenGLView()->setScissorInPoints(100,100,831,831);
CCLayer::visit();
glDisable(GL_SCISSOR_TEST);
}

if it can help someone else !

Well now i put some menu item in a menu in the Scrollable layers, but when i begin the scrolling on this items, it doesn't work.. how can i make it to work ?

Best regards!

The above code has many problems, especially for C++. I created a more C++ version, and fixed all the missing variables. I took away paging, but it should be easy to add back in as well.

Here's the header:

and cpp

Sorry but i tried your solution and that doesn't work.. may have i did a mistake, but when i created layers, they all overlap ..

Did someone found a solution for my previous problem ? ->
"Well now i put some menu item in a menu in the Scrollable layers, but when i begin the scrolling on this items, it doesn't work.. how can i make it to work ?"

Thanks

One more problem!

Create the onExit function and comment out this line from the destructor, and move it to that (otherwise the destructor is not called):

void CCScrollLayer::onExit() {
CCTouchDispatcher::sharedDispatcher()->removeDelegate(this);
}

The destructor is not called until it's removed as a delegate (this follows the same way iPhone SDK would do it)... except that destructors aren't a part of iOs native.

Valentin, stop using CCMenuItems and use the CCScrollLayerButton. Menu Items do not work, I learned that the hard way as well.

If you do not do the fix above, the scroll view will continue taking touches.

And remember to set the maximum scroll height after creating the scroll layer:
Here's a snippet:

Also, itemsArray is used like this:

CCArray itemsArray = CCArray::array();

CCScrollLayerButton * b = CCScrollLayerButton::buttonWithFile(imageFile.c_str(), targetScene, menu_selector(LayoutScene::doMenuItemFunction) );
    //Remember to set the position and other things

itemsArray->addObject(b);

CCScrollLayer * scroller = CCScrollLayer::nodeWithLayers(itemsArray, 0);
    scroller->setMaximumScrollHeight(maximumScrollingHeight); //Look at my code, I automatically subtract the height of the screen to make this behave more like iPhone.
    scroller->setPosition(ccp(x,y));

That's an almost fully-working example.

Also, you can add things other than ccScrollLayerButtons, but they're the only things that directly respond to input.

Good luck

Thanks for all the feedback and fixes.
I'll try to integrate all of those fixes into my code and republish it on this post.

Here's a bouncing one, it could use some tweaking to make it easier to get natural, it's based on distances and time helpers. (note, this is just all the touches methods for the ccScrollView)

If you're not using pages, feel free to paste this ver:

@
bool CCScrollLayer::ccTouchBegan(CCTouch *touch, CCEvent *withEvent) {
return true;
}

void CCScrollLayer::ccTouchMoved(CCTouch *touch, CCEvent *withEvent) {
CCPoint touchPoint = touch->locationInView();
CCPoint prevPoint = touch->previousLocationInView();

touchPoint = CCDirector::sharedDirector()->convertToGL(touchPoint);
    prevPoint = CCDirector::sharedDirector()->convertToGL(prevPoint);

CCPoint difference = ccp( touchPoint.x - prevPoint.x , touchPoint.y - prevPoint.y);
    CCPoint currentPos = this->getPosition();

currentPos = ccp( currentPos.x, currentPos.y+difference.y);

if (currentPos.y > maximumScrollHeight) 
{
        currentPos.y -= difference.y/2.0f;// + currentPos.y;
    }
    else if (currentPos.y < 0)
{
        currentPos.y = difference.y/2.0f;
    }
    this>setPosition(currentPos);
}

void CCScrollLayer::ccTouchEnded(CCTouch * touch, CCEvent * withEvent) {
if (this->getPositionY() < 0) {
this->bounceToPosition(ccp(this->getPositionX(), 0));
}
else if (this->getPositionY() > maximumScrollHeight) {
this->bounceToPosition(ccp(this->getPositionX(), maximumScrollHeight));
}
else {
CCPoint touchPoint = touch->locationInView();
CCPoint prevPoint = touch->previousLocationInView();

touchPoint = CCDirector::sharedDirector()->convertToGL(touchPoint);
        prevPoint = CCDirector::sharedDirector()->convertToGL(prevPoint);

CCPoint difference = ccp( touchPoint.x - prevPoint.x , touchPoint.y - prevPoint.y);
        CCPoint currentPos = this->getPosition();
        float multiplier = 7;
        float ease = 2;

float moveToY = multiplier*difference.y+currentPos.y;
        if (moveToY < 0) {
            moveToY = 0;
        }
        else if (moveToY > maximumScrollHeight) {
            moveToY = maximumScrollHeight;
        }
        //float timeMultiplier=1;
        float halfScreenHeight = CCDirector::sharedDirector()->getWinSize().height/2.0f;
        float timeMultiplier = fabsf(difference.y)/halfScreenHeight*7;

CCAction * move = CCMoveTo::actionWithDuration(0.25*timeMultiplier, ccp(currentPos.x, moveToY) );
        CCEaseOut * easeOut = CCEaseOut::actionWithAction((CCActionInterval*)move, ease);
        this->runAction(easeOut);

}
}

void CCScrollLayer::ccTouchCancelled(CCTouch* pTouch, CCEvent* pEvent) {
this->ccTouchEnded(pTouch, pEvent);
}

void CCScrollLayer::onExit() {
CCTouchDispatcher::sharedDispatcher()->removeDelegate(this);
}

void CCScrollLayer::bounceToPosition(CCPoint toPos) {
float dY =maximumScrollHeight- this->getPositionY();

if (toPos.y <= 0) {
        dY = this>getPositionY();
    }
    dY /= 3.0f;

float timeMultiplier = 3.4f;
    float halfScreenHeight = CCDirector::sharedDirector()->getWinSize().height/2.0f;
    timeMultiplier = fabsf(dY)/halfScreenHeight*timeMultiplier;
    float time1 = 0.09 * timeMultiplier;
    float firstEase = 3;
    float time2 = 0.13  * timeMultiplier;
    float time3 = 0.11  * timeMultiplier;
    float lastEase = 1;

CCAction * move = CCMoveTo::actionWithDuration(time1, ccp(this->getPositionX(), toPos.y));
    CCEaseOut * easeOut = CCEaseOut::actionWithAction((CCActionInterval*)move, firstEase);
  //  CCJumpTo * jump = CCJumpTo::actionWithDuration(0.1, ccp(toPos.x , toPos.y), dY, 1);
    move = CCMoveTo::actionWithDuration(time2, ccp(toPos.x, toPos.y + dY) );
    CCAction * move2 =  CCMoveTo::actionWithDuration(time3, toPos);
    CCEaseOut * lastEaseAction = CCEaseOut::actionWithAction((CCActionInterval*)move2, lastEase);

CCAction * lastMove;
    lastMove = CCSequence::actions((CCFiniteTimeAction*)easeOut, (CCFiniteTimeAction*)move, (CCFiniteTimeAction*)lastEaseAction, NULL);

this->runAction(lastMove);
}

@

I'm sorry but I tried replacing the "menu item" by the CCScrollLayerButton by adding many scrollLayerButton in a single layer, and I have a lot of problem and I do not see how ...

I want to do a function that loads all ScrollButton I need and loads it into a CCScrollLayer but I can not do it .. Can you help me please .. it's urgent ..

Thanks

Valentin, I'm guessing you're still adding them to a CCMenu? The weird part about the scroll layer is, you do not add a ccMneu, only use the buttons.

So normally you would do this (to something else)
CCMenuItem * i = ....
CCMenu * menu = ...MenuWithItem(i);
this->addChild(menu);

BUT in the scrollLayer you just do this:

CCScrollLayerButton * sButton = ...
CCArray * a = CCArray::arrayWithItem(sButton)
CCScrollLayer * l = ...withLayers(a, 0 );

Aside from adding the "real code", that's all you need. If your input isn't working, something else is wrong. If you know Cocos2d, then it should be easy. Try learning Cocos2D and it'll give you examples of how to properly add/remove these things.

Also, iOS memory management rules apply too, seriously learn those and basic Cocos2D and this should be easy to do. I don't see why you're using the scissorTest right now.

Make sure your memory is being handled right. And ensure everything is in the correct spot ccp(0,0) is the lower-left.

Hi, i come back a little late.. but I don't have the function "CCArray *a = CCArray::arrayWithItem(sButton) ... so how can i do that ?
I got arrayWithArray, arrayWithCapacity, initWithArray or initWithCapacity but not arrayWithItem :/ ... please help me !!

Thanks

PS: I'm trainee and i'm on a Cocos2D-X project which use the "scissorTest" so i have to learn many Cocos class very quickly .. that's why i need help ^^!

Great classes, thanks !
Is there a way to use sprite frame's images as CCScrollLayerButtons ? I tried to write a initWithSpriteFrameName function in CCScrollLayerButton but some weird things happens with the selector.

Well now i put some menu item in a menu in the Scrollable layers, but when i begin the scrolling on this items, it doesn't work.. how can i make it to work ?

i have a solution. when touchmove, you send to CCDirector view a event "touchesEnded". In my case, it's true.

sorry for my english.

contact with me if you need ([email protected])

Hello!!!

I have a problem using these classes, I hope someone can help me, I spent two days with the issue and I have been not able to get it working.

Let me explain the case, I am using these classes to show a list of users with a vertical scroll, it appears in the screen and it can be moved up and down, but the problem is that the visible space is a very small region in the screen and the list of users is showed from the last element so I need to scroll down the list to see the first element...

Does anyone have a example with a vertical scroll? I found some examples using this class but every of them is with a horizontal scroll...

Thanks in advance!!

Hi, Emilio, here examples of our vertical scroll.

WOW!!!

Thanks for your quickly answer!!!

Sure it will help me.

Hi,

I am using cocos2d-x with html5. I have lot of text added to a layer. I want that text to be within layer boundaries and layer should have scrolling option to view other text.I want to use CCScrollLayer class. How can I add this CCScrollLayer.h file in my application? or I can say how can i load this .h file through cocos2d.js file? Please let me know the solution.

Regards,
Aparajita

Hi,

I am using cocos2dx-html5 for my project. I want scrolling option for my layer. Can any of you please suggest me the solution. The above solution will not work for me. becoz of header file i cannot include in my project, As I am developing on only js files. please let me know the solution as fast as posible.

Thanks in advance. Waiting for solution.

hi there.
nice work you did there - but what's up with the copyright in your headers?
Kind regards

Updated this scroll layer for Cocos2d-x V2.x - cleaned up some stuff too. Enjoy!

Hello

I'm trying to use the CCScrollView, but I don't understand the way I need to set the content size and the position.
Can you please point me to an example of CCScrollView ?

Thanks!
Adrian

Adi Fly wrote:

Hello

I'm trying to use the CCScrollView, but I don't understand the way I need to set the content size and the position.
Can you please point me to an example of CCScrollView ?

Thanks!
Adrian

var container = new cc.Layer.create();
var logo = new cc.Sprite.create("image file to test");
logo.setPosition(new cc.Point(winSize.width/2, winSize.height/2));
container.addChild(logo);

var scrollView = new cc.ScrollView.create(new cc.Size(800, 480), container);
scrollView.setContentSize(new cc.Size(800, 480));
scrollView.setPosition(0, 0);
scrollView.setContentOffset(new cc.Point(0,0));
scrollView.setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL);
this.addChild(scrollView);

Try to increase/decrease parameters (x coordinate) in cc.ScrollView.create(new cc.Size(800, 480), container) and/or scrollView.setContentSize(new cc.Size(800, 480)) and you will see how it easily works.