Chat no ecrã: uma sobreposição para três plataformas

Três plataformas, uma lista

Fazer multistream normalmente significa ver três janelas de chat. Aqui elas estão fundidas, e cada mensagem indica de onde veio.

• Um ícone da plataforma à esquerda de cada mensagem.
• Emblemas da Twitch como imagens; chips de função — streamer, moderador, VIP, subscritor — para YouTube e Kick.
• Emotes das três plataformas renderizados como imagens, não como códigos.
• A cor de nickname que o espectador escolheu na sua plataforma.

Uma sobreposição por cena

O chat tem de se posicionar de forma diferente numa cena de conversa e num jogo: uma coluna larga numa, uma linha corrida fina na outra. São duas sobreposições, não uma que fica a ser reestilizada.

• Cada sobreposição tem o seu próprio design, o seu próprio comportamento e a sua própria ligação para o OBS.
• Duplicar uma copia também o seu design — comece com o que já funciona e mude apenas uma coisa.
• Um interruptor em cada linha desliga uma sobreposição sem a apagar; a sua fonte no OBS simplesmente fica vazia.
• O modo de teste preenche todas as sobreposições de uma vez, para que as cenas possam ser verificadas uma após a outra.

Fazê-la caber na sua cena

Uma sobreposição de chat fica no ecrã durante a stream toda, por isso tem de combinar, e não apenas funcionar.

• Bolha, nome, texto e emblemas são estilizados separadamente: fontes (incluindo cirílico), cores, tamanhos, raio, borda, sombra, espaçamento.
• Três predefinições para começar — Neon, Vidro, Mínimo.
• A pré-visualização ao vivo mostra o seu chat real enquanto edita, para que nada seja estilizado às cegas.
• A sobreposição ajusta-se ao tamanho que der à fonte no OBS.

Como se comporta no ecrã

A sobreposição não é apenas uma lista. O que ela faz com uma mensagem quando chega é definido separadamente de como a mensagem aparece.

• Dois layouts: uma coluna de bolhas, ou uma única linha corrida na parte inferior quando não há espaço vertical disponível.
• A coluna cabe tantas mensagens quantas a área permitir — novas em baixo, antigas a sair pelo topo com uma animação, e sem barra de scroll.
• Um temporizador de exibição pode fazer uma mensagem desaparecer após N segundos, ou mantê-la até ser empurrada para fora.
• Animações de entrada e saída — deslizar de qualquer lado, esvanecer, encolher ou estourar — e uma margem de segurança para as bolhas não tocarem na borda da fonte.
• Comandos que começam com "!" podem ser ocultados: o chat vê-os, a stream não.

Configurá-la antes de alguém escrever

Estilizar uma sobreposição de chat contra um ecrã vazio é um palpite, por isso há uma forma de a preencher sob pedido.

• Um modo de teste envia cerca de duas dúzias de mensagens de demonstração — diferentes plataformas, comprimentos, emotes e funções.
• O fluxo vai tanto para a pré-visualização como para a sobreposição real no OBS, o que permite ajustar a posição e o tamanho sem esperar pelos espectadores.
• Os textos de demonstração são localizados como tudo o resto, para que soem naturais no seu idioma.

Do que é feito

Cada parte é um módulo separado: instala apenas os que precisa, e qualquer um pode ser removido sem afetar os restantes.

Começar

1. Crie uma sobreposição e dê-lhe um nome — normalmente, o da cena a que pertence.
2. Copie a sua ligação da lista e adicione uma fonte de browser no OBS.
3. Estilize-a ao lado da pré-visualização ao vivo, e use o modo de teste para a preencher sob pedido.
4. Duplique-a para a próxima cena e mude o que precisar de ser diferente.

Uma stream dura horas, e uma sobreposição de chat que mantém todas as mensagens consumiria memória até o OBS parar. O widget mantém um número limitado de mensagens no ecrã e descarta as mais antigas — é por isso que pode ficar a funcionar a noite toda.

Funciona em conjunto com