Allegro.cc - Online Community

Allegro.cc Forums » Game Design & Concepts » side scrolling tutorials/source?

This thread is locked; no one can reply to it. rss feed Print
side scrolling tutorials/source?
relay01
Member #6,988
March 2006
avatar

Can anyone recommend a good C++/Allegro side scrolling game tutorial... I get the tilemapping but I'm not getting how to expand beyond a single screen... How about any good source code that deals with this... (working on a megaman style game)

_____________________________________

CosmicR
Member #6,889
February 2006
avatar

SonShadowCat
Member #1,548
September 2001
avatar

I could give you the source for my side scroller,the functions are commented but not the internals. But the variables inside functions are named logically and it should be easy to dissect as long as you have a grasp on C++.

Paul whoknows
Member #5,081
September 2004
avatar

Richard Phipps's game creation articles is exactly what you need, but I think Richard's old site is down, I really don't know where you can get it now:-/

____

"The unlimited potential has been replaced by the concrete reality of what I programmed today." - Jordan Mechner.

CosmicR
Member #6,889
February 2006
avatar

Specter Phoenix
Member #1,425
July 2001
avatar

Can't remember where to get it but if you look into finding an e-book copy of Game Programming All In One by Johnathon Harbour then chapters 13 covers Vertical Scrolling Game (Arcade Shooters) and 14 covers Horizontal Scrolling Game. Chapter 12 talks about using mappy to create maps for the game for good measure. It is a great book but it was written back at 4.0.3 so you will need to have a current API list near by to use the updated API (which isn't too much different).

CosmicR: Yeah that is the site, but it won't be up for much longer according to the news post. Someone should do a backup of it to use for A.CC before it is lost forever because I've not seen Phipps on here for a while now.

relay01
Member #6,988
March 2006
avatar

Thanks for all your help and I'll get on that website fast before it closes down.
and I LOVE to learn by looking at source so if you could somehow get your source to me shadowcat, that would be great! my e-mail is relay01@gmail.com. Once again thanks for all your help guys and girls

_____________________________________

SonShadowCat
Member #1,548
September 2001
avatar

Jonny Cook
Member #4,055
November 2003

When I first started I read the source code to Johan Peitz's Alex 4. It's filled with hacks, but nonetheless it helped me quite it a bit.

The face of a child can say it all, especially the mouth part of the face.

axilmar
Member #1,204
April 2001

Here is a quick tutorial:

A tile-based game goes like this:

|---------------------------------------------------------|
|level                                                    |
|                                                         |
|                  |-------------|                        |
|                  |screen       |                        |
|                  |             |                        |
|                  |-------------|                        |
|                                                         |
|                                                         |
|---------------------------------------------------------|

The screen is a 'viewport' that shows part of a level. The level is an 2d array of tiles:

level:
|------|------|------|------|------|----/
|1,1   |1,2   |1,3   |1,4   |1,5   |1,6 \
|      |      |      |      |      |    /
|      |      |      |      |      |    \
|------|------|------|------|------|----/
|2,1   |2,2   |2,3   |2,4   |2,5   |2,6 \
|      |      |      |      |      |    /
|      |      |      |      |      |    \
|------|------|------|------|------|----/
|3,1   |3,2   |3,3   |3,4   |3, 5  |3,6 \
|      |      |      |      |      |    /
////////////////////\

Each tile contains a pointer to a bitmap or part of a bitmap, so as that bitmaps are reused. A tile also contains properties (like if it is a solid tile, for example):

#SelectExpand
1tile: 2|-----------------------------------| 3| | |-----------| 4| |-----------------| | |Bitmap | 5| | bitmap ptr |---------------------------->| | 6| |-----------------| | |-----------| 7| | 8| |-----------------| | 9| | properties: | | 10| | | | 11| | 1) solid | | 12| | 2) points | | 13| | 3) damage | | 14| | 4) etc | | 15| | | | 16| | | | 17| |---------------- | | 18| | 19|-----------------------------------|

Since the level is bigger than the screen, and the screen actually shows part of a level, you need the camera offset as a X, Y position within the level:

|---------------------------------------------------------|
|level            /|\                                     |
|                  |                                      |
|                  | Y                                    |
|                  |                                      |
|         X       \|/                                     |
|<---------------->|-------------|                        |
|                  |screen       |                        |
|                  |             |                        |
|                  |-------------|                        |
|                                                         |
|---------------------------------------------------------|

If for example, the level is 1000x1000 tiles, and each tile is 16x16, then you have a play area of 16000x16000 pixels.

The X, Y position of your camera shall take values from 0 to 16000 - screen size (because the camera can not fall off the edge of the level).

When it is time to draw the level, you only have to draw those tiles that are visible within the screen. If you draw all the tiles, then you will waste valuable time for tiles not drawn.

In order to draw the visible tiles only, you need to compute:

1) the index into the 2d array of tiles.
2) the pixel offset.

The index is used in order to find from which block you shall start the drawing from.

The offset is used to start the drawing from the correct pixel outside of the screen boundaries. If you do not compute the offset, you will not have pixel-level scrolling, but block-level scrolling:

#SelectExpand
1|----------------------------------\ 2|1st tile /|\ / 3| | \ 4| | Y OFFSET / 5| | \ 6| X OFFSET \|/ / 7|<----------->|------------------------------------\ 8| |screen / 9| | \ 10| | / 11| | \ 12///////\| / 13 | \ 14 | / 15 |///////////////////

The index and offset are computed by the formulas:

INDEX = X / TILE WIDTH, Y / TILE HEIGHT
OFFFSET = X % TILE WIDTH, Y % TILE HEIGHT

For example, if your tile size is 16x16 pixels and your screen camera position is 33, 19, then:

index = 33 / 16, 19 / 16 = 2, 1
offset = 33 % 16, 19 % 16 = 1, 3

The above means that the screen camera's position relative to the level is 2 blocks and 1 pixel in the horizontal axis and 1 block and 3 pixels in the vertical axis.

Another way to interpret this is to say that you have to start drawing from block (2, 1), with offset being (1, 3) pixels to the left and down respectively.

With this information, you can code the drawing loop. You have to start from the computed index, then draw so many tiles horizontally and vertically that the screen holds. If we suppose your playing area is 640x480 pixels and your tiles are 16x16 pixels, then the playing area holds 40x30 tiles. Your drawing code then is:

#SelectExpand
1//block index 2int index_x = camera_x / tile_width; 3int index_y = camera_y / tile_height; 4 5//offset 6int offset_x = camera_x % tile_width; 7int offset_y = camera_y % tile_height; 8 9//tiles horizontally and vertically 10int tiles_horiz = SCREEN_W / tile_width; 11int tiles_vert = SCREEN_H / tile_height; 12 13//position to draw a tile: start from negative value because 14//the initial tile might be outside of the screen 15int x = -offset_x; 16int y = -offset_y; 17 18//iterate rows (vertical iteration) 19for(int j = index_y; j <= index_y + tiles_vert; ++j) { 20 21 //iterate columns (horizontal iteration) 22 for(int i = index_x; i <= index_x + tiles_horiz; ++i) { 23 24 //blit the tile's bitmap to the screen (or the current page) 25 blit(tiles[j]<i>->bitmap, screen, 0, 0, x, y, tile_width, tile_height); 26 27 //next column 28 x += tile_width; 29 } 30 31 //next row 32 x = offset_x; 33 y += tile_width; 34}

Please note that the above loop draws one more tile in each direction, because you have to remember that the initial tile might hang outside of the screen.

Now all you have to do for scrolling is to increment/decrement the camera X, Y in your game loop.

If you now want to do parallax scrolling, you need to have two levels, one superimposed over the other:

|------------------------------------------------------|
|level 1 (bottom)                                      |
|   |------------------------------------------------------|
|   |level 2 (top)                                         |
|   |                                                      |
|   |                                                      |
|   |                  |-------------|                     |
|   |                  |screen       |                     |
|   |                  |             |                     |
|---|                  |-------------|                     |
    |                                                      |
    |------------------------------------------------------|

Since we have placed one level above the other, we call the levels layers; hence the term multilayered scrolling.

In order to achieve different scrolling speeds, you have to do two things:

1) provide different camera X, Y variables for each layer (since a X, Y controls each layer's position).

2) use different increment values for each layer's camera X, Y position.

You can also use multiple layers for background/foreground. For example, in an RPG game, the background layer holds all the tiles that the character can walk over (ground, paths, bushes, etc), and the foreground layer holds all the tiles that obsure the character (buildings, trees, etc).

Please feel free to post any questions.

Onewing
Member #6,152
August 2005
avatar

Quote:

Can't remember where to get it but if you look into finding an e-book copy of Game Programming All In One by Johnathon Harbour then chapters 13 covers Vertical Scrolling Game (Arcade Shooters) and 14 covers Horizontal Scrolling Game. Chapter 12 talks about using mappy to create maps for the game for good measure. It is a great book but it was written back at 4.0.3 so you will need to have a current API list near by to use the updated API (which isn't too much different).

I've skimmed through this book too, it's a really good introduction to allegro, with some more advanced features at the end. It even goes somewhat into how to get your game published. I highly recommend it.

------------
Solo-Games.org | My Tech Blog: The Digital Helm

OICW
Member #4,069
November 2003
avatar

You can look at the code of my ChristmasHack entry (I hope it's still up), but I don't accept any responsibility for your sanity (it's not a good piece of code but it can give you the idea).

[My website][CppReference][Pixelate][Allegators worldwide][Who's online]
"Final Fantasy XIV, I feel that anything I could say will be repeating myself, so I'm just gonna express my feelings with a strangled noise from the back of my throat. Graaarghhhh..." - Yahtzee
"Uhm... this is a.cc. Did you honestly think this thread WOULDN'T be derailed and ruined?" - BAF
"You can discuss it, you can dislike it, you can disagree with it, but that's all what you can do with it"

relay01
Member #6,988
March 2006
avatar

thanks axilmar, that's a helpful tutorial. And i got your email shadowcat Thanks a lot. The game I'm working on will be 256 X 256 pixels with 16 X 16 tilemaps (pretty much true to the original megaman games) I'm working on early devs and have so far been able to blit a simple tilemap onto the screen using an array but had no idea where to begin when it comes to actually scrolling. the only tutorials i found on the web were at a site called cppgameprogramming.com and some other "allegronewbie" tutorials. I'll keep tabs on all of you guys though because pretty soon I'm gonna need to find out how to implement a collision detection system... (sarcastically) yippee...

_____________________________________

Go to: