Stream High Scores & Achievements System
Introducción
El widget de High Scores (Récords) y Achievements (Logros) te permite configurar un sistema de puntos y logros para tus espectadores y tu stream, basado en las interacciones que ocurren en directo. Puedes mostrar estas puntuaciones en tu overlay de varias formas. Es una herramienta eficaz para "gamificar" el crecimiento de tu canal, involucrando y recompensando a tu comunidad.
- 📺 Multiplataforma: Compatible con Twitch, Kick y YouTube.
- 📦 Modular: Añade/quita variables, cambia títulos, colores, secciones visibles, etc.
- 💻 Local: Funciona al 100% a través de Streamer.bot y se ejecuta localmente sin dependencias externas.
- 💾 Autoguardado: Se realiza una copia de seguridad automática tras cada actualización de puntos.
- 🌐 Multilingüe: Interfaz disponible en francés, inglés, español y alemán.
- 💰 Sin suscripciones: Pago único. ¡El widget y todas las actualizaciones futuras son tuyas de por vida!
La Interfaz
La aplicación se divide en dos secciones principales:
- La sección de Inicio (Accueil), donde encontrarás los botones de control y los enlaces a las diferentes vistas incluidas en el widget.
- La sección de Configuración, desde la cual puedes ajustar el widget y personalizar tus puntuaciones y logros. A continuación se detalla la información sobre la configuración.
En la cabecera, arriba a la derecha, encontrarás varios indicadores de conexión que te permiten confirmar el estado del widget desde cualquier parte de la aplicación.
El menú de ayuda superior contiene enlaces a esta guía y a las condiciones generales de uso. La página "About" contiene información sobre la versión, los créditos y enlaces a mis redes sociales.
Puedes usar el menú de la esquina inferior izquierda para cambiar el idioma del widget según tus preferencias.
Configuración
Puedes configurar la conexión, los controles, así como las puntuaciones del directo y de los espectadores desde la interfaz de configuración del widget.
Importar acciones en Streamer.bot
Importa las acciones de Streamer.bot incluidas en el archivo descargado. La acción Widget Backend es obligatoria para el correcto funcionamiento del widget. No le cambies el nombre bajo ningún concepto, o dejará de ser reconocida.
Conexión al servidor WebSocket
El primer paso para usar la aplicación es conectarse al servidor WebSocket. Se aconseja iniciar Streamer.bot antes de lanzar el widget.
SendMessage(), la cual requiere autenticación para funcionar. Recomendamos activar la autenticación del servidor WebSocket de Streamer.bot y guardar la contraseña para disfrutar de todas las funciones del widget. No obstante, este paso es opcional si no deseas recibir mensajes de respuesta del widget.Para configurar tu conexión:
- Ve a Configuración > Conexión > Conexión al servidor websocket.
- Introduce tus datos de conexión.
- Haz clic en "Guardar" (Save) arriba a la derecha.
Opciones del Widget
En esta misma página puedes configurar qué plataformas quieres usar, los triggers (disparadores) que servirán para controlar el Widget y la lista de usuarios ignorados para el cálculo de puntuaciones del directo.
General: Los triggers que sirven para activar/desactivar el widget.
Scores du Live: El trigger que reinicia las puntuaciones del directo a 0.
Scores des viewers: Los triggers que activan la visualización de las tarjetas de espectador con sus parámetros asociados.
Puntuaciones del directo (Live Scores)
Configuración > Live High Scores
En esta parte del widget puedes activar o desactivar individualmente las puntuaciones de la tabla de récords. En el futuro habrá más opciones de personalización disponibles.
Puntuaciones de espectadores (Viewer Scores)
Configuración > Viewer Scores
Desde esta página puedes configurar:
- Las secciones que aparecen en el widget.
- La apariencia de la tarjeta.
- Las secciones y puntuaciones que aparecerán en la tarjeta.
Encontrarás más detalles sobre la configuración de secciones y puntuaciones en el siguiente apartado.
Logros (Achievements)
Esta página sirve para configurar los logros de los espectadores en el directo. Funciona de manera similar a las puntuaciones. Consulta la siguiente sección si necesitas más detalles sobre el funcionamiento general y las opciones disponibles.
Importar las vistas en tu software de streaming
El widget ejecuta un servidor local en tu ordenador, lo que permite acceder a las vistas mediante URLs. Estas URLs aparecen listas para copiar en la página de inicio del widget.
Para importar una vista, simplemente copia el enlace correspondiente, añade una nueva fuente de navegador (Browser Source) en tu programa de streaming y pega el enlace en el campo URL de dicha fuente.
Una vez completados estos pasos, basta con activar el widget vía trigger o con el botón de control para comenzar a escuchar eventos e incrementar las puntuaciones.
Añadir Triggers
Los triggers son eventos recibidos desde Streamer.bot. El widget los utiliza para los controles y para el incremento de puntuaciones.
Al añadir un nuevo trigger, ya sea para controlar el widget o modificar puntuaciones, puedes introducir una condición para que el trigger solo se active cuando una variable tenga un valor preciso.
En el campo payload variable to check, introduce el nombre de la variable que quieres usar como filtro. En el campo de valor, pon el valor que debe tener la variable para disparar la acción.
Funcionalidades
Tabla de récords del stream
La tabla de récords del stream muestra las puntuaciones generales para cada plataforma activada en el widget. Es posible activar o desactivar cada puntuación individualmente desde la página de configuración dedicada. Se introducirán más opciones de personalización en el futuro.
Evento enviado a Streamer.bot
Evento Streamer.bot enviado: New Live High Score
| Argumento | Descripción | Ejemplo de valor |
|---|---|---|
scoreName | Nombre interno de la puntuación | twitch-messages |
scoreLabel | La etiqueta de la puntuación tal y como se muestra en la tabla | Mensajes |
scoreEvent | El trigger exacto que ha disparado el evento | Twitch.ChatMessage |
platform | La plataforma desde la cual se envió el evento | twitch |
oldValue | El valor anterior del récord | 0 |
newValue | El nuevo valor del récord | 1 |
triggeredBy | Nombre del usuario que ha establecido el nuevo récord | la_syl |
chatMessage | El mensaje enviado al chat por el widget | 🏆 NUEVO RÉCORD! Mensajes: 1 (antes: 0) - por la_syl |
Tarjetas de espectador
Las tarjetas de espectador son 100% personalizables por el streamer y muestran la siguiente información:
- Nombre y foto de perfil del espectador.
- Emblema de la plataforma del espectador (opcional).
- Secciones de puntuación configuradas por el streamer.
- Insignias de logros desbloqueados por el espectador (opcional).
- Nombre y foto de perfil del streamer (opcional).
- La fecha en la que se visualiza la tarjeta (opcional).
Las opciones de personalización son accesibles desde la sección Configuración > Viewer Scores.
Detalles de la configuración
En la sección Sections & Scores puedes configurar tu sistema de puntuación para los espectadores.
Secciones
Las secciones son contenedores para las puntuaciones. Pueden tener una o dos columnas. Cuando una sección tiene dos columnas, puedes poner un título a cada una. Esto también influirá en cómo se configuran las filas de puntuaciones.
1 Columna
| Nombre | Tipo de campo | Descripción |
|---|---|---|
| Label | Texto | El título de la puntuación mostrado en la tarjeta. |
| Variable | Texto | El nombre de la variable a guardar en Streamer.bot. |
| Hide if 0 | Checkbox | Ocultar la línea si la puntuación del espectador es 0. |
| Persisted | Checkbox | Indica si hay que guardar la variable en temp globals o persisted globals en Streamer.bot. |
| Increment Type | Dropdown | Indica la forma de incrementar la puntuación. |
| Trigger | Dropdown | El trigger que activará el incremento. |
2 Columnas
| Nombre | Tipo de campo | Descripción |
|---|---|---|
| Label | Texto | El título de la puntuación mostrado en la tarjeta. |
| Variable 1 | Texto | El nombre de la variable a guardar en Streamer.bot. |
| Variable 2 | Texto | El nombre de la variable a guardar en Streamer.bot. |
| Hide if 0 | Checkbox | Ocultar la línea si la puntuación del espectador es 0. |
| Hide variable 1 | Checkbox | Ocultar la línea si la variable 1 es 0. |
| Compare Type | Dropdown | Tipo de comparación a realizar entre las dos variables. Esto influye en cómo se guardan las puntuaciones. |
| Increment Type | Dropdown | Indica la forma de incrementar la puntuación. |
| Trigger | Dropdown | El trigger que activará el incremento. |
Tipos de incremento y comparación de variables
Increment Type (Tipo de incremento)
| Nombre | Descripción | Variable adicional |
|---|---|---|
| Count (+1) | Suma 1 a la puntuación. | No requerida |
| Add Value from Payload | Suma el valor de una variable a la puntuación. | Sí |
| Set Value from Payload | Reemplaza la puntuación por el valor de una variable. | Sí |
| Keep Maximum | Compara el valor actual con el de una variable y conserva la más alta. | Sí |
Compare Type (Tipo de comparación)
| Nombre | Descripción | Triggers necesarios |
|---|---|---|
| Today VS All Time | Guarda la variable 1 en temp user globals y la variable 2 en persisted user globals. | 1 |
| Current VS Best | Reemplaza sistemáticamente el valor 1 por el de la variable ajustada. La variable 2 solo se reemplaza si el valor de la variable 1 es superior al de la variable 2. Se envía un evento New Viewer High Score a Streamer.bot cuando esto ocurre. | 1 |
| 2 Independant Values | Permite ajustar dos variables independientes la una de la otra. | 2 |
Evento enviado a Streamer.bot
Evento Streamer.bot enviado: New Live High Score
Logros (Achievements)
También se pueden configurar logros en el widget. Se otorgan automáticamente cuando un espectador cumple las condiciones configuradas. El espectador será añadido al grupo de Streamer.bot correspondiente y la insignia elegida se mostrará en su tarjeta.
| Nombre | Tipo de Campo | Descripción |
|---|---|---|
| Plataforma | Dropdown | La plataforma asociada al logro. Los logros "comunes" pueden ser activados por las tres plataformas. |
| Nombre | Texto | Nombre del logro configurado. |
| Mensaje | Texto | Mensaje enviado al chat cuando se desbloquea el logro. |
| Nombre del grupo Streamer.Bot | Texto | Nombre del grupo al que se añadirá a los espectadores que desbloqueen el logro. |
| Trigger(s) | Dropdown | Trigger a utilizar para atribuir el logro. Se pueden configurar varios triggers para un solo logro. |
| Badge | Selector de archivo | La imagen que se mostrará en la tarjeta de los espectadores que tengan este logro. Opcional. |
Tipo de activación
Para los logros dispones de una opción adicional para ajustar una condición de activación del trigger. Es posible elegir el tipo de variable a evaluar, así como un operador lógico para determinar cómo evaluar el valor de dicha variable.
Si eliges la opción "threshold" (umbral), tendrás que rellenar los siguientes campos:
- Nombre de la variable
- Tipo de variable
- Operador
- Valor
Evento enviado a Streamer.bot
Evento Streamer.bot enviado: New Achievement Unlocked
| Argumento | Descripción | Ejemplo de valor |
|---|---|---|
userName | Nombre del espectador que desbloqueó el logro | twitch-messages |
platform | Plataforma del espectador que desbloqueó el logro | Mensajes |
achievementName | Nombre del logro tal y como figura en la configuración | Twitch.ChatMessage |
groupKey | Nombre del grupo correspondiente al logro desbloqueado | twitch |
message | Mensaje enviado al chat por el widget para notificar el nuevo logro | 0 |
Solución de problemas
La sección "System State" (Estado del sistema) está diseñada para detectar y mostrar errores. Si algo no funciona como debería, consulta esta sección para identificar el problema.
| Componente | Detalles | Solución |
|---|---|---|
| Configuración Websocket | Indica si la información de conexión al websocket es válida. | Corrige la información en la página de configuración de conexión, guarda e intenta reconectar. |
| Autenticación Websocket | Indica si el usuario está autenticado (opcional). | Verifica que la autenticación esté activada en websocket, comprueba tu contraseña e intenta reconectar. |
| Triggers | Confirma si los triggers se han podido recuperar correctamente desde Streamer.bot. | Normalmente no debería haber error si los dos pasos anteriores son correctos. Si falla, reinicia el widget con Streamer.bot abierto en segundo plano. |
| Backend | Verifica que la acción Widget Backend se encuentra en Streamer.bot. | Confirma que has importado la acción y que no le has cambiado el nombre. |
| Cuenta Broadcaster | Confirma que se ha encontrado la cuenta del emisor (broadcaster). | Mismas instrucciones que para los triggers. |
| Plataformas | Lista las plataformas a las que está conectada la cuenta de broadcaster. | Verifica en Streamer.bot que estás conectado a tu cuenta de broadcaster para cada plataforma utilizada. |
Si detectas algún bug, no dudes en enviar un email a la dirección de soporte con una descripción, capturas de pantalla y tu archivo de logs.