Download (Use "Save As" - even though this is a HTML file, it is meant to be used in OBS, not a browser.)
This toy was created for an artist acquaintance. He had a few dozen gifs of his characters walking, some right to left, some left to right. He asked: could I make something that allows them to walk across the bottom of the screen when streaming in OBS?
Download chyron.html It's best to put it in the same drive you installed OBS to; I encountered OS security warnings when I tried to run it from a different drive.
Copy the images you want to use to that same folder. At least 2 images are required; 3 or more recommended. I strongly recommend naming the files something short and simple, so when you go chasing down bugs later the filename in the error tells you exactly what to look for.
Open chyron.html in a text editor. (In Windows, shift-click chyron.htm, choose Open With, and choose Notepad.) Hit ctrl-F and look for: const chyronEntries. You'll find this bit of code:
const chyronEntires = [ ['spinnychair.gif', 'rtl'] ];
Each entry you want to add needs to be on its own line, with a comma between entries. The ]; indicates the end of the list.
Each walker you want moving across the screen will need the filename, and a note as to whether the image shows a character walking right-to-left (rtl) or left-to-right (ltr), as follows:
["filename.ext", "rtl"]
You can put as many entries into this list as you like. (The pratical upper limit is how many images your machine can have in memory and still stream acceptably well, but I was able to test stream with 100 images just fine.)
The final, edited list will look something like this:
const chyronEntries = [ ["apples.gif", "rtl"] , ["pears.gif", "rtl"] , ["bananas.gif", "ltr"] , ["chairs.gif", "rtl"] , ["cherries.gif", "ltr"] , ["bears.gif", "rtl"] ];
Save the file.
In OBS, select the scene you want the chyron running in.
Under Sources, hit the plus sign under the list of sources, and add a Browser source.
Name it something unique ("Walkers" or "Chyron").
Check 'Local File'.
In the field that just opened, click Browse, then select chyron.html from the folder you set up earlier.
Change the Width and Height to what you want the output to be. If you are going to have the walkers walk across the bottom of the screen, set the width and height to your normal output resolution. If the walkers are going to walk in a set area, measure the area first, then set the width and the height precisely.
If the walkers are moving in a set area, don't forget to drag the browser source into the right layer and into the right position on screen.
To change the frequency at which walkers spawn, ctrl-F "setInterval":
var timer = window.setInterval(debut, 500);
500 is the freuency, in milliseconds, the script might spawn a walker.
To change the chance of a walker spawning any given moment, ctrl-F "function debut()":
if (Math.random() < (0.125 * (totalWalkers - numWalkers) / totalWalkers)) onstage();
The number 0.125 can be decreased to make walkers spawn less often, or increased to make spawns more often. A number of 0 means they will never spawn. A number of 1 (or more) means they will always spawn. (Note that this number is reduced as the screen fills up.)
If you want to change how long it takes to cross the screen, you will have to change three numbers: the traversal time for left-to-right, the traversal time for right-to-left, and the cleanup time.
To change the traversal time, ctrl-F "img.walk-rtl" and "img.walk-ltr":
animation-duration: 20s;
Edit the line above. This is measured in seconds, and the unit s for 'seconds' must be included.
The walker cleanup time is added when the walker is created, so it is part of the walker onstage function. Ctrl-F "setTimeout":
}, 19975, walker, nextWalker)
Edit the line above. This is measured in miliseconds, and must be a whole number. The number needs to be the animation duration, times 1000, then minus 25; the 25 milliseconds gives the renderer a chance to actually remove the icon before it next needs to generate a new walker, and reduces the chance that the nextWalker function thinks an icon is free when it's actually not.
spinnychair.gif, the image used placeholder demo spinning down below, was a commission from Sugar Morning!