2D Side scrolling in Chili Pooface Scrolling Demo

[accucore12]

Hi there everyone. =D Hope you are having a great day.

I just want to share with everyone the great code that Chili has put up in the Poo face Scrolling demo.

Here is my understanding of the code.
1) First you have to decide how big the world size is for your game for instance in the code provided.
It is Defined as

Code: Select all

#define WORLDHEIGHT 1199
#define WORLDWIDTH 1599

So the world in our game is about 1600 x 1200 pixels in size.
Our Window display size used in the code in 800x 600 pixels.
.
So you might be wondering how does 1600x1200 fit into a 800x 600 screen.

One very cool way is to implement screen scrolling so you effectively only show 800x600 pixels of the world at any one time.

To do this we need to create two new variable, in our game class

Code: Select all

	int cameraX;
	int cameraY;

cameraX stores the left most boundary that we are currently showing to the user.
cameraY stores the top most boundary that we are currently showing to the user.
By changing the values stored in these two variables ,the view that is shown to the user would be also changed.

Code: Select all

void Game::UpdateCamera()
{
	// convert face world coordinates to screen coordinates
	int facesx = faceX - cameraX;
	int facesy = faceY - cameraY;
	//IMPORTANT TAKE NOTE facesx and faceX store different values.
       //faceX stores the actual coordinate in the game world
       //facesx stores the coordinate of the face on the screen relative to a (800x 600 ) screen

The diagram shown below might aid you in understanding it better.




Moving on

Code: Select all

if( facesx < CTRKOFFHOR )
	{
		cameraX = faceX - CTRKOFFHOR;
	}
	if( facesx + 24 > SCREENWIDTH - CTRKOFFHOR )
	{
		cameraX = faceX + 24 + CTRKOFFHOR - SCREENWIDTH;
	}
	if( facesy < CTRKOFFVERT )
	{
		cameraY = faceY - CTRKOFFVERT;
	}
	if( facesy + 24 > SCREENHEIGHT - CTRKOFFVERT )
	{
		cameraY = faceY + 24 + CTRKOFFVERT - SCREENHEIGHT;
	}

All of the above conditions are similar so i shall explain one of them

Code: Select all

	if( facesx + 24 > SCREENWIDTH - CTRKOFFHOR )
	{
		cameraX = faceX + 24 + CTRKOFFHOR - SCREENWIDTH;
	}

Notice that it is comparing facesx instead of faceX so it is using the position of the face on screen to compare.
facesx + 24 gives us the right boundary of the face since 24 is the width of the image
SCREENWIDTH - CTRKOFFHOR gives us the boundary in which we need to change our camera view(refer to the diagram above)

So if our facesx enters the blue region in the diagram, we have to shift our camera

Code: Select all

cameraX = faceX + 24 + CTRKOFFHOR - SCREENWIDTH;

This line calculates the value that cameraX needs to be to accomodate CTRKOFFHOR to the right of our screen.



Hope this is of help to you guys.

[chili]

Thanks for making this guide accu!

I wish I would have known about this about 5 hours earlier when I was recording Lesson 19... I would have mentioned it in the video because we're using the scrolling pooface program in that lesson (although I don't explain the scrolling code there either).

Anyways, nice!

[accucore12]

Ha.Wanted to be the first to like your video! Guess i am late , I am the 6th.