Tutorials Sports

Score Overlays and Graphics for Live Sports Streams

Intermediate · ~25 min

Overview

A score overlay is what separates a "someone's filming a game" stream from something that looks like an actual broadcast, and it doesn't need expensive broadcast graphics software to do well. This guide covers building a simple, reliable scorebug in OBS, keeping it updated live without a dedicated operator, and adding sponsor and player graphics without cluttering the frame.

What You Need

OBS or similar streaming software with browser source support
A simple web page, spreadsheet, or graphics tool that can update live
A phone or tablet for whoever is updating the score during the game

Steps

Decide what a scorebug actually needs to show

Score and game clock or period, at minimum, resist the urge to cram in every possible stat before the basics are working reliably. A clean, minimal scorebug reads faster than a cluttered one.

Build the scorebug as an OBS source

A browser source pointing at a simple locally hosted or cloud-hosted page is the most flexible approach. It updates automatically in OBS whenever the underlying page changes, without needing to touch OBS itself during the game.

Update it live without a dedicated operator

A lightweight page or spreadsheet that any volunteer can update from a phone browser means the camera operator or another crew member can handle scoring without needing separate graphics software or a dedicated graphics operator role.

Place it in a safe zone

Check placement against the site's Safe Zones Guide. A scorebug positioned too close to the frame edge risks being cropped on some platforms or devices.

Add sponsor graphics without wrecking the stream

A small, consistently placed sponsor logo or a brief graphic during breaks works better than a large or frequently rotating element that competes with the game footage itself for attention.

Add lower thirds for player names

Use the same lower third design principles as any other production, consistent style, adequate hold duration, and clear timing tied to when a player becomes the focus of the shot.

Pro Tips

Test your scorebug's legibility on a phone screen, not just your production monitor. Many viewers will watch on mobile, and small text can become unreadable at that size.
Keep a manual score-correction process simple, mistakes happen, and fixing a scoring error should take one tap, not a multi-step process mid-broadcast.
Build the overlay once and reuse it across every game, rebuilding graphics for every event wastes time better spent on the actual broadcast.

Knowledge Base

Simplicity Reads Better at Distance and Speed

Viewers glance at a scorebug for a fraction of a second, often while watching the actual play. A minimal, high-contrast design with just the essential information (score, clock) reads far faster than a data-dense overlay trying to show everything at once. Resist the temptation to add more information than the core viewing experience needs.

Browser Sources Solve the "No Dedicated Operator" Problem

Small productions rarely have a spare crew member whose only job is running broadcast graphics software. A simple web-page-based overlay that any volunteer can update from a phone, feeding into OBS as a browser source, removes the need for that dedicated role entirely.

Where This Fits

This guide covers one specific part of sports production. The wider picture, camera positions, switching discipline, comms, replay and highlights, and the sync problems that break multicamera setups, is in Multi-Camera Coverage for Live Sports: Positions and Switching, which frames the discipline as a whole and links out to the detailed guides underneath it, including this one. If you are starting from scratch rather than solving a specific problem, read that first and come back here.

FAQ

Q: What's the minimum information a scorebug actually needs?
A: Score and game clock/period, at minimum, everything else (team logos, possession indicators, additional stats) is optional polish that can be added once the core is working reliably. A cluttered scorebug with too much information is harder to read at a glance than a minimal one.

Q: How do I update the score without a dedicated graphics operator?
A: A simple browser-source overlay backed by a lightweight web page or spreadsheet that the camera operator (or another volunteer) can update from a phone works well for small productions. It doesn't require dedicated broadcast graphics software or a second crew member solely for that task.