Stencyl background
Switching it to 2 will double the amount of scroll that is done.To do this, you must customize the Scroll Factor for a layer. 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. For example, if you’re halfway through a scene, the background will be scrolled halfway through.įor some games, this standard behavior isn't ideal. This means that they scroll at the same pace that you progress overall inside a scene. Scroll Factors (for Backgrounds and Layers)Īs described earlier, backgrounds scroll in parallax. Parallax Scroll Factors (described below).Customizing PropertiesĪfter adding a background, you can customize a few properties by clicking the cog icon at the right of each entry in the Layers Pane. Note that the HUD (Heads Up Display) layer which was described in our Text Drawing article still exists above the highest layer. Place a "foreground" by placing a Background layer above every other layer. To add a background, click on the + icon at the bottom of the Layers Pane and pick New Background Layer.
This contrasts with our prior approach, which managed backgrounds separately and only allowed them to exist above or below regular layers. Backgrounds and the Scene Designerīackgrounds are considered by Stencyl to be layers, to they are managed through a Scene's Layers pane. In other words, they scroll directly alongside the main layers. Repeating Backgrounds can auto-scroll, but they do not parallax scroll. Mark the Repeat Background checkbox if this is the case. What if your background is meant to be a repeating pattern like the following? Just experiment until you get a value that works for your game. The values don’t hold much meaning in themselves (pixels per sub-frame). Just edit the Horizontal / Vertical Scroll Speed values at the top-right corner of the editor. Setting a background to auto-scroll is simple. We cover this topic inside our Camera article. 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. This Stencyl game demonstrates auto-scrolling at its best. Auto-scrolling can impart the sense of constant motion. Some games call for a background that automatically scrolls, regardless of the player’s progression through a scene. Tip: Avoid creating animated backgrounds for mobile games, as it can quickly exhaust the limited atlas space you already have. Doing this will cause the background to animate.
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. 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. This will lead to unfilled space at the lower-right hand corner of the screen. Gotcha: Avoid making a background that’s smaller than the screen size Once you've done that, click the Attach to Scene button at top-right corner to attach this background to a Scene.Inside the Background Editor, click the dotted box to choose an image or drag and drop the image in. Importing backgrounds works much like importing any other kind of graphic into Stencyl.Ĭreate a new Background (under File > Create New > Background). But the mountains in the distance will move relatively slowly because they are far away.īottom 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. If you look outside your car's window, the close-by buildings you drive by will fly by quickly. In this video, notice how things in the "foreground" scroll by quickly while things in the "background" (hills) scroll by slowly. 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. Likewise, if you're at the end of the scene, the background will be scrolled through to the end. If you’re halfway through a scene, the background will be scrolled halfway through. This is commonly known as 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. How do Backgrounds scroll? (Parallax Scrolling) 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.