{"__v":10,"_id":"551edb36c2d1ec1700b4261c","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-04-03T18:25:58.942Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"order":3,"body":"[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F4NuBGtYCaXw%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4NuBGtYCaXw%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4NuBGtYCaXw%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"854\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=4NuBGtYCaXw&feature=youtu.be\",\n  \"title\": \"Adding Unit - Tutorial #4\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/4NuBGtYCaXw/hqdefault.jpg\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"Read the Units Menu and Creatures.xml documentation first for how to add your unit sprites to the menu.\",\n  \"title\": \"Part 3 of 3 for Adding Units\"\n}\n[/block]\nBefore adding new characters, take a look at how our example character is structured.\n\nFirst, you will need sprite sheets for the new characters. These are either hand-drawn, or 3D renders from different angles with the character walking or performing different tasks. Our sprite sheets are in Sprites_TK2D (Assets\\Sprites_TK2D\\Units\\Dobbit\\walk).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/4ByhozuSnK7eQL10C7FA\",\n        \"spritesheet6.jpg\",\n        \"800\",\n        \"600\",\n        \"#78555b\",\n        \"\"\n      ],\n      \"caption\": \"Assets\\\\Sprites_TK2D\\\\Units\\\\Dobbit\\\\walk sprite sheet\"\n    }\n  ]\n}\n[/block]\nHere is a great tutorial from Digital Tutors for creating the sprite sheets:\n[block:html]\n{\n  \"html\": \"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/cRE2G96591E?rel=0&amp;showinfo=0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\nWe use a software called [Texture Packer](https://www.codeandweb.com/texturepacker) and we talk about how to get setup with it on the next doc.\nThen, you will need to create 2D Toolkit sprite collections and sprite animations. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Assets\\\\SpriteCollections_TK2D\\\\Units\\\\Animated\\\\Dobbit\\\\HIQ\\n\\tHIQ_dobbit_walk\\n\\tHIQ_dobbit_walk_animation\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nCopy the sprite sheet in Assets\\Sprites_TK2D\\Units\\<Name of character>Folder\n\nCreate a new folder in Assets\\SpriteCollections_TK2D\\Units\\Animated\\<Folder with same name>. Create new sprite collections and rename them <name>Idle, <name>Shoot, <name>Walk to keep things organized – due to the high number of frames (not recommended), we had to split the sprite collections.\n\nOpen one, create 8 empty sprite sheets and drag the appropriate images, into the Texture slot. Press **Setup** for each as you drag each in.\n\nFill in the individual sprite Width / Height, Pad Black Zero Alpha and press Apply. This will separate the sprite sheet into individual sprites\nfor the atlas. Delete the last empty sprites(if any).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/mEu1GLrfTHqehUjUBG0L\",\n        \"sprite-sheet1.jpg\",\n        \"800\",\n        \"600\",\n        \"#607896\",\n        \"\"\n      ],\n      \"caption\": \"Individual animation frames with 2D Toolkit\"\n    }\n  ]\n}\n[/block]\nWe have split our collections based on actions (walk, idle, etc), but you can basically insert all sprite sheets/animations into one collection/animation, provided that the size of the resulting atlas image doesn't exceed the maximum allowed dimension. \n\nTo make best use of the image atlas, you can dice each frame. Select all sprites, Render Mesh Diced, Apply to dice all sprites and hit **Commit** to create the Sprite Collection.\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Diced frame example\",\n      \"image\": [\n        \"https://www.filepicker.io/api/file/WYrWJJqsR3SNdDZFc1rY\",\n        \"sprite-sheet2.jpg\",\n        \"800\",\n        \"600\",\n        \"#805260\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe frames are diced for better use of the sprite collection texture.\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Diced Atlas Image\",\n      \"image\": [\n        \"https://www.filepicker.io/api/file/Z4vtXoR0S423TcXpjDn1\",\n        \"spritesheet3.jpg\",\n        \"800\",\n        \"600\",\n        \"#648cbc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThen, take a look at our soldier prefab (Assets\\Prefabs\\Units\\Animated\\DobbitSoldier.prefab).\n\nBased on how our simple dobbit animation controller is configured, you will need 3 separate sprite animations, for Idle, Attack and Walk.\nThe clips inside are called Idle_ or Attack_ or Walk_ + direction – N,S,E,W, NE,NW,SE,SW (North, South, etc)\n\nThe basic components of an animated character are a 2D Toolkit Sprite and a Sprite Animator. Then, a series of controllers, the animation controller and other elements that make the character walk, change direction, attack, etc.\n\nIn the DobbitAnimController.cs Update() there is a commented paragraph for manually testing animation/direction.\t\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"- - -\\t\\n\\tif(Input.GetKey(KeyCode.F)){ direction = \\\"E\\\"; }\\n\\telse if(Input.GetKey(KeyCode.R)){ direction = \\\"NE\\\"; }\\n- - -\\n\\tif(Input.GetKey(KeyCode.I)){action = \\\"Idle\\\"; animator.Library = idleAnimation;}\\n\\telse if(Input.GetKey(KeyCode.O)){action = \\\"Walk\\\"; animator.Library = walkAnimation;}\\n- - -\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Manually Testing Your Character\",\n      \"image\": [\n        \"https://www.filepicker.io/api/file/U4jNvRpCR4eC0znJxxs2\",\n        \"spritesheet4.jpg\",\n        \"800\",\n        \"600\",\n        \"#3e7ea8\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAt the time of this writing, there are two animated characters in our kit – the Dobbit in the Construction prefab and the DobbitSoldier, acting as a soldier on the battle map. Study how these two work – the Construction Dobbit follows a fixed path, while the soldier is much more versatile.\n\nUnits are instantiated in UnitsPanelBattle.cs\n\nAfter the InstantiateUnit(int index, float speedModifier)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"InstantiateUnit(int index, float speedModifier)\\n{\\n\\t- - - \\n\\tGameObject ClockTree = (GameObject)Instantiate (UnitPrefabs [2], spawnPoint, \\tQuaternion.identity);\\t\\n\\tProcessUnit (\\\"ClockTree\\\", speedModifier);\\n\\t- - -\\n}\\n\",\n      \"language\": \"csharp\",\n      \"name\": \"UnitsPanelBattle.cs\"\n    }\n  ]\n}\n[/block]\nThe respective unit is processed, but since we have a single prefab in the UnitPrefabs[] array, only dobbits are instantiated/processed. Just comment the unitType = “Dobbit”; statement and insert other prefabs into the array to process all your characters.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ProcessUnit(string unitType, float speedModifier)\\n\\t{\\n\\t\\tunitType = \\\"Dobbit\\\";//regardless of selected unit, we will instantiate a dobit; \\n\\t\\t//remove this to process different units \\n\\t\\t- - - \\n\\t}\",\n      \"language\": \"csharp\",\n      \"name\": \"UnitsPanelBattle.cs\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Insert other prefabs to process all your characters\",\n      \"image\": [\n        \"https://www.filepicker.io/api/file/uC8UBUNSKWzufrsc1ju4\",\n        \"spritesheet5.jpg\",\n        \"800\",\n        \"600\",\n        \"#84b742\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2DTK Tutorial Videos\"\n}\n[/block]\nTo learn more about sprites and animations with 2DTK, watch the videos below or see the [2DTK documentation](http://www.unikronsoftware.com/2dtoolkit/doc/) (for example [this one on creating sprite collection](http://www.unikronsoftware.com/2dtoolkit/doc/2.5/tutorial/creating_a_sprite_collection.html))\n[block:html]\n{\n  \"html\": \"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/v9pBYc9KmC8?rel=0&amp;showinfo=0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/xwLYy1yEerY?rel=0&amp;showinfo=0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/CBZFRhKr7kg?rel=0&amp;showinfo=0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]","excerpt":"","slug":"add-new-characters","type":"basic","title":"Add New Characters"}

Add New Characters


[block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F4NuBGtYCaXw%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D4NuBGtYCaXw%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F4NuBGtYCaXw%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=4NuBGtYCaXw&feature=youtu.be", "title": "Adding Unit - Tutorial #4", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/4NuBGtYCaXw/hqdefault.jpg" } [/block] [block:callout] { "type": "success", "body": "Read the Units Menu and Creatures.xml documentation first for how to add your unit sprites to the menu.", "title": "Part 3 of 3 for Adding Units" } [/block] Before adding new characters, take a look at how our example character is structured. First, you will need sprite sheets for the new characters. These are either hand-drawn, or 3D renders from different angles with the character walking or performing different tasks. Our sprite sheets are in Sprites_TK2D (Assets\Sprites_TK2D\Units\Dobbit\walk). [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/4ByhozuSnK7eQL10C7FA", "spritesheet6.jpg", "800", "600", "#78555b", "" ], "caption": "Assets\\Sprites_TK2D\\Units\\Dobbit\\walk sprite sheet" } ] } [/block] Here is a great tutorial from Digital Tutors for creating the sprite sheets: [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/cRE2G96591E?rel=0&amp;showinfo=0\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] We use a software called [Texture Packer](https://www.codeandweb.com/texturepacker) and we talk about how to get setup with it on the next doc. Then, you will need to create 2D Toolkit sprite collections and sprite animations. [block:code] { "codes": [ { "code": "Assets\\SpriteCollections_TK2D\\Units\\Animated\\Dobbit\\HIQ\n\tHIQ_dobbit_walk\n\tHIQ_dobbit_walk_animation", "language": "text" } ] } [/block] Copy the sprite sheet in Assets\Sprites_TK2D\Units\<Name of character>Folder Create a new folder in Assets\SpriteCollections_TK2D\Units\Animated\<Folder with same name>. Create new sprite collections and rename them <name>Idle, <name>Shoot, <name>Walk to keep things organized – due to the high number of frames (not recommended), we had to split the sprite collections. Open one, create 8 empty sprite sheets and drag the appropriate images, into the Texture slot. Press **Setup** for each as you drag each in. Fill in the individual sprite Width / Height, Pad Black Zero Alpha and press Apply. This will separate the sprite sheet into individual sprites for the atlas. Delete the last empty sprites(if any). [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/mEu1GLrfTHqehUjUBG0L", "sprite-sheet1.jpg", "800", "600", "#607896", "" ], "caption": "Individual animation frames with 2D Toolkit" } ] } [/block] We have split our collections based on actions (walk, idle, etc), but you can basically insert all sprite sheets/animations into one collection/animation, provided that the size of the resulting atlas image doesn't exceed the maximum allowed dimension. To make best use of the image atlas, you can dice each frame. Select all sprites, Render Mesh Diced, Apply to dice all sprites and hit **Commit** to create the Sprite Collection. [block:image] { "images": [ { "caption": "Diced frame example", "image": [ "https://www.filepicker.io/api/file/WYrWJJqsR3SNdDZFc1rY", "sprite-sheet2.jpg", "800", "600", "#805260", "" ] } ] } [/block] The frames are diced for better use of the sprite collection texture. [block:image] { "images": [ { "caption": "Diced Atlas Image", "image": [ "https://www.filepicker.io/api/file/Z4vtXoR0S423TcXpjDn1", "spritesheet3.jpg", "800", "600", "#648cbc", "" ] } ] } [/block] Then, take a look at our soldier prefab (Assets\Prefabs\Units\Animated\DobbitSoldier.prefab). Based on how our simple dobbit animation controller is configured, you will need 3 separate sprite animations, for Idle, Attack and Walk. The clips inside are called Idle_ or Attack_ or Walk_ + direction – N,S,E,W, NE,NW,SE,SW (North, South, etc) The basic components of an animated character are a 2D Toolkit Sprite and a Sprite Animator. Then, a series of controllers, the animation controller and other elements that make the character walk, change direction, attack, etc. In the DobbitAnimController.cs Update() there is a commented paragraph for manually testing animation/direction. [block:code] { "codes": [ { "code": "- - -\t\n\tif(Input.GetKey(KeyCode.F)){ direction = \"E\"; }\n\telse if(Input.GetKey(KeyCode.R)){ direction = \"NE\"; }\n- - -\n\tif(Input.GetKey(KeyCode.I)){action = \"Idle\"; animator.Library = idleAnimation;}\n\telse if(Input.GetKey(KeyCode.O)){action = \"Walk\"; animator.Library = walkAnimation;}\n- - -", "language": "csharp" } ] } [/block] [block:image] { "images": [ { "caption": "Manually Testing Your Character", "image": [ "https://www.filepicker.io/api/file/U4jNvRpCR4eC0znJxxs2", "spritesheet4.jpg", "800", "600", "#3e7ea8", "" ] } ] } [/block] At the time of this writing, there are two animated characters in our kit – the Dobbit in the Construction prefab and the DobbitSoldier, acting as a soldier on the battle map. Study how these two work – the Construction Dobbit follows a fixed path, while the soldier is much more versatile. Units are instantiated in UnitsPanelBattle.cs After the InstantiateUnit(int index, float speedModifier) [block:code] { "codes": [ { "code": "InstantiateUnit(int index, float speedModifier)\n{\n\t- - - \n\tGameObject ClockTree = (GameObject)Instantiate (UnitPrefabs [2], spawnPoint, \tQuaternion.identity);\t\n\tProcessUnit (\"ClockTree\", speedModifier);\n\t- - -\n}\n", "language": "csharp", "name": "UnitsPanelBattle.cs" } ] } [/block] The respective unit is processed, but since we have a single prefab in the UnitPrefabs[] array, only dobbits are instantiated/processed. Just comment the unitType = “Dobbit”; statement and insert other prefabs into the array to process all your characters. [block:code] { "codes": [ { "code": "ProcessUnit(string unitType, float speedModifier)\n\t{\n\t\tunitType = \"Dobbit\";//regardless of selected unit, we will instantiate a dobit; \n\t\t//remove this to process different units \n\t\t- - - \n\t}", "language": "csharp", "name": "UnitsPanelBattle.cs" } ] } [/block] [block:image] { "images": [ { "caption": "Insert other prefabs to process all your characters", "image": [ "https://www.filepicker.io/api/file/uC8UBUNSKWzufrsc1ju4", "spritesheet5.jpg", "800", "600", "#84b742", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "2DTK Tutorial Videos" } [/block] To learn more about sprites and animations with 2DTK, watch the videos below or see the [2DTK documentation](http://www.unikronsoftware.com/2dtoolkit/doc/) (for example [this one on creating sprite collection](http://www.unikronsoftware.com/2dtoolkit/doc/2.5/tutorial/creating_a_sprite_collection.html)) [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/v9pBYc9KmC8?rel=0&amp;showinfo=0\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/xwLYy1yEerY?rel=0&amp;showinfo=0\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/CBZFRhKr7kg?rel=0&amp;showinfo=0\" frameborder=\"0\" allowfullscreen></iframe>" } [/block]