How do I represent walls in a 2D tile based map?

Question

I'm trying to create a simple 3D(2D) Dungeon Crawler but I am going to be using simple flat images to show the user they are in a "3D" world. Now what I mean is something like Sword and Serpents on the Nintendo.

Now as you can see on the right is a map, and on the left is the dungeon screen, I don't need help with the left screen no no. But on the right is the map, now I'm trying to think of a way I could represent this. I was thinking of using a 2D array, and doing something like this

w,w,w
h,o,o
w,w,w

So the H is the hero, and in front of him is two open spaces. so the hero can see two blocks around that is it. But if you look at the game, the player can move like this

h,o,o
o,o,o

so everywhere is open. but there is a wall between some blocks. Do you think an ID system would be better for example

1 = open space with walls on the north and south

2 = open space with walls only on the north

3 = open space with walls only on the south

etc, etc.

Do you think the ID system is way better or the use of W for a wall.

Answer 1

You can make your grid store the areas between walkable areas. You don't need to store your hero into the map itself, so that doesn't require you to have positions for walkable areas where the hero is standing. You might need them for other purposes, though.

You could also store both the walkable areas, keyed by floor/ceiling type (e.g. stone floor, water, etc.) and also the walls separately.

You can store both by alternating between wall data and floor. So two adjacent tiles with a wall between would be stored as [floor,wall,floor]. If you accessed tiles before at a particular X,Y location you would now be accessing them at X*2+1,Y*2+1. The left/west wall would be at location X*2,Y*2+1 and the top/north wall would be at X*2+1,Y*2.

I hope that makes sense. A picture would probably help, sorry.

Answer 2

Better depends on what you want.

Example, is a wall a wall?

By that I mean is a wall impassable from both sides (in which case the W case is easier)?

Or for example do you want to have walls which block from one side and lets you pass through from the other. In this case your ID system lets you do that (on one side you mark a wall on the other you don't).

BTW don't do IDs but use flags (basically the same but different handling. Your example says 1 has a wall north and 2 has a wall north, so you always have to check for every possible ID which includes a wall north, given the other 3 options of either wall or not that would be 8 numbers. If on the other hand you use bit 0 as a flag for wall north you can simplify this to (ID & 0x01 -> Wall to the north).

Take also into account that using the first system (i.e. Wall as a separate cell) simplifies things. If you set a cell to wall it is a wall. In the ID case if you put a wall at the northern side you also have to put a wall at the southern side of the northern cell to truly generate a wall.

So just think about what properties the ID system enables (and which you will actually use) and whether this justifies the overhead you have to pay to use a more complicated system.

Answer 3

Do a pixelated map. use getImageData for each pixel of the map in series. make an if statements to check color on ur pixelated map and draw right tiles according to the color