How do I create a vertical scrolling background?

From the Asset Store
Fully commented source code/event sheet & sprites to create a space shooter game
  • I've searched the topics and tutorials, but I don't see a base way to do a vertical scroll. I've seen examples using Set Y and scrollx (which is funny to me because if scrollx can be used to scroll horizontally why doesn't set Y work for vertical scrolling...but maybe that's where I'm getting confused. So I guess my topic is really 2 parts.

    1. Why does the example in space.capx work with vertical scrolling?


    2. Why is set Y used and not scrollY? What is the difference between the 2?

    Thanks for helping me to understand.

  • Scrolling - both horizontal and vertical - are used when your layout is bigger than your window and you want to view different parts of the layout. This is great for games where you have purposefully designed levels of a finite size.

    Finite is the key word here. In the case of the space example you provided, the idea is to have an infinitely scrolling level or background. Since you can't make an infinitely sized level, the idea here is to reuse "scrolling" objects by having them wrap from the bottom to the top by modifying their Y position. This provides the illusion of scrolling through an infinitely tall level while using a finite amount of objects and resources.

    It should be mentioned that these techniques aren't restricted to the Y axis. You could just easily do infinite scrolling on the X axis using the same tricks.

    Just for recap: for purposefully designed levels of finite size, change the layout size and set the scrolling; for infinite levels/backgrounds, change the position of onscreen elements to give the appearance of scrolling.

  • Thanks for the reply.

    So, if I understand correctly (in laymen term's again still new to the whole process), if I want a horizontally scrolling layout, the background should be longer than the window provided and if I want a vertically scrolling layout it should be taller? I can then set to scroll as appropriate using scrollx (for horizontal) or scrolly (for vertical)? Is that it or am I oversimplifying or just wrong in my thought process?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Refer again to my previous post. ScrollX and ScrollY are used if your layout is bigger than your screen and you want to show different parts of said layout. If you just want an infinitely scrolling background, then there are a couple basic ways that could go:

    1. Your background is a single tileable image that is at least as large as the screen in the direction you want to scroll. In this case, you have two instances of this background right next to each other in the direction of the scroll which wrap(by repositioning) to the opposite side of the screen when they're no longer visible. You need two instances for the case where one of the images is only halfway on the screen, so the other one is there to show the part of the image that's off the screen on the first instance. You manipulate the position of these images to simulate scrolling.

    2. Your background is composed of small, distinct elements. In this case, you need enough elements only to fill the screen size, manipulate their position to simulate scrolling, then when they go off the screen, you wrapping(again, by repositioning) them to the opposite side of the screen.

    I'm going to stress again, the only time you'll set the scroll values is when your layout is bigger than your screen size. If you have an infinitely scrolling background, this will have to be simulated by repositioning the background elements.

    If you describe what you're wanting to do in more detail, it will be much easier for me to give a proper explanation. Detail would include whether or not your levels are static or procedurally generated and whether or not you want an infinitely scrolling background.

  • Hi linkman2004, i have the same doubt. For example, in this tutorial, the sentence make a horizontal scroll, i believe that he want to now how to do the same thing but vertically and up to down.


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