# Broadcast overlays > Transparent OBS overlays for streaming Mobile Legends, driven from a control panel on the streamer's own PC, with a step-by-step setup guide. The tool itself is interactive. ## What you get Four pages work together. You run the control panel; OBS shows the three overlays on stream. - **Control panel**: Where you type team names, run the draft and keep score. Add it to OBS as a dock, or open it in Chrome on the same PC. - **Pick and ban**: A band along the bottom for the draft: bans, picks, whose turn it is and a countdown. It handles tournament drafts (open bans) and ranked drafts (blind bans shown as padlocks until they are revealed). - **Team versus team**: A full-screen card for between games: both teams, the series score and which game is next. - **Top scorebar**: Sits over the game's own top bar during play: team tags and series progress, and while the reader is on, lords, towers, gold, kills and the clock. - **Hero showcase**: A full-screen scene of both line-ups after the draft: every pick as a large portrait with the player's name, and the bans. - **Player card**: A lower third for a player: name, team, hero, a title such as MVP and a stats line. You show and hide it from the panel. - **Standby screen**: A full-screen scene for before a game or a break: a countdown to the next game, a message, both teams with the series score, and your sponsors. - **Setup check**: A test page that shows whether this PC can run everything. Open it when something does not update. ## Overlay links - [Control panel (dock)](https://arena-academy.rone.dev/overlay/control) - [Pick and ban](https://arena-academy.rone.dev/overlay/draft) - [Team versus team](https://arena-academy.rone.dev/overlay/versus) - [Hero showcase](https://arena-academy.rone.dev/overlay/showcase) - [Player card](https://arena-academy.rone.dev/overlay/player) - [Standby screen](https://arena-academy.rone.dev/overlay/standby) - [Top scorebar](https://arena-academy.rone.dev/overlay/scorebar) - [Setup check](https://arena-academy.rone.dev/overlay/check) ## Before you start - OBS Studio 28 or newer. Its WebSocket server is built in. - A Game Capture, Window Capture or Video Capture source that shows the game, ideally the spectator view at 1920 x 1080. - Team names and logos (PNG, JPG or WebP). MPL ID and MPL PH teams can be imported. - Optional: a wide dock or a second screen. From 1024 px wide the control panel spreads into columns. ## Set up OBS, step by step 1. In OBS, open Docks > Custom Browser Docks. Name it "Arena overlay", paste the Control panel link and press Apply. Widen the dock to get the desktop layout. 2. In your draft scene, add a Browser Source. Paste the Pick and ban link and set Width 1920 and Height 1080. 3. On that source, tick "Control audio via OBS" so its sounds reach the stream and appear in the audio mixer. 4. Add Team versus team, Hero showcase, Player card, Standby screen and Top scorebar the same way, each in the scene where it belongs (see Switching scenes). 5. Keep every overlay above the game capture in the Sources list: OBS draws the list from the bottom up. 6. For the live scorebar, or to run the panel in Chrome: open Tools > WebSocket Server Settings, tick Enable WebSocket server, press Show Connect Info and copy the password. 7. In the panel's Scorebar tab, paste the password and press Connect to OBS. The dot at the top turns green. Running the panel in Chrome instead of as a dock? Connect it to OBS (step 7) even without the scorebar: Chrome and OBS keep separate storage, and the WebSocket is how your changes reach the overlays. ## Teams tab 1. Type each side's team name and a short tag (up to 5 letters). The tag is used where space is tight. 2. Upload a logo, or choose a team under Import from MPL (pick Indonesia or Philippines first). Logos are shrunk and kept in this browser. 3. Type each player in their own box, in pick order; the names appear under the picks. Pasting a comma-separated list fills the boxes from there. 4. Save team keeps a team for later. Under Saved teams, put it on the blue or red side with one click. ## Match tab 1. Event and Stage appear on the versus card and the scorebar, for example "MPL ID Season 16" and "Upper bracket final". 2. Choose Best of 1, 3, 5 or 7. The score stops at the number of wins needed. 3. After a game, add the win to the score, then press Next game. Swap sides swaps the teams when they change sides. 4. Look: Ink is dark, Paper is light and Glass is see-through for busy footage. Side colours adds blue and red stripes. On-screen language sets the words on the overlays, apart from this site's language. 5. Sounds: switch them on or off, set the volume and choose which moments play (see Sounds). 6. Export setup saves everything to a file; Import setup loads it again, on this PC or another. ## Draft tab The draft follows the game's real order, so the overlay always shows the right phase and turn. 1. Choose Tournament or Ranked; for Ranked, also the rank, which sets the number of bans. Before the first action, choose which team picks first. 2. Tournament: the panel says whose turn it is. Click a hero, then the gold Lock in button. A ban turn can be skipped with Skip ban. 3. Ranked: both teams ban at once. Choose the team under For and lock in its bans, press Lock for each team, then Reveal bans. The overlay shows padlocks until the reveal, then the picks run 1-2-2-2-2-1. When the ban clock runs out, the bans reveal by themselves (switch this off with "Reveal bans when the timer runs out"). 4. With "Restart the timer on every turn" ticked, the clock starts again on each turn (40 seconds in tournament, 30 in ranked). Start, Pause and Resume control it by hand. 5. Undo takes back the last action. Reset draft (press twice) clears the draft for the next game. 6. On a wide screen a live preview of the band sits under the controls, so you see exactly what is on stream. ## Player card tab 1. Choose the team and the player. The card takes the name from the Teams tab and the hero picked in that player's slot. 2. Type another name or choose another hero if you need to; leave them empty to follow the roster and the draft. 3. Add a title (for example "Player of the game") and a stats line (for example "KDA 8/1/12"). Tick MVP badge for the gold MVP mark. 4. Choose whether it hides by itself after 8, 15 or 30 seconds, or stays up. 5. Press Show on stream. Show again replays it; Hide takes it off. The preview beside the controls shows what is on stream. ## Standby tab 1. Leave Headline empty for the automatic one ("Game 2 starts in", then "Starting now" at zero), or type your own, such as "Back after the break". 2. Add a message line if you like, such as "Stay tuned". 3. Start the countdown with one of the minute buttons. +1 min and -1 min change it while it runs; Pause, Resume and Clear do the rest. 4. Untick "Show the teams and the series score" for a plain screen, for example before the first match. 5. Add up to 6 sponsor logos; they appear in a row along the bottom. Remove one with its button. ## Switching scenes during a match - Draft: game capture plus Pick and ban. - Between games: Team versus team. It plays its intro sound each time its scene goes live. - Before a game or in a break: Standby screen, with the countdown to the next game. - After the draft: Hero showcase, for the line-ups. Its cards come in one by one each time the scene goes live. - Any scene: Player card on top, for an MVP or a player introduction. - Gameplay: game capture plus Top scorebar. - Overlays keep their state while hidden, so switching scenes never resets anything. - Load the Pick and ban source a little before the draft: it fetches every hero portrait in the background, so each pick appears the moment it is locked in. ## Live scorebar The scorebar reads the numbers in the game's own top bar about twice a second, on your PC. It never guesses: when it is unsure, it opens a window onto the game's own numbers instead. 1. Connect to OBS in the Scorebar tab. 2. Choose the Game source: the capture that shows the game itself, such as Game Capture or Window Capture. Browser sources are hidden unless you tick Show all sources, because an overlay can never be read as the game. 3. A preview frame appears. Check that the gold boxes sit on the numbers; drag a box to move it, or press Reset to the 1080p layout. 4. Press Start reading. A field turns Locked once two reads agree. 5. Use Overlay position if the band needs to move or scale for your layout. - **Locked**: Two reads agreed. The overlay shows this number. - **Waiting**: Read but not confirmed yet, or not read for a few seconds. - **No digits**: Nothing number-like in that box: the source is wrong or the box is off its number. - **Fixed by hand**: You typed the value with Fix. It holds for a while, then reading takes over again; Release ends it at once. The overlay shows the readings (Auto) only while every field is fresh. Otherwise it is in Fallback and shows the game's own numbers through a window. "Always show the game's own numbers" keeps it in Fallback. ## Sounds The overlays play short sounds, made in code, at the key moments. They play from the browser sources in OBS, so they go out on stream; the previews in the panel and on this page stay silent. 1. In OBS, tick "Control audio via OBS" on each overlay's browser source. The sounds then appear in the audio mixer, where you set their level. 2. In the Match tab, switch sounds on, set the volume and choose the moments below. Test plays a sound in the panel so you can hear it. 3. Sounds play only for live changes: loading a scene or restarting OBS stays silent. 4. You hear the sounds in the control panel while "Hear them in this panel too" is on. To hear the OBS sources themselves, open Edit > Advanced Audio Properties in OBS and set their Audio Monitoring to "Monitor and Output". - **Pick and ban, Draft starts**: The first ban or pick of a draft. - **Pick and ban, Ban**: A hero is banned. - **Pick and ban, Skipped ban**: A ban turn is skipped. - **Pick and ban, Pick**: A hero is picked. - **Pick and ban, Team locks bans**: A team locks its blind bans (ranked). - **Pick and ban, Blind bans revealed**: The blind bans are revealed (ranked). - **Pick and ban, Turn changes**: The turn passes to the other team. (off by default) - **Pick and ban, Undo**: An action is taken back. - **Pick and ban, Draft complete**: The last pick is in. - **Countdown, Tick, 10 to 4 s**: Each second from 10 to 4 on the clock. - **Countdown, Tick, last 3 s**: Each of the last 3 seconds, a little higher. - **Countdown, Time up**: The clock reaches zero. - **Versus card, Card appears**: The versus card comes on screen. - **Versus card, Game won**: A team wins a game of the series. - **Showcase and player card, Showcase appears**: The hero showcase comes on screen. - **Showcase and player card, Player card appears**: The player card comes on screen. - **Showcase and player card, Countdown ends**: The standby countdown reaches zero. - **Scorebar, Kill**: The kill count goes up. The game has its own sounds for this. (off by default) - **Scorebar, Tower or lord**: A tower or lord falls. (off by default) ## Two shows, backups and other PCs - Running two shows on one PC? Add ?room=name to every link of the second show, panel and overlays alike. Each room has its own teams, draft and score. - Export setup in the Match tab saves teams, logos and the match to a file. Import it on another PC to carry on there. - Everything is saved in the browser it was typed in. The OBS dock and Chrome are different browsers, so a setup made in one does not show in the other until you export and import it. ## Troubleshooting - **The overlay does not change**: With the panel as an OBS dock, check that the overlay link has the same ?room= as the panel. With the panel in Chrome, connect it to OBS in the Scorebar tab: Chrome cannot reach the OBS sources any other way. The Setup check tests both. - **Scorebar fields stay on Waiting or No digits**: The Game source is probably wrong. Choose the capture that shows the game, not a browser source. Check the preview, drag the boxes onto the numbers and use the spectator view in 16:9. - **The preview is black**: Game Capture can show black until the game has been captured once. Try Window Capture, or your capture card's Video Capture source. - **No sound on stream**: Tick "Control audio via OBS" on the browser source and check its level in the mixer. In the Match tab, check that sounds are on and the moment is switched on. - **Chrome asks to reach devices on the local network**: Allow it. That is the panel talking to OBS on this computer (127.0.0.1); nothing leaves your PC. - **OBS refused the password**: Copy it again from Tools > WebSocket Server Settings > Show Connect Info. - **I can't hear the sounds myself**: The overlays send their sounds to the stream, not to your speakers. Keep "Hear them in this panel too" on in the Match tab, or set Audio Monitoring to "Monitor and Output" for each browser source in OBS (Edit > Advanced Audio Properties). ## Privacy Team logos, settings and readings stay in the browser on your PC: nothing is uploaded and there is no account. The panel connects only to OBS on the same computer, and game frames are read on your PC and never leave it. --- HTML version: https://arena-academy.rone.dev/tools/overlay All pages: https://arena-academy.rone.dev/llms.txt Unofficial, community-maintained; not affiliated with Moonton. Game data comes from the Rone Arena API.