Looping Parallax Background


What is it?
Ever played a game and moved to the right and notice that the background moves a bit slower but repeats itself over and over again? You know, those repeating backgrounds that kind of give the impression of a 3d world when you play platform games? If you know what I'm talking about, then you've seen a looping parallax background in action.
How do I use it?
The Looping Parallax Background entity has been developed to make it as easy as possible to add and use in your project. Simply follow these steps for parallax success.

  1. Import the entity into your project in the Entities section.
  2. Add an instance of the ParallaxBackground object to your screen, we'll call this parallaxObj.
  3. Set the MovementRatio of parallaxObj to a value from 0 to 1. This how much of the camera's movement transferrs to the parallaxObj. Setting this to 1 will make the background act like a static background to the camera. Setting this to 0 will make the background act like a static background to the scene.
  4. Add an image file to your screen, and set parallaxObj's ParallaxImage to that file.
  5. Set the Z coordinate for the parallaxObj. Typically this will be set to -1 to place it behind all other sprites in your scene.

That's it, if you followed those instructions you should now have a looping parallax background in your scene.
How does it work?
There are some mathematics invovled, but I'll try to explain the principles behind it instead. Internally, the ParallaxBackground holds 9 Sprites that all have the same texture that you applied during step 4 above. The center sprite is the main one, the other sprites surround that one so that there is something to display when the main sprite starts to slide off the screen. Finally, when the last pixel of the main sprite slides completely off the screen, the entire grid of 9 Sprites are shifted to put the main sprite back on the screen, replacing the extra Sprite that was being displayed in it's place.
How can I tell where the background is?
The ParallaxBackground object uses it's own X and Y coordinates to determine where to place the Sprites. At all times, the X and Y coordinates will match up to the location of the center sprite being displayed. These X and Y coordinates are NOT relative to the camera, but are an actual X and Y coordinate from the world coordinates. For this reason, the X and Y coordinates of the ParallaxBackground will NOT match the X and Y coordinates of the main camera.
How do I move the background?
The Looping Parallax Background does not currently provide any means of controlling it. Instead, you should move the main camera in your scene. The ParallaxBackground entity watches the location of the main camera and moves itself accordingly.
Are there any plans for future expansion?
The ParallaxBackground object is an ongoing project in that as I need more functionality from it, I will add it. That doesn't mean that I don't take requests though. If you have a feature that you would like to see added, by all means contact me in the forums, in the chat, or by email, and I'll see what I can do to get it added for you.
What expansion plans do you have?
I don't actually have any plans at the moment, but here's a few ideas that are on my plate:

  • Set background to auto-scroll independently of the camera.
  • Get current frame number
  • Set seperate textures by frame

Are there any other notes or special considerations?
Yes, in fact there are. As mentioned earlier the ParallaxBackground uses 9 Sprites with the same texture, and stretches the sprites to match the size of the screen. That means several things, first you probably don't want to use really large images for the background. Secondly, you don't want to use really small images for the background either, they'll just look all pixelated.
While you can use multiple instances of the ParallaxBackground, unless your image contains transparent pixels, you may not see the other backgrounds. You may also want to be careful how many backgrounds you have running at once, since each one adds an extra 9 Sprites to your project.
Can I use this in a commercial project?
Flat Red Ball is kind of an open source oriented community. As such, you don't have very many limitations on how you can use this. If you are really interested in reading the specific license that I've applied to this, then go here: http://opensource.org/licenses/MIT

Product File: 
Syndicate content