Parallax Background

[doyouknowyou]

Is there an easy way of creating a parallax kind of background? I've read that tilemaps are the way to go, but I was wondering if this was possible with just sprites?

 

Is there an easy way to change a sprites x coordinate in relation to another sprites current x? Here's an example of what I'm trying to recreate 

http://www.firewatchgame.com/

 

Hope this makes sense!!

[eguneys]

This will help you TileSprite. TileSprite is a repeating texture. So what you need to do is, add two repeating textures on top of each other, and start scrolling by adding to it's x values. 

var background = new TileSprite(/* properties */)var foreground = new TileSprite(/* properties */)// animate x values now.background.x += 10;foreground.x += 20;

[lewster32]

Here's an example of how you might implement parallax scrolling: http://jsfiddle.net/lewster32/5a866/

 

Also, be aware that this plug-in should soon support parallax layers in Tiled maps: https://github.com/englercj/phaser-tiled

[valueerror]

this is how i do it  

create:  

paralax1 = game.add.tileSprite(0, 400, 3300,  816, 'marioback-lightgreen');   paralax2 = game.add.tileSprite(0, 400, 3300, 816, 'mariomiddle-lightgreen');

 

 update: 

paralax2.x= game.camera.x*0.1; //paralax2.y= game.camera.y*0.1+340;paralax1.x= game.camera.x*0.2;// paralax1.y= game.camera.y*0.2+300; //move it down a few pixels to account for the missing pixels when moving with camera

[doyouknowyou]

Thanks everyone for the replies - they're all very helpful!

 

 

The images I want to move are fairly complex, so would be a lot easier to just move the individual sprites as a whole.

 

would the say concept of 

background.x += (number)

 still be the best way if I was to use sprites rather than tilemaps? 

[rtlehr]

Here's a test I've created to do Parallax.  I'm using the image size (width) to control the speed of the parallax.  I have a link below to a sample.  I'm still running test to see if this is a valid way.  So far, the sample only works in a desktop browser (I'm having a seperate issue with running things in mobil).  also, please excuss the duct tape way I have all the seperate .js files included it was paste together as a quick sample (I normaly use gruntjs to put files together).  If you have any question or comments please let me know.

 

http://rosslehr.com/modx/demos/parallax/index.html

 

Ross

[mBeierling]

Here's an example of how you might implement parallax scrolling: http://jsfiddle.net/lewster32/5a866/

 

Also, be aware that this plug-in should soon support parallax layers in Tiled maps: https://github.com/englercj/phaser-tiled

 

I use this very helpful plugin but sadly scrolling is not yet implemented. Is anyone else interested in this feature and would like to get together and implement it in the plugin?