Scrolling background with character going left or right and score following

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