by Ceric (Updated on 2012-05-13)
- What are Backgrounds?
- How do Backgrounds scroll? (Parallax Scrolling)
- How To: Importing Backgrounds
- Animated Backgrounds
- Repeating Backgrounds
- Showing Backgrounds in the Scene Designer
What are Backgrounds?
Backgrounds are large images that usually scroll alongside a scene, either entirely behind or in front of a scene.
Backgrounds can visually enhance a game and provide the illusion of depth. Some games even draw backgrounds in front of a screen for visual flair (like in the video above) or to obscure part of the screen.
How do Backgrounds scroll? (Parallax Scrolling)
Put simply, backgrounds scroll at the same pace that you progress overall inside a scene, where "progress" is defined by the location of the Camera. This is commonly known as Parallax Scrolling.
If you’re halfway through a scene, the background will be scrolled halfway through.
Likewise, if you're at the end of the scene, the background will be scrolled through to the end.
To think about this another way, since backgrounds are almost always larger than the screen size, they’ll scroll at a slower-pace than the main layers, making them feel like they’re in the distance.
In this video, notice how things in the "foreground" scroll by quickly while things in the "background" (hills) scroll by slowly.
Intuitively, this makes sense. If you look outside your car's window, the close-by buildings you drive by will fly by quickly. But the mountains in the distance will move relatively slowly because they are far away.
How To: Importing Backgrounds
Importing backgrounds works much like importing any other kind of graphic into Stencyl.
1) Create a new Background.
2) Inside the Background Editor, Click the dotted box to choose an image or drag and drop the image in.
3) Once you've done that, click the Attach to Scene button at top-right corner to attach this background to a Scene. That's it!
You may notice that you can import multiple frames into a background and edit each frame's individual duration. Doing this will cause the background to animate.
Some games call for a background that automatically scrolls, regardless of the player’s progression through a scene. Auto-scrolling can impart the sense of constant motion.
Setting a background to auto-scroll is simple.
The values don’t hold much meaning in themselves (pixels per sub-frame). Just experiment until you get a value that works for your game.
Note that auto-scrolling backgrounds do not parallax scroll - they're already scrolling!
What if your background is meant to be a repeating pattern like the following?
Mark the Repeat Background checkbox if this is the case.
Repeating Backgrounds can auto-scroll, but they do not parallax scroll. In other words, they scroll directly alongside the main layers.
Foregrounds are Backgrounds that draw in front of everything else.
To designate a Background as a Foreground, just add it to the Foregrounds list inside the Backgrounds page of the Scene Designer.
Showing Backgrounds in the Scene Designer
These buttons let you toggle Background and Foreground drawing in the Scene Designer. They're located at the top-right.
- Backgrounds are large images that scroll behind or in front of the screen.
- Backgrounds are like mountains in real life - they scroll by slower than what’s happening right in front of you.
- Use auto-scrolling to make a game feel like it’s in constant motion.
Challenge: Endless Game
Endless games such as Canabalt and Jetpack Joyride are very popular these days.
Even Stencyl has its own variation on this theme in the form of Super Belly Boarder, a winter-themed take on an endless game.
Create a simple endless game of your own, using an auto-scrolling background to impart the illusion of constant motion.
Think carefully about how you’d make the game truly endless and random in nature. In other words, don’t make an enormous level - that’s the wrong way to do it.