{"_id":"54edfbc0130818170073a16b","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"},"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","__v":1,"user":"54639d06447e0a1000249f7f","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-25T16:43:44.069Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"What SpriteSheet's are and how they can be used is covered in **[Sprites](http://cocos.sonarlearning.co.uk/v1.0/docs/frequently-asked-questions-2)** section. This page will cover how Cocos Studio can be used to create SpriteSheet's.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Creating A SpriteSheet\"\n}\n[/block]\nGo to File/New File\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Uo6UdIxsQPya2j9SiCYN_Screen%20Shot%202015-02-19%20at%2011.36.41.jpg\",\n        \"Screen Shot 2015-02-19 at 11.36.41.jpg\",\n        \"434\",\n        \"285\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNote: *You can also right click in the Resources section and click **New File***\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Select SpriteSheet\"\n}\n[/block]\nName your SpriteSheet and click **New**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/SdkWIdQQvlYyTKvcLwNQ_Screen-Shot-2015-02-25-at-16.42.17.png\",\n        \"Screen-Shot-2015-02-25-at-16.42.17.png\",\n        \"461\",\n        \"329\",\n        \"#1a77ec\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNote: *Don't worry about the size at this point as you can't change it, it will be dependent on the objects placed inside the SpriteSheet*\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"SpriteSheet Location In Cocos Studio\"\n}\n[/block]\nThe SpriteSheet can be accessed from the **Resources** section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/i0kuJOp2Sc68QVc6VdRL_Screen-Shot-2015-02-25-at-16.49.57.png\",\n        \"Screen-Shot-2015-02-25-at-16.49.57.png\",\n        \"259\",\n        \"414\",\n        \"#ef1c15\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Modifying The SpriteSheet\"\n}\n[/block]\nDouble click to open the SpriteSheet if it isn't open. The SpriteSheet will appear in the middle canvas, this canvas can be used to add your images to the SpriteSheet.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/pSRzEo7KTK2rjrz59nu2_Screen%20Shot%202015-02-25%20at%2016.42.34.png\",\n        \"Screen Shot 2015-02-25 at 16.42.34.png\",\n        \"301\",\n        \"438\",\n        \"#60b78f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"SpriteSheet Settings\"\n}\n[/block]\nIn the properties section you can modify the SpriteSheet.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/vm4hdClPRhmQBcWFNBXp_Screen%20Shot%202015-02-25%20at%2016.42.50.png\",\n        \"Screen Shot 2015-02-25 at 16.42.50.png\",\n        \"355\",\n        \"336\",\n        \"#5583bf\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNote: *The Export Image Merging button does the same as publishing but just publishes the SpriteSheet so it can easily be used in other projects.* \n\nNote: *Whilst publishing or exporting with a SpriteSheet, if CocosStudio hangs and isn't responsive. Just be patient as it is just completing the process.*","excerpt":"","slug":"spritesheet","type":"basic","title":"SpriteSheet"}
What SpriteSheet's are and how they can be used is covered in **[Sprites](http://cocos.sonarlearning.co.uk/v1.0/docs/frequently-asked-questions-2)** section. This page will cover how Cocos Studio can be used to create SpriteSheet's. [block:api-header] { "type": "basic", "title": "Creating A SpriteSheet" } [/block] Go to File/New File [block:image] { "images": [ { "image": [ "https://files.readme.io/Uo6UdIxsQPya2j9SiCYN_Screen%20Shot%202015-02-19%20at%2011.36.41.jpg", "Screen Shot 2015-02-19 at 11.36.41.jpg", "434", "285", "", "" ] } ] } [/block] Note: *You can also right click in the Resources section and click **New File*** [block:api-header] { "type": "basic", "title": "Select SpriteSheet" } [/block] Name your SpriteSheet and click **New** [block:image] { "images": [ { "image": [ "https://files.readme.io/SdkWIdQQvlYyTKvcLwNQ_Screen-Shot-2015-02-25-at-16.42.17.png", "Screen-Shot-2015-02-25-at-16.42.17.png", "461", "329", "#1a77ec", "" ] } ] } [/block] Note: *Don't worry about the size at this point as you can't change it, it will be dependent on the objects placed inside the SpriteSheet* [block:api-header] { "type": "basic", "title": "SpriteSheet Location In Cocos Studio" } [/block] The SpriteSheet can be accessed from the **Resources** section. [block:image] { "images": [ { "image": [ "https://files.readme.io/i0kuJOp2Sc68QVc6VdRL_Screen-Shot-2015-02-25-at-16.49.57.png", "Screen-Shot-2015-02-25-at-16.49.57.png", "259", "414", "#ef1c15", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Modifying The SpriteSheet" } [/block] Double click to open the SpriteSheet if it isn't open. The SpriteSheet will appear in the middle canvas, this canvas can be used to add your images to the SpriteSheet. [block:image] { "images": [ { "image": [ "https://files.readme.io/pSRzEo7KTK2rjrz59nu2_Screen%20Shot%202015-02-25%20at%2016.42.34.png", "Screen Shot 2015-02-25 at 16.42.34.png", "301", "438", "#60b78f", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "SpriteSheet Settings" } [/block] In the properties section you can modify the SpriteSheet. [block:image] { "images": [ { "image": [ "https://files.readme.io/vm4hdClPRhmQBcWFNBXp_Screen%20Shot%202015-02-25%20at%2016.42.50.png", "Screen Shot 2015-02-25 at 16.42.50.png", "355", "336", "#5583bf", "" ] } ] } [/block] Note: *The Export Image Merging button does the same as publishing but just publishes the SpriteSheet so it can easily be used in other projects.* Note: *Whilst publishing or exporting with a SpriteSheet, if CocosStudio hangs and isn't responsive. Just be patient as it is just completing the process.*