{"_id":"547b1cea4366a708001b3b5b","__v":35,"category":{"_id":"5463e333447e0a100024a08b","project":"5463e333447e0a100024a087","pages":["5463e334447e0a100024a08d","54646a285871e90800f50174","54667e7af2b6390800dfd82a","54679c8c98b6840800268982","54679d8498b6840800268987","546a2ed0394c861a00c3a413","546b6a4862515a14007ebbba","547b1c2e7eec0f080099e1dd","55d33d90b9ef4435006dec70","56570c764d1c720d001f51bb"],"version":"5463e333447e0a100024a08a","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-11-12T22:46:11.951Z","from_sync":false,"order":1,"slug":"documentation","title":"Documentation"},"project":"5463e333447e0a100024a087","user":"54639d06447e0a1000249f7f","version":{"_id":"5463e333447e0a100024a08a","project":"5463e333447e0a100024a087","__v":6,"createdAt":"2014-11-12T22:46:11.486Z","releaseDate":"2014-11-12T22:46:11.486Z","categories":["5463e333447e0a100024a08b","54645c365871e90800f50151","547b1c5a4366a708001b3b50","547b1cdf4366a708001b3b5a","54e3bef8464a9c3700f7ca67","54ec651d7ab3172d00c01ab7"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-11-30T13:34:34.555Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"try":true,"basic_auth":false,"auth":"never","params":[],"url":""},"isReference":false,"order":9,"body":"Menus are extremely useful when creating games. They provide a means for displaying buttons and information to help navigate and control the app.\n\nMenus 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.\n\nMenus and menu items like most things in Cocos are nodes and therefore have all the node functions available to use.\n\n##**Menu Atlas Font Item** - a font item that uses an atlas label\n\n*Example format:*\n\n*MenuItemAtlasFont( textToDisplay, filepathToAtlasImage, height, width, startCharacterMap, functionToCallWhenClicked );* \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"MenuItemAtlasFont *menuItem = MenuItemAtlasFont::create( \\\"TextToDisplay\\\", \\\"AtlasImageFilePath\\\", 25, 25, 'f', CC_CALLBACK_1( ClassName::functionToCall, this ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var menuItem = new cc.MenuItemAtlasFont( \\\"TextToDisplay\\\", \\\"AtlasImageFilePath\\\", 25, 25, functionToCall );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Glypth Designer can be used to create atlas fonts **[https://71squared.com/en/glyphdesigner](https://71squared.com/en/glyphdesigner)**\n*\nNote: *In C++ the **this** keyword should only be used if the function is within that scene if not then specify scene*\n\n##**Menu Font Item** - a font item that simply displays text\n\n*Example format:*\n\n*MenuItemFont( textToDisplay, functionToCallWhenClicked );* \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"MenuItemFont *menuItem = MenuItemFont::create( \\\"TextToDisplay\\\", CC_CALLBACK_1( ClassName::functionToCall, this ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var menuItem = new cc.MenuItemFont( \\\"TextToDisplay\\\", functionToCall );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Menu Image Item** - a menu item takes images\n\n*Example format:*\n\n*MenuItemImage( normalImageFilepath, selectedImageFilepath, disabledImageFilepath, functionToCallWhenClicked );*\n\nNote: *The disabled image is optional*\nNote: *For the best results make the images all the same size*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"MenuItemImage *menuItem = MenuItemImage::create( \\\"normalImageFilePath\\\", \\\"selectedImageFilePath\\\", \\\"disabledImageFilePath\\\", CC_CALLBACK_1( ClassName::functionToCall, this ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var menuItem = new cc.MenuItemImage( \\\"normalImageFilePath\\\", \\\"selectedImageFilePath\\\", \\\"disabledImageFilePath\\\", functionToCall );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Menu Label Item** - a menu item that is constructed using a label object which will is covered in a separate section\n\n*Example format:*\n\n*MenuItemLabel( labelObject, functionToCallWhenClicked );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"MenuItemLabel *menuItem = MenuItemLabel::create( label, CC_CALLBACK_1( ClassName::functionToCall, this ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var menuItem = new cc.MenuItemLabel( label, functionToCall );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Menu Sprite Item** - a menu item takes sprites instead of images\n\n*Example format:*\n\n*MenuItemSprite( normalSprite, selectedSprite, disabledSprite, functionToCallWhenClicked );*\n\nNote: *The disabled sprite is optional*\nNote: *For the best results make the sprites all the same size*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"MenuItemSprite *menuItem = MenuItemSprite::create( normalSprite, selectedSprite, disabledSprite, CC_CALLBACK_1( ClassName::functionToCall, this ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var menuItem = new cc.MenuItemSprite( normalSprite, selectedSprite, disabledSprite, functionToCall );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Menu Creation** - menus are used to contain menu items\n\nMenu( menuItem1, menuItem2, menuItem3, etc );\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// create by specifying each menu item\\nMenu *menu = Menu::create( menuItem1, menuItem2, menuItem3, NULL );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// create by specifying each menu item\\nvar menu = new cc.Menu( menuItem1, menuItem2, menuItem3 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *In C++ NULL is required as the last parameter but you don't need to worry about this*\n\n##**Extra Menu Item Functions** - these are the extra functions that each menu item provides on top of the default node functions\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"/***** MenuItemFont *****/\\nmenuItem->setFontName( \\\"pathOfNewFontFile\\\" );\\nmenuItem->setFontSize( 5 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"/***** MenuItemFont *****/\\nmenuItem.setFontName( \\\"pathOfNewFontFile\\\" );\\nmenuItem.setFontSize( 5 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nThe functions that the menu items call when clicked should be implemented like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void functionToCall( Ref *sender );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"void ClassName::functionToCall( cocos2d::Ref *sender )\\n{\\n  // code to execute when the menu item is clicked\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"var functionToCall = function( )\\n{\\n  // code to execute when the menu item is clicked\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]","excerpt":"This page will cover all the different menu items and how they can be used to construct menus.","slug":"menus","type":"basic","title":"Menus"}

Menus

This page will cover all the different menu items and how they can be used to construct 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 );* [block:code] { "codes": [ { "code": "MenuItemAtlasFont *menuItem = MenuItemAtlasFont::create( \"TextToDisplay\", \"AtlasImageFilePath\", 25, 25, 'f', CC_CALLBACK_1( ClassName::functionToCall, this ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var menuItem = new cc.MenuItemAtlasFont( \"TextToDisplay\", \"AtlasImageFilePath\", 25, 25, functionToCall );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Glypth Designer can be used to create atlas fonts **[https://71squared.com/en/glyphdesigner](https://71squared.com/en/glyphdesigner)** * Note: *In C++ the **this** 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 );* [block:code] { "codes": [ { "code": "MenuItemFont *menuItem = MenuItemFont::create( \"TextToDisplay\", CC_CALLBACK_1( ClassName::functionToCall, this ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var menuItem = new cc.MenuItemFont( \"TextToDisplay\", functionToCall );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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* [block:code] { "codes": [ { "code": "MenuItemImage *menuItem = MenuItemImage::create( \"normalImageFilePath\", \"selectedImageFilePath\", \"disabledImageFilePath\", CC_CALLBACK_1( ClassName::functionToCall, this ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var menuItem = new cc.MenuItemImage( \"normalImageFilePath\", \"selectedImageFilePath\", \"disabledImageFilePath\", functionToCall );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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 );* [block:code] { "codes": [ { "code": "MenuItemLabel *menuItem = MenuItemLabel::create( label, CC_CALLBACK_1( ClassName::functionToCall, this ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var menuItem = new cc.MenuItemLabel( label, functionToCall );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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* [block:code] { "codes": [ { "code": "MenuItemSprite *menuItem = MenuItemSprite::create( normalSprite, selectedSprite, disabledSprite, CC_CALLBACK_1( ClassName::functionToCall, this ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var menuItem = new cc.MenuItemSprite( normalSprite, selectedSprite, disabledSprite, functionToCall );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**Menu Creation** - menus are used to contain menu items Menu( menuItem1, menuItem2, menuItem3, etc ); [block:code] { "codes": [ { "code": "// create by specifying each menu item\nMenu *menu = Menu::create( menuItem1, menuItem2, menuItem3, NULL );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// create by specifying each menu item\nvar menu = new cc.Menu( menuItem1, menuItem2, menuItem3 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] 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 [block:code] { "codes": [ { "code": "/***** MenuItemFont *****/\nmenuItem->setFontName( \"pathOfNewFontFile\" );\nmenuItem->setFontSize( 5 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "/***** MenuItemFont *****/\nmenuItem.setFontName( \"pathOfNewFontFile\" );\nmenuItem.setFontSize( 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] The functions that the menu items call when clicked should be implemented like this: [block:code] { "codes": [ { "code": "void functionToCall( Ref *sender );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "void ClassName::functionToCall( cocos2d::Ref *sender )\n{\n // code to execute when the menu item is clicked\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "var functionToCall = function( )\n{\n // code to execute when the menu item is clicked\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block]