Configurar un contador de muertes en pantalla

Si quieres mostrar un contador en pantalla para, por ejemplo, mostrar las veces que te han matado en un juego, en este artículo te mostraré las herramientas necesarias para ello.

Lo primero que vamos a hacer, es crear los comandos para los contadores en StreamElements.

Crear los contadores

Iniciamos sesión en StreamElements con nuestra cuenta de Twitch y os dirigimos al apartado BOT -> Comandos de Chats -> Comandos personalizados.

A continuación crearemos 4 comandos que podéis personalizar a vuestro estilo. Lo importante es que el nombre del contador sea el mismo para todos. Y además, que lo conservéis para el código de después.

Os dejo la tabla con los comandos y resaltado en negrita lo importante.

Nombre de ComandoNivel de UsuarioRespuestaQué hace
!muerteBroadcasterUn amoche más. La he roscao ${count muertes} vecesAumenta en 1 el contador de muertes
!-muerteBroadcasterHe contado de más, que van ${count.edit muertes -1}Decrementa en 1 el contador de muertes
!resetmuerteBroadcaster${count muertes 0} Contador de amoches reseteadoPone el contador a 0
!muertesEveryoneHasta ahora, Joserra la ha roscao ${getcount muertes} vecesMuestra en el chat el contador

Por defecto, el cooldown de los comandos será de 5 segundos, para evitar que subáis o bajéis dos por error.

Estos comandos, los podemos añadir al Stream Deck para lanzarlos simplemente con pulsar un botón.

Cómo mostrarlo en pantalla

Al arrancar el stream, siempre os aparecerá a cero, pero se actualizará con el primer incremento o decremento. Por lo que podéis sumar uno y restar otro para dejarlo igual y que aparezca actualizado.

Ya tenemos un contador funcional en el chat. Podemos utilizarlo para muertes o para lo que queramos. Ahora queremos que aparezca en pantalla. Seguiremos en StreamElements para ello.

Para ello, nos iremos al apartado “Mis Overlays” y crearemos un Overlay en blanco.

Le damos al + y seleccionamos Static/Custom -> Image. Le damos a Set Image y añadimos la imagen que queremos utilizar. Obtenemos la url donde queda almacenada abriéndola en una pestaña nueva.

Es importante que la subáis primero, porque si utilizáis una fuente externa, y en algún momento no está disponible, no se os mostrará.

Ahora, en el editor, tras darle al botón +, seleccionaremos Static/Custom->Custom Widget

Ahí seleccionaremos Open Editor, para abrir el código del widget.

Ahí eliminaremos todo el código que aparece en las pestañas: HTML, CSS y JS. Tras lo cual introduciremos los códigos que a continuación os pongo:

HTML:

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<div class="main-container">
  <div class="dc" id="muertes">0</div>
  <div class="counter-holder" id="ch"></div>
</div>

CSS:

Atento a sustituir el texto dirección de tu imagen de fondo por la url de la imagen que obtuviste en el paso anterior.

@import url('https://cdn.streamelements.com/scripts/animate.min.css');
@import url('https://fonts.googleapis.com/css?family=Nunito');
* {
    font-family: 'Nunito', sans-serif;
}

.awsome-text-container {
    font-size: 42px;
    font-weight: bold;
}
.main-container{
  background: url(dirección de tu imagen de fondo);
  background-repeat: no-repeat;
  height: 100%;
  background-size: 100px;
}
.dc{
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  padding-left: 0px;
  padding-top: 60px;
}

JS:

counter = "muertes"

window.addEventListener("onEventReceived", function(obj){
  const listener = obj.detail.listener;
  const data = obj.detail.event;
  
  if (listener === "bot:counter" && data.counter === counter){
   document.getElementById("muertes").innerHTML=data.value;
  }
});

Dentro del editor, sólo nos quedará ajustar tamaños y posiciones del widget, darle a SAVE para guardarlo y obtener la URL que introduciremos en OBS como fuente navegador.

Añadirlo a OBS

Sólo tendremos que darle al icono de la cadena en la parte superior derecha del navegador, justo antes de PREVIEW que os muestro en la imagen siguiente.

Luego en OBS, en la escena donde queramos mostrar el contador sólo tendremos que dar a añadir fuente->Navegador pegaremos la url copiada en su respectivo apartado y seleccionaremos un ancho de 1920 y un alto de 1080 (O el tamaño personalizado con el que hayáis creado el widget en StreamElements) y con eso ya lo tendrías.

Espero que os haya sido de ayuda. Si tenéis alguna duda, sugerencia o comentario, contactadme y lo vemos. Y ya sabéis, para verlo en acción, podéis verme en twitch.tv/lascosicasdejoserra.

0