Forums » Help » How to make an "end" to a repeating background at a certain point

I've been doing some experimenting with procedural levels. Right now I have a repeating, pre-rendered background and I want something to happen when the player gets to a certain score. This event requires a slight change in physics (this part is easy) as well as a change in the tileset. I know how to change the tileset itself, but my problem is that there needs to be a more gradual transition instead of just a sudden toggle to the new image. To be precise the player needs to jump off of something. So visually in the background I'll need something like a cliff. How can I accomplish this with a background that's been repeating up until this point? Ie how can I make it stop repeating and have a cliff edge/buildig edge/whatever scrolling toward the player that they'll then jump off of?

Thanks in advance for any advice!

Without over-complicating it... can you just draw your cliff stuff over the top of the repeating background? Cover it up then swap tiles after your transition.

If that doesn't work you can maybe modify the chunk rows/cols calculation of the preRendered map (background-map.js line 51ish). I'm not sure this would even work for you because you won't be able to cut it off at an exact spot, only the last chunk.

I thought about drawing an image over the background, so I'm guessing I'd need to draw the image off screen and have it scroll into view at the same speed as the player's vel.x...if I'm getting my head around this correctly :)

Probably just position it based on ig.game.screen.x and .y. Assuming the camera is following the player.