# Side Scroller Map Editor

This topic is 3864 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi, Just for the fun, I'd like to make an old fashioned 2D game, instead of fancy 3D this time. Something like the good old Double Dragon, or Final Fight. This requires a map editor of course. Although most of the time in these games you can only walk in a rectangle area, I would like to be able to add platforms and stairs. If the game was fully flat, it wouldn't be hard. But since the players can also walk into the depth, the bounding area is somewhat 3D. Imagine Super Mario, but then also with some depth (like in the Double Dragon) games. My question is, how to define the "collision area" / places you can walk? I could make a real 3D mesh for the collision detection, but maybe there is a more simple way. It would be nice if I could make a simple map editor where I can define this, without doing real 3D stuff. Greetings, Rick

##### Share on other sites
i would define depth position and range for collidable objects (so min/max values would be: position +- range/2)
and when testing collisions, i would ignore objects outside of this range

##### Share on other sites
Well, I mean how to define the "bounding area's" for the world itself. In a normal flat 2D game, I could place lines where the player has to stand on, or I could make a 2D array of tiles, and tell for each tile if its "solid" or not. But since there is also depth now, it makes it a little bit more complicated. I'm looking for an nice easy way to define the area.

Greetings,
Rick

##### Share on other sites
first, make it totally 2D, as if it was without depth

then add two parameters: depth position and depth range

for example, player is 0.2 wide in depth
if we define nearest possible value to 0.0 (the lowest part of screen), his nearest location can be: 0.2/2 = 0.1
if the furthest possible depth is 1.0, then his furthest location is: 1.0 - (0.2/2) = 0.9

if there was a wall over the whole place, it would be 1.0 wide, positioned on 0.5
if there was a straight path in upper part, and stairs in the lower part, it would be 0.5 wide (half the depth) and its position would be 0.75 (the stairs would be 0.5 too, but positioned at 0.25)

these two parameters will be always tested as first:
if (obj1.max_z < obj2.min_z || obj1.min_z > obj2.max_z) then no collision in 2d is possible
else: now you can think about these two objects as if they were just normal 2d objects

about 2d collisions - make basic scene node with:
Vector2 position; // x, yVector2 size; // height, width// and for depth:float depth_position; // or simply 'z'float depth_range;// or whatever names you like..

##### Share on other sites

Well, the collision math itself or coding it is not the problem. But I'm looking for a user-friendly way to make this "3D grid" into a map editor. A long time ago I made something like this as well. The screen was divided into small cells, and for each cell I could tell the height, by raising those cells like if it was a cube shooting out of the ground.

But that had a couple of downsides. First of all, the cell-size was fixed. Because they were small, it was a lot of work to do this. And multiple platforms above each other was not possible.

greetings,
Rick

##### Share on other sites
why do you want to use any grid at all?
i dont really get it.. do you need grid for some reason?
[by linear, i mean that positions can be any real number, not only "nearest" as it would be when using tiles, grid, etc]

##### Share on other sites
I will direct your attention to the classic game that robbed me of many quarters in the arcade days of my youth - Golden Axe. This sounds like what you want to do and the tile mapping is done almost the same as it would be for a 2d RPG like Final Fantasy 1-6 the biggest difference would be the images themselves are at a different angle than most others although I am sure you could get away with using some RPG Maker tiles since they have some decent "sudo height" tiles.

sceenies of Golden Axe on various systems (although none of the arcade).

I would recommend Mappy for now until you can make your own.

##### Share on other sites
Hi,

That is indeed what I want. Making the code or tiles itself is not a problem though. I have a tile-grid where I can place the tiles in. The tiles don't have a fixed size though. First I have big tiles. When I need more details, I can split that tile into 4 sub-tiles, and so on. But that is the visual part. That is not going to be a problem, although I'm still thinking about how to render it fast (using an atlas texture, how to deal with animates tiles, ...).

But the collisions bug me. Not the detection itself, that is relative simple as well. But I need to create a nice interface in the Map Editor to define the ground where the player is walking on, platforms, walls, slopes, stairs... So it's not really a technical problem, but I'm looking for a proper User-Interface to do this.

You mentioned "Mappy", is that a level-editor? Maybe it's a good idea to look at some existing level-editors for such games so I can see how they did it.

Greetings,
Rick

##### Share on other sites
This might not work, but the way I would do it is that each tile can have six collision "types", the standard four sides and two diagonal ones. You would use position of the characters feet for collision detection(so the bottom-middle of the sprite). Assign special values to things like stairs/ladders and drop-offs. This is probably how most old tile based games did it.

You could give Tile Studio a try, I prefer it over Mappy.

##### Share on other sites
Hmmm... The problem is that the world is "3D". The link you gave shows a nice example of how the collision detection works, the tiles are "outlined", the player walks over these lines. But I need depth as well, like you can see on the screenshots that evillive2 gave.

I saw that Mappy supported Isometric world as well. I think that comes pretty close to what I want, although in my case the camera is viewing straight forward. I guess in Mappy, walls are defined by "raising" the tiles. Maybe I should do that as well, although its a little bit tricky because the tiles need match with the (invisible) collision grid. And it could be quite a lot work in some cases.

Is there a level-editor for games like Double Dragon, Final Fight, or Golden Axe? I think that would give exactly the solution I'm looking for.

Greetings and thanks for helping,
Rick

##### Share on other sites
I don't think you really need an editor with "depth" to do this. Most of the time the Y position of the characters feet would be equal to the depth, so normal 2D collision would work. The only exceptions I can think of would be stairs and ladders where the Y value changes, but the depth is the same.

##### Share on other sites
Quote:
 But I need depth as well, like you can see on the screenshots that evillive2 gave.

Actually, the depth is all an illusion made by the graphics. Take a good look at the way they are set up. Although it looks like they are on a platform they are really only 2 or so tiles away with a graphic tile that looks like it raises the height in between. Games like Golden Axe and Double Dragon only allowed you to actually hit someone on the same horizontal line of tiles as you. Simple sprite rectangle vs rectangle collision will work fine with an added check to see if the sprites feet fall in the same horizontal tile line.

I know, the grid doesn't match up with the tiles (they were probably isometric anyway) but you can see my point.

If you look at the green circles, you can see how it encompasses where the sprite should be standing. This circle could be used as a circle circle (very fast) collision between sprites so they cannot occupy the same space. Notice how the jumping guy's circle covers well below his feet. Just because he jumped does not mean he moved to a different tile. If the sprite was to move up while jumping they could possibly move to the other platform. These circles should actually be smaller but you get the idea of what they represent.

The orangey red squares are like a bounding box. This is just the space the sprite occupies in eye coordinates. If you were to try picking a sprite with a mouse you could use these rectangles. Again notice how I made 2 rectangles for the jumping guy because he actually occupies the tile lower than where he is jumping.

Now look at the blue/gray ellipses. They could/should actually be rectangles for speed purposes and possibly thinner but I would use these as a bounds of influence. Notice how they extend more in the direction they are facing (except when the guy is jumping). Anything whose green circle falls into those bounds would be affected by say an axe swing or hitting an action button. Obviously it is subjective depending on the game.

For the most part the tile aspect of a game like this only comes into play for visual reasons and to restrict player movement. If you look at the grid you can see that being on the upper platform would keep you safe from the people below and the people below would be safe from you. A collision grid is not all that necessary since the tiles themselves can simply be flagged walkable, jump, water etc. and a simple check of what tile you want to move to can easily solve that but you should be able to see how everything is still 2d space and how the tile based aspect is really only for visual effect and movement but with some careful planning it gives us a feeling of depth.

I hope that helps. Again, the drawing is out of scale and doesn't accurately depict the tiles but it is only meant as a guide. Obviously the logic can get as complex as you want it to be but those are the basics.

##### Share on other sites
Thanks for the fine example!

The world itself is not really 3D indeed. But the players do have X,Y and Z coordinates. A jumping guy that performs a kick or something, is drawn higher in the screen (higher Y coordinate in my case), but when checking collisions, it still should be at the same Z coordinate.

For example, in your screenshot there is a platform that lies a little bigher heigher (the "dark green" area top-left). I could make the cells that cover the horizontal wall "block" the player. If the player walks above, it will collide to that horizontal wall. But when the player is already on that platform, it should be able to jump down when walking below.

The same problem occurs when trying to get on that platform. If I walk from the right to the left in that picture, I should collide with that platform. But when jumping, I should be able to land on that platform. And when walking back to the right, the player should fall down again.

In other words, I need to define somehow that there is an obstacle. One way would be by "raising" all those cells that cover the platform. But that is a lot of work, and because of the fact that the tiles are square in my situation, the edges get "blocky".

Thanks for helping,
Rick

##### Share on other sites
I think you are missing my point. If you look at the picture there are transition tiles between the ground and the "platform" that are not walkable. This causes you to have to jump to get on. There is no actual height here.

For instance, say the sprite that is jumping up wanted to get up to the next platform. The "height" you speak of is the number of unwalkable tiles "above" the character. When it hits the maximum height of the sprites jump and it is coming down, you measure to see if the tile it's feet are on is walkable. If not it continues to fall until it's feet hit a walkable tile. Remember that gravity is really the only force you are working with here.

If for example the sprite was to the right of the platform and was jumping left to get on top there is still a 1 tile transition there they would need to "jump" over and come down on.

This will look like the sprite jumped up also because if you trace the path of the jump, on it's way down the sprite will land on a tile with a lower y value (assuming 0,0 is the top left of the screen).

Simplifying the above logic again you could also say that if a sprite was on the platform and walked down or to the right, once it hit a non walkable tile it would "fall" the distance of however many unwalkable tiles there were in between. Again, this could be something as simple as a flag set on the tile to handle sprite vs tile collision.

I hope that makes sense because adding height into this type of game would really complicate it when all you need is a simple 2d x,y coordinate system.

If you want you can PM me and we can work together on a small demo with programmer art :) which we can share with this post once it works the way you want.

##### Share on other sites
Uhmm... Indeed I missed the point. It has been a while since I've been (game)-programming :)

I should find some space to place pictures, explaining it is difficult for me. But ok, you mean basically there are 2 types of tiles; "walkable", and "unwalkable". In that case, that should be pretty simple to define(besides of slopes like stairs). When the XY coordinates are on a "unwalkable tile", the player will fall down.

That still leaves with a problem though. Let's say the guy on the left jumps extremely high. He should land again on the tile where he "lifted off". That is not so difficult, I could remember on which Y he started. But when he jumps to the left or the right, he might land on a heigher or lower tile, in case there is a height difference. For lower tiles this is simple as well. The player lands if his Y <= "lift off Y" (or y >=, in case 0,0 is the top of the screen), unless that tile is "unwalkable" (which means he falls further down).

But where does he land if the platform lies at higher level? From the picture, I could say the platform lies 2 tiles "heigher". So, the landing Y coordinate should be:
"lift-off Y" + (2 x tile-height)
But how do I know that this platform is 2 tiles heigher? I could perform a vertical check; count how many non-walkable tiles are between the lift-off Y and the current Y coordinate. Something like this:
// Y+ means up (I'm doing it in OpenGL, using a little bit different coordinates//// p.xTile // sprite(player) current x tile// p.yTile // sprite(player) current y tile (height)// p.yLiftOffTile // y tile where the player jumped from originally// Measure how many unwalkable tiles there are between the player and the // original lift-off Y position:    yLandingTile := p.yLiftOffTile; // Suspected landing Y coordinate for this x    while (world.tiles[ px, yLandingTile ].nonWalkable) and          (yLandingTile < p.yTile)    do        ++yLandingTile;        // As soon as there is a walkable tile between, break, since that tile        // will belong to a platform on a different "depth" / "Z"

Is that the way to do it? I think it works, but maybe I'm still doing it more difficult than nescesary, and/or this method has some flaws...?

>>If you want you can PM me and we can work together on a small demo with programmer art :) which we can share with this post once it works the way you want.

Programmer art... That was one of the reasons I did this for fun. When doing a "serious" 3D-thing, I end up with creating dozens of textures, models, and so on. It's almost impossible to make a Mod or good looking game these days. Anyway, I first need to finish my map-editor. I can send it to you if you like. Its written in Delphi though. The first version just creates a world with x layers (= a grid), with its own atlas texture. You can import bitmaps and place them somewhere on the atlas texture. So far, there aren't any entities to place.

Thanks again a lot,
Rick

[Edited by - spek on June 25, 2007 6:55:37 PM]