{"_id":"54e73f1a3c1e111700d05757","__v":10,"user":"54639d06447e0a1000249f7f","category":{"_id":"54e3bef8464a9c3700f7ca67","pages":["54e3bfabe887c50d005ef6a0","54e3c35ee887c50d005ef6af","54e3c9ade887c50d005ef6b4","54e3ca68e887c50d005ef6b6","54e47d6a610dfd0d00b2a84a","54e487250e41ef2b00b996c2","54e48ec60e41ef2b00b996cd","54e5c6e8e662e60d00aff673","54e5d4efe0b92439007d6999","54e5dc0ae0b92439007d69aa","54e72c88e6e77d1900ed10fa","54e7391f3c1e111700d05749","54e73f1a3c1e111700d05757","54e863f5c8e0c00d007abffd","54e86704a64fba0d00846860","54e86abb32b0b00d00c960f2","54e9e881560f2b170087f1d0","54e9eca2a6f14f0d003e96b5","54e9f04d560f2b170087f1d3","54eb2041996da20d00e6d68e","54eb801659b1172100334ffc","54eb8101df7add210007b31a","54ec584cc0c0ba1700386f8d","54ec5adad17b6d2300a54d75","54ec5e077ab3172d00c01aae","54edf8ca1e4ee60d0018e89f","54edfbc0130818170073a16b","54edff0e8dafa7250027e659"],"project":"5463e333447e0a100024a087","__v":28,"version":"5463e333447e0a100024a08a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-17T22:21:44.099Z","from_sync":false,"order":2,"slug":"cocos-studio","title":"Cocos Studio"},"project":"5463e333447e0a100024a087","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":"2015-02-20T14:05:14.550Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding A Button\"\n}\n[/block]\nDrag a Button from the Widgets section onto the middle canvas.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/BLDdcPrfQiiYMTgTpOzw_Screen-Shot-2015-02-20-at-14.06.46.png\",\n        \"Screen-Shot-2015-02-20-at-14.06.46.png\",\n        \"259\",\n        \"268\",\n        \"#eb1813\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Selecting The Button\"\n}\n[/block]\nYou can select the Button if it isn't already selected from the **Animation Editor** at the bottom. The Button doesn't appear in the resources as it's part of the Scene or other object that you are using.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/W3qRshdQSF21AdZqxJmb_Screen-Shot-2015-02-20-at-14.07.06.png\",\n        \"Screen-Shot-2015-02-20-at-14.07.06.png\",\n        \"251\",\n        \"332\",\n        \"#f0110d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Changing The Button\"\n}\n[/block]\nYou can change the properties of the Button in the Properties section. Setting the images can be done by double clicking on a state or dragging an image from the Resources section.\n\nA font file can also be set as the button doesn't just allow images but text on top of the image.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/3yUJg7rCQjimLOXZAFQB_Screen%20Shot%202015-02-20%20at%2014.07.28.png\",\n        \"Screen Shot 2015-02-20 at 14.07.28.png\",\n        \"356\",\n        \"458\",\n        \"#4b5a86\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Accessing The Button In Code\"\n}\n[/block]\nButtons can be accessed via their **Name** or **Tag** which can be set in the **Properties** section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/9GhMUieJSeaEgkPs0ydO_Screen%20Shot%202015-02-20%20at%2014.07.19.png\",\n        \"Screen Shot 2015-02-20 at 14.07.19.png\",\n        \"351\",\n        \"89\",\n        \"#728fb3\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo access the Button from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **Button** allowing you to use **Button** methods along with **Node** methods.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Node *rootNode = CSLoader::createNode( \\\"Filepath to .csb file\\\" );\\nthis->addChild( rootNode );\\n\\n// button accessed as a node using it's name\\nNode *button = rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// button cast to a button using it's name\\ncocos2d::ui::Button *button = ( cocos2d::ui::Button * )rootNode->getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// button accessed as a node using it's tag\\nNode *button = rootNode->getChildByTag( 5 );\\n\\n// button cast to a button using it's tag\\ncocos2d::ui::Button *button = ( cocos2d::ui::Button * )rootNode->getChildByTag( 5 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var rootNode = ccs.load( \\\"Filepath to .json file\\\" );\\nthis.addChild( rootNode.node );\\n\\n// get the button by name\\nvar button = rootNode.node.getChildByName( \\\"Name set in Cocos Studio\\\" );\\n\\n// get the button by tag\\nvar button = rootNode.node.getChildByTag( 5 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Cocos2d-JS doesn't require casting to use Button methods.*\n\nATM the Button does nothing, we need to attach an event listener so we can detect when the user has interacted with the Button.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void touchEvent( Ref *sender, Widget::TouchEventType type );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Header\"\n    },\n    {\n      \"code\": \"// this is the object that was cast to a button\\nbutton->addTouchEventListener( CC_CALLBACK_2( ClassName::touchEvent, this ) );\\n\\n// this is called when the user interacts with the button\\nvoid ClassName::touchEvent( Ref *sender, cocos2d::ui::Widget::TouchEventType type )\\n{\\n    switch ( type )\\n    {\\n        case cocos2d::ui::Widget::TouchEventType::BEGAN:\\n            \\n            break;\\n            \\n        case cocos2d::ui::Widget::TouchEventType::MOVED:\\n\\n            break;\\n            \\n        case cocos2d::ui::Widget::TouchEventType::ENDED:\\n            \\n            break;\\n            \\n        case cocos2d::ui::Widget::TouchEventType::CANCELED:\\n            \\n            break;\\n            \\n        default:\\n            break;\\n    }\\n}\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++ Implementation\"\n    },\n    {\n      \"code\": \"// this is the object that retrieved in the previous code block\\nbutton.addTouchEventListener( this.touchEvent, this );\\n\\n//this is called when the user interacts with the button\\ntouchEvent: function(sender, type)\\n{\\n\\t\\tswitch (type)\\n    {\\n    case ccui.Widget.TOUCH_BEGAN:\\n        break;\\n\\n    case ccui.Widget.TOUCH_MOVED:\\n        \\n    \\t\\tbreak;\\n\\n    case ccui.Widget.TOUCH_ENDED:\\n        \\n      \\tbreak;\\n\\n    case ccui.Widget.TOUCH_CANCELLED:\\n        \\n      \\tbreak;                \\n    }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"widgets-button","type":"basic","title":"[Widgets] Button"}
[block:api-header] { "type": "basic", "title": "Adding A Button" } [/block] Drag a Button from the Widgets section onto the middle canvas. [block:image] { "images": [ { "image": [ "https://files.readme.io/BLDdcPrfQiiYMTgTpOzw_Screen-Shot-2015-02-20-at-14.06.46.png", "Screen-Shot-2015-02-20-at-14.06.46.png", "259", "268", "#eb1813", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Selecting The Button" } [/block] You can select the Button if it isn't already selected from the **Animation Editor** at the bottom. The Button doesn't appear in the resources as it's part of the Scene or other object that you are using. [block:image] { "images": [ { "image": [ "https://files.readme.io/W3qRshdQSF21AdZqxJmb_Screen-Shot-2015-02-20-at-14.07.06.png", "Screen-Shot-2015-02-20-at-14.07.06.png", "251", "332", "#f0110d", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Changing The Button" } [/block] You can change the properties of the Button in the Properties section. Setting the images can be done by double clicking on a state or dragging an image from the Resources section. A font file can also be set as the button doesn't just allow images but text on top of the image. [block:image] { "images": [ { "image": [ "https://files.readme.io/3yUJg7rCQjimLOXZAFQB_Screen%20Shot%202015-02-20%20at%2014.07.28.png", "Screen Shot 2015-02-20 at 14.07.28.png", "356", "458", "#4b5a86", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Accessing The Button In Code" } [/block] Buttons can be accessed via their **Name** or **Tag** which can be set in the **Properties** section. [block:image] { "images": [ { "image": [ "https://files.readme.io/9GhMUieJSeaEgkPs0ydO_Screen%20Shot%202015-02-20%20at%2014.07.19.png", "Screen Shot 2015-02-20 at 14.07.19.png", "351", "89", "#728fb3", "" ] } ] } [/block] To access the Button from a scene for example, in code it is simple. You either access it as a **Node** or cast it to a **Button** allowing you to use **Button** methods along with **Node** methods. [block:code] { "codes": [ { "code": "Node *rootNode = CSLoader::createNode( \"Filepath to .csb file\" );\nthis->addChild( rootNode );\n\n// button accessed as a node using it's name\nNode *button = rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// button cast to a button using it's name\ncocos2d::ui::Button *button = ( cocos2d::ui::Button * )rootNode->getChildByName( \"Name set in Cocos Studio\" );\n\n// button accessed as a node using it's tag\nNode *button = rootNode->getChildByTag( 5 );\n\n// button cast to a button using it's tag\ncocos2d::ui::Button *button = ( cocos2d::ui::Button * )rootNode->getChildByTag( 5 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var rootNode = ccs.load( \"Filepath to .json file\" );\nthis.addChild( rootNode.node );\n\n// get the button by name\nvar button = rootNode.node.getChildByName( \"Name set in Cocos Studio\" );\n\n// get the button by tag\nvar button = rootNode.node.getChildByTag( 5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] Note: *Cocos2d-JS doesn't require casting to use Button methods.* ATM the Button does nothing, we need to attach an event listener so we can detect when the user has interacted with the Button. [block:code] { "codes": [ { "code": "void touchEvent( Ref *sender, Widget::TouchEventType type );", "language": "cplusplus", "name": "Cocos2d-x C++ Header" }, { "code": "// this is the object that was cast to a button\nbutton->addTouchEventListener( CC_CALLBACK_2( ClassName::touchEvent, this ) );\n\n// this is called when the user interacts with the button\nvoid ClassName::touchEvent( Ref *sender, cocos2d::ui::Widget::TouchEventType type )\n{\n switch ( type )\n {\n case cocos2d::ui::Widget::TouchEventType::BEGAN:\n \n break;\n \n case cocos2d::ui::Widget::TouchEventType::MOVED:\n\n break;\n \n case cocos2d::ui::Widget::TouchEventType::ENDED:\n \n break;\n \n case cocos2d::ui::Widget::TouchEventType::CANCELED:\n \n break;\n \n default:\n break;\n }\n}", "language": "cplusplus", "name": "Cocos2d-x C++ Implementation" }, { "code": "// this is the object that retrieved in the previous code block\nbutton.addTouchEventListener( this.touchEvent, this );\n\n//this is called when the user interacts with the button\ntouchEvent: function(sender, type)\n{\n\t\tswitch (type)\n {\n case ccui.Widget.TOUCH_BEGAN:\n break;\n\n case ccui.Widget.TOUCH_MOVED:\n \n \t\tbreak;\n\n case ccui.Widget.TOUCH_ENDED:\n \n \tbreak;\n\n case ccui.Widget.TOUCH_CANCELLED:\n \n \tbreak; \n }\n}", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block]