[Phaser 3] Class ScrollingLayer

Examples
1

Hi all,
I recently made this simple class to create a horizontal parallax effect using blitter objects.
Repository: https://github.com/jjcapellan/Phaser3-scrollinglayer/
Demo: https://jjcapellan.github.io/Phaser3-scrollinglayer/

How works:
This class creates a blitter that generates two bob objects with the same texture. These objects are located next to each other. When the object on the left is off screen, it is repositioned to the right of the other object.

Performance:
Testing in Huawei Y635 1GB.
(hi res assets. Images width == game width, 6 layers)

  • 1920x1080 / WEBGL:
    … * TileSprite: CONTEXT_LOST_WEBGL
    … * ScrollingLayer: 14 FPS
  • 1920X1050 / CANVAS:
    … * TileSprite: 16 FPS
    … * ScrollingLayer: 28 FPS
    (low res assets. Images width == game width, 6 layers)
  • 960x540 / WEBGL:
    … * TileSprite: 48 FPS
    … * ScrollingLayer: 50 FPS
  • 960x540 / CANVAS:
    … * TileSprite: 40 FPS
    … * ScrollingLayer: 60 FPS

Mmm, I have to change my mobile :grinning:
Information on how to use this class is available in the repository.

Regards.

2 Likes
2

Nice demo :slight_smile:

I would have used a similar approach (instead of a TileSprite) too, as TileSprites just create extra textures which can eat lots of ram if they’re large in the first place. This technique works well when the textures are quite large and just having a few next to each other is enough to scroll them. It becomes a bit of a nightmare when you’re tiling a small texture (think 64x64) in this way, though!

1 Like
3

Thank you @rich for your feedback and useful explanation !!.
I totally agree with you. It is not viable for all kinds of games. The development of a particular game is the reason why I created this class.

Regards.