Horizontal Screen Scrolling?

Hi everyone, I’m new to Arduboy development but I can’t seem to figure out how to scroll the graphics of my game world. I’m making a 2d platformer and would like the graphics to scroll with my player’s movement. Does anyone have examples or advice to give? Thanks!

Is your game world using a tile map?

If so, this may help:

In particular the map drawing function:

And the camera updating:


You may also want to look through this thread:

And this thread:

2 Likes

Thank you so much, I’ve been able to get a player moving with graphics on screen but I couldn’t for the life of me figure this out. I’ll give these a look!

1 Like

The best way to understand it is to think of what’s being drawn on screen as being like the output of a video camera on a film set. Everything in the world has coordinates, including the camera itself, and when you want to figure out what the image would look like from the camera’s perspective you need to calculate where everything else is relative to the camera itself.

Here’s an image (borrowed from this article) that illustrates the concept:

camera_moving_along

(Just remember that your camera’s viewport should match the Arduboy’s screen.)

If you need any more help, feel free to ask.


For anyone who is interested, I found this interesting video which discusses various camera techniques used in classic games.

2 Likes

There is also this tutorial > Make Your Own Sideways Scroller: Part 1 - Steve The Jumping Dinosaur

It only renders the ground but might give you some insights.

2 Likes

Thanks, I’m only confused as there is no actual game camera to reference (right?). I’m assuming you can draw graphics based on the position of the player or camera and “scroll” them by updating the position that they appear each frame…or something :sweat_smile: But I will figure it out after I look through everything!

In the same way that there are no enemies to draw and no player to move around the screen.
Nothing exists in your game world unless you make it exist.

For entities (e.g. the player’s character, enemies, objects):

  • Entities do not exist until you give them coordinates.
  • The player can’t see the entities unless you draw them.
  • The player can’t move their entity unless you add the code that moves it.
  • Entities don’t collide until you add entity collision code.

Thus, to make the camera exist, you have to add it in.
To have a fully functioning camera you need to:

  • Give it coordinates (i.e. by tracking them with variables)
  • Make it move somehow (e.g. by responding to directional buttons)
  • Render the world from the camera’s viewpoint (this is the ‘magical’ bit)

To draw other entities (e.g. the player’s character, enemies, objects) from the camera’s viewpoint, you simply subtract the camera’s (world) coordinates from each entity’s (world) coordinates (thus giving you coordinates that are local to the camera) and use that for rendering. (Or, drawX = entityX - cameraX; drawY = entityY - cameraY;.)

E.g. if your camera is at point (32, 32) and there’s an enemy at (48, 56), that enemy will be drawn to the screen at point (16, 24) (because (48 - 32, 56 - 32)(16, 24)).

You can do the same thing for each tile in the tilemap to draw the tilemap from the camera’s viewpoint. That wouldn’t be the most efficient approach though - for a more efficient approach, refer to the drawMap function above.

1 Like

That actually helps so much. I guess I couldn’t wrap my head around that concept because I’ve been using modern engines too much! I’m just going through tutorials and reading documentation right now but I won’t stop until I understand everything.

2 Likes