Crear juegos y recompensas

Sí, tu juego puede reaccionar a los regalos de TikTok

Social Stream Ninja captura un evento y lo envía a tu página; tu JavaScript decide qué sucede: impulsar un cohete, cultivar un jardín, crear un enemigo o avanzar un objetivo común. Tú eliges la acción y su umbral en el juego. SSN no cambia los precios de los regalos de una plataforma.

Empieza aquí: prueba las tres plantillas, después decide si la regla utiliza unidades de la plataforma, identidad de un regalo o USD estimados.

Para un sonido, una alerta, una acción de OBS o un webhook, empieza con Event Flow. Una página HTML personalizada resulta útil si necesitas un tablero o un estado de juego propio. Para juegos terminados, consulta la galería de juegos.

Tres ejemplos pequeños y editables

Cada vista previa incluye botones de muestra y un inspector de los últimos datos recibidos. Las muestras son eventos ficticios, no compras. El modo de vista previa nunca se conecta a tu sesión en directo.

• Cohete con monedas: 10 monedas de TikTok, 100 Bits de Twitch o 100 estrellas de Facebook conceden un impulso. Los restos se acumulan por separado para cada espectador y plataforma. Modifica COST en el HTML para fijar tus cantidades.
• Objetivo de apoyo compartido: combina el apoyo estimado en USD de las cuatro plataformas para construir una base lunar. Cambia GOAL_USD o sustituye el indicador de progreso por daño, combustible o un temporizador.
• Jardín de regalos y eventos: un regalo elegido de TikTok añade flores, un seguimiento capturado de TikTok añade un árbol y el comando gratuito !water añade agua. Establece GIFT_ID con un ID capturado, o establece GIFT_NAME con su nombre exacto. «Demo flower» es un ejemplo ficticio.

Abre el código HTML y busca EDIT THIS RULE o EDIT THESE RULES. La función receive(data) es donde sustituyes la acción de ejemplo por la lógica de tu juego. Los helpers de conexión y recuento están en starter.js; los estilos visuales están en starter.css.

Conectar un ejemplo a tu directo

1. Inicia SSN y conecta tu fuente de chat. Confirma que sus mensajes y filas de regalos o apoyo llegan al dock. Para configurar TikTok, consulta los modos de conexión.
2. Abre un ejemplo sin ?demo, usando tu ID de sesión de SSN. Incluye la contraseña de la sesión si la has establecido.
3. Comprueba la página en un navegador y añade la misma URL como fuente de navegador de OBS, por ejemplo a 1000 × 800. Añade &clean para ocultar el inspector, el estado de conexión y los botones del anfitrión.

https://socialstream.ninja/games/templates/coin-rocket.html?session=YOUR_SESSION&password=YOUR_PASSWORD&clean

Si usas el sitio beta, conserva /beta/ antes de games/. Omite el parámetro de contraseña si no hay ninguna. Mantén privados los enlaces de sesión.

La conexión predeterminada utiliza el mismo puente iframe que las superposiciones de SSN. Para usar la ruta WebSocket alojada del chat capturado, activa el ajuste de SSN Enviar mensajes al Dock desde la extensión mediante el servidor y añade &server2. Consulta la Guía de WebSocket para la configuración local; estas plantillas también aceptan &server2&localserver y &localserverport=3000. localserver por sí solo no activa una ruta. La fuente antigua server usa otro canal y puede depender de que un dock publique en él.

Crear tu propia copia

Descargar el ZIP del código beta y extráelo. Edita los archivos de games/templates/, conservando la estructura de carpetas: los ejemplos también cargan js/local-server-url.js, y el objetivo de apoyo carga currency.js desde la raíz del repositorio.

Sirve la carpeta extraída con un servidor web local. Si ya tienes Python, ejecuta esto desde esa carpeta:

python -m http.server 8080 --bind 127.0.0.1

Después usa http://127.0.0.1:8080/games/templates/coin-rocket.html?session=YOUR_SESSION en tu navegador u OBS. Para alojarlo en otro lugar, conserva las mismas rutas relativas. No hace falta compilar.

¿Cómo elijo una cantidad de monedas para una acción?

Antes de elegir una cifra, decide qué quieres medir:

Decide si tu importe es exacto (coins === 10), un un mínimo por evento (coins >= 10), o un saldo acumulado. El cohete usa un saldo acumulado: 25 monedas conceden dos impulsos y dejan cinco monedas. Una regla que exija exactamente 10 ignoraría 25 monedas. Si eliges entre varias acciones por evento, comprueba primero el umbral más alto para que un evento no active también todos los niveles inferiores.

En TikTok, los espectadores compran monedas y las gastan en regalos; su coste en monedas se muestra junto al regalo. Elige regalos disponibles en tu propio LIVE e inspecciona los datos capturados antes de publicar una regla. El nombre de un regalo, su cantidad, las monedas y los diamantes son medidas diferentes. No calcules «monedas exactas» dividiendo una estimación en USD ni tratando los diamantes como monedas. Explicación de TikTok sobre monedas y regalos.

Si la captura solo proporciona el nombre y la cantidad del regalo o una etiqueta de diamantes, el ejemplo de monedas omite el evento salvo que haya metadatos explícitos de monedas. Usa una regla de identidad del regalo o el ejemplo de USD estimados. Los metadatos de monedas también pueden proceder del catálogo de regalos de SSN; compáralos con la bandeja de regalos del LIVE actual si necesitas precios exactos. Los catálogos y los métodos de captura varían; no se garantiza un campo universal de monedas en todos los mensajes de TikTok.

Qué envía cada plataforma

type identifica la fuente; event identifica una acción cuando está presente. La disponibilidad depende del modo de captura, los ajustes y lo que expone la plataforma. Estos ejemplos describen las rutas actuales del código de SSN; no garantizan que todas las cuentas entreguen todos los eventos.

Referencias de las plataformas: Diamantes de TikTok; Bits y suscripciones de Twitch; Descripción de las estrellas de Meta; Super Chat y Super Stickers de YouTube; Joyas, regalos y Rubíes de YouTube. Terminología comprobada el 29 de septiembre de 2026; consulta las páginas actuales de cada plataforma para conocer los requisitos y la disponibilidad.

Otras fuentes también pueden informar de propinas, regalos, membresías o compras. Consulta la referencia de eventos antes de añadirlas al filtro isSupport del ejemplo. Una venta de producto o una suscripción regalada no son automáticamente una propina. Por ejemplo, YouTube distingue entre compras de regalos y avisos de canje del destinatario; contar ambos recompensaría dos veces el mismo regalo.

Usar correctamente donoValue y currency.js

hasDonation es la etiqueta original del importe mostrado, como €5.00 o 100 bits. donoValue es un importe numérico opcional en USD proporcionado por la fuente. Respeta un valor válido, incluido cero, antes de estimar a partir de la etiqueta. Conserva la etiqueta original para mostrarla.

<script src="../../currency.js"></script>
<script>
// From games/templates/: use the existing helper, including its zero handling.
var usd = getDonationValueUSD(data);
// Use usd for your rule; display data.hasDonation for the original amount/unit.
</script>

Comportamiento de conversión existente: Actualmente SSN estima una moneda de TikTok en 0,01 USD, un diamante de TikTok en 0,005 USD, un Bit de Twitch o una estrella de Facebook en 0,01 USD y una Joya de YouTube en 0,005 USD. Un regalo de TikTok sin precio se estima en una moneda por regalo; un regalo de YouTube sin cantidad de Joyas tiene su propia estimación provisional de 0,01 USD. La conversión de divisas también usa tipos internos aproximados, no un servicio de cambio en tiempo real.

Estos son valores comparativos de SSN. No representan una definición común del gasto del espectador, los ingresos netos del creador o el dinero disponible para retirar. Los distintos métodos de captura pueden producir estimaciones diferentes. En particular, estimar un regalo desconocido de TikTok en una moneda no demuestra que cueste una moneda.

No utilices donoValue || convertToUSD(...): eso descarta un cero intencionado. No extraigas cifras de chatmessage para detectar pagos ni exijas event === "donation": las estrellas de Facebook y algunos Cheers no tienen marcador de evento. El ejemplo de objetivo de apoyo selecciona primero los tipos de apoyo y después llama al conversor compartido.

Fuente: currency.js y el parámetro referencia de datos. Los metadatos de regalos son opcionales; los ejemplos no inventan campos que falten en tu captura.

Contar una racha de regalos una sola vez

TikTok puede informar de cantidades acumuladas 1, 2, 3 para una misma racha. Son tres regalos, no seis. Para acciones acumulativas, guarda la mayor cantidad o importe ya visto para la racha y aplica solo el incremento. Una actualización final con el mismo total no añade nada.

// All three events refer to the same streak:
// incoming total: 1, 2, 3, 3
// added to game:  1, 1, 1, 0
var newCoins = RewardStarter.increment(data, RewardStarter.coins(data), 'coins');

El helper usa los ID nativos de grupo, remitente y regalo de TikTok cuando están disponibles, después meta.tiktokGiftStreakId o los ID de mensaje. Los ID normales también evitan entregas repetidas. No espera a repeatEnd porque la captura del navegador puede no proporcionarlo nunca. Si tu diseño necesita una sola acción al finalizar una racha, debes crear una regla de finalización independiente con los campos que realmente envía tu conexión.

Estas plantillas didácticas recuerdan hasta 2000 identidades en memoria. Reiniciar o recargar borra esa memoria y el progreso del juego. Los mensajes sin ID estables no pueden deduplicarse de forma fiable; una segunda captura del mismo canal también puede usar otros ID. Empieza con una sola ruta de captura. El cohete agrupa los saldos por plataforma e ID de usuario y, si falta este, por nombre visible; nombres idénticos pueden compartir saldo si faltan los ID. Para un juego persistente, añade almacenamiento de estado y gestión de repeticiones antes de confiar en que las recompensas pagadas sobrevivan a los reinicios.

Para recompensas sin un juego personalizado

En Event Flow, usa Comparar propiedad con donoValue, mayor o igual que, y el umbral en USD; después conecta una acción, como un sonido, una animación o un control de OBS. La comparación utiliza el valor proporcionado por la fuente cuando es válido y la conversión de moneda existente cuando hace falta.

Para un regalo concreto de TikTok, compara meta.giftId o meta.giftName, y limita el flujo a eventos de regalos de TikTok. Las comparaciones numéricas de hasDonation también se convierten a USD; no son comparaciones de monedas sin convertir. Usa metadatos nativos o código personalizado para las reglas específicas de monedas.

Un umbral evaluado por mensaje recibido es distinto de un saldo acumulado o un contador de rachas. No supongas que un umbral de Event Flow realiza automáticamente la acumulación y el control de duplicados del ejemplo. Usa los nodos de estado cuando tu flujo necesite estado, o conserva esa lógica en tu juego.

Pruébalo antes de vincular una acción pagada

1. Usa los botones de muestra. Una racha 1 → 2 → 3 debe añadir el valor de tres regalos; la muestra con valor sobrescrito a cero no debe añadir USD; un precio desconocido no debe añadir monedas exactas.
2. Conecta la fuente real e inspecciona los datos capturados. Confirma el nombre o ID del regalo, el importe y la unidad, la cantidad y el evento que espera tu regla. Un ejemplo comprueba la regla, no la captura real de la plataforma.
3. Verifícalo en tu escena de OBS. Comprueba eventos repetidos, una reconexión y una recarga. Evita cerrar o actualizar esta fuente de navegador cuando importe conservar la partida en memoria.

Para un juego desatendido o AFK, SSN, la captura de fuentes y la página del juego deben seguir funcionando. Un ordenador suspendido, una sesión de origen caducada o una conexión interrumpida detienen las acciones; estos ejemplos no recuperan eventos perdidos ni gestionan reembolsos. Las reacciones automáticas no autorizan a monetizar un directo desatendido: consulta las normas actuales de LIVE y monetización de la plataforma para tu formato.

Si no llega nada, comprueba primero el dock de SSN, después la sesión, la contraseña y el ajuste de transporte. Si llega chat pero un regalo no coincide, inspecciona los datos y los filtros de donaciones y eventos. La disponibilidad de seguimientos y suscripciones varía según la fuente; consulta la referencia de eventos. Para más detalles sobre la conexión, consulta superposiciones personalizadas.