Adding a pause menu in cocos2d

We will be creating a pause menu. This tutorial was a request by Joethemonkey101.

So we are going to begin with a project I already created. Download this prebuilt project that has a sprite that continually moves.

Now for the pause menu, add the following to HelloWorldScene.h.

CCSprite *_movingSpring;
bool _pauseScreenUp;
CCLayer *pauseLayer;
CCSprite *_pauseScreen;
CCMenu *_pauseScreenMenu;

Then add the following to the init meathod in HelloWorldScene.m

CCMenuItem *pauseMenuItem = [CCMenuItemImage
    itemFromNormalImage:@"pausebutton.gif" selectedImage:@"pausebutton.gif"
    target:self selector:@selector(PauseButtonTapped:)];
pauseMenuItem.position = ccp(440, 285);
CCMenu *upgradeMenu = [CCMenu menuWithItems:pauseMenuItem, nil];
upgradeMenu.position = CGPointZero;
[self addChild:upgradeMenu z:2];

Then we added a menu, the itemFromNormalImage: from menu item is the image that will be displayed normally. The selectedImage: is the image that will be displayed when you click on the menu item. Target is what you are going to send to the selector. Selector is the function/method you want to call when you click the menu item. Then we are going to set the position of the menu item to the top corner. Then we add the menu item to the menu, set the menu position and add it to the program.

Now add these methods to you program.

if(_pauseScreenUp ==FALSE)
//if you have music uncomment the line bellow
//[[SimpleAudioEngine sharedEngine] pauseBackgroundMusic];
  [[CCDirector sharedDirector] pause];

  CGSize s = [[CCDirector sharedDirector] winSize];
  pauseLayer = [CCColorLayer layerWithColor: ccc4(150, 150, 150, 125) width: s.width height: s.height];
  pauseLayer.position = CGPointZero;
  [self addChild: pauseLayer z:8];

  _pauseScreen =[[CCSprite spriteWithFile:@"pauseBackground.gif"] retain];
  _pauseScreen.position= ccp(250,150);
  [self addChild:_pauseScreen z:8];

  CCMenuItem *ResumeMenuItem = [CCMenuItemImage
      itemFromNormalImage:@"continuebutton.gif" selectedImage:@"continuebutton.gif"
      target:self selector:@selector(ResumeButtonTapped:)];
  ResumeMenuItem.position = ccp(250, 190);

  CCMenuItem *QuitMenuItem = [CCMenuItemImage
      itemFromNormalImage:@"Exitbutton.gif" selectedImage:@"Exitbutton.gif"
      target:self selector:@selector(QuitButtonTapped:)];
  QuitMenuItem.position = ccp(250, 100);

  _pauseScreenMenu = [CCMenu menuWithItems:ResumeMenuItem,QuitMenuItem, nil];
  _pauseScreenMenu.position = ccp(0,0);
  [self addChild:_pauseScreenMenu z:10];

[self removeChild:_pauseScreen cleanup:YES];
[self removeChild:_pauseScreenMenu cleanup:YES];
[self removeChild:pauseLayer cleanup:YES];
[[CCDirector sharedDirector] resume];

[self removeChild:_pauseScreen cleanup:YES];
[self removeChild:_pauseScreenMenu cleanup:YES];
[self removeChild:pauseLayer cleanup:YES];
[[CCDirector sharedDirector] resume];
[[UIApplication sharedApplication] terminateWithSuccess];

Ok we have the bool value _pauseScreenUp, if _pauseScreenUp is true then don’t let the user click the pause button. Note you should do this for ever click event that does something.

pauseLayer = [CCColorLayer layerWithColor: ccc4(150, 150, 150, 125) width: s.width height: s.height];

This code creates a layer that is gray and is partly see thru ccc4(red, green, blue, how see thru it is). Then a menu is displayed. A resume/continue button is added; that will remove the layers and menus we created when we clicked the pause button, and resume the animations. If you click the exit button it does the same thing as the resume button but also calls [[UIApplication sharedApplication] terminateWithSuccess]; that ends your program in a smoothly.

Download the code for adding a pause menu in cocos2d.

Copy right Britney Lee Johnson August 2010.

This entry was posted in cocos2d. Bookmark the permalink.

9 Responses to Adding a pause menu in cocos2d

  1. Joethemonkey101 says:

    Thanks so much for posting this tutorial! You really helped me out with your post on the forums about the splash screen and this post about the pause menu! I don’t have any errors, now, but I do have some warnings. I’m using your tutorial and also another tutorial I found about this.

  2. admin says:

    What are the warnings?

  3. Zack says:

    Hi everyone,

    Want a fix for the warning?

    Replace [[UIApplication sharedApplication] terminateWithSuccess];


    [[UIApplication sharedApplication] performSelector:@selector(terminateWithSuccess)];

    Credit goes to kingbombs on

    Thanks for this tutorial admin, strongly appreciated,

  4. Thomas says:

    With this pause button I want to also be able to go to the next level or load a different scene, Im not near my mac at the moment so I cant link the code im using.
    Can you show an example of how you would restart the level or link to the next level from the pause menu?

    • admin says:

      Warning: Missing argument 1 for GeSHi::GeSHi(), called in /home/content/97/6545297/html/wp-content/plugins/codecolorer/codecolorer-core.php on line 155 and defined in /home/content/97/6545297/html/wp-content/plugins/source-code-syntax-highlighting-plugin-for-wordpress/geshi.php on line 432

      Warning: Missing argument 2 for GeSHi::GeSHi(), called in /home/content/97/6545297/html/wp-content/plugins/codecolorer/codecolorer-core.php on line 155 and defined in /home/content/97/6545297/html/wp-content/plugins/source-code-syntax-highlighting-plugin-for-wordpress/geshi.php on line 432

      If my code for restarting a level is like this

      - (void)nextLevel {
          HelloWorldScene *ms=[HelloWorldScene node];
          [[CCDirector sharedDirector] replaceScene:ms];

      and then call it like this

      -(void)restart: (id)sender {
          YourAppDelegate *delegate = [[UIApplication sharedApplication] delegate];
          [delegate nextLevel];

      It all depends on how you change your levels.

  5. phynet says:

    Thank you very much for this tutorial, it helped me a lot with my pause button. :D

  6. jason says:

    Hi I have sort of use your example here but I’ve put the menu in it’s own class , which is a sub-class of CCLayer as I want to use it on all game scenes (levels) but I am having a problem with positioning it in the top conner as my game has a scrolling parallax background . do you know of a way to position it in the top conner so when the scene scrolls it still in the top conner Im am using chipmink and space-manager and my scenes are 1440 x 384 so i can zoom in a bit and scroll left and right one screen width the way im doing it now is to alloc and init the layer then on scroll remove it then alloc and init it agin in the new position but there must be a lot better way to achieve the same result

  7. Brendan says:

    Ahaa, its good conversation on the topic of this paragraph here at this webpage,
    I have read all that, so at this time me also commenting at this place.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>