Scrollable CCLayer?

cocos2d-x C++
#1

Does anyone have an example of a scrollable CCLayer that I can scroll around with my touch gesture?

Example, make a 4000 x 4000 layer but only show 1024 x 768 of it and let the user scroll over the rest

Games like Hay Day do this. Allows you to build a big “world”/ map and move around it.

#2

When you detect drag (for example the finger has moved more than 50px from start position) you can simply change the position of your bigger layer accordingly.

#3

So do I need to have a CCScrollLayer? I do still, correct?

Right now I just have one big CCLayer sized and since my screen is 1024x768 that is all of the layer that I can see and I cannot move it yet.

#4

If you want to use CCScrollView you have to add the big CCLayer to the CCScrollView

CCSize size = CCDirector::sharedDirector()>getWinSize;
CCScrollView *sv = CCScrollView::create;
sv>ignoreAnchorPointForPosition(true);
sv~~>setBounceable;
sv~~>setDirection(kCCScrollViewDirectionBoth);
sv~~>setContentSize);
sv~~>setViewSize(size);
sv->setContainer(pNode);
addChild(sv);

Hope this helps…

#5

So where does one get CCScrollView for Cocos2d-x 2.1.4?

I found: https://github.com/cocos2d/cocos2d-x/tree/develop/extensions/GUI/CCScrollView

but this looks to have been updated to Cocos2D 3 alpha and even after I try and correct it it still doesn’t compile

#6

if I re-put in the “CC” prefix and correct the use of getInstance() I still get a few errors:

undeclared identifier:

 _grid

in many places

getMidPoint()

isn’t valid here:

_touchPoint = (this->convertTouchToNodeSpace((CCTouch*)_touches->objectAtIndex(0)).getMidpoint(
                        this->convertTouchToNodeSpace((CCTouch*)_touches->objectAtIndex(1)))); 

 Reference to not-static member function must be called

here:

 expire = CCCallFuncN::create(CC_CALLBACK_1(CCScrollView::stoppedAnimatedScroll,this));
#7

I haven’t upgraded to 2.1.4 yet… still using 2.1.3 so im’ not sure what the changes are.

#8

@Jason : No, I though about something different. A little example :

bool init() {

    myBigLayer = CCLayer::create();
    myBigLayer->setPosition(ccp(512, 384));
    addChild(myBigLayer);

    // add items to myBigLayer;

}

bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent) {

    CCPoint touchStart = pTouch->getLocation();
    diffVector = myBigLayer->getPosition() - touchStart;

    return true;

}

void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent) {

    myBigLayer->setPosition( pTouch->getLocation() - diffVector );

}

myBigLayer is a class memeber which will hold other items and be dragged around.
diffVector is used, so that myBigLayer won’t “jump” to the finger when user drags it, allowing to drag it whole.

This should do the trick, mostly. You should of course add some size safeguards etc.

Hope it helps.

#9

@Pawel,

I think this could work for me with some adjustments. Thank you so much for showing me your idea!

I owe you a favor.

Jason

#10

No problem, glad I could help :slight_smile:

#11

So I have a

_mainLayer

that is is always the same size as the screen size is that the user is using. Lets take an iPad Mini in Landscape and say 1024 x 768.

I now have a 2nd layer,

_fieldLayer

that is 4 times the size of the screen, so 4096 x 3072.

_fieldLayer

is added to

_mainLayer

What I want to do is figure out which quadrant of

_fieldLayer

is currently showing on the screen. That way I can make a gesture to show more, aka moving the

_fieldLayer

any thoughts on how I can make a decision on which quadrant is currently on the screen? i.e breaking the 4096 x 3071 into 4 and deciding which one is currently on the screen.

consequently, I suppose I could also make 4

_fieldLayers

each the screen size (1024 x 768 as example) and on a swipe just replace layers……

#12

If you want to show them as quadrants, and not allow the user to smoothly slide between them, then I think replacing layers is most straightforward.
The other approach, with one big _fieldLayer woulkd be to check its position and from that you should be able to know which part of bigger image is currently on the screen.