Edge scrolling is used in many of the real time strategy games where the layout is usually big. This is a feature in which the user can scroll through the layout with very little effort, just by moving the mouse cursor to the edges of the viewport. This feature can be reproduce in Construct 2 by making use of the mouse object, a few system expressions and optionally a global variable to customize the scrolling speed.
You can see a demo of the edge scrolling here.
You may download the Construct 2 project file here.
Basic edge scrolling
To begin with, the mouse object should be added to the project using the insert new object dialog. In the events, the System expressions
WindowWidth, WindowHeight
LayoutWidth, LayoutHeight
scrollX, scrollY
and the Mouse expressions
Mouse.AbsoluteX, Mouse.AbsoluteY will be used.
And the following set of events is all that is needed to have a basic edge scrolling feature:
Note: If the outcome of the above events looks obvious to you, you may want to skip and move on to the next page to see how this can be further optimized.
In the events above a global variable "scrollRate" is defined, which could be used to customize the rate at which the layout scrolls.
So the first step would be to check if the position of the mouse is outside of the viewport. For instance to check if mouse pointer is outside the viewport at the right side a comparison is done every tick between the absolute X coordinate of the mouse and the width of the viewport by the following:
Similarly for the other 3 sides it would be:
Now before changing the value for scrolling, another condition should be added to each of the above, to check if the scrolling would be within the limits. Here it should be noted that the scrollX and scrollY system expressions in Construct 2 are relative to the center of the viewport. Thus the conditions to check before scrolling to the right would be,
To explain the scrolling limits condition in the above: normally the scrolling limit to the right would be the layout width, but since scrolling is relative to the center of the viewport window, half the window width should be subtracted from the layout width.
If the above two conditions are met, scrolling is done by adding the scrollRate to scrollX. So the complete event that would take care of scrolling to the right is:
Similar events but with appropriate operator(+/-) and logical operator(</>) changes can be written for the other 3 sides as shown in the beginning.
It can be seen that a nice diagonal scrolling comes as a bonus from these events.
That is all for basic edge scrolling. Since these events are called every tick, this scrolling would be framerate dependent. To see how to optimize these events to make the scrolling framerate independent move on to the next page.
Update: Here is a workaround for edge scrolling in fullscreen at scale mode. Look into the comments for more details.
Demo can be found here.
The Construct 2 project file can be found here.