Scrolling background with character going left or right and score following

How do I create a scene that has a character that can travel left or right past the 400px and keep text/score displaying while traveling through the scene?

I have the scrolling effect by creating a background image at 800px wide and using the camera to travel with the character but once the score leaves the scene there’s no way to track or see the points

Using the camera with elements that you want to stick on the the screen is a little bit tricky, but there are two ways to get around it. The first would be to use the camera.x and camera.y properties to position your text, which introduces an odd “springy” kind of behavior, because when you change the camera x and y it doesn’t render until the next tick of the draw loop (since you may already be in the middle of drawing your current frame).

The more correct (but less obvious) way to do it is to use camera.off() before putting your text on the screen, which doesn’t turn the camera off permanently, just for the remainder of your draw loop. Once the you’ve called camera.off() you can reference x and y positions on the canvas ignoring movement of the camera.

Here’s a quick example showing how both of these approaches could work https://studio.code.org/projects/gamelab/bsMVuYMz_8BIgWNv5aREDw/view and you can find documentation about camera.off() here.

2 Likes

camera.off(); was precisely what I needed to keep the score static on the scene! thank you so much Josh!

1 Like