[Phaser 3] Scrolling camera by drag

Examples
1

Hi all,
ScrollingCamera extends the class Phaser.Cameras.Scene2D.Camera of Phaser 3 framework, adding the capacity of vertical scrolling by dragging or using the mouse wheel. Can be usefull for menus with a lot of options.
Live demo: https://jjcapellan.github.io/Phaser3-ScrollingCamera/
Repository: https://github.com/jjcapellan/Phaser3-ScrollingCamera

How to use

This is the simplest case (uses the default parameters):

// In create function ...
let myCamera = new ScrollingCamera(this);

The constructor of ScrollingCamera only needs as argument a scene object. All the other arguments are optionals.
And this is the opposite case with all possible customizations:

// In create function ...
let cameraOptions = {
      x: 50,             // x position of the camera (default = 0)
      y: 50,             // y position of the camera (default = 0)
      width: 300,        // width of the camera (default = game.config.width)
      height: 500,       // height of the camera (default = game.config.height)
      top: 600,          // Top bound of scroll (default = 0)
      bottom: 3175,      // Bottom bound of scroll (default = 5000)
      wheel: true,       // Does this camera use mouse wheel? (default = false)
      drag: 0.90,        // Reduces the scroll speed per game step in 10%. (default = 0.95)
      minSpeed: 9,       // Bellow this speed value (pixels/second), the scroll is stopped. (default = 4)
      snap: true,        // Does this camera use snap points? (default = false)
      snapConfig: {      // Defines snap points
        topMargin: 50,   // y position of first snap point (default = 0)
        padding: 50,     // Space in pixels between snap points (default = 20)
        deadZone: 0      // % of space between points not influenced by snap effect (0 - 1) (default = 0)
      }
    };
let myCamera = new ScrollingCamera(this, cameraOptions);

I hope you like it.
Regards.

7 Likes
2

This is a very nice camera scrolling example, thank you.

3

Do you have any version of this, where scroll is possible both vertical and horizontal?

4

Sorry, this is the only version I made. When I did this class, I was thinking of a very specific need.
Regards.

5

Hi all,
Last update:
Fixed an issue that caused unexpected behavior in the scroll.
Now the scrolling is more responsive and natural to the pointer movement.
Thanks @jorbascrumps for the info.

Regards.

1 Like