Tutorial 3.2: LibGDX Tiled Editor

Java and Android Studio: Fuck off for a moment. We’ll be doing some creative stuff, finally! Let’s download “Tiled” a free Map editor for LibGDX (I believe there are more editors btw).

https://www.mapeditor.org/2020/03/03/tiled-1-3-3-released.html

When starting this tool, you’ll get a bunch of questions in your face right away. And, this is actually quite a nice way to learn things. The shot is in Dutch, so I suggest you will learn Dutch first before proceeding. It’s easy.

Got it? Good. The 1^st orientation dropdown menu will ask how the map should look, more or less. Orthogonal means “flat”, no (fake) perspective. A pure top-down game like Bomberman or a side-scroller like Super Mario would classify as orthogonal maps.But the editor also allows you to create isometric maps. Still not a true 3D map, but things objects can disappear behind walls, and the camera seems to be at an angle.

Back in the day, THIS was considered high-tec, photo-realistic awesomeness. All walls, floors and objects are still just separate images, glued together as if the world is one solid whole. Making isometric graphics is hard though (especially the drawing-part). Side- or top-down views is easier for an amateur like me. Besides, the throwing mechanics in the game fit better with a simple top-view anyway.

Next you can chose how the map is stored. Either as a simple (text-based) CSV, so you can actually open your map in Excel. Or using a compressed / encoded method. Not that you have to care much, I expect LibGDX doing all the loading. But for one thing, players could easily cheat and screw up your carefully crafted CSV maps.

Drawing order tells which tiles are “furthest”, thus drawn first. Since 2D renderers typically don’t use depth-information like 3D graphics do, you have to carefully order your drawings. Like putting stickers on a paper, stamp the foreground ones last. This mainly matters for Isometric games, where walls in the front (bottom left or bottom right of the screen usually) overlap others.

Finally, you’ll need to tell how big the map is, and how many pixels each cell tile consumes (it is also possible to make a looped (infinite size) map btw). More pixels means higher quality graphics, but also more storage space required. But unless you have hundreds of different tile images, I’d say you can use relative big resolutions.

This is really a matter of “just go & play”. So I’ll just make a standard 32x32 map, using 128x128 pixel tiles. Next you’ll get an empty grid. Of course, we should be painting tiles now. But… first need some tile images then. Just for testing purposes, here you go:

Don’t thank me, you will soon hit this set, and I’ll explain you why ;) As explained earlier on with “Atlas Texture”, we put all possible tiles in a single image. So here we have 4, well, 3 tiles.Grass, pave, “wall” (or whatever), and… white. 

You can import this image into Tiled, and assign custom attributes to each cell, such as an occurance chance in case you want to generate random maps. Or more important for us, a type (street, wall, water), which may become useful later on for determining collisions and pathfinding. You can add even more custom properties. For example, if you plan a racing game, different types of soil may have different friction values (asphalt 100%, mud 50%, …0.

With this on our Bob Ross palette, we can start making a map. Behold, castle… Wolfenstein. 

 

If you never created a game before, this is pretty awesome. And otherwise you may think, this looks… disappointing. I warned you, tile-based games look dull by nature. The major problem we have here:

1.       The pave tiles are not seamless (though these aren’t too bad)

2.       Only 3 different tiles: BORING

3.       There is no transition between grass / pave. Looks unnatural

4.       It’s hip to be square. Not.

5.       Walls don’t cast shadows

6.       The walls are THICK. Maybe that’s ok for a castle, but what if we wanted thinner walls?

The good news is that you can improve quite a lot. The “seamless” problem is just a matter of picking better textures, or using “make seamless” filters in your favourite painting program (there are also online tools nowadays).

Problem 2 is simply a matter of making more variations. You could have the same paved tile, but with some cracks, or slightly different coloured bricks. Have grass with yellow or sandy spots. Make a cracked wall version.

Problem 3 is a (less simple) matter of making even more variations. From pave to grass, from grass to sand, from sand to pave, and so on. To make it even more work, each tile has a North, South, East and West side. So you would need many different combinations. There might be a grass tile with pave on the north, and sand on the west. Sure you can rotate images and such, but all in all, it’s quite a hassle.

Problem 4, what to say about that. Look for yourself. No matter how many pixels you throw into the individual images, this is as square as Fresh Prince of Bell Air’s haircut.

If you have a sand path going through the grass, you don’t want harsh 90 degree angles, nor perfect straight lines. Yet again, one way to solve that, is by drawing even more tiles with all kinds of curves. And yes, again that means for every possible combination (yellow sand on grass, yellow sand on dark sand, et cetera). And worse, it has to properly connect with it’s neighbour tiles as well. As you can imagine, back in the old days, pixel artists weren’t done with their work in just a few days.

OpenRA editor. See all those different tiles on the right? A dozen of pictures, just to get those cliffs done... And it still looks kinda square.

 

There are different solutions as well though: multi-layers. We’ll get back on that.

Problem 5, the lack of shadows. Besides a dozen more tile variations, there are 2 common solutions: A: fuck shadows, and B: multi-layers, again. And if you think “No-Brainer”, I’d like to emphasize option A. How to explain this properly…Either make a polished, beautiful game (which doesn’t necessarily mean hyper-realistic graphics, stylish is a better word), or make it dead-simple. Mine Craft never tried to be a graphics pornstar, but was very consistent in it’s simple blocky style. A game that TRIES to look good, but still doesn’t, is like a monkey with lipstick.

Problem 6, big fat walls. Again: multi-layers. So, multi-layers, how about them?