<cat>Hammer.Advanced</cat> <title>Tilesets</title> <upload src="aafdb/8d98e8c27189686.png" size="564968" name="tileset.png" />⤶ # What is a Tileset⤶ ⤶ Tilesets allow for the quick replacement of basic geometry for more complex models/geo. The Tiles selected are determined by the characteristics of the tilemesh and through tile properties selected by the user.⤶ ⤶ #Creating a basic tileset⤶ ⤶ ##Step 1:⤶ When creating the vmap file it is important that it ends with **`_tileset`**. This allows the vmap to show up when selecting the tileset in the tilemeshs object properties. ⤶ ##Step 2:⤶ ⤶ ⤶ [//]: # (This is a markdown comment, just so anyone in the future editing " &zwnj; " is a invisible HTML entity its used on this page to add whitespace for easier reading )⤶ ⤶ ⤶ <upload src="aaf9e/8dbdee87e7cec01.png" size="47768" name="image.png" />⤶ ⤶ # What is a Tileset⤶ ⤶ Tilesets allow you to create individual pieces of a larger build and define how they fit together. Using tilesets allows you to work with very simple geometry and let hammer replace it with more the complex version of it. ⤶ &zwnj;⤶ ⤶ ---⤶ ⤶ &zwnj;⤶ ⤶ # Creating a basic tileset⤶ ⤶ ## Step 1 : Create an Empty Map.⤶ Create your map and add **`_tileset`** to the end. This will allow you to search for it easier as well as all other tilesets.⤶ ⤶ For demonstration purposes we will be creating a 512x512 Road network, so we will name it: **`roadnetwork_512_tileset`**⤶ ⤶ ⤶ ##Step 2: Creating an empty tileset⤶ To create a tileset hover over the **Tiles** tab and select the **Create tile set** . <upload src="aafdb/8d98e8cb4f72b64.png" size="55875" name="create tile set.png" /> ⤶ ##Step 3:⤶ Select the tileset in the **Outliner** and rename the tileset in **Object Properties** to **`Base`**.⤶ ⤶ <upload src="aaf9e/8dbdee5af984873.png" size="268770" name="image.png" /> ⤶ After clicking a object should appear in your outliner named _"UnnamedTileSet - Tileset"_.⤶ ⤶ ⤶ ⤶ ## Step 3: Renaming⤶ Tilesets are required to be named **`Base`**.⤶ ⤶ Select the tileset in the outliner or Object Properties and rename it.⤶ <upload src="aafdb/8d98e8d08006226.png" size="9386" name="rename.png" /> ⤶ ##Step 4:⤶ To create a tile first create a mesh, while in **Mesh** ( <key>4</key> ) mode go to the **Tiles** tab and select **Create Single Tile** ( <key>Ctrl</key>+<key>Shift</key>+<key>O</key> ) *`Note: The tile will be created separately in the outliner so it needs to be dragged into the Base-Tileset`*⤶ <upload src="aafdb/8d98e8e93fcd34b.png" size="205531" name="create tile.png" />⤶ ⤶ ##Step 5:⤶ The default width and height of the tile is 256. To change this so it matches the mesh first select the tile then go to the **Object Properties**. From there the **Base Width** and **Base Height** can be adjusted.⤶ <upload src="aafdb/8d98e8f47b1ddb8.png" size="74921" name="tile size.png" /> ⤶ ##Step 6:⤶ After all that you should be able to create a tilemesh from an existing mesh, select the tileset from within **Object Properties** and see your mesh be replaced with tiles from the tileset.⤶ <upload src="aafdb/8d98e915b3835a9.mp4" size="19747868" name="2021-10-13 22-33-53.mp4" />⤶ ⤶ #Tile Object Properties⤶ | Property | Description |⤶ | ------------------------ |-----------------------------------------------------------------------------------------|⤶ | Name | The name of the tile |⤶ | Base Width | Width of the tile |⤶ | Base Height | Height of the tile |⤶ | Use Best Size Match | |⤶ | Minimum Size Scale | The minimum scale at which the tile can be selected |⤶ | Maximum Size Scale | The maximum scale at which the tile can be selected |⤶ | Probability Weight | Determines the chance of the tile being selected from multiple tiles of the same size |⤶ | Display Base Face | Toggle to show the base geometry |⤶ | Align To Axis | |⤶ | Rotation Snapping | |⤶ | Variation Id | |⤶ ⤶ #Tileset Properties⤶ ⤶ ⤶ ## Step 4: Setting up a Tile⤶ ⤶ start off by creating a placeholder mesh, this can be anything and will be deleted once we have our tile object⤶ ⤶ Once you have a mesh down, selected it using the Mesh or Objects tool.⤶ ⤶ Click on _* Tiles -> Create Single Tile*_⤶ ⤶ <upload src="aaf9e/8dbdeeca1c9fb54.png" size="225764" name="image.png" /> ⤶ You should now have a blue outline surrounding this square⤶ ⤶ <upload src="aaf9e/8dbdeece99bacb4.png" size="48432" name="image.png" />⤶ ⤶ The *inside* of this blue outline is your Tile, Every tile four sides: Top, Bottom, Left, Right. The green arrow points to the Top and the red points to the Right.⤶ ⤶ These sides will determine how the tiles are placed on the mesh so keep them in mind when designing your geometry. ⤶ ⤶ &zwnj;⤶ ⤶ **`IMPORTANT STEP:`** Hierarchy is important to tilesets, the tile you just created is not apart of the tileset, drag the tile object in the outliner and drop it on the tileset.⤶ ⤶ it should look like:⤶ <upload src="aaf9e/8dbdeedd29cc066.png" size="2392" name="image.png" />⤶ ⤶ <note> All objects that you want to be apart of your tile need to be a child of tile object in the outliner. It is a very common for hammer to break this parenting, in anycase, you can just drag the objects you want onto the tile in the outliner to fix it. </note>⤶ ⤶ &zwnj;⤶ ⤶ Because we are creating a road network there are 4 types of tiles we need: Straight, Turn, T-Section, Intersection.⤶ ⤶ <upload src="aaf9e/8dbdef024cc8d70.png" size="144916" name="image.png" />⤶ ⤶ Before we start creating these mesh's though we should increase the size of our tiles so we can have wider roads.⤶ ⤶ click on the tile in *Object Mode* and check the Object Properties.⤶ ⤶ We will explain the rest of these later but for now focus on *Base Height* and *Base Width*. These two make up the size of your tile.⤶ ⤶ We will set both Width and Height to 512⤶ ⤶ <upload src="aaf9e/8dbdef340fc85d5.png" size="47304" name="image.png" />⤶ ⤶ Now can create our first road segment, again making sure any meshs we add, we make children of the tile object.⤶ ⤶ <upload src="aaf9e/8dbdef3b7b8dbd3.png" size="501695" name="image.png" />⤶ ⤶ Then we can Repeat these step 3 more times for every other piece of the road⤶ ⤶ <upload src="aaf9e/8dbdef465c0785b.png" size="394472" name="image.png" />⤶ ⤶ ## Setting up the Rules⤶ ⤶ Now that you have your tiles created its time to establish the rules on how the connect.⤶ ⤶ Open up the Object Properties for your Tileset. This is done by double clicking on it in the outliner, or selecting it and pressing <key>ALT</key>+<key>E</key>⤶ ⤶ Once open select the _"Tile Set Properties"_ Tab⤶ ⤶ <upload src="aaf9e/8dbdef538b241f7.png" size="48893" name="image.png" />⤶ ⤶ for the sake of simplicity we wont worry about angles quite yet and instead focus on connectivity⤶ ⤶ Select the _"Add Mesh Property"_ button along the bottom⤶ ⤶ Then choose _"Mesh_edge_connectivity"_⤶ ⤶ <upload src="aaf9e/8dbdef5bc359463.png" size="54164" name="image.png" />⤶ ⤶ for now, leave everything as default and close the object properties window.⤶ ⤶ While in Object Mode, Select one of your tiles ( Not the geometry the tile itself ) You should notice the property we just added to our tileset is now available within the tiles. ⤶ ⤶ <upload src="aaf9e/8dbdef64338d2c8.png" size="29492" name="image.png" />⤶ ⤶ Mesh Edge Connectivity gives us 5 values to choose from:⤶ - open⤶ - closed⤶ - not open⤶ - note closed⤶ - \* \- Match Any⤶ ⤶ ⤶ These are the rules that define how the tile will connect to other tiles, "Open" means that edge of the mesh is open aka nothing is there, "Closed" means that edge of the mesh is closed aka theres another tile connected at that side.⤶ ⤶ Looking at the green and red indicators on the tile assign which sides of the tile should be connected to other tiles ("Closed") or not connected to other tiles ("Open")⤶ ⤶ For our road network example this is how we setup the rules:⤶ ⤶ <upload src="aaf9e/8dbdef8037784de.png" size="45577" name="image.png" />⤶ ⤶ and thats it! Make sure to save, and now we start using it!⤶ ⤶ ## Step 5: Using your Tileset⤶ ⤶ once you have a tileset saved. Open up a new map, this can be whatever you want or an existing map, anything works.⤶ ⤶ Create a plane that is the same size as what you set your base height and width to earlier.⤶ ⤶ We created out tileset to a size of 512x512 so that will be my plane size⤶ ⤶ <upload src="aaf9e/8dbdef8f4022105.png" size="421307" name="image.png" />⤶ ⤶ while in *Mesh Mode* select your plane, then select _Tiles -> Create Tile Mesh_ (or <key>Ctrl</key> + <key>Shift</key> + <key>I</key>)⤶ ⤶ you should notice in your outline your mesh has now become a tilemesh⤶ ⤶ <upload src="aaf9e/8dbdef99bee50e4.png" size="34651" name="image.png" />⤶ ⤶ in the object properties, set the "Tile Set File 0" to the tileset we just created, you can press the blue magnify glass to open a browser. ⤶ ⤶ <upload src="aaf9e/8dbdef9db56c56a.png" size="17711" name="image.png" />⤶ ⤶ Now with edge mode enable select the edge you want to extend, hold shift, and drag it out.⤶ ⤶ <note>Since we made out tileset 512, we can set out grid size to that amount to make extending the edges easier.</note>⤶ ⤶ <upload src="aaf9e/8dbdefacfbeaa95.mp4" size="20545682" name="Desktop 2023.11.06 - 14.00.30.03.mp4" />⤶ ⤶ ⤶ Congrats you now have a simple but working tileset!⤶ ⤶ If you want to test your understanding see if you can create a segment for end pieces of the mesh.⤶ ⤶ <note> ⤶ ⤶ Why was the first and second tile not replace with anything?⤶ - because we didn't create a tile with rules that fit those squares, the initial square requires all 4 sides to be open, when creating our tileset we never made a tile that had all 4 sides open meaning no tile could work there leaving the base geometry. same with the second square.⤶ ⤶ ⤶ </note>⤶ ⤶ ⤶ ⤶ ⤶ <warning> Going to move everything below onto a second Tilesets - advanced page to prevent one overly long page </warning>⤶ ⤶ ⤶ ⤶ ⤶ ⤶ ---⤶ ⤶ ⤶ #Tile Object Properties⤶ | Property | Description |⤶ | ------------------- | ------------------------------------------------------------------------------------- |⤶ | Name | The name of the tile |⤶ | Base Width | Width of the tile |⤶ | Base Height | Height of the tile |⤶ | Use Best Size Match | Toggle if the tile size should be strict, Checked means closest size will be used. |⤶ | Minimum Size Scale | The minimum scale at which the tile can be selected, 0 is disabled |⤶ | Maximum Size Scale | The maximum scale at which the tile can be selected, 0 is disabld |⤶ | Probability Weight | Determines the chance of the tile being selected from multiple tiles of the same size |⤶ | Display Base Face | Toggle to show the base geometry |⤶ | Align To Axis | Forces the edge rules to align to the provided world axis |⤶ | Rotation Snapping | Forces the geometry to snap along this angle |⤶ | Variation Id | | ⤶ ⤶ ⤶ ---⤶ ⤶ ⤶ #Tileset Properties⤶ Tileset properties can be found by selecting the **`Base - tileset`** in outliner and pressing <key>Alt</key><key>Enter</key> <upload src="aafdb/8d99061a3c8f036.png" size="21933" name="tileset properties.png" /> Once a property is added it shall appear in the tiles **Object Properties** ##Mesh Properties ###mesh_edge_convexity⤶ ⤶ ⤶ ⤶ ⤶ ⤶ ###mesh_edge_convexity⤶ <upload src="aafdb/8d99067057ff564.png" size="5273" name="mesh_edge_convexity.png" /> This property can define what tiles can connect together depending on their edge characteristics. <upload src="aafdb/8d9905e4d8c7ce5.png" size="39381" name="test.png" /> If 180 degrees is treated as flat then **concave is < 180** and **convex is > 180** Drop-down options are as follows - **open** - **flat** - **convex** - **concave** Included are also their negated versions and a ***-Match Any** option ##Example Here the settings for mesh_edge_convexity is shown for 2 tiles and in practice how these 2 tiles can be used. <upload src="aafdb/8d99094281bd708.png" size="200431" name="example.png" /> <upload src="aafdb/8d990914958c046.mp4" size="27956660" name="2021-10-16 11-38-34.mp4" /> ##To-do 1. Tileset properties > - Custom properties 2. Group Proxies