It’s Finally Happening!

The ability to add layers was a major driver in our decision to rebuild our virtual tabletop with Project Jumpgate last year. For this project, our team was able to capitalize on the heavy lifting already done to modernize the codebase when building and refining the new feature. The result is a tool designed to be fun to use, engage the imagination, and unlock a whole new way to play. In this blog, co-authored by Val, Frances, Ian, and Jayme from Roll20’s Product, Dev, Design, and Marketing teams, we’re giving you a peek behind the scenes into the development of the impending Foreground Layer!

What is the Foreground Layer?

Roll20’s Foreground Layer is a GM-accessible layer that renders above the token layer. While it sounds simple enough, the creative possibilities unlocked with this addition are vast, and a lot of work went into building it correctly.

The Foreground Layer opens a whole can of worms, but at least we can go fishing now! – Frances B., Senior Product Designer

How it Works

GM’s can utilize the Foreground Layer to design immersive and interactive environments to surprise and delight their players. Foreground objects can either “fade” when a token moves underneath them or remain fully opaque depending on GM settings. Imagine a rooftop that fades or disappears when a player enters a building, a spiderweb obscuring an exploring player’s vision, or a looping, animated rainstorm creating a moody atmosphere over your entire map. 

The Research Behind our Build

When addressing a long-standing request, we needed to make sure that we got it right. To make this possible, we: 

• Unblocked development by overhauling the tabletop engine entirely in 2024
• Interviewed Roll20’s trusted Forum Champions, Employees, and Volunteer GMs from the community to explore how they thought they would use a Foreground Layer in their real campaigns. Those findings helped us hone in on a feature set that confidently met their needs 
• Created a live-code proof of concept, testing rigorously every step of the way to ensure that game performance wasn’t negatively impacted by expanding features 
• Ran interactive usability tests to gather feedback on satisfaction, ease of use, and whether or not we were meeting user expectations* 

*Note: You might have seen us recruiting for these tests. Surveys that ask you if you are free, are a GM, how long you’ve used Roll20, etc., feed straight to our design team! For the Foreground Layer specifically, we focused on open-ended questions and speak-aloud tests to stay closely connected with community feedback.

We learned that the most exciting use cases for a Foreground Layer were rooftops, tree canopies, and other map details that interact with player tokens. Our testers began brainstorming immediately, imagining the potential impact on their games, and confirming the importance of key functionality we needed to build to support. We ensured tokens retained clickability and visibility, made accessing and editing the layer simple, and worked to keep the workload of GMs from ballooning by avoiding overcomplication. The design team iterated quickly to address concerns as they arose, ensuring not to compromise performance or usability. 

The biggest challenge in building the Foreground Layer was actually saying, “OK, stop adding stuff and let people play with it!” – Ian Howard, Lead Developer – Virtual Tabletop Team

Challenges & Future Considerations

Adding a new layer isn’t only a usability puzzle. It also impacts how the entire tabletop functions. During our build, we had to address some tough challenges: 

• Performance: With the massive gains in performance brought by Project Jumpgate, our devs strive to ensure that any subsequent feature releases avoid stepping backward and slowing down campaigns. 
• Dynamic Lighting Compatibility: Should foreground objects interact with darkness? Some GMs wanted objects to exist above Dynamic Lighting (like roofs covering a building), while others wanted them to exist below (like a bridge casting a shadow). 

What to Expect in Beta

Plus: Take Advantage of Ease of Use Features and Hotkeys

• Ctrl/Cmd + A selects everything on your active layer
• Multiselect and batch edit enable quick adjustments
• V highlights controlled tokens 
• Shift + V allows GMs to quickly peek under the Foreground Layer
• Soft overlay allows for easier identification of what’s on the Foreground Layer
• Foreground object settings can be accessed in Token Settings or via the right-click menu
• Key settings will be accessible through API
• Continue to preview as player via Ctrl/Cmd + L
• A new combined menu to adjust GM Opacity Settings across the board

What isn’t in Beta (and Why)

Elevation & Multi-Level Play: Although a lower-priority request in our polling, players may eventually want to place tokens above foreground objects, requiring support for player-controlled tokens both above and below the Foreground Layer. Enabling this without adding excessive manual work for GMs requires further development, particularly around Z-ordering separate from Dynamic Lighting. Adding layers increases complexity exponentially, so more research and usability testing are needed. Gathering user feedback during our Beta release will be extremely helpful. 

For now: GMs can move a foreground object to the map layer if a token is “on top” of it, or place a token to the Foreground Layer… although in that case, only the GM can control it.

Indicating Fully Obscured Tokens: When a token is completely hidden by a foreground object, players might lose track of it or struggle to click it. If we over-design an indicator locating ‘hidden’ tokens, we risk diminishing intended mystery or tension. We need more time and community feedback to ensure any visual effect implemented here is both effective and performant.

For now: you can click on your token even if it looks hidden, left-click drag to select, or use the V keyboard shortcut to locate it if you do lose it. Additionally, token bars and nameplates will always show above foreground objects (if they are visible to the player and the token is not obscured by darkness).

Ready to Try it? Stand By!

We’re so excited to share what we’ve been working on with you, and are excited to hear what you think when the Beta launches. Subscribers (Plus and Pro) will have the ability to use the Foreground Layer and tell us what works, what they want improved, and any other ideas they have for how we could continue improving layers on the tabletop. 

Keep an eye on our blog, newsletter, and social media to be notified when the feature is released!