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

112,261

Views

Beginner

Level

12

Comments

Backgrounds

by Jon (Updated on 2015-10-21)


Contents

  • What are Backgrounds?
  • How do Backgrounds scroll? (Parallax Scrolling)
  • How To: Importing Backgrounds
  • Animated Backgrounds
  • Auto-Scrolling
  • Repeating Backgrounds
  • Backgrounds in the Scene Designer

What are Backgrounds?

Backgrounds are large images that scroll alongside a scene, usually 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.

background-scrolling-example

Likewise, if you're at the end of the scene, the background will be scrolled through to the end.

background-scrolling-scene-example

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.

Bottom Line: You don't need to do anything special to make Parallax Scrolling work in Stencyl, but it helps to understand how this kind of scrolling works.

How To: Importing Backgrounds

Importing backgrounds works much like importing any other kind of graphic into Stencyl.

  1. Create a new Background (under File > Create New > Background). Give it a name.

    stencyl-create-background

  2. Inside the Background Editor, click the dotted box to choose an image or drag and drop the image in.

    stencyl-create-background-frame

  3. Once you've done that, click the Attach to Scene button at top-right corner to attach this background to a Scene.

    stencyl-add-background-to-scene

Gotcha: Avoid making a background that’s smaller than the screen size

This will lead to unfilled space at the lower-right hand corner of the screen. The one exception is if you’re creating a repeating background, in which case, the image will tile-itself until it fills out the screen.

Animated Backgrounds

You may notice that you can import multiple frames into a background and edit each frame's individual duration, much like animations for an actor. Doing this will cause the background to animate.

Tip: Avoid creating animated backgrounds for mobile games, as it can quickly exhaust the limited atlas space you already have.

Auto-Scrolling

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.

This Stencyl game demonstrates auto-scrolling at its best.

Note: Don’t confuse auto-scrolling backgrounds with the notion of an auto-scrolling level in Super Mario Bros, the kind where you’re forced to stay on screen and complete the level at the set pace. We cover this topic inside our Camera article.

How To: Enable Auto-Scrolling

Setting a background to auto-scroll is simple. Just edit the Horizontal / Vertical Scroll Speed values at the top-right corner of the editor.

stencyl-background-scroll-speed

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.

Repeating Backgrounds

What if your background is meant to be a repeating pattern like the following?

stencyl-repeating-background

Mark the Repeat Background checkbox if this is the case. (it's at the top-right corner)

stencyl-repeat-background-checkbox

Repeating Backgrounds can auto-scroll, but they do not parallax scroll. In other words, they scroll directly alongside the main layers.

Backgrounds and the Scene Designer

Backgrounds are considered by Stencyl to be layers, to they are managed through a Scene's Layers pane. This contrasts with our prior approach, which managed backgrounds separately and only allowed them to exist above or below regular layers.

Adding a Background

To add a background, click on the + icon at the bottom of the Layers Pane and pick New Background Layer.

Adding a "Foreground"

Place a "foreground" by placing a Background layer above every other layer. Note that the HUD (Heads Up Display) layer which was described in our Text Drawing article still exists above the highest layer.

Customizing Properties

After adding a background, you can customize a few properties by clicking the cog icon at the right of each entry in the Layers Pane. These properties include:

  • Name
  • Opacity
  • Blend Mode
  • Parallax Scroll Factors (described below)

background-customization

Scroll Factors (for Backgrounds and Layers)

As described earlier, backgrounds scroll in parallax. This means that they scroll at the same pace that you progress overall inside a scene. For example, if you’re halfway through a scene, the background will be scrolled halfway through.

halfway-through

For some games, this standard behavior isn't ideal. For enhanced visual effect, some developers want the scrolling to happen faster or slower than normal, or in some cases, for the layer not to scroll at all.

To do this, you must customize the Scroll Factor for a layer.

customizing-scroll-factor

By default the Scroll Factor is 1.

  • Switching it to 2 will double the amount of scroll that is done.
  • Switching it to 0.5 will halve it.
  • Switching it to 0 will stop scrolling entirely for that layer.

Tip: Not only can you apply a custom Scroll Factor to backgrounds, but you can also apply a custom Scroll Factor to regular layers!

Summary

  • 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 popular examples of this genre. Even Stencyl has its own variation on this theme in the form of Super Belly Boarder, a winter-themed take on an endless game.

stencyl-background-challenge-game-pic

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.

Print Article Edit Article How to Edit an Article
Disclaimer: Use comments to provide feedback and point out issues with the article (typo, wrong info, etc.). If you're seeking help for your game, please ask a question on the forums. Thanks!

12 Comments

RealGraham
I made a 1080p background for my game, but it came up with a 480p image in the corner of my screen any way to fix that?
3 6 years, 5 months ago
jexadox
Is there a way to code it so that the background loops only once? If not, can i switch the background after 1 loop to a static background?
1 8 years, 2 months ago
Psygamns
How does the background image size relate to scene size and to game size? What does "window size" mean in this tutorial? The tutorial is unprofessional as it tries to talk simple language, but forgets to explain the concepts. So, what is the "window size" here?
1 8 years, 2 months ago
colemanaustin0
What are the dimension of the background so i can make one? When i imported my background it was way too big.
2 8 years, 10 months ago
MarukoKun22
Its a shame the limitations of the backgrounds.
Before i upgrade Stencyl my game has a beatiful and psycodelic background Gif. Its a big resolution, yes, but for a pc game works very fine.
Since the last update i was obligated to quit the gif.
A shame rally.

PD: i tried with another gif with minor resolution but dont work too.

0 9 years, 1 week ago
mysterymike
I have annoying lines running through my background for mobile only...on my computer it's perfect but it needs to be played on mobile as well...any suggestions how to deal with these strange lines?
1 9 years, 9 months ago
jijigren
The background not appear in scene. I checked for solution in the forum and this error has been from 2012. Tried to reinstall Stencyl as well but no joy.
0 10 years, 2 months ago
liteking
Is there any way to align center the background? I'm making games for both iPhone 3.5" and iPhone 4"
It will be much better if I can align the background to center

2 10 years, 9 months ago
Jon
Not officially, but in 3.0, there are ways to now do that.
http://community.stencyl.com/index. php/topic,24729.0.html

0 10 years, 9 months ago
AGDkatta
Can i import SWF file for my background?
1 11 years, 3 months ago

Sign In to Comment