My FAQ

I thought I’ll dedicate a section of my blog to the questions I ask and have asked in the past in my journey of game-development.

2D Games

1. How to do Side Scrolling(that is, scroll the level) in the classis mario-type game ?

2. How to do collision detection in side scrolling (mario-type) game ?

---

Answers

2D Games

1. How to do Side Scrolling(that is, scroll the level) in the classis mario-type game ?

   I ran into this problem and posted

   here.
   There may be more than way to do it. But, I would first like to state what we want to achieve and then describe my solution.

For now, we want to achieve this:
Initially the player starts moving to right and as soon as he moves beyond the center of the screen, the view needs to shift right. The viewport moves over to the right by 1 column. Thereon, as the player moves, the viewport keeps updating. This results into the view being centered on the screen till the player reaches the end of the map.
Similarly, when the player moves towards the left and moves beyond the half of the screen, the view needs to shift left. We facilitate this by decrementing the viewport by 1 column.

Okay enough words..lets get down to implementation:


class Player
{
//other member Fields
Vector2 position;
...


position gives an idea of the player’s position in the world coordinate system.

private void updateScrollingFrame()
{
world.ViewPortX = posnArrayX - Constants.viewPortWidth / 2;
//clamp the world.ViewPortX between min value of 0 and max val of ( mapwidth - viewPortWidth)
}


This needs to be called from the update() method. We refer to totally unknown variables in here. Ill quickly go over each one of them:

world : This is another class, which is responsible for drawing the level and holding a mapArray[mapWidth,mapHeight].
world.Viewport: World contains a viewport which is nothing but a rectangle, that holds information about which section of the world is being currently displayed. Imagine this to be a frame and only that part of the world is visible which lies underneath the frame bounds.

posnArrayX = position.X / tileWidth;

posnArrayX refers to the current X tile in the mapArray in which the player is.

Constants.viewPortWidth = A constant which identifies the width of the given viewport.

Okay, so what are we doing here.

we always try and center the viewport on the player (only along the X axis). Thus,

world.ViewPortX = posnArrayX – Constants.viewPortWidth / 2;

Updates the viewport rectangle’s top left X coordinate as the player moves either towards the left/right. (Give it a thought, better use pen and paper to visualize this..it will become way more clear).
And the clamping of viewport’s X coordinate takes care of the viewport by keeping it within the bounds of the world map.

This is all there is to scrolling

Also, a thing to watch out for is your drawing code. You need to take into account the viewport when drawing anything (since only those things need be drawn that are within the viewport).

I will just post the code that i used to draw my player’s sprite:

Vector2 drawPosition;
//drawPosition.X = (posnArrayX - world.ViewPortX) * Constants.TileWidth;
drawPosition.X = (position.X - (world.ViewPortX * Constants.TileWidth));
drawPosition.Y = position.Y;
Game1.SSpriteBatch.Draw(objectSprite, drawPosition, Color.White);

Using posnArrayX will make the sprite jump as you move it. But, if you use position.X,, it moves the player pixel-by-pixel. I wont get into the details of this, but if you have trouble understanding this, send me an email or put in a comment here.

Hope this helped you a bit.

Goto Top
2. How to do collision detection in side scrolling (mario-type) game ?

   Coming soon.

   Goto Top

---