Mix It Up Overlay

Prerequisites

I have written this document on the assumption that the following prerequisites are in place:

  1. You are an Official Warsaken streamer with access to download Overlays, Wait Screens, Banners and Music.
  2. You are using Windows 10 or 11; these instructions will work on Mac or Linux. However, some steps may vary.
  3. You have unzipped the warsakenstreamer package in an accessible location on your PC; for example, C:\Warsaken
  4. You have Mix It Up 1.0 or above installed and a streaming service connected.
  5. You have installed VLC Media Player (to enable the VLC Media plugin in OBS).
  6. You have installed OBS Studio 29 or above.

For the best viewer experience, you should stream at 60 frames per second if your computer and broadband can do so. Other common values are 30 frames per second or 24 frames per second - if you use a value other than 60, adapt the instructions below to use your chosen framerate.

This guide is not compatible with older versions of OBS, Mix It Up or other broadcast and overlay tools. Although some of the principles still apply.

Font

The Warsaken brand guidelines recommend using the Roboto font, which is freely available for commercial use from Google Fonts.

  1. Download the Roboto Font Family from Google Fonts.
  2. Unzip the archive into a folder.
  3. Select all of the .ttf files in the folder, right-click and select Install.

You may need to restart Mix It Up to ensure the files are visible if it is already running.

OBS & Mix It Up

Starting Soon and Be Right Back Scenes

The streamer pack comes with two full-screen videos: “Starting Soon” and “Be Right Back”.

Add these to OBS as separate scenes; first, we start with Starting Soon:

  1. Switch to OBS and create a new empty scene by clicking the + underneath Scenes and name it “Starting Soon”.
  2. Click the + button under Sources, select VLC Video Source, and name it Starting Soon Video.
  3. Click the + next to the playlist and select C:/Warsaken/Official Warsaken Theme/Warsaken Wait Screens/Wait_Starting_Soon.mp4
  4. Ensure that Loop Playlist is selected, then click OK.

Add these to OBS as separate scenes; second, we finish with Be Right Back:

  1. Switch to OBS and create a new empty scene by clicking the + underneath Scenes and name it “Be Right Back”.
  2. Click the + button under Sources, select VLC Video Source, and name it Be Right Back Video.
  3. Click the + next to the playlist and select C:/Warsaken/Official Warsaken Theme/Warsaken Wait Screens/Wait_Be_Right_Back.mp4
  4. Ensure that Loop Playlist is selected, then click OK.

Overlay Setup

In this section, I will show you how to create a scene named “Warsaken Overlay”, containing all your overlay elements. Then, you will add this “Warsaken Overlay” scene as a source to all other scenes; this is called scene nesting and allows OBS to use less CPU and more efficiently manage state across scenes.

Let’s setup the Overlay in Mix It Up:

  1. Click the Settings button (⚙) in the top right-hand corner of the screen.
  2. Select the Overlays Page, and copy the Overlay URL to the clipboard by clicking the copy button.
  3. Switch to OBS and create a new empty scene by clicking the + underneath Scenes and name it “Warsaken Overlay”.
  4. In the Sources panel, click the + at the bottom and select Browser:
    1. Name it Mix It Up Overlay, then click OK.
    2. In the next screen, paste the URL you copied from Mix It Up in the URL box,
    3. Set the Width to 1920,
    4. The Height to 1080,
    5. Check Use Custom Framerate and set it to 60 or your preferred framerate (i.e. 30 or 24),
    6. Check Control Audio via OBS,
    7. Remove the contents of the Custom CSS box,
    8. Check the Shutdown source when not visible checkbox,
    9. Check the Refresh browser when scene becomes active checkbox.
  5. The new source should fill the entire scene; if it overflows the edge: right-click the source and choose Transform, then Fit to Screen.
  6. Now go back to Mix It Up, click the Hamburger Menu in the top left of the Screen (☰), and select Services.
  7. Click Overlay at the top to fold out the Overlay Service and type “Mix It Up Overlay” in the Streaming Software Source Name box.
  8. Click Connect, then Test Connection.
  9. You should get a message confirming the Overlay is connected correctly. If you get an error message, you should refresh the browser source in OBS by opening up the source and selecting Refresh cache of current page.

Great work; you are now well on your way to setting up your Warsaken Overlay in Mix It Up.

Warsaken Overlay

Now you have an OBS Overlay working with Mix It Up; you can add Warsaken-specific graphics to it in Mix It Up.

  1. In Mix It Up, click the Hamburger Menu in the top left of the Screen (☰) and select Overlay Widgets.
  2. Click the Add Overlay Widget at the bottom and select Video from the Type dropdown.
    1. Configure the Widget as follows:
      1. Name: Frame Header,
      2. Screen Position: Center,
      3. Refresh Time: 0,
      4. Video File Path: C:\Warsaken\Official Warsaken Theme\Warsaken Frame\Frame_Header.webm,
      5. Width: 1920,
      6. Height: 1080,
      7. Toggle Loop to On.
  3. Click the Add Overlay Widget again at the bottom and select Video from the Type dropdown.
    1. Configure the Widget as follows:
      1. Name: Frame Lower,
      2. Screen Position: Center,
      3. Refresh Time: 0,
      4. Video File Path: C:\Warsaken\Official Warsaken Theme\Warsaken Frame\Frame_Lower.webm,
      5. Width: 1920,
      6. Height: 1080,
      7. Toggle Loop to On.

Add a camera in a frame

Using a camera is a personal choice; neither Twitch nor Warsaken require you to stream with a camera on. So skip this section if you wish to avoid having your face on camera.

If you cannot use either a Green Screen or Background Removal, Warsaken has provided a frame for your camera.

Click the Add Overlay Widget again at the bottom and select Image from the Type dropdown.

  1. Configure the Widget as follows: 2. Name: Camera Frame 3. Screen Position: Center 4. Refresh Time: 0 5. Video File Path: C:\Warsaken\Official Warsaken Theme\Official Warsaken Theme\Warsaken Frame\Frame_Streamer_Circle_Right.png 6. Width: 1920 7. Height: 1080

If you wish your camera to appear on the left of the screen rather than the Right, use Frame_Streamer_Circle_Left.png instead.

Finally, switch back to OBS, select the “Mix It Up Overlay” source, and click the Refresh button under the preview.

It should now look like this:

Final OBS Look Final OBS Look

The remainder of this section is completed entirely in OBS. Mix It Up is not used to manage the camera.

Add your camera to OBS:

  1. With the “Warsaken Overlay” scene selected, click the + in the Sources panel and select Video Capture Device.
  2. Name it Main Camera, accept the defaults and click OK.
  3. Right-click the “Main Camera” source and choose Filters.
  4. Under Effects Filters, click the + and choose Image Mask/Blend; name it “Warsaken Mask”:
    1. Select “C:/Warsaken/Official Warsaken Theme/Warsaken Frame/Frame_Streamer_Head_Mask.png”
    2. Click OK
  5. Again under Effects Filters, the + and choose Color Correction, and accept the default name:
    1. Adjust the Gamma, Contrast, Brightness and Saturation sliders to achieve a darker colour grade.
    2. Every camera and lighting scenario is different, so you must judge the settings for yourself, however:
      1. Gamma: increase slightly,
      2. Contrast: increase to around 1.5,
      3. Brightness: decrease slightly,
      4. Saturation: increase slightly.
  6. Click OK to close the filters.
  7. Right-click the camera source, then choose Edit Transform:
    1. Set the Position to 1051 px, 728 px.
    2. Set the Size to 873 px, 491 px.
    3. Click Close.

Latest Sub, Follower, Tips and Bits

Note: in most jurisdictions, there is a difference between a “Donation” and a “Tip”. PayPal is less likely to uphold a refund of a “Tip” than a “Donation”. Therefore try to use the word “Tip” when viewers send you fiat currency.

In this section, you will add dynamic elements starting with the Latest Subscriber to your Overlay to display the latest subscribers, followers, tips, and bits:

Important

As of Mix It Up 1.2.0.10 overlays are a little bit broken, so you may need to use a top pixel position of -5.

  1. In Mix It Up, click the Hamburger Menu in the top left of the Screen (☰) and select Overlay Widgets.
  2. Click the Add Overlay Widget at the bottom and choose Text from the Type dropdown:
    1. Name: Latest Subscriber Label,
    2. Refresh Time: 0,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 210,
    5. Top Pixel Position: 5 (see note above),
    6. Layer: 100,
    7. Text: SUB,
    8. Size: 20,
    9. Font Color: #9247ff
    10. Font Name: Roboto,
    11. Click the B to make it Bold.
  3. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Subscriber,
    2. Refresh Time: 5,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 260,
    5. Top Pixel Position: 5 (see note above),
    6. Layer: 100,
    7. Text: $latestsubscriberusername,
    8. Size: 20,
    9. Font Color: White,
    10. Font Name: Roboto,
    11. Click the B to make it Bold.

Note: if you do not have any Subscribers or if Mix It Up was not connected to your account and running when someone subscribes, the label will read as “$latestsubscriberusername” this is entirely normal and will change when someone subscribes.

Now we repeat the steps above for the Latest Follower:

Important

As of Mix It Up 1.2.0.10 overlays are a little bit broken, so you may need to use a top pixel position of -5.

  1. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Follower Label,
    2. Refresh Time: 0,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 500,
    5. Top Pixel Position: 5 (see note above),
    6. Layer: 100,
    7. Text: FOLLOW,
    8. Size: 20,
    9. Font Color: #9247ff,
    10. Font Name: Roboto,
    11. Click the B to make it Bold.
  2. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Follower,
    2. Refresh Time: 5,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 590,
    5. Top Pixel Position: 5 (see note above),
    6. Layer: 100,
    7. Text: $latestfollowerusername,
    8. Size: 20,
    9. Font Color: White,
    10. Font Name: Roboto,
    11. Click the B to make it Bold.

Now we repeat the steps for the Latest Cheer:

Important

As of Mix It Up 1.2.0.10 overlays are a little bit broken, so you may need to use a top pixel position of 1025.

  1. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Cheer Label,
    2. Refresh Time: 0,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 650,
    5. Top Pixel Position: 1043 (see note above),
    6. Layer: 100,
    7. Text: CHEER,
    8. Size: 20,
    9. Font Color: #9247ff,
    10. Font Name: Roboto,
    11. Click the B to make it Bold.
  2. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Cheer,
    2. Refresh Time: 5,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 720,
    5. Top Pixel Position: 1043 (see note above),
    6. Layer: 100,
    7. Text: $latestbitscheeredusername x $latestbitscheeredamount,
    8. Size: 20,
    9. Font Color: White,
    10. Font Name: Roboto,
    11. Click the B to make it Bold.

Finally, we repeat the steps for the Latest Tip:

Important

As of Mix It Up 1.2.0.10 overlays are a little bit broken, so you may need to use a top pixel position of 1025.

  1. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Tip Label,
    2. Refresh Time: 0,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 1000,
    5. Top Pixel Position: 1043 (see note above),
    6. Text: TIP,
    7. Size: 20,
    8. Font Color: #9247ff,
    9. Font Name: Roboto,
    10. Click the B to make it Bold.
  2. Click the Add Overlay Widget at the bottom and select Text from the Type dropdown:
    1. Name: Latest Tip,
    2. Refresh Time: 5,
    3. Set Screen Position to Pixels,
    4. Left Pixel Position: 1040,
    5. Top Pixel Position: 1043 (see note above),
    6. Text: $latestdonationusername ($latestdonationamount),
    7. Size: 20,
    8. Font Color: White,
    9. Font Name: Roboto,
    10. Click the B to make it Bold.

Alerts

Alerts provide audio and visual feedback when your viewers complete various actions; the Warsaken Streamer pack has support for the following activities:

  • Cheers - A user donates bits, crypto or fiat currency to the streamer.
  • Follow - A user follows your channel.
  • Subscribe - A user subscribes to your channel.
  • Raid - A fellow streamer raids your channel.

First, we will set up cheers:

  1. In Mix It Up, click the Hamburger Menu in the top left of the Screen (☰) and select Events.
  2. Find Twitch Channel Bits Cheered and click the Add Command button.
    1. Select Overlay (Images & Video) from the Action at the bottom and click the +.
      1. Change the Action to “Video”.
      2. Video File Path: C:\Warsaken\Official Warsaken Theme\Warsaken Alert Boxes\Warsaken_Alert_Donation.webm
      3. Width: 1920
      4. Height: 1080
      5. Duration: 6
    2. Select Wait from the Action at the bottom and click the +.
      1. Set the Amount to 0.5
    3. Select Overlay (Images & Video) from the Action at the bottom and click the +.
      1. Leave Action as “Text”
      2. Text: $username ($bitsamount bits)
      3. Font Color: White
      4. Font Name: Roboto
      5. Click the B to make it bold.
      6. Duration: 3.5
      7. Entrance Animation: Fade In
      8. Exit Animation: Fade Out
  3. Select Wait from the Action at the bottom and click the +.
    1. Set the Amount to 7
  4. Click the💾icon to save your event.
  5. Click the▶️button next to Twitch Channel Bits Cheered, then click Test Command to check your alert works. You should be able to see the alert, alert text and hear a sound through your stream.

Second, we will set up follows:

  1. In Mix It Up, click the Hamburger Menu in the top left of the Screen (☰) and select Events.
  2. Find Twitch Channel Followed and click the Add Command button.
    1. Select Overlay (Images & Video) from the Action at the bottom and click the +.
      1. Change the Action to “Video”.
      2. Video File Path: C:\Warsaken\Official Warsaken Theme\Warsaken Alert Boxes\Warsaken_Alert_Follower.webm
      3. Width: 1920
      4. Height: 1080
      5. Duration: 6
    2. Select Wait from the Action at the bottom and click the +.
      1. Set the Amount to 0.5
      2. Select Overlay (Images & Video) from the Action at the bottom and click the +.
      3. Leave Action as “Text”
      4. Text: $username
      5. Font Color: White
      6. Font Name: Roboto
      7. Click the B to make it bold.
      8. Duration: 3.5
      9. Entrance Animation: Fade In
      10. Exit Animation: Fade Out
  3. Select Wait from the Action at the bottom and click the +.
    1. Set the Amount to 7
  4. Click the💾icon to save your event.
  5. Click the▶️button next to Twitch Channel Followed, then click Test Command to check your alert works. You should be able to see the alert, alert text and hear a sound through your stream.

Third, we will set up subscribers:

  1. In Mix It Up, click the Hamburger Menu in the top left of the Screen (☰) and select Events.
  2. Find Twitch Channel Subscribed and click the Add Command button.
    1. Select Overlay (Images & Video) from the Action at the bottom and click the +.
    2. Change the Action to “Video”.
    3. Video File Path: C:\Warsaken\Official Warsaken Theme\Warsaken Alert Boxes\Warsaken_Alert_Sub.webm
    4. Width: 1920
    5. Height: 1080
    6. Duration: 6
  3. Select Wait from the Action at the bottom and click the +.
    1. Set the Amount to 0.5
  4. Select Overlay (Images & Video) from the Action at the bottom and click the +.
    1. Leave Action as “Text”
    2. Text: $username
    3. Font Color: White
    4. Font Name: Roboto
    5. Click the B to make it bold.
    6. Duration: 3.5
    7. Entrance Animation: Fade In
    8. Exit Animation: Fade Out
  5. Select Wait from the Action at the bottom and click the +.
    1. Set the Amount to 7
  6. Click the💾icon to save your event.
  7. Click the▶️button next to Twitch Channel Followed, then click Test Command to check your alert works. You should be able to see the alert, alert text and hear a sound through your stream.
  8. Repeat steps 1-5 for the following three events:
    1. Twitch Channel Resubscribed,
    2. Twitch Channel Mass Subscriptions Gifted, substituting $username with _$username_ - $subsgiftedamount gifted subs
    3. Twitch Channel Subscription Gifted, substituting $username for $targetusername in the Text field.

Finally, we will set up raids:

  1. In Mix It Up, click the Hamburger Menu in the top left of the screen (☰) and select Events.
  2. Find Twitch Channel Raided and click the Add Command button.
    1. Select Overlay (Images & Video) from the Action at the bottom and click the +.
      1. Change the Action to “Video”.
      2. Video File Path: C:\Warsaken\Official Warsaken Theme\Warsaken Alert Boxes\Warsaken_Alert_Raid.webm
      3. Width: 1920
      4. Height: 1080
      5. Duration: 6
    2. Select Wait from the Action at the bottom and click the +:
      1. Set the Amount to 0.5
    3. Select Overlay (Images & Video) from the Action at the bottom and click the +.
      1. Leave Action as “Text”
      2. Text: $username ($raidviewercount viewers)
      3. Font Color: White
      4. Font Name: Roboto
      5. Click the B to make it bold.
      6. Duration: 3.5
      7. Entrance Animation: Fade In
      8. Exit Animation: Fade Out
    4. Select Wait from the Action at the bottom and click the +.
      1. Set the Amount to 7
    5. Click the💾icon to save your event.
    6. Click the▶️button next to Twitch Channel Followed, then click Test Command to check your alert works. You should be able to see the alert, alert text and hear a sound through your stream.

Add Overlay to other Scenes

The final step to enable your Overlay is to add it to each of your scenes as follows:

  1. Click the + in the Sources panel and select Scene.
  2. Select Warsaken Overlay and click OK.
  3. Ensure that Warsaken Overlay is at the top of the list of sources by dragging it upwards.
  4. Repeat 1-3 for other scenes, including Be Right Back and Starting Soon.

Using scene nesting enables OBS to manage resources efficiently by reusing camera and browser sources. Scene Nesting also lets you make changes in your overlay that apply to multiple scenes at the same time.

Stingers

Stingers, sometimes called idents, provide smooth transitions between two scenes in OBS. Stingers are one of the few things you need to implement in OBS directly. Therefore, mix It Up will not be used for this section.

All Warsaken Stingers are 2 seconds long (60 frames total), and the transition point must be correctly set halfway through the Stinger to avoid flickering scenes.

  1. Find the Scene Transitions dock in OBS; if it has been closed, you can access it through Docks -> Scene Transitions.
  2. Click the + button and select Stinger.
  3. Name it Warsaken - Victor.
    1. Select Official Warsaken Theme/Warsaken Stingers/Stinger_001.webm for the Video File.
    2. Transition Point Style: Frame
    3. Transition Point (frame): 30
  4. Click the Preview Transition button; if everything is correct, the “A” in the preview will transition smoothly to “B”, with the Stinger hiding the transition.

You can add additional stingers if you want some variation in your transitions:

  • Stinger_001.webm: Victor, the Anonymous
  • Stinger_002.webm: Riku Ito, Ace
  • Stinger_003.webm: Kyodo Lee, Ronin
  • Stinger_004.webm: Sawuyer, the Resurgent
  • Stinger_005.webm: Queen Awati

The transition selected in Scene Transitions is the default transition for all scenes. However, you can override individual scene transitions by right-clicking the scene and selecting Transition Override.

Music

All of the Warsaken music by Numbskull is available in the streamer pack. However, you must ensure you mute the Warsaken music in-game, as this will only play during a game, leaving you with dead space between matches.

Then add a VLC Media source to a scene:

  1. Click the + button under Sources and select VLC Video Source.
  2. Name it Warsaken Music 3. Check Loop Music 4. Click the + to the right of the playlist and select Add Directory, then select the following folders: 5. Music/Warsaken Tracks 6. Music/NumbSkull Tracks 7. Click OK to close the properties.
  3. Now go through all scenes you want music in and add the source you just created.
    1. Click the + button under Sources and select VLC Video Source.
    2. Check Add Existing.
    3. Select Warsaken Music.
    4. Click OK.

Add Chat Timer

To comply with Warsaken Official guidance, you must configure Mix It Up to broadcast a message at least every 30 minutes to your chat:

  1. In Mix It Up, click the Hamburger Menu in the top left of the Screen (☰) and select Timers.
  2. Click New Command at the bottom.
  3. Name: Warsaken Music
  4. Command Group: Warsaken
  5. Group Interval: 30 Minutes
  6. Select Chat Message from Actions at the bottom, and click the + button.
  7. Paste in the following without the quotes: Like the music you’re listening to? Check out NumbSkull on SoundCloud and Spotify https://www.soundcloud.com/numbskullmusic
  8. Click the💾icon to save your timer.

Optional: Add Sidechain Ducking

Sidechain Ducking means reducing the volume of background music or game sounds while you are talking. You can enable it in OBS as follows:

  1. Find the Audio Mixer panel and right-click Warsaken Audio, then select filters.
  2. Under Audio/Video Filters, click + and select Compressor.
  3. Name it Ducking.
    1. Ratio:: 32:1
    2. Threshold: -36dB
    3. Attack: 100ms
    4. Release: 600ms
    5. Output Gain: 0dB
    6. From Sidechain/Ducking Source, select the name of your microphone source.

A complete tutorial on getting fantastic stream audio is outside of the scope of this tutorial. However, I recommend following EposVox’s tutorials on his Perfect your audio ASAP Playlist.