Scrolling Menus in Cocos2d
Posted: December 30th, 2010 | Author: Giv | Filed under: Cocos2d, Objective-c, Tutorials | 30 Comments »EDIT:
Please note I am no longer managing this code. It has moved here: https://github.com/cocos2d/cocos2d-iphone-extensions/tree/master/Extensions/CCScrollLayer
I must have spent over a week coming up with a good solution for this. The effect I was after was a scrollable menu for my game, similar to Angry Birds where the user can flip between levels but also see a preview of the previous/next page on either end of the screen. I came across Nate Murray’s excellent UIScrollView solution but it wasn’t quite what I was looking for and using UIScrollView seemed like too much of an overhead. I needed something simple, preferably wrapped up in a single class.
After searching various community forums I finally came across DK101′s solution which was exactly what I was looking for. A simple CCLayer subclass that would allow me to create an array of CCLayers then add whatever I wanted to it then add the whole lot to my scene. Simple. You are able to add anything you can add to a CCLayer – so a label, menu, image etc. It will all work nicely.
I ended up making a few modifications to it like updating it to work with Cocos2d 0.99.5 and adding the option to set the width of the screens for the Angry Birds style preview effect. There was also an issue with the touch delegate on subsequent scenes. I have put my changes up on Github. Here’s a sample:
To use it in your project:
1. add both files to your project
2. in your scene import CCScrollLayer.h
3. in your scene’s init method construct each layer and pass it to the CCScrollLayer class:
e.g.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | // get screen size CGSize screenSize = [CCDirector sharedDirector].winSize; ///////////////////////////////////////////////// // PAGE 1 //////////////////////////////////////////////// // create a blank layer for page 1 CCLayer *pageOne = [[CCLayer alloc] init]; // create a label for page 1 CCLabelTTF *label = [CCLabelTTF labelWithString:@"Page 1" fontName:@"Arial Rounded MT Bold" fontSize:44]; label.position = ccp( screenSize.width /2 , screenSize.height/2 ); // add label to page 1 layer [pageOne addChild:label]; ///////////////////////////////////////////////// // PAGE 2 //////////////////////////////////////////////// // create a blank layer for page 2 CCLayer *pageTwo = [[CCLayer alloc] init]; // create a custom font menu for page 2 CCLabelBMFont *tlabel = [CCLabelBMFont labelWithString:@"Page 2" fntFile:@"customfont.fnt"]; CCMenuItemLabel *titem = [CCMenuItemLabel itemWithLabel:tlabel target:self selector:@selector(testCallback:)]; CCMenu *menu = [CCMenu menuWithItems: titem, nil]; menu.position = ccp(screenSize.width/2, screenSize.height/2); // add menu to page 2 [pageTwo addChild:menu]; //////////////////////////////////////////////// // now create the scroller and pass-in the pages (set widthOffset to 0 for fullscreen pages) CCScrollLayer *scroller = [[CCScrollLayer alloc] initWithLayers:[NSMutableArray arrayWithObjects: pageOne,pageTwo,pageThree,nil] widthOffset: 230]; // finally add the scroller to your scene [self addChild:scroller]; |
And a MASSIVE thank you to DK101
30 Comments »