Edge Scrolling

  • 26 favourites



6,701 visits, 12,167 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Making Edge Scrolling Framerate Independent

The edge scrolling events shown in the previous page is done every tick. Thus the scrolling rate will be dependent on the framerate as the time between every tick is a variable. Any kind of motion should be using the system expression dt in order to be framerate independent as explained by Ashley. Here is an implementation of this practice.

The final form of the edge scrolling events is

In order to make the scrolling framerate independent all that has to be done is multiplying the scrollRate global variable by dt. It should be noted that dt is a very small number (0.01 to 0.1) which adds upto 1.0 every second, so scrollRate should be made bigger to see any significant movement. scrollRate can simply be considered as pixels/sec in this case.

So to scroll to the right the events would look like this,

But this results in a glitch where a few extra pixels may be scrolled through at the end. This is due to the fact that dt is not an integer but a floating point. So to work around this, two more conditions have to be added, as shown here for scrolling to the right:

The first sub event checks if the new scrollX which is to be assigned (scrollX scrollRatedt) would be out of the bounds, and if it is so then the limiting value is set as the scrollX. Otherwise, the next sub event would add scrollRatedt to the current scrollX. Again, similar events should be added for the other three sides by making logical changes as seen in the events in the beginning of the page.

Note: A word of caution is that if the framerate is too low, scrolling can be jerky which may interfere with users getting a good look at what is on the layout. In that case you may just want to use the basic version which would just slow down the scrolling when framerate is low. Also read Advanced Considerations in Ashley's tutorial.

That is all about it. Thank you for reading. Let me know if you have questions in the comments.


  • Order by
Want to leave a comment? Login or Register an account!
  • This tutorial is very useful but not up-to-date with Construct3 (most notably windowwidth and windowheight do not exist anymore).

    It is also easier to implement in construct3 as it is not longer necessary to use AbsoluteX or Y.

    e.g for scrolling to the right condition : Mouse.X > ViewportRight(0)