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.

projectile motion

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.


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?

  • \$\begingroup\$ 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? \$\endgroup\$
    – tyjkenn
    Nov 14, 2016 at 23:00
  • \$\begingroup\$ I would use a while loop. Something like `while (bulletY > threshold) { backgroundY = -bulletY; } \$\endgroup\$ Nov 15, 2016 at 2:49
  • \$\begingroup\$ Or just have the camera fixed on the bullet. Depends on the software/technique you're using. \$\endgroup\$ Nov 15, 2016 at 2:52
  • \$\begingroup\$ 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. \$\endgroup\$
    – Neil
    Nov 15, 2016 at 10:15

2 Answers 2


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
    camX = tarX - halfcamWidth

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

  • \$\begingroup\$ 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? \$\endgroup\$
    – Neil
    Nov 16, 2016 at 8:45
  • 1
    \$\begingroup\$ @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. \$\endgroup\$
    – tyjkenn
    Nov 16, 2016 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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .