Feedback Requested: Stream overlay

By Ebak, in X-Wing

Hey guys, I've been hard at work making an overlay for my local game stores upcoming X-Wing events and I am pretty sure I have it nailed down, however I wanted to show it to the community to receive feedback on it. The local community seem to think it's fine, however a lot of our audience comes from overseas and so I wanted to see what they thought of it:

Tm1BazR.jpg

Edit:

Been looking at a solution to get the upgrades on there, added a scroll bar to one of the overlays as an experiment, thoughts? I think it looks way to cluttered on the bar now.

O0Q0BCC.png

Edited by Ebak

I think the empty areas could be transparent.

Or at least, the overlay should be shown only when there is a change, or now and then as a reminder, rather than all the time. Just like sport shows do on TV.

The +1 that's blanked on one of the IGGies is a stealth device that's been hit?

I generally like it if the upgrades are listed somewhere on a stream overlay, but if it's for the youtubes that can be in the vid description.

I don't like the bits at the bottom though, you could use that space a lot more effectively.

Having a track of the current points is also useful somewhere. (i.e. who's winning and by how much) Or at least, the values of the individual ships.

WHat's the little lightning bolt on Boba?

I'd also be inclined to give every ship an ID number regardless of whether it's unique, just for ease of working out where they are which can sometimes be unclear.

The +1 is indeed a stealth device indicator and the greyed out one shows that it has been hit.

The problem with doing upgrades on a stream is the modular nature of lists. Setting up the overlay is something I don't get much time for, generally i get 3 minutes to set up for the next match. Infact if you watch our past X-Wing streams at the Athena Games Youtube Page you can see that sometimes the overlay doesn't appear until we are 5 or 10 minutes into the match.

The wasted space is there because there are 8 'slots' which those ship overlays can slide into and it's designed to be very easy to swap out the ship overlays and do very minimal editing to get it ready for the match, you simply switch the image, reset the shield and hull values and you are good. However if you think it would be better to loose the side bar, I'm sure we can give that a try.

Upgrades are hard to do because I don't know about the lists until we stream them and if I wanted to include upgrade information, that would mean making the ship overlays larger and thus mess with the modular nature of the overlays. Thats why we go over the lists at the start of each match (or my co-commentator does) while I set up the overlay.

The 100 number at the top represents points remaining on the board, so people can see who is currently ahead.

The lightning bolt on Boba is to represent "Ioned" this is to complement the commentary not replace it so the audience can track who is ioned in that instance and how long they are ioned for (if they are a large ship)

I'll take your ID number idea under advisement and see how we do at the test stream next Wednesday.

You gotta remember, this will be happening live with one guy on the production side of things, so there have to be compromises.

At least its an improvement over the last overlay I made. That was very clunky and took forever to set up because all the different ship pilots made the overlays a different size, meaning you had to readjust the position of every shield and hull bar. Plus if you had a large list with 6 or so ships you had to shrink the overlays down so they'd all fit and then add in more shield and hull pips, this solution is a bit more elegant.

Edited by Ebak

I think it looks fantastic. The only suggestion I would make is for you to include the upgrade cards each ship is using as part of the ship dynamic. This should also help fill up some of the room down either side.

Okay, I will see if I can find a way to utilize the extra space in larger lists to display a ships upgrades. :P

Not sure how I am going to do it from a logistics point of view. Maybe another bar the same size as the ship overlays that has a ships upgrade bar icons which I can then add text to in Xsplit? The other option is have every upgrade be a seperate .png file....I don't want to do that though, there are a lot of upgrades in this game.

Edit: Would be fun to have a stencil "You've been Fetted!" to put over an appropriately discarded upgrade.

Edited by Ebak

Looks really nice.

The wasted space is there because there are 8 'slots' which those ship overlays can slide into and it's designed to be very easy to swap out the ship overlays and do very minimal editing to get it ready for the match, you simply switch the image, reset the shield and hull values and you are good.

For the wasted space: you could make it semi-opaque, which would reduce the block effect.

How did you create the overlay (photoshop?) and how do you animate it?

I'm trying to create an overlay to put my games on youtube but the process I use is very long : one overlay for ships and one image overlay for each shield/hull point that I switch off when it's lost. (I'm using adobe premiere)

How do you fit this in just 5 minutes?

What you have looks quite nice. But as others pointed out its missing upgrades. For several lists loadout is everything. I get that they commentate on it in the beginning, but not everyone tunes in right from the start. Big chance they will leave if they join later if they cant figure out what is going on.

You can always compromise by starting with this at the beginning of hte match, where the commentating is still fresh. Then after 5/10 minutes you add in the upgrades, when you had time to do so. Then people get reminded what was up, and new viewers can catch up.

The spare screen real-estate could be filled with a camera closeup on a dice/show crit cards area.

I made all the different elements in photoshop, that overlay image is a combination of all those elements in photoshop. The actual stream will use Xsplit, every ship overlay you see there will be labelled and can be switched out quickly be editing the image source which also retains the images size and dimensions. The shield and hull pips are actually holes in the ship overlay and behind the ship overlays is simply a blue bar, a yellow bar, and a black bar to act as shields and hull.

As a ship takes damage, I use x-split to 'crop' the shield or hull bar, which then unveils the black bar underneath creating the effect of the bar going down.

You can also program elements to move as you enable and disable them, thats how the tabs will work, they will be activated and 'appear' behind the overlay before sliding out from under it. Again they are the same size and can be swapped out as needed.

The spare screen real-estate could be filled with a camera closeup on a dice/show crit cards area.

That is something we are working on, it was never my intention to show an 8 ship or 7 ship swarm list, but I wanted to allow for the possibility should a list like that make the finals. The unused space was going to be used for both booth cam and dice cam, but I can have those appear as needed. Upgrades are something I was unwilling to do, although someone suggested posting the lists into chat for anyone who requests it as an option, I will see if I can come up with something that utilizes the remaining space efficiently.

Looks great! What is the gray box at the top center for? A timer for the match time would be a plus, but is not a huge deal.

Do you have a way of showing dice results on the screen? While good commentating can make up for not being able to see the dice, seeing the results on the screen makes me feel more like I'm there and getting the real-time results as opposed to having it relayed to me.

Showing the total point value of each ship could be another helpful piece of info, but is not required.

The grey box is to hide "twitch is showing this full screen" :P

I basically took a snapshot of one of our broadcasts so I could see how much screen real estate I had to work with.

As of now we mainly comment on the results, however even for us it's hard to see the results so we are working on getting a 'dice cam' for at least the commentary team, however since there is a demand for it I will probably have that pop up from the bottom or top depending where the combat is taking place. That way it doesn't obscure the overlay (since with upgrades its likely I will be using up all 8 slots (4 for ships, and 4 for their upgrades).

Good idea, having the video software crop a health bar should save a lot of time.

How many overlays can you have in xsplit?

For your ship overlays : do you have an independant health bar or one linked to each ship?

If so just beware of shield/hull upgrades.

Linked to each ship, but if you look on the image, you'll see a blast door either side of the bar, behind that door is an extra hull/shield pip, infact you can see that Kath has a Shield Upgrade, and Bossk has a Hull Upgrade. :)

Edited by Ebak

Nice!

As for number of overlays, no idea, but I have tested this specific list in Xsplit and had no problem.

A few years ago we had each shield pip be one image and turned that image off, it was clunky and confusing as we had several pips making up one ships bar, sometimes you'd turn off the wrong one or the wrong bar. By cropping it you have less elements in Xsplit, and although it takes a tiny bit longer, the audience can see the bar going down, so a bit more visual feedback there.

FWIW< in general it looks great to me, and it's a lot clearer than many similar overlays.

I pick because I see small things that could improve in something overall very good.

You need to be able to show the upgrades, for my money, so that things like Crack Shot can be visible. Otherwise it's going to be very hard to know what's going on with a crackswarm or any other single-use upgrades such as missiles etc.

Working on it:

uzMLIpY.png

Here's my thinking so right now we have 8 'slots' for ships in the overlay. As people have said, space is wasted when not all of them are filled. Now unless we run a TIE Swarm or Z-95 swarm, not all 8 slots or even 7 slots will be used, that means we'll have at most 6 ships and in lists like that, it's likely one or two ships won't have upgrades.

The slots must be the same size to keep editing down to a minimum, my plan is to make a 'upgrade expansion bar' that can fill one of those slots and can show any and all upgrades the ship has, so we'd have:

Slot 1: Ship 1

Slot 2: Ship 1's Upgrades

Slot 3: Ship 2

Slot 4: Ship 2's Upgrades

Slot 5: Ship 3

Slot 6 Ship 3's upgrades

Slot 7 either booth/dice cam, or ship 4.

Slot 8 either booth/dice cam, or ship 4's upgrae slot, or ship 5.

The only downside of that idea is a ship like a Z-95 or TIE Fighter that can only take one or two upgrades would be wasting all that space, so I may in those instance include the pilot ability in the expanded bar.

Bth6C3D.jpg

How's this for a compromise? In Xsplit you can create scrolling text, now I don't have a place to put this in the overlay, but would scrolling text highlighting the upgrades in a list be clear enough for people watching? It keeps it compact yet imparts the information, and can be very quickly changed by me.

I think it looks great! I'd also love to see upgrades, but its not critical if the commentary is very good.

Thats absolutely fine for desktop viewers with good connections. For mobile/tablet watchers or people with less than stellar internet it might aswell not be there. Not saying you should or shouldn't, just giving a different perspective on it.

Scrolling text would be cool in general, but I think you need to highlight specific discarable upgrades separately - in particular, crack shot, most of the illicits, and ordnance.

I think simply adding "Discarded" should be enough, but we will see, I think that's a good compromise for now.

Been looking at a solution to get the upgrades on there, added a scroll bar to one of the overlays as an experiment, thoughts? I think it looks way to cluttered on the bar now.

O0Q0BCC.png