# Scrolling background after firing projectile

I have a projectile which I fire using the mouse coords as the direction vector which I scale with a velocity vector and add a gravity vector to complete this simple simulation.

I want to scroll the background in some elegant way, so that I can keep the projectile centred in the red (viewport) whilst following it until I can no longer centre it.

Edit:

When the projectile starts it will be at the left edge so I cannot centre here as there's no room outside the scene, same if the projectile gets to the end of my scene.

How is this situation usually solved?

• Do you mean it stops scrolling once it reaches a certain boundary (edge of stage) or once it gets close enough to the ground that if you stopped scrolling it wouldn't go off-screen before it hits the ground? Nov 14 '16 at 23:00
• I would use a while loop. Something like while (bulletY > threshold) { backgroundY = -bulletY; } Nov 15 '16 at 2:49
• Or just have the camera fixed on the bullet. Depends on the software/technique you're using. Nov 15 '16 at 2:52
• I'm using PIXI js, so i'm doing all the game logic. Want to follow projectile once it is possible to centre it, so i mean starting from left edge or end of my finite scene it would not be possible to centre as we have no room left.
– Neil
Nov 15 '16 at 10:15

Declare an x value for your camera, and then offset everything (projectile, scenery, etc.) by that camera's X. For example, If I want my camera to be 500 pixels to the right, but projectile is 600 pixels to the right, I draw the projectile on the screen at projectileX - cameraX = 600 - 500 = 100 pixels.

There are three possible states for your camera:

• The target of the camera (the projectile) is less that half the window width away from the left edge, where we want to lock the camera to the left edge
• The target is less that half the window width away from the right edge, where we want to lock the camera to the right edge.
• The target is somewhere in the middle, so it should be centered in the window

Now, lets say your game window is camWidth wide, your stage is stageWidth wide, and the projectiles x relative to the stage is tarX, and the camera's left edge x relative to the stage is camX. Your code will look something like this:

halfcamWidth = camWidth / 2
if tarX < halfcamWidth:
camX = 0
else if tarX > stageWidth - halfcamWidth:
camX = stageWidth - camWidth
else:
camX = tarX - halfcamWidth


Then each drawing loop, draw the projectile at tarX - camX.

• Thank you for your answer, it feels counter intuitive to me to change the actual position of the projectile, wouldn't it be better to just allow the projectile to travel given its forces and move the entire scene container instead?
– Neil
Nov 16 '16 at 8:45
• @Neil, That is essentially what this is doing. All coordinates will be stored relative to the left side of the scene, but it must be drawn relative to the left of the screen. I am not familiar with PIXI, but if it lets you put objects in containers to parent positions, then it is really just doing this for you. Nov 16 '16 at 16:24

All you need to do is say that when the projectile is past halfway in the X direction, you should center the camera on the projectile until the camera cannot go any further.

edit: pseudo code as requested

 //Check that projectile is past half the screen width if projectile.x > (screenwidth / 2) //get background to follow projectile background.xPos = -1 * (projectile.x - (screenwidth/2)) # Draw the projectile in the middle of the screen projectile.drawposX = screenwidth / 2`

• There is no camera in PIXI js, could you share some code or even pseudo code
– Neil
Nov 15 '16 at 15:48
• I've edited in some pseudo code
– benh
Nov 16 '16 at 10:55