Streaming Windows

Contador de muertes interactivo para OBS usando sólo Powershell

Liukin 3 min de lectura

Cuando hacemos streaming de juegos en los que podemos morir, es común querer mostrar un contador de muertes. Normalmente, estas herramientas requieren instalar entornos complejos como Node.js o Python, lo cual puede ser pesado para el sistema mientras juegas.

El objetivo de este proyecto fue crear una solución 100% nativa de Windows, utilizando herramientas que ya vienen instaladas en el sistema operativo, optimizando al máximo los recursos.

Vamos a repasar la parte técnica pero si lo que quieres es directamente a la descarga del proyecto y probarlo lo tienes en https://github.com/PCSolucion/liukin-cyber-death-counter

 

La Arquitectura Técnica

El sistema se divide en dos partes que se comunican entre sí a través de un servidor local ligero.

1. El Backend: PowerShell como Servidor y Listener

En lugar de usar un servidor web tradicional, utilizamos scripts de PowerShell. La magia ocurre en dos archivos:

  • Server.ps1: Crea un servidor HTTP simple utilizando System.Net.HttpListener (.NET) para servir los archivos HTML y responder a las peticiones de la API.
  • Key_listener.ps1: Este script se encarga de detectar las pulsaciones de teclas globales.

Para detectar las teclas incluso cuando el juego está en pantalla completa, utilizamos P/Invoke para llamar directamente a la API de Windows User32.dll, específicamente a la función GetAsyncKeyState.


Add-Type @"
    using System;
    using System.Runtime.InteropServices;
    public class User32 {
        [DllImport("user32.dll")]
        public static extern short GetAsyncKeyState(int vKey);
    }
"@

Esta técnica permite capturar eventos de teclado de muy bajo nivel con un consumo de CPU prácticamente nulo.

El Frontend: HTML5 + CSS3 Puro

La interfaz visual («HUD») está diseñada con HTML estándar y CSS moderno, sin frameworks pesados. Para lograr la estética de Trauma Team, se utilizaron:

  • CSS Grid/Flexbox: Para la estructura del panel.
  • SVG Animations: Para la línea del electrocardiograma (ECG) animada.
  • Fuentes Web: Como ‘Rajdhani’ y ‘Share Tech Mono’ de Google Fonts para ese look futurista.

El diseño incluye «scanlines» y efectos de distorsión cromática para imitar un monitor antiguo o un visor HUD dañado.

Cómo Usar este Widget en tu Stream

Si quieres implementar esto en tu propio OBS, sigue estos pasos:

Paso 1: Instalación

No necesitas instalar nada extra. Solo descarga el paquete del proyecto (asegúrate de incluir la carpeta public/ y los scripts .ps1). Puedes ver el código fuente en el repositorio.

Paso 2: Ejecución

  1. Ejecuta el archivo start_widget.bat.
  2. Es posible que Windows te pida permisos de Administrador. Esto es necesario para que el script pueda «escuchar» las teclas mientras estás dentro de otro juego.
  3. Verás una ventana negra de consola. No la cierres, solo minimízala.

Paso 3: Integración en OBS Studio

  1. Abre OBS Studio.
  2. Añade una nueva fuente de tipo Navegador (Browser Source).
  3. En la URL, escribe: http://localhost:3000
  4. Configura las dimensiones recomendadas: Ancho 500, Alto 300.
  5. Borra cualquier CSS personalizado que OBS traiga por defecto.

Paso 4: Controles

  • NumPad 9: Aumentar contador (+1 Muerte). Verás una animación roja de «Critical Damage».
  • NumPad 7: Restar contador (-1) en caso de error.
Descargar Archivos del Proyecto