{"id":14162,"date":"2015-03-01T04:06:57","date_gmt":"2015-03-01T04:06:57","guid":{"rendered":"http:\/\/rafaelfajardo.com\/portfolio\/connected-tiles-using-bitflags\/"},"modified":"2024-09-26T11:19:57","modified_gmt":"2024-09-26T17:19:57","slug":"connected-tiles-using-bitflags","status":"publish","type":"post","link":"https:\/\/rafaelfajardo.com\/portfolio\/connected-tiles-using-bitflags\/","title":{"rendered":"Connected Tiles using Bitflags"},"content":{"rendered":"

mflux<\/a>:<\/p>\n

\n

So lately I\u2019ve been working on a city-simulator. I\u2019ve tackled a lot of interesting problems and have been posting some progress shots on Twitter<\/a>.<\/p>\n

\"image\"<\/figure>\n

Sometimes I get requests for a writeup on my process, this is generally a good thing, people are interested in what I\u2019m making, and I get to spew out my thought process on the internets.<\/p>\n

My aversion to this is because I prefer to save writeups like these for post-mortem. There\u2019s a lot more interesting things to tackle that I have yet to tackle, like socio-economics simulation, or culture generators. The technical stuff, that stuff comes pretty easily, to me it\u2019s not as worth that much talking about.<\/p>\n

On top of this, I really hate doing \u201cmarketing\u201d for a project before it\u2019s ready (blog posts are marketing now, apparently). I\u2019m not a fan of this \u201crelease early release often\u201d marketing approach for indies. Yes, there are benefits of doing this, however the surprise factor, the freshness factor in the eyes of people worth seeing it will be diminished. I find the lack of surprise in a transparent development process to be quite the hinderance later on.<\/p>\n

\"image\"<\/figure>\n

<\/p>\n

During my daily trawls through twitter, I found this curious post about procedurally generating Millennium Falcon style texture maps. I mean, this is really great stuff, I\u2019ve always wondered about doing something like this \u2014 how one might actually approach this problem. I can see baking the AO, what about generating the greeble? What about connecting lines across multiple surfaces so they all line up? Defining what parts of the mesh is an exhaust port and giving that the appropriate color? That stuff is fascinating to me.<\/p>\n

As an impatient person it also really frustrated me that Howard Day (what a name) didn\u2019t also include a process-post. The nerve! Showing cool shit off on twitter without talking about how it\u2019s made.. that is so annoying.<\/p>\n

Wait a minute. That\u2019s exactly what I do. Shit.<\/p>\n

So I\u2019ve managed to guilt myself into doing a writeup. This is good, at least it\u2019ll be written down somewhere. The most recently asked topic was about road tiles, so let\u2019s start there.<\/p>\n

\n

Where we\u2019re going we actually need roads<\/h2>\n

This is going to be an awkward writeup since I\u2019ve tackled this exact problem at least three separate times (that I can count) and came up with different approaches each time. There are also numerous inter-connected problems that have to do with game design. I\u2019ll just focus on the direct problem and the solution I ended up at, skipping some seriously circuitous problem solving that will only take you down some nasty rabbit holes.<\/p>\n

The premise:<\/p>\n

\"image\"<\/figure>\n

The game is a city simulator, so one has to think about road planning, the veins and skeleton of a city. Making a few gameplay assumptions, this generally means allowing the player to directly draw roads, place them on some surface, connect roads with each other, etc.<\/p>\n

\"image\"<\/figure>\n

The original Sim City by Will Wright was created because he had more fun designing the maps for Raid on Bungeling Bay. The tech at the time only really allowed for tile-based map visualization, it was great because you can get excellent variety with a ton of re-useable assets.<\/p>\n

\"image\"<\/figure>\n

The roads ended up being on a grid, which has some inherent limitations. Diagonal roads are harder to make, and we\u2019ll see why when we break this problem down.<\/p>\n

\"image\"<\/figure>\n

Here the road tiles are represented by R, perhaps a number in our data map. Zones, parks, police stations, they all occupy some space on this map, so they also get separate id numbers as well.<\/p>\n

This is not good enough. Just because the data looks like this, road tiles aren\u2019t a uniform graphic that you can just clone stamp across the rendered map. Roads have directionality, the tile that gets drawn needs to care about what tiles they\u2019re connected to.<\/p>\n

\"image\"<\/figure>\n

The simplest variations are pretty straightforward. You have roads that go up and down, so you have these road tiles going from north to south, center divider is vertical. Ditto with horizontal. When these orthogonal directions intersect, you have an intersection, so perhaps this tile connects to all 4 corners, with stop lights. There are more variations, such as a T junction (4 variations).<\/p>\n

To know what graphic should be drawn at a particular tile, you have to know its neighboring tiles.<\/p>\n

\"image\"<\/figure>\n

This is a pretty well established gamedev problem. Essentially, an artist draws every possible permutation of connected roads (or whatever, it could even be connected cliffs \/ ground tiles used for side-scrolling games for example). Then the map designer simply picks the right puzzle piece to use for that particular section of the map.<\/p>\n

There are several\u00a0(annoying)<\/i> problems with doing this.<\/p>\n

Making the assets would be a combinatorial nightmare<\/i>. Imagine having to create the above just for one version of this tileset. If I wanted to have wider roads, or highways, I have to do the above all over again. Even in the above example image, there would be no way of creating arbitrary turns or intersections on terrain that goes up or down unless I also want to author that! Let\u2019s not forget what if we wanted diagonal roads?<\/p>\n

<\/p>\n

\n

As an aside\u2026<\/i><\/p>\n

At some point you\u2019ve probably asked yourself why I even bothered to stick with tiles and not just do arbitrary straight-line roads. I guess that\u2019s an article for another day, however I did do that experiment and ended up with some OK results (with a slew of other kinds of problems).<\/p>\n

\"image\"<\/figure>\n
\n

So now we\u2019ve identified the problems:<\/p>\n