Tileset system for procedural 2D/2.5D map generation
Abstract
Although creating tile-based environments can be done by hand (via editor), game devs often prefer procedural methods. Such automation not only spares the time of manual editing, but also yields a much higher variety of unseen new levels than an author could think of. To avoid having a PRNG produce unusable chaotic results, the algorithm needs restricting rules, so called constraints.
Since we aren't interested in the final look of textures, all examples will depict those by appropriate placeholder ASCII characters.
Materials
Overview of our general map constituents:
| Name | Walkable | Rarity | Function |
| Area |
//
// | Grass | ✓ | pervasive | Prevalent ground type. |
HH
HH | Hill | × | common | Block of sturdy soil. Natural obstacle that turns to Sand when destructed via shovel or pickaxe. May contain collectible resources. |
..
.. | Sand | ✓ | very common | Obligatory transition between Water and Grass.
Can also be used for paths. |
~~
~~ | Water | × | common | Used for oases, rivers, lakes, and oceans.
Always surrounded by Sand. |
&&
&& | Copse | ✓ | common | Shrubbery and bushes. Creatures/items inside are hidden (player avatar is traditionally shown semi-transparent).
Always surrounded by Grass. |
[]
[] | Floor | ✓ | uncommon | Stone floor, typically inside buildings.
Can also be used for paved roads. |
| Linear |
##
## | Build | × | rare | Stone wall (thickness: ~1 m) element, typically for constructing buildings.
Obstacle; can be removed via pickaxe. |
==
== | Plank | ✓ | very rare | Wooden floor/pathway, typically used for bridging Water. |
| Stand-alone |
oo
oo | Rock | × | common | Boulder, sitting either on Grass, Sand, Copse, or inside Water (near shores).
Natural obstacle; can be removed via pickaxe. |
TT
TT | Tree | × | common | Tree, always either on Grass or Copse.
Natural obstacle; can be removed via axe. |
Tile :: Size
Our standard 2D (map view) tile has 64×64 px, equalling ~2×2 m.
Side note: We assume NPCs/creatures to occupy the center quarter of a tile when being in an idle state.
In 2.5D view (top-down, camera tilt angle ~30°), where the ground area is visually flattened to 32 px in hight,…
… a tile needs 64×92 px to accommodate extruding parts, for example:
Side note: Accordingly, NPC/creature sprites are baseline aligned in respect to the ground midpoint.
Tile :: Content
Overview: Possible material
combinations inside a tile.
To avoid unnaturally straight borders between areas, e.g. by putting Grass and Sand tiles side by side,…
////....
////....
////....
////....
… we try to picture any transitions inside a tile:
//////..
//////..
//////..
//////..
This way, borders can be slightly wavy/ragged and more organic, depending on the final texture style.
Apart from the pure (single material) area tiles, and the Plank, most will therefor show 2 materials.
The only exception is Build, whose tiles always show 2 or 3 materials, because our relatively thin (compared to tile size) walls act as area deviders by default.
Tile :: Content :: Hill
Hills may occur in grasslands and deserts.
Combis with Grass (14 tiles)://///////HHHHHH/////
//HHHHHHHHHHHHHHHH//
/HHHHHHHHHHHHHHHHHH/
/HHHHHHHHHHHHHHHHHH/
/HHH HHH/
/HHH HHH/
/HHH HHH/
/HHH HHH/
/HHHHHHHHHHHHHHHHHH/
/HHHHHHHHHHHHHHHHHH/
//HHHHHHHHHHHHHHHH//
/////////HHHHHH/////
/HHHHHH/
HHHHHHHH
HHHHHHHH
HHH//HHH
Combis with Sand (14 tiles):.........HHHHHH.....
..HHHHHHHHHHHHHHHH..
.HHHHHHHHHHHHHHHHHH.
.HHHHHHHHHHHHHHHHHH.
.HHH HHH.
.HHH HHH.
.HHH HHH.
.HHH HHH.
.HHHHHHHHHHHHHHHHHH.
.HHHHHHHHHHHHHHHHHH.
..HHHHHHHHHHHHHHHH..
.........HHHHHH.....
.HHHHHH.
HHHHHHHH
HHHHHHHH
HHH..HHH
Tile :: Content :: Sand
Sand may adjoin Grass, Hill, Water (to make a shoreline), and Floor. Also, it can contain Rocks.
Combis with Grass (14 tiles)://////////....//////
/////////....../////
///..............///
//................//
//.. ..//
//.. ..//
//.. ..//
//.. ..//
//................//
///..............///
/////////....../////
//////////....//////
//....//
/....../
...//...
..////..
Combis with Water (14 tiles):~~~~~~~~~~....~~~~~~
~~~~~~~~~......~~~~~
~~~..............~~~
~~................~~
~~.. ..~~
~~.. ..~~
~~.. ..~~
~~.. ..~~
~~................~~
~~~..............~~~
~~~~~~~~~......~~~~~
~~~~~~~~~~....~~~~~~
~~....~~
~......~
...~~...
..~~~~..
Combis with Floor (14 tiles):[][][][][]....[][][]
[][][][][]....[][][]
[]................[]
[]................[]
[].. ..[]
[].. ..[]
[].. ..[]
[].. ..[]
[]................[]
[]................[]
[][][][][]....[][][]
[][][][][]....[][][]
[]....[]
[]....[]
..[][]..
..[][]..
Tile :: Content :: Copse
Copse must only border on Grass. Also, it can contain Rocks and Trees.
Combis with Grass (14 tiles)://////////&&&&//////
/////////&&&&&&/////
///&&&&&&&&&&&&&&///
//&&&&&&&&&&&&&&&&//
//&& &&//
//&& &&//
//&& &&//
//&& &&//
//&&&&&&&&&&&&&&&&//
///&&&&&&&&&&&&&&///
/////////&&&&&&/////
//////////&&&&//////
//&&&&//
/&&&&&&/
&&&//&&&
&&////&&
Tile :: Content :: Floor
Floor borders on Grass, Sand, or Walls.
Combis with Grass (14 tiles)://////////[][]//////
//////////[][]//////
//[][][][][][][][]//
//[][][][][][][][]//
//[] []//
//[] []//
//[] []//
//[] []//
//[][][][][][][][]//
//[][][][][][][][]//
//////////[][]//////
//////////[][]//////
//[][]//
//[][]//
[]////[]
[]////[]
Tile :: Content :: Build
Walls must border on Floor. In some cases (outer walls) they also touch Grass.
Internal - Combis with Floor only (15 tiles):[][][][][][][][]
[##########][##]
[##########][##]
[##][##][##][##]
[##][##][##][##]
[##########][##]
[##########][##]
[##][##][##][##]
[##][##][##][##]
[##########][##]
[##########][##]
[][][][][][][][]
[][][][][][]
[##########]
[##########]
[][][][][][]
External - Combis with Floor & Grass
| Convex (9 tiles) |
Concave (16 tiles) |
Special (14 tiles) |
////////////
/##########/
/##########/
/##][##][##/
/##] [##/
/### ###/
/### ###/
/##] [##/
/##][##][##/
/##########/
/##########/
//////////// |
[][][][][][][][]
[##############]
[##############]
[##//##][##//##]
[##//##][##//##]
[##############]
[##############]
[##][##][##][##]
[##][##][##][##]
[##############]
[##############]
[##//##][##//##]
[##//##][##//##]
[##############]
[##############]
[][][][][][][][] |
/##]//[][]//
####/##][##/
####/##][##/
[##//##][##/
[##//##][##/
####/##][##/
####/##][##/
/##]/##][##/
/##][##/
/##][##/
/##][##/
//[][]//
////////////
/##########/
[##########]
[][][][][][]
[][][][][][]
[##########]
/##########/
//////////// |
Tile :: Content :: Rock
Boulders can be found in vegetational areas, on Sand, or in Water.////
/oo/
/oo/
////
....
.oo.
.oo.
....
~~~~
~oo~
~oo~
~~~~
&&&&
&oo&
&oo&
&&&&
Tile :: Content :: Tree
Trees grow in vegetational areas.////
/TT/
/TT/
////
&&&&
&TT&
&TT&
&&&&
Tile :: Border code
Each of a tile's 4 borders shows single, double, or triple materials (depending on its combi type), and when placing adjacent tiles, their particular borders should match.
Let's count borders clock-wise. As of material content, horizontal ones are read left to right, and vertical ones are read top to bottom, for example:
| 1. /
2. /
3. /
4. / |
|
| 1. /
2. /.
3. .
4. /. |
|
| 1. /#]
2. ]#]
3. /#]
4. / |
Considering all our existing tiles, there's 25 different border codes in total:
| 1:/ | 2:/H | 3:/. | 4:/& | 5:/[ |
| 6:/#[ | 7:H | 8:H/ | 9:H. | 10:. |
| 11:./ | 12:.H | 13:.~ | 14:.[ | 15:~ |
| 16:~. | 17:& | 18:&/ | 19:[ | 20:[/ |
| 21:[. | 22:[#/ | 23:[#[ | 24:# | 25:= |
Hence, in a global list/database, tiles provide their border codes as a quadruple of values (each ranging from 1 to 25).
Tile :: Probability
... Weight 0...9 ...
Tile :: Record
... border code quadruple ...
Tile :: Statistics
...
Combi
type | Single | Double | Triple | |
//
// HH
HH ..
.. ~~
~~
&&
&& []
[] ==
== | oo
oo | TT
TT | //HH
//HH //..
//..
//&&
//&& //[]
//[]
..HH
..HH ..~~
..~~
..[]
..[] []##
[]## | //[]##
//[]## |
| Tiles | 7×1 | 4 | 2 | 8×14 | 9+16+14 | Total |
| 13 | 112 | 39 | 164 |
Constraints
...
Appendix :: Tile Database Table (JS)
List of all 164 tile records. Field definitions:
- [0…3] Border code (top, right, bottom, left), range: 1…25
- [4] Weight, range: 0…9
dbT=[
//single
[1,1,1,1,#],[7,7,7,7,#],[10,10,10,10,#],[15,15,15,15,#],[17,17,17,17,#],[19,19,19,19,#],[25,25,25,25,#],[1,1,1,1,#],[10,10,10,10,#],[15,15,15,15,#],[17,17,17,17,#],[1,1,1,1,#],[17,17,17,17,#],
//double
[1,2,2,1,#],[1,2,7,2,#],[2,7,7,2,#],[8,2,7,7,#],[1,1,8,2,#],[2,7,2,1,#],[8,1,8,7,#],[2,8,2,1,#],[7,8,1,8,#],[7,7,2,8,#],[7,8,8,7,#],[8,1,1,8,#],[2,8,8,2,#],[8,2,2,8,#],[10,12,12,10,#],[10,12,7,12,#],[12,7,7,12,#],[9,12,7,7,#],[10,10,9,12,#],[12,7,12,10,#],[9,10,9,7,#],[12,9,10,10,#],[7,9,10,9,#],[7,7,12,9,#],[7,9,9,7,#],[9,10,10,9,#],[12,9,9,12,#],[9,12,12,9,#],[1,3,3,1,#],[1,3,10,3,#],[3,10,10,3,#],[11,3,10,10,#],[1,1,11,3,#],[3,10,3,1,#],[11,1,11,10,#],[3,11,1,1,#],[10,11,1,11,#],[10,10,3,11,#],[10,11,11,10,#],[11,1,1,11,#],[3,11,11,3,#],[11,3,3,11,#],[15,16,16,15,#],[15,16,10,16,#],[16,10,10,16,#],[13,16,10,10,#],[15,15,13,16,#],[16,10,16,15,#],[13,15,13,10,#],[16,13,15,15,#],[10,13,15,13,#],[10,10,16,13,#],[10,13,13,10,#],[13,15,15,13,#],[16,13,13,16,#],[13,16,16,13,#],[19,21,21,19,#],[19,21,10,21,#],[21,10,10,21,#],[14,21,10,10,#],[19,19,14,21,#],[21,10,21,19,#],[14,19,14,10,#],[21,14,19,19,#],[10,14,19,14,#],[10,10,21,14,#],[10,14,14,10,#],[14,19,19,14,#],[21,14,14,21,#],[14,21,21,14,#],[1,4,4,1,#],[1,4,17,4,#],[4,17,17,4,#],[18,4,17,17,#],[1,1,18,4,#],[4,17,4,1,#],[18,1,18,17,#],[4,18,1,1,#],[17,18,1,18,#],[17,17,4,18,#],[17,18,18,17,#],[18,1,1,18,#],[4,18,18,4,#],[18,4,4,18,#],[1,5,5,1,#],[1,5,19,5,#],[5,19,19,5,#],[20,5,19,19,#],[1,1,20,5,#],[5,19,5,1,#],[20,1,20,19,#],[5,20,1,1,#],[19,20,1,20,#],[19,19,5,20,#],[19,20,20,19,#],[20,1,1,20,#],[5,20,20,5,#],[20,5,5,20,#],
//triple
[19,23,23,19,#],[19,23,23,23,#],[19,19,23,23,#],[19,19,23,19,#],[19,23,23,23,#],[23,23,23,23,#],[23,19,23,23,#],[23,19,23,19,#],[23,23,19,19,#],[23,23,19,23,#],[23,19,19,23,#],[23,19,19,19,#],[19,23,19,19,#],[19,23,19,23,#],[19,19,19,23,#],[1,6,6,1,#],[1,6,23,6,#],[1,1,22,6,#],[6,23,6,1,#],[22,1,22,23,#],[6,22,1,1,#],[23,22,1,22,#],[22,1,1,22,#],[19,22,22,19,#],[19,23,6,22,#],[19,22,22,23,#],[19,19,6,22,#],[22,6,23,19,#],[6,23,23,6,#],[22,6,23,19,#],[6,19,23,6,#],[23,22,22,19,#],[23,23,6,22,#],[23,22,22,23,#],[23,19,6,22,#],[22,6,19,19,#],[6,23,19,6,#],[22,6,19,23,#],[6,19,19,6,#],[6,22,22,6,#],[5,19,6,1,#],[20,1,22,19,#],[22,6,6,22,#],[6,19,6,1,#],[22,1,22,19,#],[6,19,5,1,#],[22,1,20,19,#],[1,6,19,5,#],[1,6,19,6,#],[1,5,19,6,#],[19,22,1,20,#],[19,22,1,22,#],[19,20,1,22,#]]
Appendix :: Map examples
Basic elements for medieval maps.
Connections/network
Sand as footway:////////////////////////
////////////////////////
........////////////////
........////////////////
//////..//////////......
//////../////////.......
//////..////////.../////
//////..////////..//////
//////............//////
///////..........///////
////////////////////////
////////////////////////
Sand as path:////////////////////////
////////////////////////
.........///////////////
..........//////////////
..........////////......
...........//////.......
/////...................
//////..................
//////............//////
///////..........///////
////////////////////////
////////////////////////
Floor as paved path:////////////////////////
////////////////////////
[][][][][]//////////////
[][][][][]//////////////
[][][][][]//////[][][][]
[][][][][]//////[][][][]
//////[][][][][][][][][]
//////[][][][][][][][][]
//////[][][][][][][]////
//////[][][][][][][]////
////////////////////////
////////////////////////
Floor & Sand as road:////////////////////////////
////////////////////////////
............////////////////
............////////////////
[][][][][]..///.............
[][][][][]..//..............
[][][][][]......[][][][][][]
[][][][][]......[][][][][][]
......[][][][][][][][][][][]
......[][][][][][][][][][][]
////..[][][][][][][]........
////..[][][][][][][]........
////.................../////
////..................//////
////////////////////////////
////////////////////////////
Plank as timber bridge over creek://....~~~~....//
//....~~~~....//
//....~~~~....//
//....~~~~....//
//..========..//
//..========..//
//..========..//
//..========..//
//....~~~~....//
//....~~~~....//
//....~~~~....//
//....~~~~....//
Floor as stone bridge over river://....~~~~~~~~....//
/.....~~~~~~~~...../
......~~~~~~~~......
......~~~~~~~~......
[][][][][][][][][][]
[][][][][][][][][][]
[][][][][][][][][][]
[][][][][][][][][][]
......~~~~~~~~......
......~~~~~~~~......
/.....~~~~~~~~...../
//....~~~~~~~~....//
Buildings
Minimal hut in grassland:////////////////////
////////////////////
////////////////////
////////////////////
////////////////////
/////##########/////
/////##########/////
/////##][][][##/////
/////##][][][##/////
/////##][][][##/////
/////##][][][##/////
/////##][][][##/////
/////##][][][##/////
/////###[][]###/////
/////###////###/////
////////////////////
////////////////////
////////////////////
////////////////////
////////////////////
Abandoned hut in desert:....................
....................
....................
....................
....////////////....
..../##########/....
..../##########/....
..../##][][][##/....
..../##]....[##/....
..../##]....[##/....
..../##]....[##/....
..../##]....[##/....
..../##]....[##/....
..../###....###/....
..../###....###/....
....////....////....
....................
....................
....................
....................
Standard small house:////////////////////
/##################/
/##################/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/##][][][][][][][##/
/######][][][######/
/######//////######/
////////////////////
Standard two-room house:////////////////////////////////
/##############################/
/##############################/
/##][][][][][][][##][][][][][##/
/##][][][][][][][##][][][][][##/
/##][][][][][][][##][][][][][##/
/##][][][][][][][##][][][][][##/
/##][][][][][][][][][][][][][##/
/##][][][][][][][][][][][][][##/
/##][][][][][][][][][][][][][##/
/##][][][][][][][][][][][][][##/
/##][][][][][][][][][][][][][##/
/##][][][][][][][][][][][][][##/
/##][][][][][][][##][][][][][##/
/##][][][][][][][##][][][][][##/
/##][][][][][][][##][][][][][##/
/##][][][][][][][##][][][][][##/
/######][][][##################/
/######//////##################/
////////////////////////////////
Appendix :: Tile Sheet
- Sheet 1 (ASCII prototype): ts1.png, 1024×704 px, 9714 B
164 tiles of 64×64 px