Best way to approach paralax background

Phaser 3
1

I’m remaking a flash website that had a paralax home screen consisting of 3 different layers ;
-background - moving slowest

  • middle ground - medium speed, also contained clickable objects that launched individual games
  • foreground - fastest moving layer, containing some trees and foliage

This paralax scene reacted to mouse movementm and was scrolling horizontaly depending on mouse direction from the middle.

What would be the best / smartest approach to implement this in Phaser?

just take the old school approach and move those layers in different speeds on update() function , or maybe use groups or camera and have each layer in different Z depths or something like that?

2

Luis Zuno recently released a video showing how to do parallax with tile sprites in Phaser 3

2 Likes
3

Thanks, will check it out!

5

If it’s for a full-page website, not sure if I would use Phaser for that. You could try using jQuery with plug-ins or just plain CSS effects.

Most examples are vertically scrolling (like this very pretty Fire Watch website) but I’m not sure if it is possible to do parallax scrolling horizontally with CSS as well…

1 Like
6

It’s not a full page website, thanks for your reply though!