{"__v":4,"_id":"55b63d63f8105a2f00c34e33","category":{"__v":7,"_id":"550a4c2e42fff40d00ae6049","project":"543b9b0065bf840e00b473d5","version":"543b9b0065bf840e00b473d8","pages":["550a4d06492cbf0d00bbff79","550a870cb6fd572500a57a42","550d801711e8d00d00b80380","551e00f5a7e98017009e3ee4","551edb36c2d1ec1700b4261c","554f09c6a8c1ae0d00c5bb93","55b63d63f8105a2f00c34e33"],"reference":false,"createdAt":"2015-03-19T04:10:22.740Z","from_sync":false,"order":3,"slug":"units","title":"Units"},"project":"543b9b0065bf840e00b473d5","user":"543b9aa865bf840e00b473d1","version":{"__v":11,"_id":"543b9b0065bf840e00b473d8","project":"543b9b0065bf840e00b473d5","createdAt":"2014-10-13T09:27:28.467Z","releaseDate":"2014-10-13T09:27:28.467Z","categories":["543b9b0065bf840e00b473d9","543b9ef065bf840e00b473e0","54890012f291f61400c02d36","54890902f291f61400c02d3e","54890c43f291f61400c02d44","54890d71c178b40b00aa3086","5508125c0c4d8c19008a5f83","55094050961f17170070abbd","550945111c38c50d006118ad","550a4c2e42fff40d00ae6049","55221c074801a40d00a77610"],"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-07-27T14:17:07.198Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"order":4,"body":"Before you create the character sprites, make sure the shadow matches the general direction of the sun light through your entire game, even if the lateral shadow creates sprites with the center outside your character body. In our example here, the shadows for the new character doesn't match the rest of the character/building shadows. Also, keep the number of frames for each action low, as low as you can have it while maintaining a fluid animation - everything will add up. Our dobbit has around 13 frames, while our cop has 30-40 frames – way too high for an actual mobile game.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/v3s4xWF2SpmAmDVaJI2f\",\n        \"tempf.png\",\n        \"905\",\n        \"610\",\n        \"#6eaa32\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nSeparate the sprites by orientation – you will need 8 angles – East, North, NorthEast, NorthWest, South, SouthEast, SouthWest, West\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/QeW7cEbMS5mX1XKQkPPp\",\n        \"tempf.png\",\n        \"1924\",\n        \"1056\",\n        \"#829cc0\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo pack the sprites into sprite sheets you can use Texture Packer – absolutely necessary if you are making a big game, then we recommend this [software](https://www.codeandweb.com/texturepacker).\nAt program start up choose Sprite sheet only (no data file). Settings for each sprite sheet:\n**- Size constraints: Any size\n- Algorithm: Basic\n- Trim Mode: None**\nKeep in mind that the program will add 1 pixel on each side of the sprite, so add 2 on both X and Y for the individual sprite size.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/rUwBIyOSQueOAsvZZByR\",\n        \"tempf.png\",\n        \"1715\",\n        \"1002\",\n        \"#db222a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nSelect the Texture file output directory and then hit **Publish sprite sheet**.","excerpt":"","slug":"create-character-sprite-sheet","type":"basic","title":"Create Character Sprite Sheet"}

Create Character Sprite Sheet


Before you create the character sprites, make sure the shadow matches the general direction of the sun light through your entire game, even if the lateral shadow creates sprites with the center outside your character body. In our example here, the shadows for the new character doesn't match the rest of the character/building shadows. Also, keep the number of frames for each action low, as low as you can have it while maintaining a fluid animation - everything will add up. Our dobbit has around 13 frames, while our cop has 30-40 frames – way too high for an actual mobile game. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/v3s4xWF2SpmAmDVaJI2f", "tempf.png", "905", "610", "#6eaa32", "" ] } ] } [/block] Separate the sprites by orientation – you will need 8 angles – East, North, NorthEast, NorthWest, South, SouthEast, SouthWest, West [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/QeW7cEbMS5mX1XKQkPPp", "tempf.png", "1924", "1056", "#829cc0", "" ] } ] } [/block] To pack the sprites into sprite sheets you can use Texture Packer – absolutely necessary if you are making a big game, then we recommend this [software](https://www.codeandweb.com/texturepacker). At program start up choose Sprite sheet only (no data file). Settings for each sprite sheet: **- Size constraints: Any size - Algorithm: Basic - Trim Mode: None** Keep in mind that the program will add 1 pixel on each side of the sprite, so add 2 on both X and Y for the individual sprite size. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/rUwBIyOSQueOAsvZZByR", "tempf.png", "1715", "1002", "#db222a", "" ] } ] } [/block] Select the Texture file output directory and then hit **Publish sprite sheet**.