How does the 'Autotiling' work?

Post Reply
User avatar
COOLguy
Posts: 4005
Joined: Sat Jul 12, 2014 2:58 am
Location: Nenuial, Arnor

How does the 'Autotiling' work?

Post by COOLguy »

*This topic is mostly if Daniel or I ever forget how to do this; but it is also very simple to learn*

Autotiling
In the Map Editor, there is a function called 'autotiling' that makes map building much easier and simpler by automatically placing in the correct transitions (i.e. 'grass' to 'water'). This is defined by having one tile as the "mastertile" and the transitions as "insteadofTiles". The "insteadofTiles" are given definitions or "scenarios" where they are true. When the position of the tile is 'true' for that definition, the "insteadofTiles" tile that is attached to that definition replaces the mastertile that was formerly in that position.

The Definitions
The definitions are based on the affinity of the surrounding tiles. So here the red tile is the tile in question: the one we are defining. The green tiles are the surrounding tiles that we will check to see if they have affinity to each other.
1.png
1.png (273 Bytes) Viewed 5020 times
The tiles that are alike (green), we define as '1'; the ones that are unalike (red), we define as '0'; the ones that can be either way (blue), meaning it does not matter if they have affinity or not, we define as 'x'.
1.png
1.png (273 Bytes) Viewed 5020 times
We define the surrounding tiles in this order:
5.png
5.png (2.64 KiB) Viewed 5020 times
So that these mastertiles
2.png
2.png (3.75 KiB) Viewed 5020 times
would be defined as such:
00000000
00111000
0011100x

A real definition looks like this:
"00000000-100"
The part before the dash (00000000) is the definition. The part after the dash (100) is the "insteadofTiles" (transition) which will replace the mastertile if the definition is true.

A sample file with the definitions

Code: Select all

{
   "masterTiles":[
      {
      
      	 "id":100,
      	 "comment":"grass",
         "insteadofTiles":{
            "grass":{
               "byteTileRel":[
                  "00000000-100"
               ]
            }
         }
         
      },
      {
      
      	 "id":113,
      	 "comment":"water-grass and river-grass definitions",
         "insteadofTiles":{
            "grass":{
               "byteTileRel":[

            "11111010-133",
            "11101011-134",
            "10111110-135",
            "10101111-132",

            "10101011-128",
            "10101110-131",
            "10101010-122",
            "11101010-129",
            "10111010-130",

            "11101111-109",
            "10111111-110",
            "11111011-111",
            "11111110-112",

            "11111111-113",

            "10111011-117",
            "11101110-116",



            "1x0x1011-140",
            "1x0x1110-141",
            "101x0x11-3",
            "11101x0x-147",
            "10111x0x-145",
            "111x0x10-146",
            "0x11101x-142",
            "0x10111x-143",

            "10101x0x-125",
            "0x10101x-124",
            "101x0x10-123",
            "1x0x1010-126",

            "11111x0x-104",
            "0x11111x-101",
            "111x0x11-102",
            "1x0x1111-103",

            "0x101x0x-121",
            "101x0x0x-120",
            "0x0x101x-119",
            "1x0x0x10-118",

            "0x111x0x-105",
            "111x0x0x-106",
            "0x0x111x-107",
            "1x0x0x11-108",



            "0x1x0x0x-137",


            "0x0x1x0x-139",


            "1x0x0x0x-138",
            "0x0x0x1x-136",

            "0x1x0x1x-114",
            "0x0x0x0x-127",


            "1x0x1x0x-115"

               ]
            }
         }
         
      },
      
      {
      	 "id":1000,
      	 "comment":"mountain definitions",
         "insteadofTiles":{
            "grass":{
               "byteTileRel":[
                  "1x1x1x1x-1007",

                  "0xxx1xxx-1001",
                  "1xxx1xxx-1002",
                  "1xxx0xxx-1003",

                  "xx1xxx0x-1004",
                  "xx1xxx1x-1005",
                  "xx0xxx1x-1006",

                  "0x0x0x0x-1000"
               ]
            }
         }
         
      }      
      
      
   ],
   "tileIsBasically":[
      "grass-100",
      "water-101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147",
      "mountain-1000,1001,1002,1003,1004,1005,1006,1007"
   ]
}

Appendix
Here is a brief explanation of the rest of the definitions.

"id":113, the mastertile
"comment":"water-grass and river-grass definitions", a comment that lets us designers know what we are looking at
"insteadofTiles":{
"grass":{ what we are transitioning from
"byteTileRel":[


"tileIsBasically":[ list of the transitions and what they replace
"grass-100", tile '100' is the only tile that grass

Appendix 2: Block Placement
Example:

Code: Select all

  	{
	"master":6056,
	"comment": "coolguys: big stairs",
	"blockItemDefs":[
		"0,1,6057",
		"-1,0,4092",
		"-1,1,4093",
		"-2,0,4076",
		"-2,1,4077"
		]
	}
	
Figure in a lower post.
Last edited by COOLguy on Thu Jan 07, 2016 5:14 am, edited 2 times in total.
Thanks!
Josh
User avatar
Hardeep
Posts: 1121
Joined: Mon May 05, 2014 11:06 pm
Location: Isengard, middle earth

Re: How does the 'Autotiling' work?

Post by Hardeep »

Ahhhh... i was just wondering about this! Thanks for clearing that up! :D
There never was much hope... just a fool's hope
User avatar
COOLguy
Posts: 4005
Joined: Sat Jul 12, 2014 2:58 am
Location: Nenuial, Arnor

Re: How does the 'Autotiling' work?

Post by COOLguy »

yes here is the figure. Very professional.
Attachments
New Cliff Roads4.png
New Cliff Roads4.png (12.47 KiB) Viewed 4975 times
Thanks!
Josh
Stratego (dev)
Site Admin
Posts: 15741
Joined: Fri Apr 25, 2014 9:28 pm

Terrain tileset - autotiles definitions

Post by Stratego (dev) »

I start here a topic with a description how to make the autotileing definition json, for terrain tilesets.
Only one person owns the knowledge currently, literally because i have forgot it long ago :)

so i refresh my knowledge and write here what is this.

First of all we have 3 things regarding of terrain tilesets
1. one or more tileset images (png) holding the tile-graphics
2. a json called "all_terrain.json" - here you can map identification (ID-s) to each tile-graphic in any tilseset image
3. a json called terrain_join.json - here you can define these
a) how tiles get autotiled with each other
b) which tiles form a big (eg. 3x4 tiles size) "block" like the cliffymountain tiles, or the big mountain image in AOS
c) tile alternatives - eg. on the pine-tree forests you see that it is random which image is placed to make some randomness (same true for the tiled floor tiles)

here i will talk about autotileing.

As a sample i will write the AOW tileset especially the desert blending into grass tiles.

Tileset image and all_terain.json format

here is the image:
terrain_aoww_desert.png
terrain_aoww_desert.png (181.2 KiB) Viewed 4658 times
(dont be afraid it will be nicer, it is simply scaled from the AOS desert, but that will need work to make a unique and real 64px desert images.)

here is the all_terrain definition for that

Code: Select all

 {
	"id":3000,
	"imgName":"terrain_aoww_desert.png",
	"imgTilesetColumnCount":16,
	"imgTilesetPosition":0,
	"imgTilesetPositionRange":"+13",
	"imgTilesetTileSize":64,
	"imgColumns":1,
	"layer":"TERRAIN",
	"terrainClassName":"desert"
     },

       {
         "id":3016,
         "imgTilesetPosition":16,
         "imgTilesetPositionRange":"+10",
         "terrainClassName":"desert"
      },
  {
         "id":3032,
         "imgTilesetPosition":32,
         "imgTilesetPositionRange":"+10",
         "terrainClassName":"desert"
      },
{
         "id":3048,
         "imgTilesetPosition":48,
         "imgTilesetPositionRange":"+2",
         "terrainClassName":"desert"
      }, 
{
         "id":3052,
         "imgTilesetPosition":52,
         "imgTilesetPositionRange":"+6",
         "terrainClassName":"desert"
      } ,
A definition block defines a single tile, here are explanations:
"id":3000, - the ID you can use in tile_join.json to reference the tile.
"imgName":"terrain_aoww_desert.png", - you define which image the tile is in
"imgTilesetColumnCount":16, - how many columns are in the image
"imgTilesetPosition":0, - which tile position is the tile that will get this ID
"imgTilesetTileSize":64, - the tileset pixel size
"imgColumns":1, - idk what it is :)
"layer":"TERRAIN", - which layer is this tile currently we have "TERRAIN" and "TERRAIN_DECOR" or something like this.
"terrainClassName":"desert" - a keyword that shows which kind of tile is this

also here is an extra if you dont want to define 13 more tiles because they are all the same except the tile position and the tile ID, than it can auto increment the ID and the position for you.
"imgTilesetPositionRange":"+13", how many similar tiles follows this tile (so here at sum we have 1+13 desert tiles
so with this single "tile" definition you have defined
- the first 14 tiles as desert tiles
- with ID-s from 3000-3013
- and at positions: 0-13

next line in tileset image:
"id":3052,
"imgTilesetPosition":52,
"imgTilesetPositionRange":"+6",
"terrainClassName":"desert"

you see that here you can omit some settings, and give only the start tile of the next row and again +6 tile follows, resulting 7 tiles of desert in that row.

The terrain_join.json - autotileing setting

Ther is a term in the file:
mastertiles - meaning you have a red bordered image for the specified desert tile - it will transform to the defined tile.

here is the mastertile definition for the desert tile and with the first few tiles to join:

this part of the tileset will be defined:
desersample.png
desersample.png (22.09 KiB) Viewed 4653 times
and this:
desersample2.png
desersample2.png (9.57 KiB) Viewed 4653 times
so if we have this defined we can drop a desert mastertile into the grassfield and will form this:
desersample2.png
desersample2.png (9.57 KiB) Viewed 4653 times
and if you tap to the right of this tile will form this:
desersample3.png
desersample3.png (17.26 KiB) Viewed 4653 times
and if you tap again to the right you will see this:
desersample.png
desersample.png (22.09 KiB) Viewed 4653 times
and ofcourse by clicking further you can have an endless desert stripe...
desersample4.png
desersample4.png (22.5 KiB) Viewed 4653 times
so how is this defined:


Here are definition for tiles that what kind of tile are they basically grass/water/wood (only desert and the single grass is filled now for the example)

Code: Select all

   
"tileIsBasically":[
      "grass-100",
      "desert-3017,3043,3048,3049,3050"
   ],
also in the mastertiles setcion we define the desert mastertile (the full desert tile) and we define when to replace it with other image

Code: Select all


   "masterTiles":[
	{
		"id":3017,
		"comment":"desert-grass definitions",
		"insteadofTiles":{
			"grass":{
				"byteTileRel":[
					"00000000-3043",
					"00001000-3048",
					"10001000-3049",
					"10000000-3050"
				]
			}
       		}             
	}         
   ],
and which line is for:
"id": defines the "master tile, that ha autotile feature (automatically changes tiles around)
"grass": which is the surrounding tile that we want to blend the desert with
"comment" simply a comment for you - so you know which definition is for which transition
"byteTileRel":this is a list of alignment-what tile will you need relations, you can put "x" on any direction meaning you dont care what tile is there (reducing definition time), the binary: 1st= left tile, 2nd=bottomleft tile, 3rd=bottom tile and so on anti-clockwise. And 1 means it is a "desert" tile (actually tile that share type with the master tile - tha autotile) 0 means not desert (map corner, or the surrounding grass tile)

Tile join INJECTION

You can modify the json file and you can try it immediately! how?

Good news:
- i made an injection possibility at the loading of the definition file.
- So you can modify the file and you can try it immediately on your device!
- simply put the attached file into a folder called "AOS" in the SD card root - and all changes on this file will be seen in the mapeditor immediately!

Have gun! (dont forget to ask for the current json to alter the latest one! :))
User avatar
COOLguy
Posts: 4005
Joined: Sat Jul 12, 2014 2:58 am
Location: Nenuial, Arnor

Re: Terrain tileset - autotiles definitions

Post by COOLguy »

I found more autotile info from a while back :)
Thanks!
Josh
User avatar
Alexander82
Posts: 7969
Joined: Thu Feb 26, 2015 8:18 pm

Re: Terrain tileset - autotiles definitions

Post by Alexander82 »

Thanks ;)
Age of Fantasy design leader
Post Reply

Return to “Terrains and Graphic Design”