Menus

Menus are extremely useful when creating games. They provide a means for displaying buttons and information to help navigate and control the app.

Menus consist of menu items. All of these menu items will be covered first then the process of constructing a menu using menu items will be covered.

Menus and menu items like most things in Cocos are nodes and therefore have all the node functions available to use.

Menu Atlas Font Item - a font item that uses an atlas label

Example format:

MenuItemAtlasFont( textToDisplay, filepathToAtlasImage, height, width, startCharacterMap, functionToCallWhenClicked );

MenuItemAtlasFont *menuItem = MenuItemAtlasFont::create( "TextToDisplay", "AtlasImageFilePath", 25, 25, 'f', CC_CALLBACK_1( ClassName::functionToCall, this ) );

var menuItem = new cc.MenuItemAtlasFont( "TextToDisplay", "AtlasImageFilePath", 25, 25, functionToCall );

Note: *Glypth Designer can be used to create atlas fonts https://71squared.com/en/glyphdesigner

• Note: In C++ thethis keyword should only be used if the function is within that scene if not then specify scene

Menu Font Item - a font item that simply displays text

Example format:

MenuItemFont( textToDisplay, functionToCallWhenClicked );

MenuItemFont *menuItem = MenuItemFont::create( "TextToDisplay", CC_CALLBACK_1( ClassName::functionToCall, this ) );

var menuItem = new cc.MenuItemFont( "TextToDisplay", functionToCall );

Menu Image Item - a menu item takes images

Example format:

MenuItemImage( normalImageFilepath, selectedImageFilepath, disabledImageFilepath, functionToCallWhenClicked );

Note: The disabled image is optional
Note: For the best results make the images all the same size

MenuItemImage *menuItem = MenuItemImage::create( "normalImageFilePath", "selectedImageFilePath", "disabledImageFilePath", CC_CALLBACK_1( ClassName::functionToCall, this ) );

var menuItem = new cc.MenuItemImage( "normalImageFilePath", "selectedImageFilePath", "disabledImageFilePath", functionToCall );

Menu Label Item - a menu item that is constructed using a label object which will is covered in a separate section

Example format:

MenuItemLabel( labelObject, functionToCallWhenClicked );

MenuItemLabel *menuItem = MenuItemLabel::create( label, CC_CALLBACK_1( ClassName::functionToCall, this ) );

var menuItem = new cc.MenuItemLabel( label, functionToCall );

Menu Sprite Item - a menu item takes sprites instead of images

Example format:

MenuItemSprite( normalSprite, selectedSprite, disabledSprite, functionToCallWhenClicked );

Note: The disabled sprite is optional
Note: For the best results make the sprites all the same size

MenuItemSprite *menuItem = MenuItemSprite::create( normalSprite, selectedSprite, disabledSprite, CC_CALLBACK_1( ClassName::functionToCall, this ) );

var menuItem = new cc.MenuItemSprite( normalSprite, selectedSprite, disabledSprite, functionToCall );

Menu Creation - menus are used to contain menu items

Menu( menuItem1, menuItem2, menuItem3, etc );

// create by specifying each menu item
Menu *menu = Menu::create( menuItem1, menuItem2, menuItem3, NULL );

// create by specifying each menu item
var menu = new cc.Menu( menuItem1, menuItem2, menuItem3 );

Note: In C++ NULL is required as the last parameter but you don't need to worry about this

Extra Menu Item Functions - these are the extra functions that each menu item provides on top of the default node functions

/***** MenuItemFont *****/
menuItem->setFontName( "pathOfNewFontFile" );
menuItem->setFontSize( 5 );

/***** MenuItemFont *****/
menuItem.setFontName( "pathOfNewFontFile" );
menuItem.setFontSize( 5 );

The functions that the menu items call when clicked should be implemented like this:

void functionToCall( Ref *sender );

void ClassName::functionToCall( cocos2d::Ref *sender )
{
  // code to execute when the menu item is clicked
}

var functionToCall = function( )
{
  // code to execute when the menu item is clicked
}