Original Post
🔒 Locked
How to implement a Scroll Field?
Advertisement
Hi,
there are several ways to do this but one is to use a tile set for graphics and an array to store how to draw the background.
A tile is just a square, for example 32x32 pixels, that fit together with other tiles to form an object, platform, stones, ground or whatever.
In your array, you store indexes for which tile to draw on that location. Lets say you have a level that is 100x40 tiles wide and tall. Each tile is 32x32 pixels, meaning that the level would be 3200x1280 pixels in size. Your screen resolution might be 640x480 pixels, meaning that you can show 20x15 tiles on the screen at the same time.
You can either create an 2-dimensional array of size level[100][40] or a 1-dimensional array of size level[(100 * 40)].
Now, you store how your background should look by storing indexes to your tiles in your tileset in the array. You have a pointer that points into the array of the current location and you move this pointer if you need to scroll the screen.
I believe there are several articals about this on this site.
Good luck!
Calvin
A game like Mario has a predefined level structure, so tile information for each level is most likely stored in a buffer.
First you create a bounding region (your visible screen area). Pretend the screen is 640x480. Next, create relative position values for your character. This is your character''s X/Y position on the visible screen. Then create a coordinate pair for the screen''s position.
Okay, ever notice in Mario how your character can never move past the middle of the screen? The game works in a way so that when you''re pushing against the center of screen, the level scrolls by. Yet you may walk anywhere within that first region of the screen freely; the screen will not move.
The benefit of this is that in Mario, you often have to stop in an area and move around a lot. If the game were to redraw the background buffer every time you moved, it would be slower. The ability to move around freely in the screen, but "push foward" when you want to advance, helps performance.
So, getting back to the code aspect..
You have your entire level stored in a buffer. You have variables for your character''s X/Y position on the visible screen. And you have variables telling the game where the screen is in the buffer.
In psuedo-code, when your character is pushing against that center line (his maximum relative X position; the center of the screen = 320), you increase the screen''s X position, and redraw the visible screen area accordingly. When your character is pushing against the far left (minimum relative X position; 0 + the character''s width in pixels), you decrease the screen''s X position, and redraw the screen.
Sorry, this probably sounds a lot more confusing than it really is, but I''m eating pizza, and I''m rambling.
swift URL | browse my bookmarks [server may not always be on]
First you create a bounding region (your visible screen area). Pretend the screen is 640x480. Next, create relative position values for your character. This is your character''s X/Y position on the visible screen. Then create a coordinate pair for the screen''s position.
Okay, ever notice in Mario how your character can never move past the middle of the screen? The game works in a way so that when you''re pushing against the center of screen, the level scrolls by. Yet you may walk anywhere within that first region of the screen freely; the screen will not move.
The benefit of this is that in Mario, you often have to stop in an area and move around a lot. If the game were to redraw the background buffer every time you moved, it would be slower. The ability to move around freely in the screen, but "push foward" when you want to advance, helps performance.
So, getting back to the code aspect..
You have your entire level stored in a buffer. You have variables for your character''s X/Y position on the visible screen. And you have variables telling the game where the screen is in the buffer.
In psuedo-code, when your character is pushing against that center line (his maximum relative X position; the center of the screen = 320), you increase the screen''s X position, and redraw the visible screen area accordingly. When your character is pushing against the far left (minimum relative X position; 0 + the character''s width in pixels), you decrease the screen''s X position, and redraw the screen.
Sorry, this probably sounds a lot more confusing than it really is, but I''m eating pizza, and I''m rambling.
swift URL | browse my bookmarks [server may not always be on]
Topic Locked
This topic has been locked by a moderator. New replies are not allowed.
Sign in to reply to this topic.
Advertisement