doyouknowyou

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 

http://www.firewatchgame.com/

 

Hope this makes sense!!

Share this post


Link to post
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;

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
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.

 

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

 

Ross

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.