{"_id":"54e48ec60e41ef2b00b996cd","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","user":"54639d06447e0a1000249f7f","__v":2,"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-18T13:08:22.641Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"The design resolution is something extremely important as it also has an impact on the coding you do inside your Cocos project. The design resolution is the area that is visible for that Node whether it's a scene or even a node. You can change the size easily using pre-programmed sizes or using a custom size.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/evhYeAaR9SXRCrElOcKh_Screen-Shot-2015-02-18-at-13.00.39.png\",\n        \"Screen-Shot-2015-02-18-at-13.00.39.png\",\n        \"260\",\n        \"185\",\n        \"#eb6866\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIt is heavily recommended that you set the design resolution in your project the same as what you set in Cocos Studio.\n\nCode for Cocos2d-x AppDelegate.cpp that needs to be the same as the design resolution in Cocos Studio:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"if( !glview )\\n{\\n    glview = GLViewImpl::createWithRect( \\\"Project-Name\\\", Rect( 0, 0, 768, 1136 ) );\\n    director->setOpenGLView( glview );\\n}\\ndirector->getOpenGLView( )->setDesignResolutionSize( 768, 1136, ResolutionPolicy::NO_BORDER );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"AppDelegate.cpp\"\n    }\n  ]\n}\n[/block]\nCode for Cocos2d-JS that needs to be the same as the design resolution in Cocos Studio:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"cc.view.setDesignResolutionSize( 768, 1136, cc.ResolutionPolicy.SHOW_ALL );\",\n      \"language\": \"javascript\",\n      \"name\": \"main.js\"\n    },\n    {\n      \"code\": \"// only the width and height needs to be modified for the design resolution along with isLandscape depending on your applications orientation\\n\\\"init_cfg\\\":{\\n   \\\"isLandscape\\\": true,\\n   \\\"isWindowTop\\\": false,\\n   \\\"name\\\": \\\"ProjectX\\\",\\n   \\\"width\\\": 768,\\n   \\\"height\\\": 1136,\\n   \\\"entry\\\": \\\"main.js\\\",\\n   \\\"consolePort\\\": 6050,\\n   \\\"uploadPort\\\": 6060,\\n   \\\"debugPort\\\": 5086\\n},\",\n      \"language\": \"json\",\n      \"name\": \"config.json\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"design-resolution-overview","type":"basic","title":"Design Resolution Overview"}

Design Resolution Overview


The design resolution is something extremely important as it also has an impact on the coding you do inside your Cocos project. The design resolution is the area that is visible for that Node whether it's a scene or even a node. You can change the size easily using pre-programmed sizes or using a custom size. [block:image] { "images": [ { "image": [ "https://files.readme.io/evhYeAaR9SXRCrElOcKh_Screen-Shot-2015-02-18-at-13.00.39.png", "Screen-Shot-2015-02-18-at-13.00.39.png", "260", "185", "#eb6866", "" ] } ] } [/block] It is heavily recommended that you set the design resolution in your project the same as what you set in Cocos Studio. Code for Cocos2d-x AppDelegate.cpp that needs to be the same as the design resolution in Cocos Studio: [block:code] { "codes": [ { "code": "if( !glview )\n{\n glview = GLViewImpl::createWithRect( \"Project-Name\", Rect( 0, 0, 768, 1136 ) );\n director->setOpenGLView( glview );\n}\ndirector->getOpenGLView( )->setDesignResolutionSize( 768, 1136, ResolutionPolicy::NO_BORDER );", "language": "cplusplus", "name": "AppDelegate.cpp" } ] } [/block] Code for Cocos2d-JS that needs to be the same as the design resolution in Cocos Studio: [block:code] { "codes": [ { "code": "cc.view.setDesignResolutionSize( 768, 1136, cc.ResolutionPolicy.SHOW_ALL );", "language": "javascript", "name": "main.js" }, { "code": "// only the width and height needs to be modified for the design resolution along with isLandscape depending on your applications orientation\n\"init_cfg\":{\n \"isLandscape\": true,\n \"isWindowTop\": false,\n \"name\": \"ProjectX\",\n \"width\": 768,\n \"height\": 1136,\n \"entry\": \"main.js\",\n \"consolePort\": 6050,\n \"uploadPort\": 6060,\n \"debugPort\": 5086\n},", "language": "json", "name": "config.json" } ] } [/block]