scrolling TilemapLayers at different speeds

Recommended Posts

in previous versions of Phaser I believe you could use the 'scrollFactor' field to control the scrolling rate of layers, but the 1.1.x releases have removed this.


I have worked around this by replacing the 'update' method on TilemapLayer objects which scroll at a different rate than the "primary" layer.


for instance, for a 'foreground' layer which scrolls twice as fast as the primary layer I do something like:

fg_layer.update = function() {    this.scrollX = this.camera.x * 2;    this.scrollY = this.camera.y * 2;    this.render();};

while this works, it is obviously rather brittle (as it requires that I carefully match the sizes of my layers) and tied to a specific version of Phaser (as Rich could make changes to TilemapLayer.update() at any time).


does anyone have a better technique?





Share this post

Link to post
Share on other sites

Yeah I removed it because the way the camera works is completely different now. It used to modify the position of every single Sprite, but that was breaking the Group positioning - so now it shifts the base container around instead which keeps all sprite coordinates accurate. Sadly had to lose scrollFactor in the process though.


TilemapLayers are a bit unique though, in that they should normally be fixed to the camera and use the camera values to handle the speed of the scroll, so I'm happy to make an exception and add in a scroll factor for those. If you want to do a PR I'd be happy to merge it. Just make sure collision still works please.

Share this post

Link to post
Share on other sites

good to know.


I'm certain that collision won't work with my hack as it is, though it could probably be fixed with a relatively simple change to Phaser.Physics.Arcade.collideSpriteVsTilemapLayer()


in my case I don't need collision to work, as the layers that are scrolling faster/slower than the 'primary' layer can't be interacted with and are just there for visual effect (background & foreground layers), but I can see how that could be useful (layer of 'asteroids' flying by and hitting the player...)


if I get some time I'll see if I can implement it in a more generic way that can work with collision

Share this post

Link to post
Share on other sites

I've fixed collision (and the getTileX[Y] methods) and submitted a PR. didn't require code changes outside of TilemapLayer.js.


tested against my own project (which has multiple layers scrolling at different speeds) as well as the examples (which don't)



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.

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.