Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » A5 Scrolling Camera

This thread is locked; no one can reply to it. rss feed Print
A5 Scrolling Camera
X_Eddy_X
Member #13,869
December 2011

Hi all,

I'm new to Allegro and I've been following a few tutorials to get a few basic games up. I've just started developing a new game and I've hit a bit of a road block with "camera" movement.

Basically I have top down (birds eye) game where the player is drawn to the screen using its x and y co ords. My backgrounds and objects are also drawn at their own x and y co ords.

What I want to do is have a view around the player, and as the player moves the camera moves with it. I dont really what the backgrounds or objects to move from they're positions if that makes sense.

I've been looking around the web and the forums and cant really find any straight forward resources for my objective.

If anyone has any input or could point me in the right direction, it would be much appreciated :)

Cheers.

Mark Oates
Member #1,146
March 2001
avatar

Which version of allegro are you using?

In general, you'll want to create a camera type object and make it follow the coordinates of the player.

camera.x = player.x;
camera.y = player.y;

If you want to center the player on the screen, you might do something like:

camera.x = player.x - SCREEN_W/2;
camera.y = player.y - SCREEN_H/2;

Next, you'll want to displace every object that's in the "world" by the camera's coordinates. It might look something like:

my_sprite_drawing_function(sprite.x + camera.x, sprite.y + camera.y, sprite.image);

--
Visit CLUBCATT.com for cat shirts, cat mugs, puzzles, art and more <-- coupon code ALLEGRO4LIFE at checkout and get $3 off any order of 3 or more items!

AllegroFlareAllegroFlare DocsAllegroFlare GitHub

X_Eddy_X
Member #13,869
December 2011

Thanks for the reply :)

I'm using Allegro 5.0.4 (planning on downloading the new release soon).

I thought about drawing the objects relative to the cameras/players position (so when the player moves, the objects and backgrounds x and y co ords scale appropriately and are drawn at a new position). But I wanted to steer away from that because I have a grid based system based which creates the map in my game.

It's kinda hard to explain (maybe actually looking at some code would make it easier, might chuck some in at the end of the post) but basically I define an amount of grids in each row, then an amount of grids total and the grids are created sequentually and if the grid exceeds the row count, it moves to a new row until the total amount of grids is met. Each grid is 64x by 64y and currently my games screen is created at 1280x by 768y, so anymore then 20 grids across and the grids are drawn off the screen.

Moving hundreds/thoasands of objects each time the player moves seems a bit messy. Is there a way around this?

Heres how Im initilizing my grids:

// Initilize Grids method
void InitGrid(Grid grid[], int GridSize, Player &player){

srand(time(NULL));

for(int i = 1; i < GridSize; i++){

grid[i].GridX = grid[i-1].GridX + GridDimensions;
grid[i].GridY = 0;
grid[i].PlayerCollision = false;
grid[i].GridType = 0;
grid[i].GridBackgroundType = 1;
grid[i].GridHealth = 0;
grid[i].HadCollisionLeft = false;
grid[i].HadCollisionRight = false;
grid[i].HadCollisionUp = false;
grid[i].HadCollisionDown = false;
}

}

This is how the objects are drawn to the screen, depending on the grids type:

// Draw backgrounds to the grids method
void DrawBackgrounds(Grid grid[], int GridSize){

// Load Bitmaps
ALLEGRO_BITMAP *Grass1 = al_load_bitmap("Images/Backgrounds/grass1.bmp");
ALLEGRO_BITMAP *TallGrass1 = al_load_bitmap("Images/Backgrounds/tallgrass1.bmp");
ALLEGRO_BITMAP *Flowers1 = al_load_bitmap("Images/Backgrounds/flowers1.bmp");
ALLEGRO_BITMAP *Dirt1 = al_load_bitmap("Images/Backgrounds/dirt1.bmp");
ALLEGRO_BITMAP *Water1 = al_load_bitmap("Images/Backgrounds/water1.bmp");

// loop
for(int i = 0; i < GridSize; i++){

if(grid[i].GridBackgroundType == 1){
al_draw_bitmap(Grass1, grid[i].GridX, grid[i].GridY, 0);
} else if (grid[i].GridBackgroundType == 2) {
al_draw_bitmap(TallGrass1, grid[i].GridX, grid[i].GridY, 0);
} else if (grid[i].GridBackgroundType == 3) {
al_draw_bitmap(Dirt1, grid[i].GridX, grid[i].GridY, 0);
} else if (grid[i].GridBackgroundType == 4) {
al_draw_bitmap(Flowers1, grid[i].GridX, grid[i].GridY, 0);
} else if (grid[i].GridBackgroundType == 5) {
al_draw_bitmap(Water1, grid[i].GridX, grid[i].GridY, 0);
}

}

// destroy bitmaps
al_destroy_bitmap(Grass1);
al_destroy_bitmap(TallGrass1);
al_destroy_bitmap(Flowers1);
al_destroy_bitmap(Dirt1);
al_destroy_bitmap(Water1);

}

Mark Oates
Member #1,146
March 2001
avatar

Please use <code></code> tags when posting code.

X_Eddy_X said:

Moving hundreds/thoasands of objects each time the player moves seems a bit messy. Is there a way around this?

Since you're using Allegro 5, you can take advantage of the ALLEGRO_TRANSFORM, and use it as a camera. This is easier than translating each object (though that's not nearly as difficult/tedious as you might think.)

Basically the way that would work, is before drawing the objects in your world you would create and use a transform. Something like this:

ALLEGRO_TRANSFORM transform;
al_build_transform(&transform, camera.x, camera.y, 1.0, 1.0, 0.0);
al_use_transform(&transform);

// draw world objects here

al_identity_transform(&transform);
al_use_transform(&transform);

Or just like the previous example, you'll probably want to center the player like this:

al_build_transform(&transform, camera.x - SCREEN_WIDTH/2, camera.y - SCREEN_HEIGHT/2, 1.0, 1.0, 0.0);

--
Visit CLUBCATT.com for cat shirts, cat mugs, puzzles, art and more <-- coupon code ALLEGRO4LIFE at checkout and get $3 off any order of 3 or more items!

AllegroFlareAllegroFlare DocsAllegroFlare GitHub

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

X_Eddy_X
Member #13,869
December 2011

Thankyou :) that sounds like exactly what I want. I try and implement it and see how I go. Thanks very much for the pointers, cheers.

Go to: