Case Studies

Case Study: Overlay for RollPlay R&D Show

By 8 May, 2015 No Comments

RollPlay is a roleplaying show created by itmeJP that uses Skype and broadcasts over Twitch. In this article you will find out the entire process from start to finish over what goes into making the overlays for a online role-playing game over Twitch or any other streaming service.


“Icelandic feel” that was about it actually. However I’m very familiar with the RollPlay brand so therefor I take on the complete role of a art director for the overlay. The first thing I do is to get a better understand of the roleplaying game that they will be playing on the show, and in this case it was Sagas of the IcelandersThe first thing I looked was a description of the game and that gave me all that I needed as an initial direction for the overlay.

This is from Indie Press Revolution:

In Sagas of the Icelanders you play as one of these settlers between the end of the 9th and 10th centuries, also known as the Saga Period. You need to weigh between upholding your honour, your freedom, or the lives of you and your family. Challenge harsh social norms, get drawn into bloody feuds, and fight to survive another winter. Tell the stories of the settlers’ families, their lives, trials and legacies. Build a new society from scratch and discover or change history as you forge a veritable Saga worth to echo through time.


The one thing I’ve realized when it come to the RollPlay overlay style is that I can’t use my regular process, but rather have a different process for this. There’s a lot more reading than visual. The first thing that I visited was Wikipedia’s entry for the Saga Era in Iceland’s history. As soon as I started to read it I realized that these were subjects we’ve actually been taught in middle school in Sweden. Imagery and stories that I’ve read as a child all came back to me, and that point I knew I didn’t need to do any more research on the matter.

Overlay Layout

Overlay Preview 1

Preview 1

Me and itmeJP have previously discussed how to better utilize as much of the 19 by 9 space as possible. The problem is that with less empty space from the cameras the less space to use the RollPlay branding that the viewers have gotten used to. If you take a look at Preview 1 you can see that I’ve taken steps to address both of those issues. As you can see the black bars on the sides are actually two cameras stacked right on top och each other. This way I’ve used the maximum amount of vertical space and copied one the middle and mirrored it on the other side. I added a little bit of margin to either side to balance it out at least a little.

My idea is to put the nameplate right above the camera and add details that will preserve the RollPlay overlay style that the viewers are used to.

Overlay Preview 2

Overlay Preview 2

If you look at Preview 2 you can actually see how I layout the cameras before I even start to do the design. Preview 2 isn’t for the main overlay but for another overlay that will display cameras plus a map.

Overlay Concept

Even if I had an idea about imagery from memory I still felt I needed to look up Icelandic art. The easiest way for that is always Google image search. The five things that grabbed my attention was the swords, shields, wooden ships, rune stones and brass detailing.

Overlay Preview 3

Overlay Preview 3

As you can see in Preview 3 you can see that I’ve started to implement those ideas already. What you also can see is that it’s very flat. This is in case I need to make any changes they won’t be as cumbersome to change and it’s more of moving things around. In Preview 4 you can actually start to see that I’ve added a bit more detail and depth, while still keeping the whole rune stone theme intact.

Overlay Preview 4

Overlay Preview 4

Usually there are more space to utilize however, as mentioned, with the limited space I don’t want to fill it with too much stuff. I don’t want it to go over to a over-produced stage where it got so much going on it’s almost distracting. After all there should be focus on the players and the story they’re telling. The overlay should help convey the feel and the direction at a glance and not try to tell it’s own story.

Preview 5 is as close as you can get to a final version. By adding a bit of color grade and those minor details you get a completely different look and feel when you compare it to Preview 4.

Overlay Preview 5

Overlay Preview 5

The depth helps but what really sells the whole thing are the minor details. Everything from the slightly worn swords, they all differ a little, to the hand drawn runes at the bottom. The color grade is also a aspect that you can’t ignore it gives it a more realistic feel.


Final Overlay

Final Overlay

Here you can see all of the overlays created for Sage of the Icelanders. We use the following setup Main (cameras only), Map (cameras + a 16 by 9 map window), dice (cameras + map window + dice window), Stats (cameras + charterer statistics + dice), Thumbnail (for YouTube) and Title (used for breaks during the show or before the show).

You can see that it all follows the same branding concepts as previous overlays in the RollPlay show universe. The main difference is the utilizing of as much space as possible, without brand confusion, giving the viewer the optimal experience and immersion with the players.

In the final version you might also notice that I’ve incorporated the wood and brass detailing that I was talking about earlier. I’ve also added more focus on the runes, they play both a bigger role on the title and thumbnail but also on the map, dice and stats overlay.  Adding the twitter handles was a bit tricky since there wasn’t that much space left. Making the text smaller would only result in the text not being readable. Instead I utilized adding a white box behind the twitter handles and put them right on-top of the cameras. It won’t distract too much, without taking up too much space and still having in readable.

As always the next step is actually testing it out live and get the viewer feedback and make, or not make, changes depending on that feedback.

If you have any questions regarding this article, have something you want me to write about or if you have questions in general you can find me on Twitter @visiblespeech. If you have business inquires you can e-mail me at



Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future.