As you might know I’ve worked with RollPlay since day one. We have not been scared to innovate and to adjust over the years to figure out the best overlays possible. Not only that but we’ve also always taken both the experience and the viewer into account through each change. RollPlay Mouse Guard Twitch Branding turned out to be one of those moments where we aimed to turn a new page and see where things might end up.
Before we get to the concept ideas behind the layout let’s talk about the logo. As you probably can tell it is pretty much a play on the original Mouse Guard logo. It was only a matter of figuring out what typeface they use and then do some minor changes to it.
The fastest way to figure this out was to simply download the character sheet PDF from their website. Then by opening it in Adobe Acrobat DC and use the editor to see the fonts that are used in the PDF.
I found the following three different fonts: Ringbearer, Hobby Horse NF, and ITC Tiepolo. Since Ringbearer was the font used for the Mouse Guard logo I simply added in the RollPlay One Shot under it in the same font (but smaller size), dropped that into a folder, added in the RollPlay dice icon into the first two O’s, then added some blend if to get the paper to come through, and finally added a layer mask with a grunge texture to give it a distress look.
These smaller adjustments was necessary to add to better make it sit right in the overlay. The benefit of the RollPlay One-Shots are that there’s no need for these logos to work outside of their Twitch context. There’s no need to have them work at all sizes, no need to have them work as vectors or for that matter have them work in print. They’re all digital and all made for the usage on Twitch.
RollPlay Mouse Guard got an update to the layout of the overlays. We decided to take inspiration from Roll20 with a cleaner more minimal approach to get more surface area for the map.
While I did like the Roll20 approach there were things that for sure were lacking in their approach. Initially I was worried that RollPlay uses 5 cameras while the Roll20 examples used 4 camers. It was also missing a way to get stats and names/Twitter on the screen. While that might not be important on Roll20 shows it’s part of the RollPlay shows. I tried to address most of these issue for the RollPlay Mouse Guard layout overlays.
Instead of having a full bar at the bottom I adjusted so that the DM camera appeared at the bottom. While that dosen’t make 100% sense on the map layout it makes sense on the stats layout. Since each stats/info was now able to sit right next to each player. This gave use a lot of space to add in both stats and info.
What We Learned
We also do some user feedback when we introduce new things. From that we always learn a ton and that then allow me to fine tune the overlays. When it comes to something like role playing shows you have a lot more to think about than only the game and the one camera.
The dice window on the map overlay ended up being way too small for most screens. This could be solved in a few ways. The easiest solution would be to capture it from two windows and having the second one (for dice rolls) more zoomed in. Pretty much splitting the screen into overlay, map and dice windows inside of xsplit or OBS.
Another option would be to create custom CSS for the dice window. It’s something that you only can do if you have the Roll20 plus account. You can do a pretty simple workaround if you pull it in as a browser source. You can simply add the custom CSS rules into the CSS in xpslit or OBS. That will overwrite the CSS that the browser pushes in. This allows it to be one source for the map and dice window, and that’s a good thing. It can also take on the appearance of the rest of the overlay in that case so you get something that works together.
The best solution would of course be to be able to pull things from the Roll20 API. However at the time you’re only able to send things to the Roll20 API and not pull from it.
The stats looked great and worked great. The main downside with something like Mouse Guard is that a lot of text and that can make the text rather small. Of course this will change depending on the system that is being used. In some cases it might be text heavy and in some it might be more numbers focused.
I do think that this vertical style and being able to push it right next to the person is a great idea. It connects it a lot better than have to try and figure out who is who.
One thing that I don’t think worked on this overlay was the names at the bottom. While it worked on the dice window overlay on the stats version you instead see the names twice now. Once in the stats and once below. This could probably be fixed by adding the Twitter (and Twitch account) to the stats. This leaves out the DM and that’s something that would need to be addressed if this overlay is used again. It would look odd to have the DM name, Twitter and Twitch in larger format to fill the space. So something has to used in it’s place for it to make sense.
There were more things that I noticed after this one that would get fixed in the future. These are things that happens when you only have a few days to execute on the same level as you usually do with 3-4 weeks. However I am happy how it all turned out no matter what for the time that it took. Learned a lot from it and that will fuel any future similar overlays that we end up needing.
These one-shots are great to try things out on since if something dosen’t work it’s not like it will impact any future overlays for that show since it’s only a time thing.
I hope you enjoyed this case study. It’s been awhile since I did one for RollPlay so it’s fun to back at it. There will be more coming that’s not roleplaying related as well. But no ETA on that at the moment since I’m still working on the projects.
If you’re interested in getting your own Twitch branding for your own Twitch channel you should check out my Twitch branding services.