Class and Example for Parallax Background

Teranth · June 2012

Hey guys, here is a class I put together after reading an example of Parallax Backgrounds by Adnaan--all the actual code credit goes to him, but I have cleaned up the code a little and packaged it as a class with some extra options that others might find useful in their games. So I decided to share it as well. Enjoy

To use it you will need a simple table with the images to use like the following, after that it's a sprite you can do what you want with in the game:

-- Setup background images to use.
local bgs = {
	bg1 = "bg1.png",
	bg2 = "bg2.png"
}
 
-- Create a new Parallax background sprite with a speed of 5
local bg = ParaBG.new(bgs, 5)
 
-- Add background to scene--should be done before any 
-- sprites/controls so it's behind everything.
stage:addChild(bg)

For Adnaan's post: http://giderosmobile.com/forum/discussion/387/parallax-background

unlying · July 2012

is there any way to change speed dynamically?

gaboritaly · July 2012

Thanks @Teranth

>-

Teranth · July 2012

@unlying absolutely

Here is an example of the two speed functions setSpeed() and getSpeed() I needed the same functions for my runner setup--boost power ups, etc--I used a timer to control the background speeds.

-- Setup background images to use.
local bgs = {
	bg1 = "bg1.png",
	bg2 = "bg2.png"
}
 
-- Create a new Parallax background sprite with a speed of 5
local bg = ParaBG.new(bgs, 5)
 
-- Add background to scene--should be done before any 
-- sprites/controls so it's behind everything.
stage:addChild(bg)
 
-- Change the speed of the background scrolling to 8 pixels per frame. 
-- Far background will be set to 2 pixel per frame. (This is twice the default speed)
bg:setSpeed(8)
 
-- The far background is set to move at 25% of the main background speed and will be set as well to keep the ratio intact.
 
-- Also if you need to get the current background speed in use you can get it with:
local current_bg_speed = bg:getSpeed()
print(current_bg_speed)

@gaboritaly you are very welcome, I am glad someone will find it useful

unlying · July 2012

@Teranth great!

bravcm · February 2013

Thanks!

GGGRRR123 · June 2013

and how to make background moving vertically?

fxone · June 2013

hi @GGGRRR123, there is an original idea with vertical example, you can easy adapt this to @Teranth's class:
http://giderosmobile.com/forum/discussion/387/parallax-background

mikiex · July 2013

I noticed there was a glitch visible when semi transparent sprites are used.
changing the order at which things happens seems to fix it.

self.bgFarY = 0
self.bg1:setX(self.bgFarY) --put this before the line above
 
.............
 
self.bgNearY = 0
self.bg3:setX(self.bgNearY)--put this before the line above

Jojojohn · August 2013

@Teranth, I copied your code yet there's an error saying about ParaBG?

xGuilt · August 2013

Is there a way to make it appear continuous?
I mean, i'm using 2 different images as a scrolling background and when the first background's far X reaches 0 it automatically recreates the first background even when the 2nd background is still scrolling. I dunno it kinda feels like it's just teleporting?

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Class and Example for Parallax Background

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Class and Example for Parallax Background

Comments