Jump to content

Parallax Background


Recommended Posts

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 



Hope this makes sense!!

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

this is how i do it  :)


paralax1 = game.add.tileSprite(0, 400, 3300,  816, 'marioback-lightgreen');   paralax2 = game.add.tileSprite(0, 400, 3300, 816, 'mariomiddle-lightgreen');
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
Link to comment
Share on other sites

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.





Link to comment
Share on other sites

  • 7 months later...

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...