How do I create curved ground in a 2D runner game?

Question

If I use tiled based map I can have only rectangular objects.

What is a strategy for creating slanted or curved ground in that case? Should I use a tile-based map, or should I define corner points in the map and create the ground programmatically?

Answer 1

There is an easy way to fake this in a 2D tile game. First you create a tile that contains the curved shape (using alpha 0 for the "empty space"). Then for each pixel on the x-axis you store the height of the highest point that has a non-zero alpha. While your character is over one of these curved tiles, your collision routine then checks the character's x-axis position relative to the tile and uses the height value you stored to determine the appropriate y-axis position for the character. You could also store an angle for each x-axis unit if you want your character to rotate based on the current slope.

This implementation is very easy to do and runs very fast since your calculations are done at design time (or at load time if you choose to do it in code) and the collision detection only requires a look-up.

Here is a (very simple) example image:

At x=5 the height is 10 pixels (so y=10), and at x=15 the height is 30 pixels (you should store this for every value of x).
Also, because of the (mostly) even slope the angle is about 45 degrees for ALL values of x - this will obviously vary based on the type of tiles you have, and you can easily calculate it, or just approximate it visually.

EDIT: As requested, some basic code:

Here it is important that both the player and tile positions are in the same "space" (ex. both are in world space) so that the array index look-up value results in a value in the range [tile.left, tile.right]. Also, the test for whether the player is over a tile should probably be something more scalable in a real implementation, but this will do to illustrate the idea.

// check if player is within the bounds of the tile and find their height
if ( player.x >= tile.left && player.x <= tile.right &&
     player.y >= tile.top && player.y <= tile.bottom )  {
   player.y = LookupY[player.x - tile.left];  // Set Player Y from X Relative to Tile
}

Generating the LookupY table will be highly dependent on the API used for graphics, so I will leave the technical details out, but the basic algorithm would look something as follows:

LookupY[x-axis size];   // Array sized to each x-axis pixel
for ( x = each x-axis pixel )  {  // Loop for each x-axis pixel (left->right) 
    for ( y = each y-axis pixel )  {  // Loop for each y-axis pixel (top->bottom)
       /* extract the pixel's ALPHA value here (API specific code) */
       if ( alpha != 0 )  {  // Stop when first non-zero alpha is found
          LookupY[x] = TileHeight - y;  // Calculate Height from Bottom of Texture
          break;  // Stop testing on y-axis; height is found
       }
    }
}

This is a very basic implementation and since the question does not specify any specific language and/or API I really can't elaborate much more, but feel free to ask if anything is still unclear.

Answer 2

I would suggest that you have a look at tile collision detection. You could easily have a slope shaped tile and make the bounding box triangle shaped.Its true that you can only have rectangle shaped objects as far as graphics go but for collisions depending how you write it you could have any shape.

If you haven't really looked into collision detection (and i don't blame you, its not the first thing you think of in a tile game) then i found a good article on it for Java using quad trees.

http://gamedev.tutsplus.com/tutorials/implementation/quick-tip-use-quadtrees-to-detect-likely-collisions-in-2d-space/