Image Rendering

Recommended Posts

anupgupta    128
Hello I am new to game programming and wanted some advice on image rendering... basically i am working on a 2D game...my screen size is 480*256...i have to set the background of my game with sky and clouds...for that i have taken a image of size 480*256...and rendering it 10 times one-below the other...as my game would scroll top-down with the background as sky image... I do not think rendering the same image one-below the other multiple times is a good option..Please advice on this and is there any better option to do so... Any suggestion would be of great help...

Share on other sites
signal_    366
Hi Anup,

So you have a top-down 2D game and you wish the background to continually smooth scroll as the player moves.

You do not specify a language or API, so I will just talk about the theory aspect.

Consider your background image. It is 480x256. Let's say you have the background scrolling from top to bottom so it looks a like a stationary sprite is moving up. At any one time your screen's y distance will be a constant 256. Also, since you wish your background image to repeat you will have to render 2 sections of the background.

Keep track of a variable called yImage, for example. You will blit two surfaces from the same background image. The first surface is derived from a portion of your background image that is defined by the rectangle [(startCoords),(endCoords)] = [ (0, yImage), (480, 256) ] => (1). This surface is blit to the upper left portion of the screen to the extent of the surface. The next surface, derived from the background image at coordinates [ (0, 0), (480, yImage) ] => (2), is blit contiguously below the first surface you blitted, as described above. So the destination surfaces, (1) and (2), are given by (1) -> [ (0, 0), (480, yImage) ] and (2) -> [ (0, yImage), (480, 256) ].

The yImage variable is updated each game update tick by increasing it by the distance the player moves upward, each clock tick (velocity of player * delta time).

There is a degenerate case where yImage = 0. In this case, basically only one rectangle is blitted to the screen, the entire unadulterated background image. The second surface has height = 0.

If I am not clear enough, just ask more questions. Someone will clarify.

Edit: here's some pseudo code.

// pseudocode examplebackground = loadImage( "background.bmp" );int yImage = 0;// you have some blit function defined by// blit ( Surface image, Rect sourceRect, Rect destRect )// the blit function blits an area of an image, 'image, sourceRect, to // the game screen at position destRect (destination rectangle).// you also have a 'player'.// it moves..while ( playGame ) // game loop...{	player.move();	yImage += player.getDeltaY();	if ( yImage > YSCREEN ) // YSCREEN = 256 (const)	{		yImage = yImage - YSCREEN;	}	// blit first section of background image:	blit( background, [(0, yImage), (480, 256)], [ (0, 0), (480, yImage) ] );	// blit 2nd section of background image:	blit( background, [ (0, 0), (480, yImage) ], [ (0, yImage), (480, 256) ] );}

[Edited by - signal_ on March 11, 2010 1:12:53 AM]