{"__v":96,"_id":"550a3bca42fff40d00ae600c","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-19T03:00:26.203Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"order":1,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"- SpriteAtlases_NGUI (previously called SpriteAtlases)\\n- SpriteCollections_TK2D (previously called SpriteCollections)\\n- Sprites_NGUI, sprites used for interfaces and menus (previously called Textures)\\n- Sprites_TK2D,  sprites used for the game itself-environment, buildings, etc (previously called Sprites)\",\n  \"title\": \"These 4 folders are renamed in the Pro and Complete kits\"\n}\n[/block]\nFor starter kit owners who haven't upgraded to the Pro or Complete kits, the folder names below are the new ones. You will see the previous names above in the note.\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%2FVZsQo73LC-o%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVZsQo73LC-o%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FVZsQo73LC-o%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=VZsQo73LC-o&feature=youtu.be\",\n  \"title\": \"Replace Buildings - Tutorial #3\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/VZsQo73LC-o/hqdefault.jpg\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Animated buildings are discussed [here.](https://www.citybuildingkit.com/documentation/v1.0/docs/replace-animated-buildings.html)\",\n  \"title\": \"What about animated buildings?\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Adding your own building images\"\n}\n[/block]\nIt's as easy as a-b-c:\n**a.** Go to the folder -> **Sprites_TK2D.**\n**b.** Create a new folder, for example: **BuildingsNew.**\n**c.** Add your own building images inside the new folder.\n\n**Size Range:**\nWidth 170-300px\nHeight 150-390px \n\nThese sizes are rather large but buildings are usually very big graphics in contrast to other sprites so this range is a good guide. The background for these images are transparent.\n\n**Pssst! Here's a TIP:** Using similar image sizes will make things easier, but it's not mandatory - you can scale everything down, as long as the graphics quality remains reasonable on the target platform.\n\nThe existing images of the buildings used for the kit are inside -> **Sprites_TK2D/Buildings**, as the following image will show you:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/zY9KUW2oRM2U8JbPgSLi\",\n        \"04_01_building_sprites.jpg\",\n        \"1000\",\n        \"562\",\n        \"#69ab4a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Creating the Atlas(Sprite Collection) for your added images\"\n}\n[/block]\n**a.** Go to the folder **SpriteCollections_TK2D** & create a **New folder**, for example: **BuildingsNew**\n*//At the top of the project browser:*\n**b.** Select **\"Create\">tk2d>Sprite Collection**\n*//Refer to the following image:* \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/JiVQLTgWRoCtf2qTZc4o\",\n        \"04_03_create_building_sprite_collection.jpg\",\n        \"1000\",\n        \"562\",\n        \"#6daf4d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**c.** Save it inside the **SpriteCollections_TK2D>BuildingsNew** folder you just created, as for example: **BuildingsNewSpriteCol** (which is the name of the Sprite Collection)\n**d.** Now select the new sprite collection you just created and under the Inspector section, you will see a button called \"**Open Editor**\". **Click it!**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/KrEM6OsSjGR5Ndn70q2c\",\n        \"04_02_building_sprite_collection.jpg\",\n        \"1000\",\n        \"562\",\n        \"#983f2d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**e.** Finally, keeping this editor open, navigate back to the folder where you added your building images(In **Step 1**), select them all and drag them in to the **Sprite Collection Editor.**\n**f.** Hit the \"**Commit**\" button and you're good to go :) You've created your **atlas**!\n*//The \"Commit\" button is located at the top right corner of the editor window.*\n\n**HINT:** Want to see the sprite collection we're currently using for the kit?\n1. Go to SpriteCollections_TK2D/Buildings\n2. Select the Sprite Collection called Buildings and click \"Open Editor\" under the inspector window.\nYou may use collections like this available throughout the kit to analyze our prefabs and other components so delete them later(Perhaps when you're a pro at this!).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Creating each building's separate Prefab\"\n}\n[/block]\n**Short Overview:**\nThis step is going to be a bit long but if you do it once, it won't seem so big.\nPrefabs are an easy way to instantiate gameobjects preset with scripts, textures, animations, etc. Useful for things like enemy generation or even buildings!\n\nThe **best way** to create a prefab for each building image you imported in **Step 2** is to use one of our prefabs. Trust us, this makes life a lot simpler for you!\n**The idea is to drag in our prefab and change some specific things on the inspector window to turn it in to one of your own building prefabs.**\nYou'll need to do this for each building sprite but again, **it gets easier with practice. :)**\n\n**Simply follow along:**\n**a.** Go to **Prefabs/Buildings**, Select a building, and drag it in to the scene.\n*//**IMPORTANT NOTE:** Drag in one of the **STATIC** buildings if you are trying to make a prefab for your static image. If you are attempting to place your animated building, we shall discuss this* [here](https://www.citybuildingkit.com/documentation/v1.0/docs/replace-animated-buildings.html) :) *For now, make sure you drag in a static prefab(Academy and Toolhouse are not static but animated)*\n\n**For this example, we're using the barrel prefab, but any static prefab will do:**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/k8hx22iNR4Ku16RkpLP6\",\n        \"Untitled.png\",\n        \"1919\",\n        \"1037\",\n        \"#73af35\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**It is a good idea to position the prefab at position (0, 0, 0) while setting up your own building prefab in order to make sure it falls properly on the underlying grid.**\n*//We'll also show details in this step to adjust the button and sprite position properly.*\n\n**b. Select** the prefab you just dragged in->**Go to GameObject**->Select **Break Prefab Instance**\n*//Breaks the instantiation to the kit prefab. Now it's ready to be turned in to your own!\n//Image guide:* \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/JWPYjO1gSaS07XVx5Kdg\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1080\",\n        \"#72ab37\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**c.** Change the following names just as the image **below** shows:\n*//In this example, we'll use the name **Treehouse**. It needs to be changed in all 5 of these places. For the Tag, create a new tag of the same name and just change it.*\n*//Additionally in the child object \"Sprites\", you will change the children names from Barrelb and Barrelt to your own in the same format, for example: **Treehouseb** and **Treehouset**. Here b stands for bottom and t stands for top. They define the **Cutoff Region** for when the player is in the background(behind the building) and foreground(front of the building) so that they appear in proper layer/perspective. Leave \"Shadow\" as it is.* \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/pV0SwESSYGl3yCPllY9A\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1040\",\n        \"#73af35\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**d.** Now all that's left to do is to change the sprites in 3 places:\n**Treehouseb**\n**Treehouset**\n**Shadow**\nYou will be updating these three with the same sprite of the building image you intend to use. The image will be changed through the **Sprite Collection** you created in **Step 2**.\n**Here's how:**\nSelect the child object, we'll start with **Treehouseb**.\nALL you need to do is change the **Collection** under the **Tk 2d Clipped Sprite Script** in the inspector to the **Sprite Collection** you made in **Step 2**.\nThen just beneath **Collection**, you may select the **Sprite** from your Atlas. This will show a list of all the images you dragged in to the collection/atlas in **Step 2**.\nRepeat this for the other two child objects: **Treehouset** & **Shadow**\nRefrain from touching any other settings as it will probably show errors. The entire prefab is preset so that it can be updated with a new building image. Though you may need to rotate/change x/y values of the shadow in order to make it appear properly cast off the building. Use one of the existing prefab shadow direction as guide to ensure all of your building's shadow are facing the same way. We don't want to have two suns now do we!\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/8QKkfxd7S6KkFyzR1y0A\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1038\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIn the image above, only the bottom half was changed so it looks weird. Here is one with all 3 child objects changed to the specific sprite from collections.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"**Note:** It's all automated, even the **Shadow** will be applied from the exact same sprite image using a little manipulation and black tint. All you need to do is follow the steps and just replace the sprites for all 3 :) and leave the rest to us!\",\n  \"title\": \"The shadow is automatic\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/LsIQGAZLTZO8aWskBBT4\",\n        \"Untitled.png\",\n        1920,\n        1036,\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nBut you will notice in the above image, when I select the child object **Button**, the size of the new building image(which is gigantic in comparison to the tiny barrel) is far too big. Notice that on the barrel prefab, the button's rectangle just touches the outer corner edges.\n**This is quite important as this Button child is responsible for \"Click/Tap\" area for the players to select the building.**\nThere is **no need** to change the size of your sprite image.\nSimply **resize** the button's rectangle so that it just touches the **corner edges**, like so:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/Va5x1AqtRQWSLkhEGrdR\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1024\",\n        \"#3c6955\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**Turn on** the **Mesh Renderer** as shown on the **Button** gameobject and it will be visible on the **Scene view**. Then you want to align the corners of the button pad (the white bordered rectangle) in proper **perspective** to your building's **base**.\nOnce placed properly, **turn off** the **Mesh Renderer** for the **Button** gameobject.\nNow the button area is properly optimized for the giant building!\n\nOne more thing to note is, here we used a building that's far too oversized and it's best to stick to the range provided in step 1 since the underlying grass prefab for the grid collision has a max dimension of 4x4 tiles. Lets assume the building is 4x4. For a building of this size, players may not appear properly in the background/foreground if the cutoff is not at the right region (which varies based on the size of the building). \n\nManually adjust this if the preset values do not work, **check on** the **Edit Region in Scene** box on either **Treehouseb** or **Treehouset**. Then adjust the rectangle of the cutoff region between the bottom and top half with respect to the height of the player characters imagining that they are standing on right or left corner of your image. This will be the accurate cutoff point for them to appear behind the building when in the **background **and in front of the building when in the **foreground**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/p6QH91qSwyejHcI6HzPJ\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1020\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**Final Step:** To turn the **GameObject** you just created back in to a **Prefab** to use for your game:\n**a.** Go back to the folder **Prefabs/Buildings**\n**b.** Right click>Go to **Create**>Select **Prefab**\n**c.** Now just **Drag & Drop** the **GameObject** you just created in to the **Prefab** file and rename it. In our case it's **Treehouse**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/CdiAtjRpm4panD7oWUcQ\",\n        \"Untitled.png\",\n        \"1920\",\n        \"1036\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNow you may **drag** this **Prefab** you just created from the **Prefab folder** in to any scene and your building will begin working immediately!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Reference: Each building has 4 components\"\n}\n[/block]\nHere's a small reference of some of the things discussed in **Step 3**:\n[block:parameters]\n{\n  \"data\": {\n    \"3-0\": \"BuildingSelector.cs\",\n    \"3-1\": \"a  script that holds variables\",\n    \"2-0\": \"TK2D button\",\n    \"2-1\": \"allows you to reselect the building\",\n    \"1-0\": \"Namet- (Top clipped sprite)\",\n    \"1-1\": \"*see above*\",\n    \"0-0\": \"Nameb (Base clipped sprite)\",\n    \"0-1\": \"the 2 clipped sprites will be on different z layers, to allow characters to appear in foreground/background of the building; a base collider will be necessary so they never step on the \\\"edge\\\" between the sprites\",\n    \"h-0\": \"Compoment\",\n    \"h-1\": \"Description\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4. Edit the BuildingCreator.cs and BuildingSelector.cs Scripts\"\n}\n[/block]\nThe new prefab must end up in the **BuildingPrefabs array** in **BuildingCreator** inside **Game manager**, where it will be processed by tag. Like so:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/3k7K1JqTasXFeAVLA5zg\",\n        \"2.png\",\n        1924,\n        1056,\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAdditionally do the same for **Game Manager>SaveLoadMap**.\nInside the **SaveLoadMap.cs** script, there are 2 case statements for each building that you replace so be sure to change the name under these case statements to the one used for the **prefab** being replaced as well. Hit **Ctrl+F** to find the case statements!\nSimilar case statements exist in the**SaveLoadBattle.cs** script so make sure to change those string values as well.\n\nFurther modifications are necessary for the BuildingCreator and BuildingSelector to process the new tags correctly which are discussed below.\nBoth of these scripts are located in the Scripts/Buildings folder. \n\nNow that you have a prefab, there are four places in these two scripts you need to add a case, or additional variable for. If you've replaced an existing building, then just replace one of the cases and variables. If you're adding a new building, then you will want to add a new case and variable. \n\nIn the BuildingCreator.cs script, first increment the following variable by the total number of new buildings you are adding. It doesn't need to be changed if you are replacing an existing building.\n**private const int noOfBuildings = 11;**\t*//number of existing buildings ingame*\nIt should be on the first line.\nThen go to the inspector and change the following values to the exact same as the one for noOfBuildings.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/pvo0UgaNQmK3B0c0nemh\",\n        \"error_label.png\",\n        \"1924\",\n        \"1056\",\n        \"#73ad31\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nDo the same thing for transdata:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/ZGijK0j7QFuqYj6P4BVp\",\n        \"error_transdata.png\",\n        \"1924\",\n        \"1056\",\n        \"#70ad34\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThen look for:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Receive a NGUI button message to build\\npublic void OnBuild0()\\t { \\n  \\t\\t//when a building construction menu button is pressed\\n    \\tcurrentSelection=0; \\t\\n    \\tVerifyConditions(\\\"Academy\\\"); \\n}\\n\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\n**Note:**\nThis is the OnBuild function which is invoked within the Menu UI whenever a building is purchased so incase you are adding a new building, make sure to change the OnBuild pointer for the button. Each building Menu Ui is stored inside\n**UIAnchor>Anchor - Center>Shop>02Buildings>Page0(or Page1)> NameOfBuilding(eg:00Academy)>Button**. Here's an image guide:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/tZheGdNpQEK730x6olfT\",\n        \"build pointer.png\",\n        \"1920\",\n        \"1034\",\n        \"#74af33\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nScroll down to find the **On Click/Tap** drop down menu and you will find the method. In case you add a new building by duplicating an existing one, be sure to change this otherwise the new building will instantiate the same building as the one you duplicated it from. You have been warned!\n\nFurther down in the same script you will also want to replace:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Receive a Tk2d button message to select an existing building\\n// The button is in the middle of each building prefab and is invisible \\n\\tpublic void OnReselect0(){\\n    //when a building is reselected\\n    currentSelection = 0; \\t\\t\\n    StartCoroutine(ReselectObject(\\\"Academy\\\"));\\n  }\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\nAnd lastly further down in BuildingCreator.cs, add a new case with your building prefab name. This is where the prefab is connected with the scripting. If you're replacing an existing building then be sure to change the grass prefab dimension as well. For example:\n*GameObject G**4**xAcademy = (GameObject)Instantiate(Grass**4**x, new Vector3(0,0,grassZ), Quaternion.identity);*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"//instantiates the building + appropriate underlying grass patch\\nswitch (currentSelection)\\t\\t\\t\\n\\t\\t{\\n\\t\\tcase 0:\\n\\t\\t\\tGameObject Academy = (GameObject)Instantiate(BuildingPrefabs[currentSelection], new Vector3(0,0,buildingZ), Quaternion.identity);\\t\\t\\t\\n\\t\\t\\tGameObject G4xAcademy = (GameObject)Instantiate(Grass4x, new Vector3(0,0,grassZ), Quaternion.identity);\\t\\n\\t\\t\\tpivotCorrection = true;\\n\\t\\t\\tSelectObject(\\\"Academy\\\");\\n\\t\\t\\tbreak;\\t\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\nAlso just beneath this line is:\n**pivotCorrection = true;**\nThis line is important. It should be placed inside the case statements under **ONLY** even numbered grass colliders being instantiated. For example: Grass4x and Grass2x.\nThis line isn't required for odd numbered grass instantiations like Grass3x.\nBasically it makes sure that the building falls properly on the underlying grid.\n\n**BuildingSelector.cs**\n\nNext, also add your building number and case to in BuildingSelector.cs where it mentions switch (buildingType){\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Sends the reselect commands to BuildingCreator\\n\\tswitch (buildingType){\\n\\t\\tcase \\\"Academy\\\":\\n\\t\\t((BuildingCreator)buildingCreator).OnReselect0();\\n\\t\\tbreak;\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\n**Here's an extra Note about gold/mana auto generation:** \nIf you want your building prefab to automatically generate gold/mana after being created, then simply **go to the ConstructionSelector.cs script and find the following lines:**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"if(((UISlider)ProgressBar.GetComponent(\\\"UISlider\\\")).value == 1)\\t\\t\\t\\t//building finished - the progress bar has reached 1\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\n\\t\\t\\t{\\n\\t\\t\\t\\t((SoundFX)soundFX).BuildingFinished();\\n\\n\\t\\t\\t\\tif(!battleMap)\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t//if this building is not finished on a battle map\\n\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t((Stats)stats).occupiedDobbitNo--;\\t\\t\\t\\t\\t\\t\\t\\t\\t//the dobbit previously assigned becomes available\\n\\t\\t\\t\\t\\t((Stats)stats).UpdateUI();\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t\\tif(buildingType==\\\"Barrel\\\")\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t//increases total storage in Stats\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\t((Stats)stats).maxStorageMana += storageIncrease;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\telse if(buildingType==\\\"Forge\\\")\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\t((Stats)stats).productionBuildings[0]++;\\n\\t\\t\\t\\t\\t\\t((Stats)stats).maxStorageGold += storageIncrease;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\telse if(buildingType==\\\"Generator\\\")\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\t((Stats)stats).productionBuildings[1]++;\\n\\t\\t\\t\\t\\t\\t((Stats)stats).maxStorageMana += storageIncrease;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\telse if(buildingType==\\\"Vault\\\")\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\t((Stats)stats).maxStorageGold += storageIncrease;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t((Stats)stats).UpdateUI();\\n\\t\\t\\t\\t}\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\nHere just add a new **else if** condition with the name of your building and the currency you'd like it to produce. You could copy the lines of code from within the respective **if statement** for a particular currency. Remember that this value is drawn from the **Buildings.xml** file.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"5. Building Collision\"\n}\n[/block]\nBuildings do not have any connection with colliders or target/obstacle cubes, since these are embeded in the underlying grass patches – they are paired by building index when they are created. There are two types of patches – BattleMap and OwnCity. The grass patches have:\n**1. AITargets cubes** – the path finder marks them as possible destinations for units when attacking the building from close range.\n**2. AIObstacles cubes** – the path finder marks them as obstacles, so that units walk around buildings/ruins, and not over/on top of them.\n**3. IsoCollider** – used in own city when moving buildings, so they signal when such a collider overlaps another, so you can't place buildings on top of each other. You can reactivate the mesh renderers on each of these elements to see them.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/sWQ49IoRoq0saccNW5rq\",\n        \"2.png\",\n        \"1924\",\n        \"1056\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThere are two types of grass, because in own town we do not have pathfinder and units – they are used only on the battle map. If we had any unit activity in HomeTown, the pathfinder/new grass/coordinator AI would have been included here as well.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"6. Buildings Menu\"\n}\n[/block]\nYou will finally need to replace/add the images of the buildings on the UI Menu. Go [here](https://www.citybuildingkit.com/documentation/v1.0/docs/units-menu.html) and find out how. The documentation is for Units but the information to replacing buildings menu is also there as both are generic.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2DTK Tutorial Video\"\n}\n[/block]\nTo learn more about sprites with 2DTK, watch the video 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:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Continue with the XML Documentation\"\n}\n[/block]\nOpen the Buildings.xml documentation page by clicking [here](https://www.citybuildingkit.com/documentation/v1.0/docs/buildingxml.html) to learn how to set the data for each building you've just added/replaced above.","excerpt":"**Before reading this page, please make sure you have read the Summary section for buildings first.**","slug":"replace-static-buildings","type":"basic","title":"Replace Static Buildings"}

Replace Static Buildings

**Before reading this page, please make sure you have read the Summary section for buildings first.**

[block:callout] { "type": "info", "body": "- SpriteAtlases_NGUI (previously called SpriteAtlases)\n- SpriteCollections_TK2D (previously called SpriteCollections)\n- Sprites_NGUI, sprites used for interfaces and menus (previously called Textures)\n- Sprites_TK2D, sprites used for the game itself-environment, buildings, etc (previously called Sprites)", "title": "These 4 folders are renamed in the Pro and Complete kits" } [/block] For starter kit owners who haven't upgraded to the Pro or Complete kits, the folder names below are the new ones. You will see the previous names above in the note. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FVZsQo73LC-o%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVZsQo73LC-o%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FVZsQo73LC-o%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=VZsQo73LC-o&feature=youtu.be", "title": "Replace Buildings - Tutorial #3", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/VZsQo73LC-o/hqdefault.jpg" } [/block] [block:callout] { "type": "warning", "body": "Animated buildings are discussed [here.](https://www.citybuildingkit.com/documentation/v1.0/docs/replace-animated-buildings.html)", "title": "What about animated buildings?" } [/block] [block:api-header] { "type": "basic", "title": "1. Adding your own building images" } [/block] It's as easy as a-b-c: **a.** Go to the folder -> **Sprites_TK2D.** **b.** Create a new folder, for example: **BuildingsNew.** **c.** Add your own building images inside the new folder. **Size Range:** Width 170-300px Height 150-390px These sizes are rather large but buildings are usually very big graphics in contrast to other sprites so this range is a good guide. The background for these images are transparent. **Pssst! Here's a TIP:** Using similar image sizes will make things easier, but it's not mandatory - you can scale everything down, as long as the graphics quality remains reasonable on the target platform. The existing images of the buildings used for the kit are inside -> **Sprites_TK2D/Buildings**, as the following image will show you: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/zY9KUW2oRM2U8JbPgSLi", "04_01_building_sprites.jpg", "1000", "562", "#69ab4a", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "2. Creating the Atlas(Sprite Collection) for your added images" } [/block] **a.** Go to the folder **SpriteCollections_TK2D** & create a **New folder**, for example: **BuildingsNew** *//At the top of the project browser:* **b.** Select **"Create">tk2d>Sprite Collection** *//Refer to the following image:* [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/JiVQLTgWRoCtf2qTZc4o", "04_03_create_building_sprite_collection.jpg", "1000", "562", "#6daf4d", "" ] } ] } [/block] **c.** Save it inside the **SpriteCollections_TK2D>BuildingsNew** folder you just created, as for example: **BuildingsNewSpriteCol** (which is the name of the Sprite Collection) **d.** Now select the new sprite collection you just created and under the Inspector section, you will see a button called "**Open Editor**". **Click it!** [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/KrEM6OsSjGR5Ndn70q2c", "04_02_building_sprite_collection.jpg", "1000", "562", "#983f2d", "" ] } ] } [/block] **e.** Finally, keeping this editor open, navigate back to the folder where you added your building images(In **Step 1**), select them all and drag them in to the **Sprite Collection Editor.** **f.** Hit the "**Commit**" button and you're good to go :) You've created your **atlas**! *//The "Commit" button is located at the top right corner of the editor window.* **HINT:** Want to see the sprite collection we're currently using for the kit? 1. Go to SpriteCollections_TK2D/Buildings 2. Select the Sprite Collection called Buildings and click "Open Editor" under the inspector window. You may use collections like this available throughout the kit to analyze our prefabs and other components so delete them later(Perhaps when you're a pro at this!). [block:api-header] { "type": "basic", "title": "3. Creating each building's separate Prefab" } [/block] **Short Overview:** This step is going to be a bit long but if you do it once, it won't seem so big. Prefabs are an easy way to instantiate gameobjects preset with scripts, textures, animations, etc. Useful for things like enemy generation or even buildings! The **best way** to create a prefab for each building image you imported in **Step 2** is to use one of our prefabs. Trust us, this makes life a lot simpler for you! **The idea is to drag in our prefab and change some specific things on the inspector window to turn it in to one of your own building prefabs.** You'll need to do this for each building sprite but again, **it gets easier with practice. :)** **Simply follow along:** **a.** Go to **Prefabs/Buildings**, Select a building, and drag it in to the scene. *//**IMPORTANT NOTE:** Drag in one of the **STATIC** buildings if you are trying to make a prefab for your static image. If you are attempting to place your animated building, we shall discuss this* [here](https://www.citybuildingkit.com/documentation/v1.0/docs/replace-animated-buildings.html) :) *For now, make sure you drag in a static prefab(Academy and Toolhouse are not static but animated)* **For this example, we're using the barrel prefab, but any static prefab will do:** [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/k8hx22iNR4Ku16RkpLP6", "Untitled.png", "1919", "1037", "#73af35", "" ] } ] } [/block] **It is a good idea to position the prefab at position (0, 0, 0) while setting up your own building prefab in order to make sure it falls properly on the underlying grid.** *//We'll also show details in this step to adjust the button and sprite position properly.* **b. Select** the prefab you just dragged in->**Go to GameObject**->Select **Break Prefab Instance** *//Breaks the instantiation to the kit prefab. Now it's ready to be turned in to your own! //Image guide:* [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/JWPYjO1gSaS07XVx5Kdg", "Untitled.png", "1920", "1080", "#72ab37", "" ] } ] } [/block] **c.** Change the following names just as the image **below** shows: *//In this example, we'll use the name **Treehouse**. It needs to be changed in all 5 of these places. For the Tag, create a new tag of the same name and just change it.* *//Additionally in the child object "Sprites", you will change the children names from Barrelb and Barrelt to your own in the same format, for example: **Treehouseb** and **Treehouset**. Here b stands for bottom and t stands for top. They define the **Cutoff Region** for when the player is in the background(behind the building) and foreground(front of the building) so that they appear in proper layer/perspective. Leave "Shadow" as it is.* [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/pV0SwESSYGl3yCPllY9A", "Untitled.png", "1920", "1040", "#73af35", "" ] } ] } [/block] **d.** Now all that's left to do is to change the sprites in 3 places: **Treehouseb** **Treehouset** **Shadow** You will be updating these three with the same sprite of the building image you intend to use. The image will be changed through the **Sprite Collection** you created in **Step 2**. **Here's how:** Select the child object, we'll start with **Treehouseb**. ALL you need to do is change the **Collection** under the **Tk 2d Clipped Sprite Script** in the inspector to the **Sprite Collection** you made in **Step 2**. Then just beneath **Collection**, you may select the **Sprite** from your Atlas. This will show a list of all the images you dragged in to the collection/atlas in **Step 2**. Repeat this for the other two child objects: **Treehouset** & **Shadow** Refrain from touching any other settings as it will probably show errors. The entire prefab is preset so that it can be updated with a new building image. Though you may need to rotate/change x/y values of the shadow in order to make it appear properly cast off the building. Use one of the existing prefab shadow direction as guide to ensure all of your building's shadow are facing the same way. We don't want to have two suns now do we! [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/8QKkfxd7S6KkFyzR1y0A", "Untitled.png", "1920", "1038", "", "" ] } ] } [/block] In the image above, only the bottom half was changed so it looks weird. Here is one with all 3 child objects changed to the specific sprite from collections. [block:callout] { "type": "info", "body": "**Note:** It's all automated, even the **Shadow** will be applied from the exact same sprite image using a little manipulation and black tint. All you need to do is follow the steps and just replace the sprites for all 3 :) and leave the rest to us!", "title": "The shadow is automatic" } [/block] [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/LsIQGAZLTZO8aWskBBT4", "Untitled.png", 1920, 1036, "", "" ] } ] } [/block] But you will notice in the above image, when I select the child object **Button**, the size of the new building image(which is gigantic in comparison to the tiny barrel) is far too big. Notice that on the barrel prefab, the button's rectangle just touches the outer corner edges. **This is quite important as this Button child is responsible for "Click/Tap" area for the players to select the building.** There is **no need** to change the size of your sprite image. Simply **resize** the button's rectangle so that it just touches the **corner edges**, like so: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Va5x1AqtRQWSLkhEGrdR", "Untitled.png", "1920", "1024", "#3c6955", "" ] } ] } [/block] **Turn on** the **Mesh Renderer** as shown on the **Button** gameobject and it will be visible on the **Scene view**. Then you want to align the corners of the button pad (the white bordered rectangle) in proper **perspective** to your building's **base**. Once placed properly, **turn off** the **Mesh Renderer** for the **Button** gameobject. Now the button area is properly optimized for the giant building! One more thing to note is, here we used a building that's far too oversized and it's best to stick to the range provided in step 1 since the underlying grass prefab for the grid collision has a max dimension of 4x4 tiles. Lets assume the building is 4x4. For a building of this size, players may not appear properly in the background/foreground if the cutoff is not at the right region (which varies based on the size of the building). Manually adjust this if the preset values do not work, **check on** the **Edit Region in Scene** box on either **Treehouseb** or **Treehouset**. Then adjust the rectangle of the cutoff region between the bottom and top half with respect to the height of the player characters imagining that they are standing on right or left corner of your image. This will be the accurate cutoff point for them to appear behind the building when in the **background **and in front of the building when in the **foreground**. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/p6QH91qSwyejHcI6HzPJ", "Untitled.png", "1920", "1020", "", "" ] } ] } [/block] **Final Step:** To turn the **GameObject** you just created back in to a **Prefab** to use for your game: **a.** Go back to the folder **Prefabs/Buildings** **b.** Right click>Go to **Create**>Select **Prefab** **c.** Now just **Drag & Drop** the **GameObject** you just created in to the **Prefab** file and rename it. In our case it's **Treehouse**. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/CdiAtjRpm4panD7oWUcQ", "Untitled.png", "1920", "1036", "", "" ] } ] } [/block] Now you may **drag** this **Prefab** you just created from the **Prefab folder** in to any scene and your building will begin working immediately! [block:api-header] { "type": "basic", "title": "Reference: Each building has 4 components" } [/block] Here's a small reference of some of the things discussed in **Step 3**: [block:parameters] { "data": { "3-0": "BuildingSelector.cs", "3-1": "a script that holds variables", "2-0": "TK2D button", "2-1": "allows you to reselect the building", "1-0": "Namet- (Top clipped sprite)", "1-1": "*see above*", "0-0": "Nameb (Base clipped sprite)", "0-1": "the 2 clipped sprites will be on different z layers, to allow characters to appear in foreground/background of the building; a base collider will be necessary so they never step on the \"edge\" between the sprites", "h-0": "Compoment", "h-1": "Description" }, "cols": 2, "rows": 4 } [/block] [block:api-header] { "type": "basic", "title": "4. Edit the BuildingCreator.cs and BuildingSelector.cs Scripts" } [/block] The new prefab must end up in the **BuildingPrefabs array** in **BuildingCreator** inside **Game manager**, where it will be processed by tag. Like so: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/3k7K1JqTasXFeAVLA5zg", "2.png", 1924, 1056, "", "" ] } ] } [/block] Additionally do the same for **Game Manager>SaveLoadMap**. Inside the **SaveLoadMap.cs** script, there are 2 case statements for each building that you replace so be sure to change the name under these case statements to the one used for the **prefab** being replaced as well. Hit **Ctrl+F** to find the case statements! Similar case statements exist in the**SaveLoadBattle.cs** script so make sure to change those string values as well. Further modifications are necessary for the BuildingCreator and BuildingSelector to process the new tags correctly which are discussed below. Both of these scripts are located in the Scripts/Buildings folder. Now that you have a prefab, there are four places in these two scripts you need to add a case, or additional variable for. If you've replaced an existing building, then just replace one of the cases and variables. If you're adding a new building, then you will want to add a new case and variable. In the BuildingCreator.cs script, first increment the following variable by the total number of new buildings you are adding. It doesn't need to be changed if you are replacing an existing building. **private const int noOfBuildings = 11;** *//number of existing buildings ingame* It should be on the first line. Then go to the inspector and change the following values to the exact same as the one for noOfBuildings. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/pvo0UgaNQmK3B0c0nemh", "error_label.png", "1924", "1056", "#73ad31", "" ] } ] } [/block] Do the same thing for transdata: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/ZGijK0j7QFuqYj6P4BVp", "error_transdata.png", "1924", "1056", "#70ad34", "" ] } ] } [/block] Then look for: [block:code] { "codes": [ { "code": "// Receive a NGUI button message to build\npublic void OnBuild0()\t { \n \t\t//when a building construction menu button is pressed\n \tcurrentSelection=0; \t\n \tVerifyConditions(\"Academy\"); \n}\n", "language": "csharp" } ] } [/block] **Note:** This is the OnBuild function which is invoked within the Menu UI whenever a building is purchased so incase you are adding a new building, make sure to change the OnBuild pointer for the button. Each building Menu Ui is stored inside **UIAnchor>Anchor - Center>Shop>02Buildings>Page0(or Page1)> NameOfBuilding(eg:00Academy)>Button**. Here's an image guide: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/tZheGdNpQEK730x6olfT", "build pointer.png", "1920", "1034", "#74af33", "" ] } ] } [/block] Scroll down to find the **On Click/Tap** drop down menu and you will find the method. In case you add a new building by duplicating an existing one, be sure to change this otherwise the new building will instantiate the same building as the one you duplicated it from. You have been warned! Further down in the same script you will also want to replace: [block:code] { "codes": [ { "code": "// Receive a Tk2d button message to select an existing building\n// The button is in the middle of each building prefab and is invisible \n\tpublic void OnReselect0(){\n //when a building is reselected\n currentSelection = 0; \t\t\n StartCoroutine(ReselectObject(\"Academy\"));\n }", "language": "csharp" } ] } [/block] And lastly further down in BuildingCreator.cs, add a new case with your building prefab name. This is where the prefab is connected with the scripting. If you're replacing an existing building then be sure to change the grass prefab dimension as well. For example: *GameObject G**4**xAcademy = (GameObject)Instantiate(Grass**4**x, new Vector3(0,0,grassZ), Quaternion.identity);* [block:code] { "codes": [ { "code": "//instantiates the building + appropriate underlying grass patch\nswitch (currentSelection)\t\t\t\n\t\t{\n\t\tcase 0:\n\t\t\tGameObject Academy = (GameObject)Instantiate(BuildingPrefabs[currentSelection], new Vector3(0,0,buildingZ), Quaternion.identity);\t\t\t\n\t\t\tGameObject G4xAcademy = (GameObject)Instantiate(Grass4x, new Vector3(0,0,grassZ), Quaternion.identity);\t\n\t\t\tpivotCorrection = true;\n\t\t\tSelectObject(\"Academy\");\n\t\t\tbreak;\t", "language": "csharp" } ] } [/block] Also just beneath this line is: **pivotCorrection = true;** This line is important. It should be placed inside the case statements under **ONLY** even numbered grass colliders being instantiated. For example: Grass4x and Grass2x. This line isn't required for odd numbered grass instantiations like Grass3x. Basically it makes sure that the building falls properly on the underlying grid. **BuildingSelector.cs** Next, also add your building number and case to in BuildingSelector.cs where it mentions switch (buildingType){ [block:code] { "codes": [ { "code": "// Sends the reselect commands to BuildingCreator\n\tswitch (buildingType){\n\t\tcase \"Academy\":\n\t\t((BuildingCreator)buildingCreator).OnReselect0();\n\t\tbreak;", "language": "csharp" } ] } [/block] **Here's an extra Note about gold/mana auto generation:** If you want your building prefab to automatically generate gold/mana after being created, then simply **go to the ConstructionSelector.cs script and find the following lines:** [block:code] { "codes": [ { "code": "if(((UISlider)ProgressBar.GetComponent(\"UISlider\")).value == 1)\t\t\t\t//building finished - the progress bar has reached 1\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t{\n\t\t\t\t((SoundFX)soundFX).BuildingFinished();\n\n\t\t\t\tif(!battleMap)\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t//if this building is not finished on a battle map\n\t\t\t\t{\n\t\t\t\t\t((Stats)stats).occupiedDobbitNo--;\t\t\t\t\t\t\t\t\t//the dobbit previously assigned becomes available\n\t\t\t\t\t((Stats)stats).UpdateUI();\n\t\t\t\t\n\t\t\t\t\tif(buildingType==\"Barrel\")\t\t\t\t\t\t\t\t\t\t\t//increases total storage in Stats\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t{\n\t\t\t\t\t\t((Stats)stats).maxStorageMana += storageIncrease;\n\t\t\t\t\t}\n\t\t\t\t\telse if(buildingType==\"Forge\")\n\t\t\t\t\t{\n\t\t\t\t\t\t((Stats)stats).productionBuildings[0]++;\n\t\t\t\t\t\t((Stats)stats).maxStorageGold += storageIncrease;\n\t\t\t\t\t}\n\t\t\t\t\telse if(buildingType==\"Generator\")\n\t\t\t\t\t{\n\t\t\t\t\t\t((Stats)stats).productionBuildings[1]++;\n\t\t\t\t\t\t((Stats)stats).maxStorageMana += storageIncrease;\n\t\t\t\t\t}\n\t\t\t\t\telse if(buildingType==\"Vault\")\n\t\t\t\t\t{\n\t\t\t\t\t\t((Stats)stats).maxStorageGold += storageIncrease;\n\t\t\t\t\t}\n\t\t\t\t\t((Stats)stats).UpdateUI();\n\t\t\t\t}", "language": "csharp" } ] } [/block] Here just add a new **else if** condition with the name of your building and the currency you'd like it to produce. You could copy the lines of code from within the respective **if statement** for a particular currency. Remember that this value is drawn from the **Buildings.xml** file. [block:api-header] { "type": "basic", "title": "5. Building Collision" } [/block] Buildings do not have any connection with colliders or target/obstacle cubes, since these are embeded in the underlying grass patches – they are paired by building index when they are created. There are two types of patches – BattleMap and OwnCity. The grass patches have: **1. AITargets cubes** – the path finder marks them as possible destinations for units when attacking the building from close range. **2. AIObstacles cubes** – the path finder marks them as obstacles, so that units walk around buildings/ruins, and not over/on top of them. **3. IsoCollider** – used in own city when moving buildings, so they signal when such a collider overlaps another, so you can't place buildings on top of each other. You can reactivate the mesh renderers on each of these elements to see them. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/sWQ49IoRoq0saccNW5rq", "2.png", "1924", "1056", "", "" ] } ] } [/block] There are two types of grass, because in own town we do not have pathfinder and units – they are used only on the battle map. If we had any unit activity in HomeTown, the pathfinder/new grass/coordinator AI would have been included here as well. [block:api-header] { "type": "basic", "title": "6. Buildings Menu" } [/block] You will finally need to replace/add the images of the buildings on the UI Menu. Go [here](https://www.citybuildingkit.com/documentation/v1.0/docs/units-menu.html) and find out how. The documentation is for Units but the information to replacing buildings menu is also there as both are generic. [block:api-header] { "type": "basic", "title": "2DTK Tutorial Video" } [/block] To learn more about sprites with 2DTK, watch the video 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:api-header] { "type": "basic", "title": "Continue with the XML Documentation" } [/block] Open the Buildings.xml documentation page by clicking [here](https://www.citybuildingkit.com/documentation/v1.0/docs/buildingxml.html) to learn how to set the data for each building you've just added/replaced above.