Roll20: Scrolling Images

What is this?

This is the beginning of a quick little script in the Roll20 API that enables the scrolling of images more fluidly on the page. I like to open campaigns with what may be considered a ‘cut-scene’, although I use the term very loosely. They are often nothing more than scrolling landscapes or sliding images accompanied by music to set a tone for the beginning of a session. I have been comfortable with simply using my mouse to drag the images around but I am seeking a more automated solution for more complex ‘cut-scenes’.

GM View:

Player View:


I intend on using more complex movements in the future, several pieces, parallax backgrounds, or even interactive maps that can be moved by the players. However, all big plans start on a small foundation. This little piece of code is a proof of concept that the API can identify, and move a graphic a specified distance. The rest of the process will mostly involve stringing together several of these actions to occur automatically, whether by GM command or autonomously.

Some Code

on("ready", function() { //wait for the API and game engine to be ready
    on("chat:message", function(msg) { //event handler, activate on every chat message
        var obj; //create the object variable
        if(msg.type == "api" && msg.content == "!scroll") { //when typing "!scroll" with a graphic selected, it will activate this script
            obj = getObj(msg.selected[0]._type, msg.selected[0]._id); //identifying the object selected from the 
            graphic_id = obj.get('id')
            var background = findObjs({_type: "graphic", _id: graphic_id})[0]; //Identify and pass the background object.
            var direction = -70; //Walk left 70 pixels, equal to one grid block
            background.set("left", background.get("left") + direction); //do the move

You can set up a macro button or a chat button that allows you to activate the command in quick succession giving the appearance of a steadily scrolling background.



Hopefully in the future there may be some way to record or cache a series of movements that a GM desires and execute on command. One step at a time. Here’s hoping Roll20 implements a native full page video solution by the time I get that far.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.