Como criar uma overlay de ranked do Street Fighter 6 no OBS com LP, win rate e gráfico em tempo real

Se você faz live de Street Fighter 6, mostrar a sua ranked em tempo real pode deixar a transmissão muito mais interessante para quem está assistindo.

Neste tutorial, mostro como criar uma overlay no OBS para exibir LP, win rate, rank e gráfico de desempenho usando fonte de navegador, recorte, filtros e atualização automática. A ideia aqui não é só enfeitar a live, mas dar contexto para cada vitória, derrota e mudança de ritmo da sua sessão.

Em vez de depender de uma solução fechada, você pode usar páginas com os seus dados, puxar isso para o OBS e montar uma overlay personalizada do seu jeito.

Sites e recursos usados

• Street Fighter 6 Buckler: https://www.streetfighter.com/6/buckler/pt-br
• SFBuff: https://sfbuff.site/
• Arquivo com o automatizador, códigos CSS e imagens dos filtros: https://drive.google.com/drive/folders/14_4WTTNOq-F3cVh7lHSqDbD_3rAY2Cb_?usp=sharing
• Vídeo completo: https://www.youtube.com/watch?v=gnuFYGc8WiE&sub_confirmation=1

Bônus para apoiadores do canal

Quem apoia o canal recebe também o script de importação pronto para criar essa overlay em um clique. Isso acelera bastante o processo, principalmente para quem quer testar a estrutura rapidamente e depois só adaptar o layout para a própria live.

Como a overlay funciona

A lógica é simples: você abre a página com os dados em uma fonte de navegador no OBS, limpa os elementos que não interessam, recorta apenas as áreas úteis e monta a overlay no layout final.

Na prática, isso permite separar elementos como:

• LP atual
• win rate
• rank
• ícone do rank
• gráfico de desempenho
• estatísticas da sessão

Ao duplicar a mesma fonte e recortar áreas diferentes, você transforma uma página comum em vários blocos visuais que passam a funcionar como overlay.

Configurações e códigos usados

O primeiro CSS abaixo é o bloco voltado para estilização dos números e estatísticas, escondendo elementos da página e centralizando os valores para uso no OBS.

CSS 1 — Stats / números

/* --- ESTILOS CSS PARA COLAR NO OBS (ABORDAGEM COMPATÍVEL) --- */ /* 1. Prepara o fundo, a fonte e esconde as barras de rolagem */ body { background-color: transparent !important; overflow: hidden !important; font-family: 'Inter', sans-serif !important; font-weight: bold; font-size: 36px; /* Tamanho da fonte dos números (AJUSTE AQUI) */ text-shadow: 1px 1px 3px black !important; /* Sombra para melhorar a nitidez */ } /* 2. Esconde os elementos principais da página que não queremos (cabeçalho, rodapé, etc.) */ nav.navbar, div.footer, main.container > div:not(:first-child), /* Esconde o gráfico e outros blocos */ main.container > div:first-child > *:not(dl.row) /* Esconde os títulos acima das estatísticas */ { display: none !important; } /* 3. Posiciona a lista de estatísticas para preencher o espaço e centrar o conteúdo */ main.container > div:first-child dl.row { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100vw !important; height: 100vh !important; position: absolute !important; top: 0 !important; left: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; box-shadow: none !important; } /* 4. ESCONDE OS RÓTULOS */ main.container > div:first-child dl.row dt { display: none !important; } /* 5. Estiliza os VALORES */ main.container > div:first-child dl.row dd { width: auto !important; padding: 5px 0 !important; margin: 0 !important; text-align: center; color: white !important; } /* 6. Cores */ main.container span.text-green-500 { color: #4ade80 !important; } main.container span.text-red-500 { color: #f87171 !important; } main.container > div:first-child dl.row dd:nth-of-type(2) { color: #facc15 !important; }

O segundo CSS é o usado para LP e ícone de rank, com fundo transparente e ajustes de tipografia nas classes principais do layout.

CSS 2 — LP + ícone de rank

body { background: rgba(255, 0, 0, 0); margin: 0px auto; overflow: hidden; } body, html { background-color: transparent; } .layout_wrapper__l8o1z { background: transparent!important; } .play_play__dqwvL .play_inner__x7YFJ { -webkit-backdrop-filter: none!important; backdrop-filter: none!important; } .character_record_stats__o6FdL li { font-size: 25px !important; } .character_record_stats__o6FdL li span { font-size: 28px !important; } .character_record_league__i4YMT dt { font-size: 24px !important; } .character_record_league__i4YMT dd span { font-size: 30px !important; } .character_record_inner_list__ST0zK { font-size: 30px !important; } .character_record_record_list__oOBWu { font-size: 30px !important; } .character_record_inner_list__ST0zK table, .character_record_inner_list__ST0zK tr { font-size: 30px; }

O terceiro CSS é a versão mais enxuta para overlay analytic, focada em transparência, tipografia e leitura dos elementos na fonte de navegador.

CSS 3 — Analytic overlay

body { background-color: transparent !important; overflow: hidden !important; font-family: 'Inter', sans-serif !important; font-weight: bold; font-size: 36px; text-shadow: 1px 1px 3px black !important; }

Como montar no OBS

1. Crie uma fonte de navegador no OBS.
2. Cole a URL desejada do Buckler ou do SFBuff.
3. Defina largura e altura da fonte conforme a área que você quer capturar.
4. Cole o CSS personalizado no campo da própria fonte de navegador.
5. Use recorte para isolar apenas o que precisa aparecer na live.
6. Teste o refresh manual ou o automatizador para manter a overlay atualizada.

Por que isso melhora a live

A maioria das lives de ranked mostra apenas a gameplay. Quando você adiciona LP, win rate, rank e gráfico de desempenho, a transmissão ganha contexto. Quem está assistindo entende melhor se você está subindo, caindo, se recuperando ou travado durante a sessão.

Em outras palavras: a live deixa de ser só uma partida e passa a contar a história da sua ranked em tempo real.

Conclusão

Se você quer que sua live de Street Fighter 6 fique mais viva, mais clara e mais profissional, esse tipo de overlay vale muito a pena. Depois de entender essa lógica, você pode adaptar a mesma ideia para outras composições visuais dentro do OBS.

Assista ao vídeo completo:
https://www.youtube.com/watch?v=gnuFYGc8WiE&sub_confirmation=1

Me acompanha também:
YouTube: https://www.youtube.com/@brunochross?sub_confirmation=1
Youtube de Lives, Torneios e podcasts: https://www.youtube.com/@brunochrosstv?sub_confirmation=1
Instagram: https://www.instagram.com/brunochross/
Twitch: https://www.twitch.tv/bruno_chross
X/Twitter: https://twitter.com/BrunoChrosS
TikTok: https://www.tiktok.com/@brunochross
Linktree: https://linktr.ee/brunochross
WhatsApp: https://whatsapp.com/channel/0029VagcO0ZIN9indUfcjn3q
Discord: https://discord.gg/mdMuhZaENR
Apoia.se: https://apoia.se/temperandoss