WALKTRU: Tileset image design and jsoning (Road - define tiles)

Post Reply
Stratego (dev)
Site Admin
Posts: 7402
Joined: Fri Apr 25, 2014 9:28 pm

WALKTRU: Tileset image design and jsoning (Road - define tiles)

Post by Stratego (dev) » Sat Aug 25, 2018 8:58 am

On this thread i show the process of making the dirt road into AOF/AOS
(reason:
i saw many mapdesigners using the edgy single road rile to make dirt roads
this:
old_edgy_road.png
old_edgy_road.png (2.42 KiB) Viewed 138 times
that is not looking nice so i decided to make the dirst road out of the current nicer grey road.
this:
grey_road_tile.png
grey_road_tile.png (1.58 KiB) Viewed 138 times
)

BEWARE: this is the MOST COMPLEX definition in the game!

(it needs, new tile ID and also AUTOTILE definitons too!if u learn this you can do almost everything about terrain tilesets.


Steps i make

1. finding the current nicer grey road tiles
grey_road_tiles.png
grey_road_tiles.png (50.81 KiB) Viewed 138 times

2. and arranged them to a new tileset image (it will be better handling them in separate images)

- changed road color using GIMP, color chooser (all grey pixels are selected), and Colorize option that gave him any color, i drawed the pin to be brown, and i changed to lower saturation and that is all
- i have smoothed the corners further - maybe we could do it with the grey ones too
- i made sure the tileset to be 8 tile in width (it can be 8, 16, 32 and so on)
- also named it as terrain_*.png
- and put in assets/gfx folder
terrain_road_dirt.png
terrain_road_dirt.png (27.27 KiB) Viewed 138 times




3. Assigning ID-s to the tiles

- Opening the assets/terrain/all_terrain.json file
- and adding a new section to the end by defining the new tiles ID-s
- i usually make tilesets an ID-range if we later want to add images to the tileset image, we will have some free ID-s for it
-> so in my case the end of the dile looked like this (ended with the red carped definition):

Code: Select all

{
               "id":7000,
               "imgName":"decoration_carpet.png",
               "imgTilesetColumnCount":8,
               "imgTilesetPosition":0,
               "imgTilesetPositionRange":"+22",
               "imgTilesetTileSize":32,
               "imgColumns":1,         
               "layer":"TERRAIN_DECOR",
               "terrainClassName":"ground"
            },
      
            {
               "id":7027,
               "imgTilesetPosition":27,
               "terrainClassName":"ground"
            },
            
            {
               "id":7032,
               "imgTilesetPosition":32,
               "imgTilesetPositionRange":"+4",
               "terrainClassName":"ground"
            },
            
            {
               "id":7038,
               "imgTilesetPosition":38,
               "terrainClassName":"ground"
            },
            
            {
               "id":7040,
               "imgTilesetPosition":40,
               "imgTilesetPositionRange":"+1",
               "terrainClassName":"ground"
            },
            
            {
               "id":7046,
               "imgTilesetPosition":46,
               "terrainClassName":"ground"
      }
      
so carpet was the 7000 - 7046 currently so i let carpet be in 7000-7099 so i will set my range to be 7100-7199
so i write my first part, the main definition patr for the first tile:
- id: 7100
- image name: "terrain_road_dirt.png"
- defining hogy many columns in my tiletes image: 8
- tile size: 32
- layer: TERRAIN or TERRAIN_DECOR meaning it will be basic terrain (like grass) or a decoration "floatin" over the terrain (like Rock or a big tree or flower) - here TERRAIN
- terrainClassName: can be ground/hill/road and so on taht is defined in "consts.json" - here it is "road"
- positionrange: if it is more than 0 than the tiles beside the fisrt will have the same definition, we have total 7 tiles in first row so +6 will set the whole first line to be road ->+6

so here we are now (id=7046 tile is the last tile of the carpet, see above):

Code: Select all

{
               "id":7046,
               "imgTilesetPosition":46,
               "terrainClassName":"ground"
      },
      {
                     "id":7100,
                     "imgName":"terrain_road_dirt.png",
                     "imgTilesetColumnCount":8,
                     "imgTilesetPosition":0,
                     "imgTilesetPositionRange":"+6",
                     "imgTilesetTileSize":32,
                     "imgColumns":1,         
                     "layer":"TERRAIN",
                     "terrainClassName":"road"
            },
now the second line:
here you dont need to define everything only the starting tile - all other setup is inherited from the first definition (eg. image name)
- so i set the ID - i tend to keep the same id as the position of the tile in tileset, so instead of the next unused id: 7100 +6 +1 = 7107 i use the -> 7108
- i set the starting position -> 8
- terrainClassName: road again
- positionrange: we have 1+3 tiles so set to +3

now here we are with the thirs line too that alsmot the same as the second but start on tile ID 7116:

Code: Select all

            {
               "id":7046,
               "imgTilesetPosition":46,
               "terrainClassName":"ground"
            },
            {
                     "id":7100,
                     "imgName":"terrain_road_dirt.png",
                     "imgTilesetColumnCount":8,
                     "imgTilesetPosition":0,
                     "imgTilesetPositionRange":"+6",
                     "imgTilesetTileSize":32,
                     "imgColumns":1,         
                     "layer":"TERRAIN",
                     "terrainClassName":"road"
            },
 	    {
               "id":7108,
               "imgTilesetPosition":8,
               "imgTilesetPositionRange":"+3",
               "terrainClassName":"road"
            },  
 	    {
               "id":7116,
               "imgTilesetPosition":16,
               "imgTilesetPositionRange":"+3",
               "terrainClassName":"road"
            }            

here all of out tiles has IDs!


4. testing: now you can test with modding if your tiles are working or not

go furher only
- if you can use all tiles from mapeditor
- and you have not "overwritten" any existing - this case i will check if i still have all carpet tiles or not.
- also you have no "empty" tiles if you accidentally mapped ID-s to the empty tiles in the tileset.

After filering to "road" tiles you see this:
(you will ask "why grey tiles are not visible, only one?" reason: those are already autotiled, so in autotile mode you only see the default tile, our roads will look the same after we defined autotileing)
editor_dirt_road.jpg
editor_dirt_road.jpg (46.76 KiB) Viewed 124 times

Important: switch to list mode too! there you see to ID-s you have assigned - check if they are ok!
editor_list.jpg
editor_list.jpg (40.49 KiB) Viewed 124 times



5. Autotileing

meaning: if you place a roaad an an other next to it it will automatically change ropad tile to form a continous road.

(i decided to put it into a separate thread)

Post Reply

Return to “Terrains and Graphic Design”