{"__v":22,"_id":"550958ad1c38c50d006118e5","category":{"__v":5,"_id":"55094050961f17170070abbd","project":"543b9b0065bf840e00b473d5","version":"543b9b0065bf840e00b473d8","pages":["550942e2368a5617004146d8","550a3bca42fff40d00ae600c","550a42a342fff40d00ae6022","550a854f635c660d005280b8","554f0dfacbb3510d00a5738a"],"reference":false,"createdAt":"2015-03-18T09:07:28.587Z","from_sync":false,"order":2,"slug":"player-village","title":"Player Village"},"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-03-18T10:51:25.407Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"order":2,"body":"[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"2 Animated references included with the Pro / Complete Kits\",\n  \"body\": \"Look for the Academy and Toolhouse animated sprites in SpriteCollections_TK2D\"\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FBDRecy1SDPY%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBDRecy1SDPY%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBDRecy1SDPY%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=BDRecy1SDPY&feature=youtu.be\",\n  \"title\": \"Adding Animated Building - Tutorial #3B\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/BDRecy1SDPY/hqdefault.jpg\"\n}\n[/block]\nAdding/Replacing an animated building is the same as that for static so you may [follow these steps](https://www.citybuildingkit.com/documentation/v1.0/docs/replace-static-buildings.html)\n**BUT there are a few things you should know and do differently:**\nMake sure that when dragging in the kit prefab to use as a base for the replacement, you use an **Animated Building Prefab** like **Academy**. A static one like **Barrel** will **not** work.\nThe animated portion of the building will need to be separately cut out for all the frames. This is to keep the performance optimized.\n\nAssuming you have done this and have followed the steps for replacing static buildings before, this will be a breeze. Lets assume that **Treehouse** is an animated building.\n\n**a.** Go to **SpriteCollections_TK2D->Buildings->Animated**\n**b.** **Create** a new **Sprite Collection** and **Sprite Animation** by right clicking and going to **Create->tk2d**. Name the collection and animation in accordance with your building.\nFor example:\n**TreehouseAnimCutOut\nTreehouseAnimCutOut_animation**\nInside the sprite collection(**TreehouseAnimCutOut**) editor, you will drag in all the images/frames for just the animated portion of your **animated building**. Click Commit and close.\nInside the sprite animation(**TreehouseAnimCutOut_animation**) editor, Create a **new clip**, select the **Sprite Collection** you just created and add in all the frames for the animation. I'll call this clip **TreehouseClip** so that I may refer to it later.\n**c.** If you followed all the steps from the Static building replacement documentation, then the additional thing you will need to do now is to update the **Anim Lib** and **Clip** under the **Tk 2d Sprite Animator** Script found in the child objects **Academyt** and **ShadowAnimated**.\n**Academyb** and **Shadow** will be edited SAME AS you have for the **static building replacement doc**. Here's an image reference:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/vqPLtIX1SbOBfnVfKRpt\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1034\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nReferring to the file names I used, the following are changed to:\n**Anim Lib:** TreehouseAnimCutOut_animation\n**Clip:** TreehouseClip\n\nAlso, under the **Tk 2d Clipped Sprite** Scripts inside ONLY **Academyt** and **ShadowAnimated**, the **Collection** and **Sprite** will need to be changed to the 1st frame of the animation collection. Again referring to the file names used here, the following are changed to:\n**Collection:** TreehouseAnimCutOut\n**Sprite:** 1\nFinally, do not forget that **Academyt** and **Academyb** will need to be renamed to the building you are replacing it to :) In our case it would be **Treehouset** and **Treehouseb** respectively.\n**And That's all Folks!** :D\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/9CQkEXFzT2667Ss69jdx\",\n        \"animated_buildings_001.jpg\",\n        \"1000\",\n        \"563\",\n        \"#7aaa36\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n([Click to see larger screenshot here](http://cl.ly/image/0D2j3B1T1q0U))\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Academy and Toolhouse Examples\"\n}\n[/block]\nAs an example, you can use our Academy/Toolhouse - you can even start from one of those, and change just the sprite collection/animation, and drag it to a new prefab. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/tpPmWY9iTPOEZYQSwau8\",\n        \"animated_buildings_002.jpg\",\n        \"1000\",\n        \"563\",\n        \"#76ab33\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n([Click to see larger screenshot here](http://cl.ly/image/1v2o0i0R2z1R))\n\nIf only a part of the building is animated (like the top of the Academy), you can use Gimp to cut the relevant part so the resulting atlas for the sprite collection/animation is as small as possible.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/jg33XIY7RsSin1jrvCbe\",\n        \"animated_buildings_003.jpg\",\n        \"1000\",\n        \"563\",\n        \"#72ab34\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n([Click to see larger screenshot here](http://cl.ly/image/0L0G063n2X3G))\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to Import Your Own Animated Asset\"\n}\n[/block]\nRight-click and select tk2d > Sprite Collection. ([Click to see larger screenshot here](http://cl.ly/image/2A0H033f2G3x))\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/1oyfYZOCTNBzzDtnm6Kb\",\n        \"animated_buildings_004.jpg\",\n        \"1000\",\n        \"563\",\n        \"#436769\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Preserve Internal Structure\"\n}\n[/block]\nThe internal structure of your prefabs must be preserved - Button/Sprites, since they are processed by the scripts when the building is destroyed on the battle map, or when the construction is finished (when this happens, the parenting changes, some children are unparented and destroyed, etc).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Layering\"\n}\n[/block]\nThe buildings are layered (top/bottom) depending on how close the units/projectiles get to them, at which point some parts might have to appear in the background/foreground.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Reference Folders\"\n}\n[/block]\nThe two relevant folders you'll be using in the assets directory are:\n\n- Sprites_TK2D for new sprites\n- SpriteCollections_TK2D for collections/animations\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2DTK Animation Tutorial\"\n}\n[/block]\nTo learn more about animations with 2DTK, watch the video below or see the [2DTK documentation](http://www.unikronsoftware.com/2dtoolkit/doc/) (for example [this one on sprite animations](http://www.unikronsoftware.com/2dtoolkit/doc/2.4/tutorial/creating_a_sprite_animation.html))\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]","excerpt":"Step-by-step instructions on how to add an animated sprite.","slug":"replace-animated-buildings","type":"basic","title":"Replace Animated Buildings"}

Replace Animated Buildings

Step-by-step instructions on how to add an animated sprite.

[block:callout] { "type": "success", "title": "2 Animated references included with the Pro / Complete Kits", "body": "Look for the Academy and Toolhouse animated sprites in SpriteCollections_TK2D" } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FBDRecy1SDPY%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBDRecy1SDPY%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBDRecy1SDPY%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=BDRecy1SDPY&feature=youtu.be", "title": "Adding Animated Building - Tutorial #3B", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/BDRecy1SDPY/hqdefault.jpg" } [/block] Adding/Replacing an animated building is the same as that for static so you may [follow these steps](https://www.citybuildingkit.com/documentation/v1.0/docs/replace-static-buildings.html) **BUT there are a few things you should know and do differently:** Make sure that when dragging in the kit prefab to use as a base for the replacement, you use an **Animated Building Prefab** like **Academy**. A static one like **Barrel** will **not** work. The animated portion of the building will need to be separately cut out for all the frames. This is to keep the performance optimized. Assuming you have done this and have followed the steps for replacing static buildings before, this will be a breeze. Lets assume that **Treehouse** is an animated building. **a.** Go to **SpriteCollections_TK2D->Buildings->Animated** **b.** **Create** a new **Sprite Collection** and **Sprite Animation** by right clicking and going to **Create->tk2d**. Name the collection and animation in accordance with your building. For example: **TreehouseAnimCutOut TreehouseAnimCutOut_animation** Inside the sprite collection(**TreehouseAnimCutOut**) editor, you will drag in all the images/frames for just the animated portion of your **animated building**. Click Commit and close. Inside the sprite animation(**TreehouseAnimCutOut_animation**) editor, Create a **new clip**, select the **Sprite Collection** you just created and add in all the frames for the animation. I'll call this clip **TreehouseClip** so that I may refer to it later. **c.** If you followed all the steps from the Static building replacement documentation, then the additional thing you will need to do now is to update the **Anim Lib** and **Clip** under the **Tk 2d Sprite Animator** Script found in the child objects **Academyt** and **ShadowAnimated**. **Academyb** and **Shadow** will be edited SAME AS you have for the **static building replacement doc**. Here's an image reference: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/vqPLtIX1SbOBfnVfKRpt", "Untitled.png", "1920", "1034", "", "" ] } ] } [/block] Referring to the file names I used, the following are changed to: **Anim Lib:** TreehouseAnimCutOut_animation **Clip:** TreehouseClip Also, under the **Tk 2d Clipped Sprite** Scripts inside ONLY **Academyt** and **ShadowAnimated**, the **Collection** and **Sprite** will need to be changed to the 1st frame of the animation collection. Again referring to the file names used here, the following are changed to: **Collection:** TreehouseAnimCutOut **Sprite:** 1 Finally, do not forget that **Academyt** and **Academyb** will need to be renamed to the building you are replacing it to :) In our case it would be **Treehouset** and **Treehouseb** respectively. **And That's all Folks!** :D [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/9CQkEXFzT2667Ss69jdx", "animated_buildings_001.jpg", "1000", "563", "#7aaa36", "" ] } ] } [/block] ([Click to see larger screenshot here](http://cl.ly/image/0D2j3B1T1q0U)) [block:api-header] { "type": "basic", "title": "Academy and Toolhouse Examples" } [/block] As an example, you can use our Academy/Toolhouse - you can even start from one of those, and change just the sprite collection/animation, and drag it to a new prefab. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/tpPmWY9iTPOEZYQSwau8", "animated_buildings_002.jpg", "1000", "563", "#76ab33", "" ] } ] } [/block] ([Click to see larger screenshot here](http://cl.ly/image/1v2o0i0R2z1R)) If only a part of the building is animated (like the top of the Academy), you can use Gimp to cut the relevant part so the resulting atlas for the sprite collection/animation is as small as possible. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/jg33XIY7RsSin1jrvCbe", "animated_buildings_003.jpg", "1000", "563", "#72ab34", "" ] } ] } [/block] ([Click to see larger screenshot here](http://cl.ly/image/0L0G063n2X3G)) [block:api-header] { "type": "basic", "title": "How to Import Your Own Animated Asset" } [/block] Right-click and select tk2d > Sprite Collection. ([Click to see larger screenshot here](http://cl.ly/image/2A0H033f2G3x)) [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/1oyfYZOCTNBzzDtnm6Kb", "animated_buildings_004.jpg", "1000", "563", "#436769", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Preserve Internal Structure" } [/block] The internal structure of your prefabs must be preserved - Button/Sprites, since they are processed by the scripts when the building is destroyed on the battle map, or when the construction is finished (when this happens, the parenting changes, some children are unparented and destroyed, etc). [block:api-header] { "type": "basic", "title": "Layering" } [/block] The buildings are layered (top/bottom) depending on how close the units/projectiles get to them, at which point some parts might have to appear in the background/foreground. [block:api-header] { "type": "basic", "title": "Reference Folders" } [/block] The two relevant folders you'll be using in the assets directory are: - Sprites_TK2D for new sprites - SpriteCollections_TK2D for collections/animations [block:api-header] { "type": "basic", "title": "2DTK Animation Tutorial" } [/block] To learn more about animations with 2DTK, watch the video below or see the [2DTK documentation](http://www.unikronsoftware.com/2dtoolkit/doc/) (for example [this one on sprite animations](http://www.unikronsoftware.com/2dtoolkit/doc/2.4/tutorial/creating_a_sprite_animation.html)) [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]