I’ve been writing various UI bits and bobs for a different project I’ve been working on, including this rather colourful scrollpane. There’s not much to look at, everything works as expected, and I’ve added a few extra buttons to show it off.

A guide on scrollbar mechanics helped immensely with the not-so-obvious issues that arose. Just bear in mind that in Phaser the position (0,0) is top-left of the screen rather than bottom-left, so scrolling downwards runs in the opposite direction to that outlined in the guide.

Other than that, the fiddly bit was having to account for borders in the background image and scrollbar which the pane content shouldn’t move over. Small, pixel-sized errors compound to window-sized errors as the pane content grows! I think I’ve accounted for every border offset now though.

Check out the scrollpane code here, and if you wish, peruse the other demo code.