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.

[Scroll](!scroll)

 

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.

2 comments for “Roll20: Scrolling Images

  1. March 8, 2020 at 9:18 am

    Have you heard of the Roll20 enhancement suite? Among other things, it allows you to embed youtube videos (with sound) directly, so you can very easily do things like provide an introductory cutscene or use animated backgrounds. My group has greatly enjoyed the step up, and as a GM I’ve enjoyed the myriad QoL tweaks it offers.
    https://ssstormy.github.io/roll20-enhancement-suite/

  2. DriftingNitro
    April 12, 2020 at 1:23 am

    I have heard of it and have used it but it’s difficult with making sure everyone has it installed, especially since it’s no longer on the extensions store for chrome making it hard to sync versions. Also, lately the enhancement suite has been breaking the jukebox and making it unable to play tracks which is a big dealbreaker for how much sound I use and how it’s tied to macros using the API.

Leave a Reply

Your email address will not be published.

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