Best way to make Castlevania map?

I guess the specific issues I am having is calculating and rendering the rooms sizes on the map correctly to their "in-game" counterparts and making sure they are explored at the same rate the player is moving around in the level.

Then rendering the placements of links and borders that line up properly is also a challenge of course. Another complication, that you brought up actually, is I do have offsets when the player leaves/enters a room. While it works great in-game to make sure I can put links at different heights and such, I suspect that it might also make rooms on the map, with their real sizes, would start to overlap each other. Does that makes sense?

(I realize now that I am done writing this post that my "specific issues" is more like "the entire map system" XD)

Haha, sounds like you just opened a can of worms...

I know exactly what you mean about offset entrance positions potentially leading to overlapping rooms, and I think that would be a problem. A lot of old games (and probably new ones too) have some quite TARDIS-like geometry going on, made possible only by sneaky tricks like using doors that aren't really doors, but are actually teleporters to a whole different area of the map.

eg. Please login to see this link. (that house sure seemed a lot smaller from the outside...)

It's probably worth mapping out your world as you design it - even if it's only in Microsoft Paint (1 pixel per tile) or on a sheet of graph paper - just to make sure you avoid that kind of issue (and it's probably good to be able to visualize your game world in that way too).

I would recommend you try to pick a standard unit of room size, and make sure that any larger rooms are an exact multiple of that (eg. 2x1 units, or 2x2 units), and that all rooms are aligned to an invisible grid with cells that size. You can clearly see that Castlevania does exactly that from the mini-map screenshot.

In terms of drawing the room outlines and doorways, there are a few alternatives. The easy but ultra-tedious method is to just hand-draw the map in Photoshop or whatever. Or you could create a little tool to help generate it for you at design-time. Or you create it programmatically at runtime (if maps are procedurally generated, then obviously that's your only option).

To generate them programmatically, I think you really just need some variant of auto-tiling. Instead of using the tile types you would look at whether adjacent map units are connected and whether they are part of the same room.

For each cell in the mini-map, you can say:

- Is the cell directly to the North connected by a door, but not part of the same room? If so ADD 1.
- Is the cell to the North part of the same room? If so, ADD 2.

- Is the cell ...East connected but not part of the same room? ADD 3.
- Is the cell ...East part of the same room? ADD 6.

- Is the cell ...South connected but not part of the same room? ADD 9.
- Is the cell ...South part of the same room? ADD 18.

- Is the cell ...West connected but not part of the same room? ADD 27.
- Is the cell ...West part of the same room? ADD 54.

You end up with a total value betwen 0 and 80, which maps to one of these 81 tile images:

Please login to see this picture.

...giving you a map that looks something like this:

Please login to see this picture.

I made an example here: Please login to see this link.
(the room placing is super buggy for some reason, but the actual map drawing part works fine)

The other alternative, more common in strategy games than metroidvania games, is to just render the mini-map the exact same way you render the actual game world, but instead of placing a tile, you draw a coloured pixel on a surface object.

I really love the overall visual style of the game! It looks like it could be really fun too - reminds me a bit of the very old click game "Plasma Warrior", and to a lesser extent of games like "Monuments of Mars" and "Exile".

The mini-map seems to work, so good job on that - there's just something a little "off" about the way it looks. Maybe it's all that blue? And it's a bit static - maybe make the player symbol flash or something. Also, it's quite a handy to highlight unexplored areas (ie. rooms that the player has found an entrance to, but not gone into yet), so that might be worth considering, as it reduces the amount of time that players spend wandering around aimlessly.
Along the same lines, it might be worth adding symbols for various other key locations - save points, heal points, teleporters, locked doors, unsolved puzzles, shops, NPCs, etc - in which case you'll probably want to increase the size of the grid cells.

It reminds me a little of that
Please login to see this link.

i did it last year

Oh man, that Goof Troop game looks great. One of my favorite SNES games.

And Plasma Warrior too. That game was super creative, with the really linear Triangle jump, as well as the strict color palette.

Thanks for the super-detailed reply MuddyMole !

That auto-tiling is especially handy. I will definitely will be using it for more than just maps in the future

I've been putting together my own version, following your steps as well as I can, in order to understand what is happening. The "links" between rooms elude me a bit. If I am understanding it correctly then you are placing a "North flag" on the cell above a door connection and then a "South flag" on the opposite cell underneath? Then repeat the same method but with East and West flags for horizontal connections? I am asking because I got an alternate way of placing the links and it *SEEMS* to work but I haven't fully wrapped my head around it.

Please login to see this picture.
The top-left cell have a North and East flag toggled while the other two cells only have a single flag on(West or South). Is this anywhere close to how it works?

I am going for something closer to the Castlevania-look so my doors are just lines.
Please login to see this picture.
It's almost there!

I also added an extra transparent frame to the set which is toggled on if a tile contains nothing. But it looks like I am missing a few corner tiles. Though I think it works the same as in the original example(pictured below).

If I wanted tile versions for these corner cases, is there a way I can go about that?
Please login to see this picture.

Yes, you've understood perfectly, and you're absolutely right - there is no real reason to have separate flags for both North and South, or for both East and West. I just seem to keep doing it out of habit, as sometimes it does make things easier if every cell has its own complete set of flags (like in pathfinding or procedural map generation systems).

Making the corners look nice (ie. supporting non-rectangular rooms), is certainly possible, but it's going to be tricky, because you need to consider not just the 4 adjacent cells, but the 4 diagonally adjacent cells as well. The number of unique combinations then increases dramatically - by my maths, you'd need 752 different tile images (my maths is probably wrong, but the point is that it would be a very large number).

The best thing will probably be to ignore the doors to begin with, and just draw the outline of the map - looking in all 8 directions, to see if the neighbouring cell is part of the same room (this will draw solid walls between rooms that are connected by doors). Then afterwards, draw the doors as a separate object (most of which will be transparent) over the top, covering up the unwanted walls.

That way, you end up with 256 possible tile values, but those can be mapped to just 47 unique tile images (there's no easy way other than to look up the corresponding tile from an array). And then the door tiles are much simpler, and you should only need 16 tile images.

See the "Auto-tiling (advanced)" section here: Please login to see this link.

That's probably how I'd do it anyway. I might have a go later...

Meanwhile...
One of the nice things about procedurally generating maps, is that it's easy to kill two birds with one stone.
There's really no sensible way to test and debug the map generation system without rendering the results - and then that's most of the work of creating a mini-map already done.

Please login to see this picture.

^ That's stage 1 of the map generation process done, complete with placement of locks and keys. The next stage is to look at each room and randomly select a room "template" that has exits in all the right places, and randomize some of the contents - and then it's pretty much good to go (see: Please login to see this link. ).

Note that in this context, locks and keys don't have to be literal locks and keys. A "lock" could be a ledge that is too high to reach by jumping normally, and its "key" would be an item that gives the player the ability to jump higher or perhaps even fly. Alternatively, a lock could be an enemy that is (almost?) impossible to defeat without a specific weapon, and then that weapon becomes the key. The possibilities are endless... It should also be nice and easy to add "two-part keys", which are basically just fetch-quests, where you find an NPC, find the item they want, and then they give you a key.

Here: Please login to see this link.
It's still buggy, and it's just using tiles I had lying around, but I made it work with corners now, using the method described above.
Apologies for the completely bonkers direction numbering system (you'll have to pay close attention to that), but it uses a tilekey file I made years ago to map the 256 values to 47 frames, and it's incredibly laborious to create a new one of those (although I've been working on it recently).

Hey MuddyMole, I was just playing with your example and I can't get the door placement to work. Seems like right clicking should place a door?

Quote from airways

Hey MuddyMole, I was just playing with your example and I can't get the door placement to work. Seems like right clicking should place a door?

You have to click and drag from one square to another to create a door between them. It was just the simplest way to get the data into the array, to show how the main part of the example works. In practice, you're already going to have an array with all that data from when you created your map.