Tutorial 3.0: Level one - Tile versus Image based maps

What's next? Let's check our roadmap.

Earlier on we made a camera, but there is nothing to look at other than that stupid Orb. It’s time to get more visual stuff on our screens, and our baby-engine will help us with that.

You could go on from here with foes, and trying to make the mechanics to throw them around. But I prefer to have my screen filled with an environment first. You know, the MAP. It will give a sense of size, orientation and style. And after that, it’s probably time to add some controls so we can move our camera over the battlefield somehow.

At this point, I have 2 types of maps in my head: Tile based, and Picture based. Tile based maps are basically (2D) grids. Each cell has the same size and shape, and is filled with either a floor-tile (sand, grass, pavement, …), or a solid structure (wall, rock). Oh, and maybe some special types as well, like Lava, water, acid, teleporters, Star Wars tractor-beams, et cetera. Tiles are pretty simple and effective. Hence, they have been used since the Nintendo 8 bit and even way before. However, they lack some visual glamour. They quickly become repetitive, unless you have dozens of tiles, and then still… Imagine everything in your house being made of the same sized bathroom checker tiles.

Quarantine + playing Sim City… I have an idea… By drawing enough different tiles, you can still get impressive results. But keep in mind, everything is based on those squares here.

The other approach is just making an image. Make a photo of your garden, table, Lego city, whatever. Or draw a nice map in photoshop, or a mixture of that. Pictures are a lot more varied than tile-based maps, and gives a lot of artistic freedom. You’re not necessarily bound to square shapes.

Here you play as a cockroach (yes). Game is still as flat as our planet in the 16^th century, but the photographic backgrounds (3D renders) add a lot detail that is impossible to achieve with tiles only.

Tiled based maps versus Image based

But, they lack in other areas. First of all, it’s still just a picture. No 3D shape. Maybe you took a photo of a bumpy terrain with rocks and obstacles. But for the PC, pixels are just pixels. You still have to define somehow what is considered floor, and what not. For players, this may be confusing. Tile-based maps might be simplistic, Nintendo 8-bit style, but explain themselves pretty well. After 2 seconds you know where you can and cannot walk. Blue is water, red = lava, black = a deep pit, simple rules. Unless you have a very clear style, photo-based maps can be a bit confusing. Also the objects on top, may not blend-in nicely, appearing as if they really float above, disconnected from the world. Though well done, the cockroach in “Bad Mojo” above seems a bit out of place. And can you clearly tell where you can or cannot go?

Another issue is the resolution. Either your image-based maps are small, or ugly & blurry. Or they consume a massive amount of video memory if you use high-resolution pictures. Or a mixture of all three problems. Tile-based maps are cheap. Doesn’t matter much if the map is 10x10 or 999x999 tiles, as it simply keeps repeating the same (small) textures.

Another thing to consider, image-based maps are harder to make. Any dork can make a maze with a set of tiles. No artistic talent required here, so within no-time you have dozens of maps. On the other hand, tile-based maps don’t have real unique (visual) treats, making them all the same more or less. Quality versus Quantity. There is a catch though. Where images can be made in Paint or whatever program, tile-based maps require an level-editor that you will have to make first. So initially, image-based maps may actually be easier.

Next are the shape and collisions. Tile-based maps are made of squares / rectangles (or hexagons maybe). Primitive shapes, straight walls, 90 degree corners. Image based maps can be any shape really. The walls or platforms could be circles, swirls, big letters. Even demons, see below.

In a game like “Worms”, a (square) tile based approach wouldn’t work. The (random generated) images on the other hand can be anything. Though I;m guessing the underlying technique in this old DOS game (thus very limited video memory) is a bit more complicated than just drawing a large bitmap. My guess is that the map is actually a mask, blending between 2 or 3 different (tiled) textures like "Rock" and "Surface".

Last but not least, both require a slight different programming approach. Collision detection and pathfinding are dealing with different data structures. Cell-based maps are easier regarding dynamic behaviour. You can remove a well, unlock door (tile), or construct extra walls quite easily. Or In Sim-City terms, you can “de-zone” a tile, and turn slums into shopping malls.

So, what will it be?

What fits best with our type of game? What are we capable of, production wise? What kind of style are we trying to achieve? Earlier on, I mentioned clay. Not in particular for the maps, but mainly because it makes the puppet sprites just a lot easier. But clay puppets on a MS Paint “programmer-art” background… that’s not a match. That’s like going to work on pink slippers.  If the puppets are clay, then so should the environment (and items) be.

Clay doesn’t lend itself very well for a Tile-Based approach, as clay is rounded, chunky, bumpy, floppy, and “random”, not exactly in straight patterns. 1-0 for Image based maps then.

But do we want curvy, non-straight walls, game-play wise? You’ll be throwing things here, so that brings Billiards to my mind. And billiards just works better on a perfect rectangular table, rather than some bumpy table sculpted by Fred Flinstone. Straight walls will give somewhat predictable results, in case you plan to have things bouncing off. Scoreboard: 1-1.

Being able to destroy or add walls sounds like a logical element in a game like this, where the main goal is to keep your foes “outside the base”. Creating new walls and enemies tearing them down. Digging water or mud pools to slow down enemies. Making traps or watchtowers. Yep, definitely 2-1 for Tiles-Based maps. I made up my mind: a hybrid. Clay (image) backgrounds, but simple square tiles on top. So in essence: a Tiled-Based map.

Still got a lot of claying to do, but you get the point