How to precisely adapt width of a parallax plane

0 favourites
  • 2 posts
From the Asset Store
Set of 10 Parallax Background to make pixel art game.
  • What I want to do:

    Given a stage with several parallax layers, what I want to acomplish is for tiled backgrounds to automatically adapt in width (Im not using vertical parallax) at start of layout to wichever layout width you throw at it without wasting space.

    What I did so far on a simple example capx:

    -A layout sized sprite acting as background (on a regular 100% X parallax layer) with a colored stripe on its vertical center so we can identify the middle point of the layout

    -Several parallaxed layers. On each of them, like the backgroud sprite, there are sprites with a vertical stripe at center (so we can see where the center of the background plane graphic is. On a real project this would be a tiled background). This graphics have its center situated at top left, so with a 0 x coordinate they are already correctly aligned to the left of the layout.

    -Now, what I want to do is, based on the parallax of the corresponding layer, to calculate the required width of each plane sprite so they stretch all the way to the right margin of the layout without going out of it or falling short.

    -The closer I got to it is setting the width to layoutwidth * parallax of the corresponding layer / 100, but it is still far from it...The background planes only seem to correctly align to the right margin of the layout when I scroll all the way to the point when the right margin of the layout is on the left edge of the game window (Im using unbounded scroll for testing, so I can scroll outside of layout bounds).

    This is all kind of abstract and hard to wrap your mind around (at least for me it is), so here is the test I made (Scroll with the cursor keys or by touch/mouse):

    -With layoutwidth * parallax of the corresponding layer / 100 formula, notice how the planes align with the rigth margin of the layout when the layout is leaving the screen on the left side of view.

    -Desired result, this version doesn't calculate anything and instead it uses manually adjusted width on each plane. Obviously, the whole point of what I want to do is not having to do that, but this illustrates what I want to achieve.

    Please note that since this uses unbounded scrolling and the background sprite covers the entire layout, whenever you see white, you are looking outside of layout bounds.

    CAPX (Disable the last action to make it work like the "Desired result" example).

    I don't know, maybe the window width factors in all of this, but so far I didn't manage to incorporate it to the formula with sucess......Any ideas?


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hm, seems that the examples I linked earlier doesn't work properly with touch control and only scrolls left, apologies to anybody who tried it on a cellphone. Easy fix, but I won't bother because....I fixed the main problem!

    For anyone who may find this useful, the correct width equation is (LayoutWidth-ViewportRight(5)) * PARALLAX_SCALE + ViewportRight(5) (Layer 5 is fixed with 0 parallax).

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)