Disable background repeat on y axis

[Pattentrick]

Hi @collinhover,

I want to disable the background repeat on the y axis on my game. When the browser window is small, the background is repeated above and below my actual level, which looks rather awful.

As far as it looks ++ doesn't support that feature, so I took a look at the drawPreRendered method of ImpactJS at the background-map.js. No matter what i tried, it won't work or i get a huge FPS drop. Or both ;-)

My idea was to just call the ig.system.context.drawImage() method once I made sure that the current chunk is not outside the game screen. However all my approaches failed until now.

Do you have any ideas regarding to that? I know that you are very busy at the moment, but it would be soooo awesome if you could take a look that problem.

[collinhover]

Hmm, off hand I'm not sure how to solve this, but I'm pretty sure it can be done. If you are pre rendering the background (as you probably should), then you could edit the prerendering methods to clamp the y between the screen space. If your screen moves vertically at all, then you'll constantly be rerendering and that is not at all efficient.

One quick and dirty solution would be to create two ui overlay elements, one on top and one on bottom, that partially block the view of the background. They wouldn't be full screen, more like movie bars.

[Pattentrick]

Thanks for your advice on this @collinhover! I will edit the prerendering methods and when all fails I will use an UI overlay.

[Pattentrick]

I've run into another problem.

If I change the distance of a background layer to a value greater than 1, that layer will be shifted outside the level once i change the size of the browser window. That behavior only occurs with a very narrow browser window (as seen in the video below) + a big window height. A very wide window with a small height is no problem at all. So i guess this somehow related to scaling. I made a video to showcase the problem:

https://www.youtube.com/watch?v=7uySdrd1Dds

The layer with the blue and red dots is a layer with a distance of 2. Due to the resolution, it may be hard to see in the video. If so, i could upload another video with brighter backgrounds. Just to clarify, i did not changed the ImpactJS/++ code at all.

[collinhover]

This is an odd issue, but as far as ++ goes I don't see anything that modifies how ImpactJS handles the distance. It is likely the issue comes from when things are scaled, although I find it odd that a wide window/small height is okay while a small width/tall height is not. Is the issue still present when the width/height are closer in ratio (ex: size of a tablet or phone in portrait mode)?

[Pattentrick]

Actually the problem is gone if the browser screen is in "landscape mode", but is present in "portrait mode".

I made you a live demo:

www.shuchu.de/ssr/

If you want, you can take a closer look at the demo source here:

https://github.com/Pattentrick/background-issue

If you have some time, It would be more than awesome if you could examine this issue. Thanks for your support on this one! I would be lost without your help on some problems ;-)

Besides of this issue, everything is fine with the game and I am making progress very fast. I think I will complete the game in the next two weeks.

[collinhover]

In your demo, I'm seeing the yellow stars (closest background layer) leaving the screen no matter what size the screen is. Not immediately, but after a time of flying with the ship. After a little longer time, the blue/red background also leaves the screen. You can see the screen move across the backgrounds in the debug background panel. Is this the issue?

[Pattentrick]

No, that is expected behavior. I don't repeat the background layer and I just painted some stars to keep the demo simple, but the game won't stop scrolling at the same time. So after a given time there will be no more background images at all.

But if you resize the browser window as seen in the video i posted before (portrait style), you will see that the background with a distance higher than 1 (with the blue / red stars ) will be drawn way above the actual level. That makes all sorts of parallax effects impossible to implement.

[collinhover]

Ah, okay, thanks for explaining. I see the issue now. Thanks for posting the demo source, I'm digging in now.

[Pattentrick]

I'll keep my fingers crossed. Thanks for digging in ;-)

At first i thought i messed something up with the background-map.js. But I reverted all my changes. Also I copied the original file over my custom one to be absolute sure.

[collinhover]

It appears this behavior is correct... let me explain: the background's position is set by taking the camera position and dividing it by the background's distance. Something with higher distance will move less, as we'd expect it to. The problem is that your centerStaticCamera method sets the camera to be in the middle of the screen no matter the screen size. So when you make the window really tall and thin, the y position of the camera is set to something like 400, and the background with distance 2 is getting a y position of 200, as it should. Assuming you are moving from 0 to 400 with the camera, you'd see the correct shift of the background, but because it is due to the window resizing it looks wrong. Give it a try on your end by setting the camera to follow the player instead of the level scroller, and you'll see what I mean.

Now, as for how you can avoid this behavior in your case, all you need to do is pull down the latest dev branch and set the ig.CONFIG.BACKGROUNDS_PARALLAX_Y to false. I put a really simple check in place in the background maps code to toggle parallax on/off for each axis, which should solve your issue as the player is only moving horizontally.

[Pattentrick]

Thank you very very very much @collinhover! Your explanation makes totally sense and your added fix works like a charm. You helped me so much with your effort on this problem. Truly Awesome. Thanks man!