Scrollable Frames

You can download the demo for creating scrollable frames right here. It is totally free to use, under the CC0 license.

The Demo

If you're new to GitHub, don't be afraid - you can easily download anything on here by hitting the green "Code" button, and then "Download ZIP". You know the rest.

Once you've downloaded the project, open it up in GameMaker. Then head over to obj_frame_demo. This object's entire job is to simply create a scrollable frame, which it does so in its Create event.

Creating the frame resembles the following format:

The first argument "total_height" refers to the total height of the scrollable frame, or put differently, how many pixels we can scroll. Whereas, "width" and "height" are the frame's own visible dimensions. The "x" and "y" govern where the frame actually draws.

There are also some optional arguments if you want to customise the scrollbar. You can leave out these arguments and stick with the defaults, or customise them to your heart's content. In the demo, I leave everything as the default.

Drawing inside the frame

This is the trickier bit. To actually draw things inside the frame, you have to call "set_contents" on the frame, just as the demo does. This can be a function you declare in-line, just like the demo does, or you could pass in a named function you've declared elsewhere.

The function must have a single argument: an offset to the y position of anything that draws inside it. This is what makes the whole scrolling illusion work; the images are all drawing themselves at an offset to the frame's own x and y position.

Here's an example with an "in-line" function:

And here, we pass in a function we declare elsewhere:

I should also point out, you do not have to name the argument "offset_y", that's just what I've called it. You can name it whatever you like! It is simply a number the function will receive from the inner workings of the scrollable frame.

How does it work?

In short, we create a surface, which is kind of like a "layer" in a drawing program, which we are drawing our contents to. This is different to the normal "layer" we draw everything else in our game to; its dimensions are bound by the "width" and "height" we pass into the create_scrollable_frame() function.

Then, within the scrollable frame, we offset everything inside it by our "scrolling position". There's a lot of maths that goes into this "scrolling position", so if you're interested, feel free to have a look at obj_scrollable_frame, as I have written documentation inside there.

Other notes

I've tried to keep the demo simple and not dependent eg. on a particular type of camera or GUI setup. As a result, some of the functions for gathering input assume a basic desktop setup. You may have to tweak these if you are targeting other platforms or resizing your GUI.