Atualização de setembro de 2026: o TSH Style Studio é um projeto do BrunoChrosS em desenvolvimento para editar visualmente overlays do Tournament Stream Helper (TSH). A versão local demonstrada neste artigo é a v0.2.4. As três demonstrações em vídeo abaixo mostram o editor em uso, com imagens de apoio extraídas das mesmas gravações. Use o botão de reprodução para assistir a cada demonstração; este material apresenta o que já está em teste e não representa o anúncio de uma versão pública para download.
Quem transmite um campeonato conhece a diferença entre ter um placar funcionando e ter uma identidade visual consistente. Nomes e pontuação podem chegar corretamente ao OBS, mas ajustar tamanho, posição, cores, fundos e efeitos de cada tela costuma exigir navegação por arquivos e mudanças manuais em CSS. O Style Studio nasce para reduzir esse atrito: dar ao operador e ao designer um lugar para experimentar, comparar e salvar a aparência dos layouts do TSH com retorno visual imediato.
Por que um editor visual faz falta nos torneios?
Uma transmissão de jogos de luta raramente usa uma única tela. Há placar durante as partidas, apresentação de jogadores, chave do torneio, comentaristas, Top 8 e outras peças. Quando cada layout é ajustado isoladamente por código, pequenas correções viram uma sequência de localizar arquivo, testar no navegador, atualizar fonte do OBS e conferir se algo saiu do lugar. Em produção, esse ciclo consome tempo justamente quando a equipe deveria acompanhar o evento.
O objetivo do TSH Style Studio é centralizar essa edição sem substituir a função principal do TSH: receber e organizar os dados do torneio. A proposta é trabalhar na camada visual dos layouts HTML já existentes. O operador continua usando o fluxo do TSH e do OBS; o editor ajuda a adaptar a apresentação à marca do campeonato, ao jogo e ao formato da live.
O que a versão v0.2.4 já permite explorar
1. Placar com prévia, seleção de elementos e efeitos
No placar, a interface permite selecionar partes do layout e ajustar propriedades de aparência sem começar cada tentativa escrevendo CSS. Há controles de posição e geometria, cores, fundos, visibilidade, imagens e efeitos. O histórico de edição e o comando de desfazer ajudam a testar uma ideia e voltar atrás. Também há recursos para reposicionar elementos com o mouse ou pelas setas, além de restaurar posições quando um experimento não funciona.
A versão local inclui controles de perspectiva e câmera para o placar inteiro ou para áreas específicas. É um caminho para criar composições mais expressivas, como painéis inclinados e elementos com sensação de profundidade. Esse resultado depende do layout escolhido: ainda estamos validando o comportamento visual em diferentes modelos do TSH. A captura abaixo mostra o painel de efeitos em uma montagem de teste, não uma promessa de que qualquer layout ficará pronto com um clique.
2. VS Screen: jogadores, cards e composição da apresentação
A tela de confronto tem outra função editorial: apresentar quem vai jogar antes de a partida começar. Por isso ela precisa de controles próprios. Na prévia da VS Screen, o editor expõe elementos como imagens dos jogadores, textos, títulos, cards e visibilidade. É possível conferir se a composição funciona com fotografias e nomes concretos, em vez de decidir tudo olhando apenas valores numéricos.
Para um evento, isso facilita adaptar o mesmo conceito visual a elencos, patrocinadores e jogos diferentes. A equipe pode buscar equilíbrio entre as fotos, manter legibilidade em telas menores e reservar espaço para as informações essenciais do confronto. A prévia usa dados locais do estado do programa quando disponíveis; se não houver dados, pode mostrar valores de exemplo. Ela serve para projetar a tela e não altera os resultados do torneio.
3. Bracket e outras telas do pacote
Um bracket precisa priorizar leitura: confrontos, avanço na chave, tamanhos de caixa e contraste devem permanecer claros mesmo dentro da resolução da live. Na gravação, o Style Studio apresenta controles de geometria e cor com prévia do bracket. Isso permite avaliar rapidamente se uma mudança de largura, espaço ou tonalidade ajuda a leitura ou a prejudica.
O trabalho vai além dessas três capturas. A interface já organiza ajustes para diferentes famílias de overlays, como comentaristas, apresentação de jogadores, fila da stream, stage strike, regras, sets recentes, histórico de torneio, galeria de personagens, mapas e telas de Top 8. Cada família tem necessidades próprias; a meta não é aplicar indiscriminadamente o mesmo painel a tudo, mas oferecer controles coerentes com o conteúdo de cada tela. O repositório oficial de layouts do TSH ajuda a entender a variedade de páginas HTML que uma transmissão pode utilizar. O Style Studio é um projeto independente de BrunoChrosS, sem afiliação oficial com o TSH.
Como seria o fluxo de trabalho
- Escolher um layout: localizar a página HTML do TSH e abrir sua prévia no editor. A busca por nome e caminho facilita encontrar a tela certa em um pacote grande.
- Editar com contexto: selecionar um elemento e ajustar propriedades na aba adequada — por exemplo, posição do placar, card da VS Screen ou geometria do bracket.
- Comparar e desfazer: testar alternativas, recuperar elementos ocultos e usar o histórico granular para voltar a uma decisão anterior.
- Salvar com segurança: o projeto mantém o CSS original e grava a personalização em um arquivo CSS próprio do layout, com perfil e cópias de segurança antes de salvar.
- Conferir no OBS: com o recurso OBS Auto ativado e o painel aberto, as mudanças salvas podem ser reaplicadas à fonte de navegador durante o ajuste visual. O teste final ainda deve ser feito na cena real da transmissão.
Na instalação local testada, o editor roda pelo mesmo servidor do TSH, na porta 5500, sem abrir uma segunda porta ou uma conexão Socket.IO adicional para a prévia. A autorização de acesso à pasta é feita no navegador compatível, como Chrome ou Edge. O modo OBS Auto é deliberadamente ligado ao ato de salvar: editar um controle não deve fazer a tela da live piscar a cada movimento do mouse. Ao fechar ou ocultar o painel, a atualização automática é interrompida.
O benefício para quem produz uma transmissão
Menos tempo entre ideia e teste. Um designer pode sair de “o nome do jogador está espremido” para uma alteração visível na prévia sem abrir várias folhas de estilo. Isso não elimina o trabalho de direção de arte, mas reduz a parte mecânica do processo.
Mais consistência entre telas. Ajustar placar, apresentação e bracket dentro de um mesmo fluxo ajuda a manter cores, escala e linguagem visual reconhecíveis ao longo do evento. A consistência é importante quando a transmissão alterna de uma partida para a chave ou para a próxima apresentação.
Mais segurança para experimentar. Histórico, restauração de posições e backups importam porque o visual de um torneio muda até perto da estreia. Poder testar uma versão mais ousada sem perder o ponto de partida facilita tomar decisões melhores.
Mais controle para operações pequenas. Nem todo campeonato dispõe de alguém dedicado a editar CSS em tempo real. Um painel visual pode aproximar operadores, narradores e organizadores da personalização do material que aparece no ar. Para equipes maiores, ele também cria uma base mais rápida para revisão entre designer e operação.
Um exemplo prático: do campeonato ao ar
Imagine um torneio de Street Fighter 6 com partidas no OBS. O placar já recebe nomes e pontos pelo TSH, mas o organizador quer aproximá-lo da identidade do evento. No Style Studio, ele abre o layout do placar, ajusta a área dos jogadores, experimenta fundo e contraste e confere o resultado na prévia. Antes da transmissão, testa a cena real do OBS e corrige qualquer corte ou escala. Para a abertura do Top 8, revisa a VS Screen com imagens e títulos; ao mostrar o andamento do torneio, adapta a leitura do bracket. O ganho não está em “automatizar o design”, e sim em permitir decisões visuais mais rápidas e verificáveis durante a preparação.
Esse fluxo complementa práticas já tratadas aqui no blog: a pasta OUT do TSH no OBS explica a base dos overlays dinâmicos, e o guia sobre múltiplos placares no TSH mostra uma operação mais complexa. O Style Studio se concentra no visual dessas peças; a organização dos dados e das fontes continua indispensável.
O que ainda estamos validando
O TSH Style Studio segue em desenvolvimento. A v0.2.4 é uma versão local usada para experimentar e corrigir o editor. Ainda precisamos testar mais layouts reais, resoluções e cenas do OBS antes de afirmar uma compatibilidade ampla. Overlays muito personalizados podem precisar de ajustes pelo inspetor ou de CSS manual. Efeitos como perspectiva exigem atenção especial à estrutura de cada layout e ao resultado final no navegador do OBS.
Também não há, neste anúncio, link de instalação pública, preço ou data de lançamento. À medida que o projeto amadurecer, a prioridade é publicar demonstrações que mostrem o que funciona de verdade, explicar as limitações e ouvir quem opera campeonatos. Para acompanhar o tema, veja os artigos de OBS, TSH e produção de torneios no blog. Se você trabalha com overlays de campeonato, vale observar quais telas mais consomem tempo na sua preparação: é esse problema concreto que o Style Studio quer ajudar a resolver.