Hi, I was thinking about how to create a beautiful top down map in 2D.
An example of what I find particularly successful is Battle brother.The map is huge and very beautiful. It seems to me that it uses hexagons but it’s not too visible.
Their boxes are particularly large, we are far from 64*64, and the visual success seems to be due to a great diversity of assets for each field.
I’m also impressed by the fact that they manage to make us believe in many places that there are no hexagons, although I don’t understand the underlying.This must be quite difficult to reproduce and must require considerable work for the graphic designer.
What would you do if you wanted to achieve such a result ?
Here are some screenshots of the game :
Careful tileset creation is the key.
One trick that you can use is to let a tile extend over into its neighbors a bit, which can break up hex/rectangular/isometric pattern.
You can also use a second tilemap layer with occasional tiles to break up what might be repetitive patterns. For example, if you have a Ground tilemap, create a GroundDecals tilemap and occasionally write to it based on what’s underneath (grass underneath receives grass tufts). Its tiles might be offset from the hex center so that they further break up the hex pattern. You could create a custom brush to automate this.
The RandomTile in the TilemapExtras package is also your friend: 2D Tilemap Extras | 2D Tilemap Extras | 1.6.0-preview.1 I further customized mine to change how it generates its random so that it produces even more random results. By defualt it uses PerlinNoise which isn’t the best for the task.
Artistic workflow is another consideration. When I’m creating a tileset, I frequently re-export it into Unity as I go to see how well I’m doing in creating sufficient variation. I keep an eye out for changes that make a particular tile jump out, jarringly.
I’ve always thought that the core of a hex based game is to make the hexes visible, not mask them. It’s like masking squares on a chessboard, like making manga without big eyed characters, like making hamburgers without meat…
If the hex grid has effect on gameplay, sure you will want it to be visible in some way. But even then it might look better to do it as additional layer on top background instead of having boring repetitive tiles. That way the grid highlights can be varied based on different gameplay rules, toned down or even hidden during the stages of game when grid is less important. Something like hiding grid during free roaming stage, but then showing when you encounter an enemy and switch to combat phase. Or maybe showing grid only within range that you can reach within single turn. A lot of strategy games also use grid, but it’s not necessarily visible at all times. In strategy games grid might help to align buildings, but otherwise doesn’t matter most of the time.
Another possibility is that the game isn’t using grid for the sake of making game mechanics around the grid, but as tool for efficiently using artist and level designer time. In many cases it’s not practical for artist to draw the whole level as one giant image. Depending on level size (and budget of game) that might be very inefficient both in terms computer resources and also artist’s time. Another problem is being able to easily tweak and change it after initial creation based level design, pacing, and story content considerations, which you are unlikely to fully know ahead of time without some iteration. So you will likely need some kind of modular level design tools. Tile based level is one approach even if the gameplay doesn’t use the tile grid. Plenty of 2d platformers, or top down games which allow free movement and use tile based levels, but don’t benefit from showing the grid to player. Tile based levels can also be used as a system for randomized generation. Think of the game like “Enter the Gungeon”, the grid has almost no efffct the gameplay and blurring the edges between tiles wouldn’t make it worse. There are also plenty of games with JRPG style combat which happens on completely separate screen, and it doesn’t matter how you roam around between cities outside the combat. The world map might be tile based, but it’s more of a tool not something player needs to see. You might choose to intentionally leave it visible if you are targeting certain retrogame vibe, but plenty of times it’s a matter of simplifying development process. Either way is fine if the overall art is good and consistent.
Of course you there are other approaches for for easily editable levels. You could paint a rough texture for choosing between different ground textures styles and freely position trees and rocks on top, similar to how it’s more often done in 3d games. That doesn’t automatically solve the problem of repetitive textures. This often becomes apparent when people make screenshot based topdown maps (possibly with the help of cheats or loading level in a editor) of 3d games. Stuff that looks good enough when you are in first person view on ground, might look awful when looking down from 100m in air.
Back to original topic. I guess the lessons here are:
- One way to make grid less visible is make big tiles, patterns are less visible once you don’t see to many of them on screen
- have multiple layers that you can combine in many combinations increasing diversity. Take a loot at flowers in third example. Only 4/6 flower patches are unique and they are on top of different background tiles. Trail is on top of different grass backgrounds, rock patch is on top of trail and grass.
- Stuff on top of tile doesn’t have to fill the exact shape of tile. The big flower patch has more of pentagon shape. And smaller ones cover only small fraction of hexagon. The water puddles have very organic shapes not trying to follow the hexagon grid. You can also find interesting examples of truchet tilings with organic shapes drawn on top of hex or square tiles. Sometimes to the point where looking at the more complex organic shapes formed from multiple such tiles overwhelm the ability to recognize original grid.
- Stuff drawn on top doesn’t have to precisely fit into cell. Depending on your tooling you could either freely position decorations on top of tile layer. Or you could simply have stuff that goes out of bounds tile shape. In the second case you have to be more careful when so that you don’t place multiple such tiles next to each other or near the edge of different ground types (like grass and water). That might be a bit tricky if you are doing random generation, not so much when manually drawing.
- In theory the layer for decorations doesn’t even have to be same dimensions and shape as base layer. Thus you can achieve similar effect as freely positioned decorations and break apart regularity while maintaining some of the tile based approach benefits. Need to do this very carefully, again you have problems near edge of multiple ground types. And if the grid shape becomes visible in both layers (because you weren’t sufficiently subtle) clash between two different grid shape will probably look awful, worse than single layer of repetitive tiling.
- Choose the tiling size based on typical viewing size. In your examples from Battle brother things look quite good, but if you look at other screenshots with more zoomed out world view the hex grid becomes a lot more visible. Not sure it’s using the same tiles, or different ones.
- I know two general strategies for mixing edges between base tiles. One is to us truchet tiling like approach where each tile perfectly fits in it’s own shape (square or hexagon). But having features connect to the same positions of edges that way multiple tiles can fit together and it seams like shapes are crossing the edges of tiles, but they are different tiles with compatible edges. This can work great with variations of same terrain type, but may result in requiring to draw large amount of combinations if you want to use it for mixing different terrain types. Meaning if you have grass, sand, water, rock, you might have to draw tiles with combination of water+grass, water+sand, water+rock, grass+sand, grass+rock, sand+rock. Explosion of combinations can be mitigated by use of layering, or limiting which ground types can be put next to each other and if necessary doing transition through third terrain if you have missing combinations. If you only have A+B, and B+C instead of doing A+C you put slice of B between A and C.
Other approach is overlap. In tilemap tutorials this is usually shown for isometric tiles where each tile is drawn like cube resulting in pseudo 3d effect. But the same functionality can be used to partially overlap edges of top down tiles. I haven’t seen many tutorials demonstrating this. When using this approach you need to carefully take into account drawing order in which the game engine will draw the tiles and which edge will be on top of others, especially in corners where more than 2 tiles meet. If not done correctly could potentially result very wrong looking intersections. This approach is also more annoying to slice since you can’t easily have single tilesheet with tiles being placed edge to edge with each other. You also can’t easily see how things will fit together in the drawing software without putting it into engine or at least making and moving temporary copies of tiles.
- Completely opposite approach from previously mentioned is having very small instead of big tiles. With good tooling this can allow you to make very organic shapes almost as if you where freely drawing in a drawing software, while maintaining ease of use and speed of tiles. Good example of small tiles is Factorio.
- Objects can cover multiple tiles even if you don’t use freely positioned decoration objections. You can draw objects which are multiple tiles in size. Such tiles can only be placed to in groups to form a complete object. With this approach you can get benefits of drawing with shapes that don’t follow the grid, while maintaining fully tile based workflow and not introducing freely positioned objects.
Factorio is a good overall example that you can use to learn about the various techniques to make nice looking tile maps. It uses a lot of different tricks, it has a level editor so you can see how it works in action, and the assets are stored as regular png files so you can easily poke around and get some insights about implementation details.
Thank you for your very informative answers.
My goal is to try to come up with a nice looking top down map generated in a procedural way. Obviously for the moment I have no assets, so the objective is rather theoretical.
I don’t remember any game with really nice looking using squares. Procedurally of course, and top down, otherwise the platform games are pretty damn nice, but they can use slices and are made in the designer.
I realize that what I like about Battle brother is that by using their hexes, they don’t have to deal with the adjacent borders between biomes. They have snowy mountain tilesets, snowy forest tilesets, but don’t seem to have any declination based on the neighboring biomes for soften the tile.
It’s too bad I only have battle brother for inspiration. Factorio is much more impressive technically than visually. Civilization is in 3d and has a very small map. There is Rimworld, but it seems to me very classic and with 3 biomes max per map.
Do it in order.
First make whatever you consider a “nice looking map” (such as above) and do it by hand.
This will force you to break down the visual parts (trees, houses, etc.) and learn how they can be composed.
Anything procedural will need 100% of the work above as a prerequisite, so you’ve to to do it anyway.
Once you have a style you’re happy with begin to reason about ways to make it procedurally based on what is in your level. For instance a good spacing / spatter map for the trees, proper anchoring to show the house where it should be, and anything else.