{"__v":28,"_id":"548af4b41bd6c40b00f777fc","category":{"__v":2,"_id":"550945111c38c50d006118ad","project":"543b9b0065bf840e00b473d5","version":"543b9b0065bf840e00b473d8","pages":["550956df24d561190049ddb9","550958ad1c38c50d006118e5"],"reference":false,"createdAt":"2015-03-18T09:27:45.529Z","from_sync":false,"order":1,"slug":"terrain","title":"Terrain"},"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":"2014-12-12T13:59:16.818Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"basic_auth":false,"results":{"codes":[]},"settings":"","try":true,"auth":"required","params":[],"url":""},"order":1,"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%2F-5X6p4F6gW8%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D-5X6p4F6gW8%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F-5X6p4F6gW8%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=-5X6p4F6gW8&feature=youtu.be\",\n  \"title\": \"Edit Terrain - Tutorial #6\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/-5X6p4F6gW8/hqdefault.jpg\"\n}\n[/block]\n**You can replace every part of the city builder kit, including the terrain.\n**\n\nInstructions are included below on how to replace the terrain with your own. If you want to build your game quicker, skip this section of the documentation as a sample beach island terrain is pre-configured with every kit.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/kMwp1SritEyEq758vewu\",\n        \"app-unity-template-terrain-gameboard-mockup.png\",\n        \"800\",\n        \"602\",\n        \"#6ea532\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**Don't have your own art?** No problem, the Complete version of our kit comes with thousands of dollars worth of royalty-free stock illustration assets, 3D source files, and PSD source files included for free. [Get the Complete Kit with these assets](http://citybuilderkit.com/#pricing)\n\nUsing the included assets, you can customize your own terrain in any 2D editor, for example:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/NgDdkbJ3TCaePiYsIixg\",\n        \"mobile-app-isometric-unity-game-template.png\",\n        \"750\",\n        \"374\",\n        \"#3a89c7\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Terrain Objects\"\n}\n[/block]\nAlthough you can replace the terrain with your own tiles and objects, if you wish to use our tile grid to speed up your development there are 29 different terrain objects. The sample terrain map included with the City Kit only uses a few of these. The Complete Kit includes the source file assets for each of the 29 different terrain objects so you can build your own. [Get the Complete Kit](http://citybuilderkit.com/#pricing)\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/B7bXamviSWmRZWWhZ8lp\",\n        \"unity-isometric-game-template-objects.jpg\",\n        \"782\",\n        \"495\",\n        \"#795140\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Terrain Tiles\"\n}\n[/block]\nIn **Sprites_TK2D/Environment** you will find the isometric sprites currently used for the environment. Ours have the size 256x181px.\n\nIf you've purchased the Complete Kit you will also get the original source files for terrain objects so you can build your own custom tile sheets.  [Get the Complete Kit](http://citybuilderkit.com/#pricing)\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/5FmmwKXMQ4u1bXLrTTz2\",\n        \"unity-isometric-mobile-app-template-terrain.png\",\n        \"784\",\n        \"323\",\n        \"#2e5d60\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Replacing the Terrain Tile Grid\"\n}\n[/block]\n1) In **SpriteCollections/Environment** you will find the sprite collection **TMSimpleSprCol**. Create another collection, drag in the tiles you will use for your environment into the **Sprite Collection** editor, select each tile on the list individually and set **Render Mesh** of each one to **Diced** and once they are all changed, click **Commit**!\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/DZteNbu0RSyEGgxbS9WL\",\n        \"06_01_tilemap_sprite_collection-1.jpg\",\n        \"1000\",\n        \"562\",\n        \"#68ab49\",\n        \"\"\n      ],\n      \"caption\": \"Step 1 These data(atlas0, material) are autogenerated so do not worry.\"\n    }\n  ]\n}\n[/block]\n2) Deactivate the existing **TileMapSimple** and **RenderData**.\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Step 2\",\n      \"image\": [\n        \"https://www.filepicker.io/api/file/IUxbgRHkSUm80vixzhe7\",\n        \"06_02_deactivate_tile_map.jpg\",\n        \"1000\",\n        \"562\",\n        \"#8a4a36\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n3) Create a new tilemap.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/x7m4MbHvSOya93DYzsYe\",\n        \"06_03_create_tile_map.jpg\",\n        \"1000\",\n        \"562\",\n        \"#954634\",\n        \"\"\n      ],\n      \"caption\": \"Step 3 (Unity 4)\"\n    }\n  ]\n}\n[/block]\nIf you're on **Unity 5**, it may look a little something like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/JrI2VYTTM6DiQa1WeSP5\",\n        \"13.mp4_snapshot_01.31_[2015.07.04_13.27.08].png\",\n        \"1280\",\n        \"720\",\n        \"#705051\",\n        \"\"\n      ],\n      \"caption\": \"Step 3 (Unity 5)\"\n    }\n  ]\n}\n[/block]\nIf you do not see those options, there is an easy way to make a **TileMap**:\n**a.** Under **Hierarchy**, right click and select **Create Empty** to create an empty GameObject.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/X1yEk1kRYuGznNjbiRkw\",\n        \"l1.png\",\n        \"302\",\n        \"845\",\n        \"#6e1323\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**b.** Rename it to **TileMap** for recognition and under **Inspector** click **Add Component**, search for a script called **TileMap** and add it to the gameObject.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/BT1osz97QHKtct1ilcKG\",\n        \"l2.png\",\n        \"417\",\n        \"551\",\n        \"#325182\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**c.** Now within the script select the **Sprite Collection** (the one with your tiles in it) from the drop down list which you saved inside **SpriteCollections_TK2D>Environment**. Then click on the two **Create** buttons to generate the **Tile Map Data** and **Editor Data** and save them both next to the **Sprite Collection** inside the **SpriteCollections__TK2D>Environment** folder to keep things organized.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/TpfouSCZTYe0gEPNoBQD\",\n        \"l3.png\",\n        \"413\",\n        \"479\",\n        \"#c73b0c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n4) Attach the components of your environment sprite collection\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/0vP39YfZSh2UPhtmdhfc\",\n        \"06_04_create_tile_map.jpg\",\n        \"1000\",\n        \"562\",\n        \"#884736\",\n        \"\"\n      ],\n      \"caption\": \"Step 4\"\n    }\n  ]\n}\n[/block]\n5) Selecting the **TileMap** you created, you will see an **Edit** button under the **TileMap** script. Click it and go into **Settings** to change the settings of the tile maps. This is also where you can **Paint** the tile maps on the **Scene view** Adjust the map properties, tile properties, and move the map so that the center fits in the middle of the screen by adjusting the **Position Transform** under the **Inspector** window.\nThe following settings are used in the Kit if you will study the existing **TileMap** which you deactivated.\n**Dimensions:**\nWidth 70\nHeight 140\nPartitionSizeX 32\nPartitionSizeY 32\n\n**Layers:**\nUse this to create new layers for the map. Scroll down to learn more about the layers used in the kit.\n\n**Tile Properties:**\nTile Type: Isometric\nSort Method: Bottom Left\nOrigin: X -128 Y -90.5 Z 0\nSize X 256 Y 90.5 Z 0\n\nTo **paint** simply select the paint panel under the TileMap script and select the tile you wish to use for painting. The scene view will have tools on the upper left corner to paint and erase. Like so:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/lv6gPACfRNodPs49r0BN\",\n        \"l4.png\",\n        \"1616\",\n        \"954\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWhen you are done with all of the changes, click **Commit**.\n\n6) Go to BuildingCreator.cs and specify the width and the height of the tiles that you use. In **Sprites_TK2D/Environment** you will find the isometric sprites currently used for the environment have the size 256x181px.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"//necessary to adjust the middle screen \\\"target\\\" to the exact grid X position\\nprivate int gridx = 256;\\n//necessary to adjust the middle screen \\\"target\\\" to the exact grid Y position\\nprivate int gridy = 181;\",\n      \"language\": \"csharp\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/6pd9UKWJTW2AQMqJObyx\",\n        \"06_05_tile_map_settings.jpg\",\n        \"1000\",\n        \"543\",\n        \"#91413e\",\n        \"\"\n      ],\n      \"caption\": \"Step 6\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Replace the new terrain you created in the Battle Map\"\n}\n[/block]\nIn the home-town map, create an empty prefab and drag the entire Environment game object into it – we named it MoveMap. Notice that the position of the Environment object is 0.0.0\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/sPrayF6nRaqi27f1MGkg\",\n        \"1.png\",\n        \"1924\",\n        \"1056\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nOpen the battle map – Game01, disable the Environment folder, drag the new MoveMap prefab into the scene and position it at 0.0.0. At first the tilemap will not be visible.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/HcfHF3ST0yMITKXI6lRA\",\n        \"1.png\",\n        \"1924\",\n        \"1056\",\n        \"#6c7b3b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nGo to TileMapSimple, press edit, then commit.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/jgMJx1uR6NWYQLHoWuhw\",\n        \"1.png\",\n        \"1924\",\n        \"1056\",\n        \"#9aa329\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThen the following should magically appear:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/1c3RbQ0RPqAS5uaqJsE6\",\n        \"1.png\",\n        \"1924\",\n        \"1056\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nFinally make sure that you change all prefab references(in case you replaced any of the building prefabs with your own) in the battle map scene on scripts like **BuildingCreator.cs**. This is heavily discussed in the doc for replacing buildings.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2DTK Tile map Tutorial\"\n}\n[/block]\nTo find out more about tile maps with 2DTK, watch this video tutorial or read the [Tile Map Tutorial by Unikron](http://www.unikronsoftware.com/2dtoolkit/doc/2.4/tilemap/tutorial.html) \n[block:html]\n{\n  \"html\": \"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/jI3jVnXTiIg?rel=0&amp;showinfo=0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"A Tip about Object Layers\"\n}\n[/block]\nThe terrain and buildings/vegetation is built in several layers, to accommodate moving units, so they appear properly in front or behind objects. Here's an example of the layers\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/Pjyrtsy7QuGF7F14LKUc\",\n        \"layers-city-building-kit.jpg\",\n        \"877\",\n        \"516\",\n        \"#3579c4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**1. Base layer **- ocean, sand, grass **(very back layer)**\",\n    \"h-0\": \"Layers (back to front)\",\n    \"1-0\": \"**2. Square patches of grass**, on which the buildings reside\",\n    \"2-0\": \"**3. Tall vegetation/buildings/rocks are built from 2 layers** \\n\\n- top (foreground) \\n- base (background) bases will also have colliders, to prevent units from getting too close and intersecting the sprite 'base edges'\",\n    \"3-0\": \"**4. Sea units** - although in front of the ocean layer, they will carry a 'patch' of water with them while moving\",\n    \"4-0\": \"**5. Ground units** - in front of building bases, but in the back of building tops, to be able to go 'behind' them\",\n    \"5-0\": \"**6. Air units **- the red gargoyle - while in the air, they appear in foreground on top of everything else **(very front layer)**\"\n  },\n  \"cols\": 1,\n  \"rows\": 6\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/K3vXEzZWSTaWl9ELzo5b\",\n        \"layers-city-building-kit 2.jpg\",\n        \"877\",\n        \"516\",\n        \"#19466d\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"terrain","type":"basic","title":"Edit Terrain"}

Edit Terrain


[block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F-5X6p4F6gW8%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D-5X6p4F6gW8%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F-5X6p4F6gW8%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=-5X6p4F6gW8&feature=youtu.be", "title": "Edit Terrain - Tutorial #6", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/-5X6p4F6gW8/hqdefault.jpg" } [/block] **You can replace every part of the city builder kit, including the terrain. ** Instructions are included below on how to replace the terrain with your own. If you want to build your game quicker, skip this section of the documentation as a sample beach island terrain is pre-configured with every kit. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/kMwp1SritEyEq758vewu", "app-unity-template-terrain-gameboard-mockup.png", "800", "602", "#6ea532", "" ] } ] } [/block] **Don't have your own art?** No problem, the Complete version of our kit comes with thousands of dollars worth of royalty-free stock illustration assets, 3D source files, and PSD source files included for free. [Get the Complete Kit with these assets](http://citybuilderkit.com/#pricing) Using the included assets, you can customize your own terrain in any 2D editor, for example: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/NgDdkbJ3TCaePiYsIixg", "mobile-app-isometric-unity-game-template.png", "750", "374", "#3a89c7", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Terrain Objects" } [/block] Although you can replace the terrain with your own tiles and objects, if you wish to use our tile grid to speed up your development there are 29 different terrain objects. The sample terrain map included with the City Kit only uses a few of these. The Complete Kit includes the source file assets for each of the 29 different terrain objects so you can build your own. [Get the Complete Kit](http://citybuilderkit.com/#pricing) [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/B7bXamviSWmRZWWhZ8lp", "unity-isometric-game-template-objects.jpg", "782", "495", "#795140", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Terrain Tiles" } [/block] In **Sprites_TK2D/Environment** you will find the isometric sprites currently used for the environment. Ours have the size 256x181px. If you've purchased the Complete Kit you will also get the original source files for terrain objects so you can build your own custom tile sheets. [Get the Complete Kit](http://citybuilderkit.com/#pricing) [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/5FmmwKXMQ4u1bXLrTTz2", "unity-isometric-mobile-app-template-terrain.png", "784", "323", "#2e5d60", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Replacing the Terrain Tile Grid" } [/block] 1) In **SpriteCollections/Environment** you will find the sprite collection **TMSimpleSprCol**. Create another collection, drag in the tiles you will use for your environment into the **Sprite Collection** editor, select each tile on the list individually and set **Render Mesh** of each one to **Diced** and once they are all changed, click **Commit**! [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/DZteNbu0RSyEGgxbS9WL", "06_01_tilemap_sprite_collection-1.jpg", "1000", "562", "#68ab49", "" ], "caption": "Step 1 These data(atlas0, material) are autogenerated so do not worry." } ] } [/block] 2) Deactivate the existing **TileMapSimple** and **RenderData**. [block:image] { "images": [ { "caption": "Step 2", "image": [ "https://www.filepicker.io/api/file/IUxbgRHkSUm80vixzhe7", "06_02_deactivate_tile_map.jpg", "1000", "562", "#8a4a36", "" ] } ] } [/block] 3) Create a new tilemap. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/x7m4MbHvSOya93DYzsYe", "06_03_create_tile_map.jpg", "1000", "562", "#954634", "" ], "caption": "Step 3 (Unity 4)" } ] } [/block] If you're on **Unity 5**, it may look a little something like this: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/JrI2VYTTM6DiQa1WeSP5", "13.mp4_snapshot_01.31_[2015.07.04_13.27.08].png", "1280", "720", "#705051", "" ], "caption": "Step 3 (Unity 5)" } ] } [/block] If you do not see those options, there is an easy way to make a **TileMap**: **a.** Under **Hierarchy**, right click and select **Create Empty** to create an empty GameObject. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/X1yEk1kRYuGznNjbiRkw", "l1.png", "302", "845", "#6e1323", "" ] } ] } [/block] **b.** Rename it to **TileMap** for recognition and under **Inspector** click **Add Component**, search for a script called **TileMap** and add it to the gameObject. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/BT1osz97QHKtct1ilcKG", "l2.png", "417", "551", "#325182", "" ] } ] } [/block] **c.** Now within the script select the **Sprite Collection** (the one with your tiles in it) from the drop down list which you saved inside **SpriteCollections_TK2D>Environment**. Then click on the two **Create** buttons to generate the **Tile Map Data** and **Editor Data** and save them both next to the **Sprite Collection** inside the **SpriteCollections__TK2D>Environment** folder to keep things organized. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/TpfouSCZTYe0gEPNoBQD", "l3.png", "413", "479", "#c73b0c", "" ] } ] } [/block] 4) Attach the components of your environment sprite collection [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/0vP39YfZSh2UPhtmdhfc", "06_04_create_tile_map.jpg", "1000", "562", "#884736", "" ], "caption": "Step 4" } ] } [/block] 5) Selecting the **TileMap** you created, you will see an **Edit** button under the **TileMap** script. Click it and go into **Settings** to change the settings of the tile maps. This is also where you can **Paint** the tile maps on the **Scene view** Adjust the map properties, tile properties, and move the map so that the center fits in the middle of the screen by adjusting the **Position Transform** under the **Inspector** window. The following settings are used in the Kit if you will study the existing **TileMap** which you deactivated. **Dimensions:** Width 70 Height 140 PartitionSizeX 32 PartitionSizeY 32 **Layers:** Use this to create new layers for the map. Scroll down to learn more about the layers used in the kit. **Tile Properties:** Tile Type: Isometric Sort Method: Bottom Left Origin: X -128 Y -90.5 Z 0 Size X 256 Y 90.5 Z 0 To **paint** simply select the paint panel under the TileMap script and select the tile you wish to use for painting. The scene view will have tools on the upper left corner to paint and erase. Like so: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/lv6gPACfRNodPs49r0BN", "l4.png", "1616", "954", "", "" ] } ] } [/block] When you are done with all of the changes, click **Commit**. 6) Go to BuildingCreator.cs and specify the width and the height of the tiles that you use. In **Sprites_TK2D/Environment** you will find the isometric sprites currently used for the environment have the size 256x181px. [block:code] { "codes": [ { "code": "//necessary to adjust the middle screen \"target\" to the exact grid X position\nprivate int gridx = 256;\n//necessary to adjust the middle screen \"target\" to the exact grid Y position\nprivate int gridy = 181;", "language": "csharp" } ] } [/block] [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/6pd9UKWJTW2AQMqJObyx", "06_05_tile_map_settings.jpg", "1000", "543", "#91413e", "" ], "caption": "Step 6" } ] } [/block] [block:api-header] { "type": "basic", "title": "Replace the new terrain you created in the Battle Map" } [/block] In the home-town map, create an empty prefab and drag the entire Environment game object into it – we named it MoveMap. Notice that the position of the Environment object is 0.0.0 [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/sPrayF6nRaqi27f1MGkg", "1.png", "1924", "1056", "", "" ] } ] } [/block] Open the battle map – Game01, disable the Environment folder, drag the new MoveMap prefab into the scene and position it at 0.0.0. At first the tilemap will not be visible. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/HcfHF3ST0yMITKXI6lRA", "1.png", "1924", "1056", "#6c7b3b", "" ] } ] } [/block] Go to TileMapSimple, press edit, then commit. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/jgMJx1uR6NWYQLHoWuhw", "1.png", "1924", "1056", "#9aa329", "" ] } ] } [/block] Then the following should magically appear: [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/1c3RbQ0RPqAS5uaqJsE6", "1.png", "1924", "1056", "", "" ] } ] } [/block] Finally make sure that you change all prefab references(in case you replaced any of the building prefabs with your own) in the battle map scene on scripts like **BuildingCreator.cs**. This is heavily discussed in the doc for replacing buildings. [block:api-header] { "type": "basic", "title": "2DTK Tile map Tutorial" } [/block] To find out more about tile maps with 2DTK, watch this video tutorial or read the [Tile Map Tutorial by Unikron](http://www.unikronsoftware.com/2dtoolkit/doc/2.4/tilemap/tutorial.html) [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/jI3jVnXTiIg?rel=0&amp;showinfo=0\" frameborder=\"0\" allowfullscreen></iframe>" } [/block] [block:api-header] { "type": "basic", "title": "A Tip about Object Layers" } [/block] The terrain and buildings/vegetation is built in several layers, to accommodate moving units, so they appear properly in front or behind objects. Here's an example of the layers [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Pjyrtsy7QuGF7F14LKUc", "layers-city-building-kit.jpg", "877", "516", "#3579c4", "" ] } ] } [/block] [block:parameters] { "data": { "0-0": "**1. Base layer **- ocean, sand, grass **(very back layer)**", "h-0": "Layers (back to front)", "1-0": "**2. Square patches of grass**, on which the buildings reside", "2-0": "**3. Tall vegetation/buildings/rocks are built from 2 layers** \n\n- top (foreground) \n- base (background) bases will also have colliders, to prevent units from getting too close and intersecting the sprite 'base edges'", "3-0": "**4. Sea units** - although in front of the ocean layer, they will carry a 'patch' of water with them while moving", "4-0": "**5. Ground units** - in front of building bases, but in the back of building tops, to be able to go 'behind' them", "5-0": "**6. Air units **- the red gargoyle - while in the air, they appear in foreground on top of everything else **(very front layer)**" }, "cols": 1, "rows": 6 } [/block] [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/K3vXEzZWSTaWl9ELzo5b", "layers-city-building-kit 2.jpg", "877", "516", "#19466d", "" ] } ] } [/block]