Feature: Animated Background

From 5etools Community Wiki
Jump to: navigation, search

PLEASE NOTE: Roll20 Enhancement Suite (aka VTT es/ R20es), is not part of BetteR20 or 5eTools. However; as BetteR20 requires VTT es/R20es, this Wiki covers its content to (HOPEFULLY) prevent BetteR20 users from requesting help on BetteR20 issues on the VTTes/R20es Discord server or other platforms (Reddit/Roll20.net Forum, etc).


framless
v1.15.21

Animated background.gif

Animated Background

BothDMnPC.png
Animated Background is a feature that allows the GM to set an animated video to play in the background. As the video shows you have you first know of a usable MEDIA URL you wish to use. 
Here is a public Media URL for an animated background image. Why not try using it to get started? (For more such images, look in the FAQ and comments as the community shares their own creations, and how to make your own)
https://raw.githubusercontent.com/DMsGuild201/Roll20_resources/master/Animated/Starfield.webm
You should see a blue swirling gaseous nebula looking effect.
The Video plays under the map layer (this cannot be changed), so any things put onto the map layer may cover part or all of the animated background. 
example: You could use one of the ocean animations for a swells on the ocean, then put a Ship or Island Map Asset from the Image Repo, the animation would be playing but the ship / island would appear ontop of those waves.


Feature/Formatting Requirements (if any)

The File can must be of one of the following types ; what are most commonly used are .webm or .mp4 video type, and hosted in a location that all the player's browsers can resolve without further authentication or pass through. 

That is a simple way of saying only certain files will play, and that if you're not careful you may see the video, and everyone else might not be able. (See below).

The link must be a valid media URL, aka a direct file link.


Instruction Walkthrough (How to use it)

By default animated backgrounds will be enabled on entering Roll20 for the first time after R20ES's installation.

  • Look for the animated background configuration icon.Icon.png (Located near the top RIGHT-hand corner by the Page Toolbar - NOTE it was recently relocated, and so its location differs from the animation above)
  • Which when clicked a window will open and show...
    BackgroundSetup.png
  • The file will need to be of the appropriate type (.webm .mp4 )



Feature Support


Known Issues/Limitations

You Must Use Direct links

Direct Link Files

Several features will require the use of direct link files, so what are they?


A directly linked file is one that your browser can stream without use of any site-specific media player (youTube/Spotify both use embedded players), and without additional prior or pass-through authentication or redirection.


... and for the purposes of Roll20, it must also be a file yourself and your players/GM can access.


YouTUBE, SoundCloud & Spotify

Right off the bat, let's answer the most common question - YouTube, Soundcloud & Spotify, don't work. The links they provide do not link the browser to the file, but to a player.
Both sites have embedded code to render parts that file you're listening to/playing thru their site's dedicated server-side player - and since that is how they operate, and that would conflict with Roll20's site working in their website native players - canvas; requests to load youtube/Spotify will fail.
Each website does what it does, and like radio, it only plays one channel (website) at a time. There are ways around that we'll discuss, but from a high-level overview - YouTube and Spotify won't work, and likely never will (natively).


How do you know if a link is a direct file?

By visual inspection:
A pretty easy way to check on that is if the URL (the address in the Address bar) ends with a file extension.
Example ( http://www.domain.com/directory/filename.<extension> [where <extension> could be .mp3, .mp4, .webm, .webp, .png, .gif, , .json etc etc, depending upon what feature you are using (LibreAudio, Animated Background, External Art, Insert Token by URL, Paste image from URL etc
  • For Music that would be files that end with:
.mp3 .mp4 .ogg .flac .wav .webm
  • For Video that would be files that end with:
.webm .avi .mp4


URLs that do not end with the file specifically listed, or that have additional elements on the end often are issuing redirections and so likely will not work.


Example of Bad URLS

examples of bad Media URLs (they won't work, and why they won't work -- so you can avoid them in your testing)


GENERAL

127.0.0.1/Users/GM/My_Documents/Roll20_Animated_Backgrounds/Supercool.mp4
That is a local file (that address is a coded loopback to whatever machine you are on) and nobody else will be able to see it as that URL goes only to that local machine.


https://drive.google.com/drive/u/3/folders/1l-7JbIsb60osH0f06iNzHVnq-0oY-VNp
That link doesn't have the file name, and ... That link either requires authentication, or issues a redirect - if pass-through authentication is required the Roll20 client will not pass that, and redirections are most often changes in HTML. The Roll20 canvas application player doesn't know what to do with it.


https://www.patreon.com/file?h=17052388&i=1882731
Note that the URL ends with ?<something>, that is what is called a GET. It is a means to passover information to the server, while sometimes these occur after the direct file name (ie. https://www.domain.com/directory/file_name.ext?resx=500&resy=270 to return a specific resolution) they are also used to pass authentication to allow login/password or pass thru session authorization.


IMAGES


VIDEOS
https://www.youtube.com/watch?v=aRaynveO0MQ
That's a youtube URL - like above, there is a website side actions that the link asks the browser to take to redirect or initiate some other elements, and the Roll20 client will not be able to act on that so those links WILL fail. 


AUDIO
https://soundcloud.com/user-585971590/sets/d-d-night
That's a SoundCloud URL, and they don't provide direct file access without API. So the links you get will generate a website side actions that the link will pull alot of HTML/CSS and some server-side scripts - all of which, are not an audio file, and so Roll20's canvas will not fail upon being asked to process.


https://open.spotify.com/track/2xGDOy0pPf7XQSBhvJ9lzn
That's a spotify URL, and they don't provide direct file access, and like Spotify and several audio streaming services links you get will link to their website, the link will pull a lot of HTML/CSS and some server-side scripts - all of which, are not an audio file, and so Roll20's canvas will fail upon being asked to process ANOTHER website inside its own website.


JSON/Homebrew
https://github.com/TheGiddyLimit/homebrew/blob/master/feat/Sample%20-%20Giddy%3B%20Magically%20Gifted%2C%20Whip%20Aficionado.json
While that absolutely does end with the .json extension, you'll note that visiting the site brings up something like this.
Github labeled.png
You'll note that visiting the site shows some hints on what that will not work.
The site has a number of UI elements, navigation bar, tabbed interface, search field, access to account information and some metadata content - all of that meets the concern about embedded media player - in this case a text editor ( ).
HOWEVER -- there is a means to get direct file access. The GitHub RAW button.png (raw) will lead to a direct file link.
https://raw.githubusercontent.com/TheGiddyLimit/homebrew/master/feat/Sample%20-%20Giddy%3B%20Magically%20Gifted%2C%20Whip%20Aficionado.json
This is a feature that is site-specific, but you will find that general concept from time to time - that a file link, instead of going to direct file, will bring up an embedded player, and that the player provides an option for a link to the direct file, or to download the file for use from a hosting service of your choice.
  • https://media.giphy.com/media/bcKmIWkUMCjVm/giphy.gif​​​​
    That's an animated .gif (see the ending bit of text? that says .gif -- the player doesn't use and cannot play animated gifs, if your file doesn't work, and ends in .gif, that's why.
     
  • https://i.imgur.com/zvATqgs.gifv
    That's the new animated .gif format .gifv.  (and in case you're wondering, renaming a file to .webm or mp4 won't make the file's "type" change - the file is written in a specific language/structure.  The player reads that language, and if its not in that language - it just doesn't work. 


By testing
This is the most obvious, but least used. Take the URL and try opening that URL in a different browser, you may also wish to have one of more players confirm that they can do can.}}


IMAGES
VIDEOS
Videos opened in the browser will open the video with a minimal set of controls. (See video below)
BrowserVideoVID.gif


It should not have a lot of ads, playlist, navigation or account management nav bar, or voting/rating system.
ie, not this.
YouTube labeled.png
AUDIO
Direct File URLS for audio will initiate either a file download or prompt the browser to start playing the file. (See sample screenshoot from a Chrome browser below).
AudioPage.png
JSON/Homebrew
When viewed through the browser it will looking like code listing in the browser.
(Example from a RAW address on GitHub.
GithubRAW.png


One/Some/All of my players cannot see/hear the animation/audio, but I can!

Troubleshooting
Check to see if the player(s) are using the supported environment, have the most current versions of the browser and extensions are installed, and configured correctly.
Most likely the URL you have chosen isn't a public address, and so your browser is playing it because YOU/your machine is authorized already to see that file, while your players are not.
Solution Steps:
Move the file to a place everyone has access to (see the specific feature for suggested locations) or by giving everyone access rights to that location.


Features that use this:

LibreAudio
Animated Background
External Art
Insert Token by URL
Paste image from URL
​​​​ What should I look for to know if the link will work? or I have a URL, why isn't it working!?


examples of bad Media URLs (they won't work, and why they won't work -- so you can avoid them in your testing)

  • 127.0.0.1/Users/GM/My_Documents/Roll20_Animated_Backgrounds/Supercool.mp4
    That is a local file (that address is a loopback to whatever machine you are on) and nobody else will be able to see it.

  • That link either requires authentication, or issues a redirect - if pass-through authentication is required the Roll20 client will not pass that, and redirections are most often changes in HTML. The player doesn't know what to do with it.
     
  • https://www.youtube.com/watch?v=aRaynveO0MQ 
    That's a youtube URL - like above, there is a website side actions that the link asks the browser to take to redirect or initiate some other elements, and the Roll20 client will not be able to act on that so those links WILL fail. 
     
  • https://media.giphy.com/media/bcKmIWkUMCjVm/giphy.gif​​​​
    That's an animated .gif (see the ending bit of text? that says .gif -- the player doesn't use and cannot play animated gifs, if your file doesn't work, and ends in .gif, that's why.
     
  • https://i.imgur.com/zvATqgs.gifv
    That's the new animated .gif format .gifv.  (and in case you're wondering, renaming a file to .webm or mp4 won't make the file's "type" change - the file is written in a specific language/structure.  The player reads that language, and if its not in that language - it just doesn't work. 
     
Not everyone can see the animation!
Troubleshooting
Tier 1
Check to see if the player(s) are using the supported environment, have the most current version of R20ES installed correctly, and that it is enabled.

Solution

Check to see if the extension is running, or they are on the supported environment.
If it is not, install or enable the extension/plugin. 
See the installation guide.

Tier 2
Most likely the URL you have chosen isn't a public address, and so your browser is playing it because it is authorized already to see that file, while your players are not.

Solution Steps:
Move the file (see Where can I host my Animated Backgrounds ...) to a place everyone has access to.
 
Give everyone access to that location.
The best way to see if its a public file is to open a new browser (Chrome if you are using Firefox, Firefox if you are using Chrome - and install R20ES to work in Incognito or Private viewing mode. then log into Roll20 and see if that browser can see the animation.
You can also test this by putting or choosing ANOTHER animation from that site and setting it as a landing page for the players, before play, make sure they can see the animation clearly - then you can proceed with confidence. Otherwise, you will need to have a backup map as whomever cannot see the test animation on the landing page, very likely cannot see the other image.
FAQ

Where do I find animations?
You can also use the resources in the next question to create temporary links to YouTube or extract files from there,
DMGE offers a freeware tool to make such (works wonders with the modular dungeon segments.)
How do I Generate Usable Media URLs from Online sources?

This method requires VLC player

Where prompted, Enter the URL / Link to the video (such as `https://www.youtube.com/watch?v=ahwMlwJXPPs`)
  • Then in the menu at the top click on Tools
  • Choose `Media Information` (or Ctrl + i)
  • At the bottom, under location - you can triple-click on that to copy a direct link to the video or double click & ctrl + c (It will be a very large string of letters and numbers)

example


this link does expire in several days (varies but as a guess around 20 days), so you may this, but realize you will need to update the link from time to time.

Get a link from Alltube

The method creates temporary URLs that will expire in about a day* (assumes From Youtube)

  • Find a video on or upload a video to youtube you wish to use.
  • Get the URL for that video and copy it.
  • Go to https://alltubedownload.net/
  • Paste your Youtube video's URL
The URL that is provided will expire in about a day.


OpenDrive
  1. Create an account  & Login
  2. Go to https://www.opendrive.com/files/
  3. You can choose a folder (eg. Music) or create a new one
  4. Drag and Drop your sound file (mp3, ogg, ...) on the page
  5. Wait until the end of the upload, then right click it
  6. Choose "Links
    OpenDrive 1.png
  7. Then copy the "Direct Link (streaming)"
    OpenDrive 2.png

NB: OpenDrive gives you 5GB of storage but you can [get free space here](https://www.opendrive.com/free "Get Free Space")


DropBox

  1. Upload the file to dropbox
  2. Create a link
  3. The link will end in dl=0, change the dl=0 to dl=1
  4. Paste that modified URL into the Media URL field.

Googledrive

  1. Install [this extension on chrome](https://chrome.google.com/webstore/detail/tab-save/lkngoeaeclaebmpkgapchgjdbaekacki).
How do I resize the video?
You change the page dimension. The animated map maintains its aspect ratio and scales with the page's dimensions.
TVs/ monitors work within a  16:9 ratio so use that as a metric that to avoid letterboxing (dead space around the image) as much as possible.
eg.
Page's X value Page's Y value
16 9
32 18
50 28
64 36
ultimately you'll need to play around so that the scale matches the encounter in some capacity, and some of the animated backgrounds are made intentionally to be modular - so those files you save locally then manufacture complex systems for players to wander through.
How do align the grid to the animation's grid?
Most often, you don't. there is some chance it will work, but most often its best to turn off the grid and go from there.
How do I make my own Animated Backgrounds?
Manny Sykes uses this tool to create many of his animated backgrounds, and you can too. DMGE is tool offered by /u/mcdoolz through his Patreon site .
  • You find a game with a virtual environment you enjoy
  • confirm there is a 'no clipping' sort of crack or feature.
  • use a software for recording the screen.
  • then... post the video onto Imgur; YouTube; etc etc.
  • use the same practices as above to generate a usable link.
Watch this  to help walk you through the process
Where can I host my Animated Backgrounds so that my players can see and marvel (as can other GMs)?
Loads of options abound. But... GoogleDrive, Onedrive,  Amazon - are most often not usable. so
  • youtube
  • imgur
  • github (under 25mb)
  • webmland (under 100mb) site has closed.
  • mixtape.moe
  • dropbox
  • or.....leave a request in the notes with a link to the file
Best Practices

None as yet (Do you have any suggestions?)

ARTIST attribution

Dynamic Dungeons

artist:
youTube Playlist
Patreon Site


Tabletop Things

artist: Tom Swogger
WebSite: https://www.tabletopthings.com/
YouTube: https://www.youtube.com/c/TomSwogger


Manny Sykes

artist: Manny Sykes
youTube Playlist


Note: most (if not all) of these maps are screen captures from video games, as a result, they tend to be relatively small and do not lend themselves easily to battle maps as their visual elements often suggest the scale of the image is a total of ~30ft across.






Related Features



Did that answer your question(s)?

If not please check the under section Feature Support Known Isseus/Limitations or visit the Known Issues page for further guidance, or go to the Discord community and leave a comment in the issues channel.

If you enjoy the project, please follow this link to see how you can contribute and help make it even better.


PLEASE NOTE: Roll20 Enhancement Suite (aka VTT es/ R20es), is not part of BetteR20 or 5eTools. However; as BetteR20 requires VTT es/R20es, this Wiki covers its content to (HOPEFULLY) prevent BetteR20 users from requesting help on BetteR20 issues on the VTTes/R20es Discord server or other platforms (Reddit/Roll20.net Forum, etc).