How To Make A Background Scroll In Stencyl

Every bit of late 2021, we are in the process of updating Stencylpedia and fixing up outdated & broken content. Thanks for your patience!

The Camera

by Jon (Updated on 2015-10-20)

Introduction
Scrolling
Example: Making the Camera Follow the Player
Moving the Camera
Off Screen Actors Go Inactive

Introduction

In this article, we introduce the concept of the photographic camera and describe how yous tin make games scroll using the camera.

Scrolling

Although some games exist entirely on a single screen, many extend beyond that. For example, recollect about a game similar to Super Mario Bros. Levels extend beyond a unmarried screen.

In games like these, when the player walks to the right, the game "scrolls" to the right.

How does this "scrolling" piece of work? In simple terms, scrolling is the human activity of changing what part of the scene is visible.

One can draw a connexion to something we're familiar with - peering through the viewfinder (or screen) of a camera to compose a photo.

The "camera" in our engine is the exact same concept - it's the "thing" that controls what office of the scene is visible.

Note: In fact, the "camera" is an actor! It'south an invisible, non-concrete histrion, only like whatsoever kind of player, information technology has a position and it tin be moved effectually.

Example: Making the Photographic camera Follow the Role player

In many games, the camera follows the player, then that the player is always on screen.

This turns out to exist trivial to accomplish since we take a "camera follow actor" block besides as a pre-defined Behavior that you tin can attach to any scene that does the same thing.

Moving the Camera

The photographic camera can be moved in ii dissimilar means, both which involve these blocks (under Scene > View > Camera).

Camera Blocks

Method 1: Ready the Position

Motion the photographic camera to a specific (10,y) position inside the scene.

Method ii: Move to Role player

This will set the camera'southward position to the center indicate of the Actor.

Note: One question yous may accept is: what if I make the photographic camera go outside the scene'due south boundaries? It turns out that the camera is locked to those boundaries and won't head beyond them.

Off Screen Actors Become Inactive

Something you may notice is that actors that are off screen cease working, equally if they froze in time. We do this to preserve performance.

Withal, there are cases where y'all desire an player to be agile regardless of whether information technology's on or off screen.

To make an histrion always active, use the following cake (under Thespian > Properties > Misc).

Summary

Scrolling is controlled by the camera.
The camera is a special kind of player. It has a position and can be moved around.
Off screen actors become inactive. Apply the "always simulate" block to override this.

Claiming ane: Auto-Scrolling

In some platformers, levels tin can auto-scroll. The thespian has no command over the camera.

How do we accomplish this outcome given that you only have control over setting the camera's position?

One approach is to make a dummy thespian that controls the photographic camera (by having the camera continually follow this actor).

By decision-making this dummy thespian, you gain complete control over the camera and can exercise more than with it, such as panning it towards a destination over a fourth dimension period.

Your challenge is this: Create a game that implements auto-scrolling.

Once you've got a simple motorcar-scrolling behavior completed, extend it so that in one case it reaches its start destination, brainstorm auto-scrolling to the next 1. Generalize this to work with an capricious number of destination points.

Later on that, figure out a way to preclude the player from exiting from the left/right sides of the screen. If you play any Mario game, y'all'll notice that there'due south an invisible wall that pushes you forth should you lot try to go out the sides of the screen.

Challenge 2: Filigree-Based Camera

Retro games have seen a resurgence in the past few years. To consummate the retro feel of these games, some developers go to great lengths to preserve the precise, "8-bit" feel of these games.

Your task is this: create a retro-feeling camera that locks to the scene's grid.

Instead of smooth, continuous motion, the camera only assumes positions that are multiples of the tile size. Create a game with this kind of camera motility.

Impress Article Edit Article How to Edit an Article

Disclaimer: Use comments to provide feedback and betoken out problems with the article (typo, incorrect info, etc.). If you're seeking assistance for your game, delight ask a question on the forums. Cheers!