Sign in to follow this  
jagguy2

2D scrolling

Recommended Posts

I am making have a 2D game with 32X32 tiles. It scrolls vertically . I have 2 screens of background tiles and what I want to happen is when I reach the top of the tiles I want the bottom set of screen tiles to appear at the top so I can continually scroll vertically. I also have sprites at certain spots on the background. What is an easy way to do this?

Share this post


Link to post
Share on other sites
Just do something like this: (suspiciously C++ looking psuedo-code, since no programming language was mentioned)

//The number of rows that fit onscreen at one time.
//We add one, because we might have half a tile showing at the top, and half at the bottom.
numberOfRows = (myScreenHeight/MyTileHeight) + 1

//The current row at the top of the screen. (Where we start drawing from)
startingRow = cameraY

//Loop through each row onscreen.
for(int row = startingRow; row < (startingRow + numberOfRows); row++)
{
//Loop around, if needed, by ensuring 'row' stays between 0 and the max number of rows we have in a map.
if(row >= maxNumberOfRowsInAMap)
row -= maxNumberOfRowsInAMap;
//You only need this one, if you can scroll down also.
if(row < 0)
row += maxNumberOfRowsInAMap;

//Draw each tile on this row. (I assume you can't scroll horizontally, since you implied that, but this can easily be made to scroll horizontally as well as vertically)
for(int col = 0; col < numberOfCols; col++}
drawTile(col * MyTileWidth, row * MyTileHeight, myArrayOfTheMapsTiles[col][row].image) //drawTile(pixelLocationX, pixelLocationY, imageToDraw)
}


Pardon the very long variable names, those were just to explain better. [smile] You'll want names that are more concise (Variables shouldn't really be anymore than 3 words merged together, in my opinion).

Share this post


Link to post
Share on other sites
Quote:
startingRow = cameraY

//Loop through each row onscreen.
for(int row = startingRow; row < (startingRow + numberOfRows); row++)
{
//Loop around, if needed, by ensuring 'row' stays between 0 and the max number of rows we have in a map.
if(row >= maxNumberOfRowsInAMap)
row -= maxNumberOfRowsInAMap;
//You only need this one, if you can scroll down also.

*** Source Snippet Removed ***
).



I have 20 rows per screen.
I have 40 rows in total and rows 0-19 displayed first and rows 20-39 off screen.
I have a 2D array and just display all rows with an offset so it appears to move.

I am not clear on maxNumberOfRowsInAMap means 40 or 20 in my case.

When I get to row 39 on top of screen as it scrolls down you mean I renumber the rows

20-39 becomes 0-19
and rows 0-19 become 20 -39





Share this post


Link to post
Share on other sites
Quote:
I have 20 rows per screen.
I have 40 rows in total and rows 0-19 displayed first and rows 20-39 off screen.

I have a 2D array and just display all rows with an offset so it appears to move.

I am not clear on maxNumberOfRowsInAMap means 40 or 20 in my case.

maxNumberOfRowsInAMap means 40.

Quote:
Original post by jagguy2
I have a 2D array and just display all rows with an offset so it appears to move.

If you draw every tile, even when the tiles aren't all visible, it takes extra time.

If you ARE doing it that way, then you'll have to draw each tile twice: once for the tiles that the player currently sees, and once for the tiles the player will eventually see. (See this - look at the animated image near the top)

However, here's what I'd do in your case, if you are drawing every tile, even if they aren't visible:

Split your 40 tiles into two groups of 20 (two different arrays). Draw both arrays. Array1 first, then Array2 under that. When Array2 entirely goes below the bottom of the screen, and isn't visible anymore, move Array2 to be above Array1, until Array1 goes entirely below the bottom of the screen, then move Array1 above Array2, and keep doing that.

Here's a illustration to help you visualize what I mean:



Don't re-order or re-number the array, split the array in half, and draw each half once. Just move one array on top of the other array (vertically on the screen).

Share this post


Link to post
Share on other sites
hi,

thanks for the detailed explanation it was well thought out.

Just to be tricky again I aim to have 160 rows in total -8 screens and images off screen I make collapsed as this is what you do in silverlight to not draw them.

I could have 8 arrays or maybe just 2 .
What is best you think?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this