Integración con XSplit
Information
XSplit Broadcaster y XSplit Gamecaster son aplicaciones de streaming
profesionales utilizadas por creadores de contenido en todo el mundo. Integrar
temporizadores de gettickr.app en XSplit es sencillo usando fuentes de página
web.
Esta guía cubre cómo añadir temporizadores de cuenta atrás de gettickr.app tanto a XSplit Broadcaster como a XSplit Gamecaster.
Lo que necesitas
| Requisito | Detalles |
|---|---|
| XSplit Broadcaster o Gamecaster | Descarga desde xsplit.com |
| Temporizador de gettickr.app | Creado en gettickr.app |
| URL del temporizador | URL de visualización/renderer de tu temporizador |
| Conexión a Internet | Requerida para fuente de página web |
Tip
XSplit usa "fuentes de página web" en lugar de "fuentes de navegador"
(terminología de OBS), pero funcionan exactamente de la misma manera.
Integración con XSplit Broadcaster
Paso 1: Crea tu temporizador
Primero, prepara tu temporizador en gettickr.app:
- Abre el Editor
- Crea y personaliza tu temporizador (duración, diseño, colores, fuentes)
- Navega a la sección Renderer
- Copia la URL de visualización, se ve como:
https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR
Premium Feature
Guarda tu temporizador para obtener una URL estable. Los
temporizadores Premium mantienen la misma URL incluso después de ediciones,
mientras que los temporizadores gratuitos generan nuevas URLs con cada cambio.
Paso 2: Añade fuente de página web
Añade el temporizador a tu escena de XSplit:
- Abre XSplit Broadcaster
- Selecciona la escena donde quieres el temporizador
- Haz clic en "Add Source" o haz clic derecho en el área de la escena
- Selecciona "Webpage..." de los tipos de fuente
- Se abre el diálogo de configuración de fuente de página web
Paso 3: Configura la fuente de página web
Configura tu fuente de página web con estos ajustes:
| Ajuste | Valor | Notas |
|---|---|---|
| Name | "Countdown Timer" o nombre descriptivo | Ayuda a identificar la fuente después |
| URL | https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR | Pega la URL de tu temporizador |
| Width | 1920 (o ancho de diseño del temporizador) | Ajusta a las dimensiones de tu temporizador |
| Height | 1080 (o alto de diseño del temporizador) | Ajusta a las dimensiones de tu temporizador |
| Use hardware acceleration | ✅ Recomendado | Mejora el rendimiento de la animación |
| Refresh interval | Predeterminado (normalmente 1000ms) | La configuración estándar funciona bien |
Haz clic en "OK" para añadir la fuente de página web.
Paso 4: Posiciona y redimensiona
Tu temporizador aparece en el editor de escenas:
- Mover: Haz clic y arrastra el temporizador a la posición deseada
- Redimensionar: Arrastra los controles de las esquinas para ajustar el tamaño
- Mantener relación de aspecto: Redimensiona normalmente para mantener las proporciones
- Redimensionar libremente: Mantén presionado Shift mientras arrastras para redimensionar libremente
- Orden de capas: Clic derecho → Order → Bring Forward/Send Backward
| Acción de transformación | Cómo acceder | Caso de uso |
|---|---|---|
| Bring to Front | Clic derecho → Order | Colocar temporizador sobre todas las fuentes |
| Send to Back | Clic derecho → Order | Colocar temporizador debajo de overlays |
| Center | Propiedades transform | Centrado rápido |
| Fit to Screen | Redimensionar al tamaño del lienzo | Temporizador de pantalla completa |
Tip
Usa la función de ajuste al borde de XSplit para alinear temporizadores
perfectamente con los límites de la escena u otras fuentes.
Integración con XSplit Gamecaster
XSplit Gamecaster tiene una interfaz simplificada optimizada para streams de gaming.
Añadir temporizador a Gamecaster
- Abre XSplit Gamecaster
- Haz clic en el botón "Overlays"
- Selecciona "Add Overlay" → "Webpage"
- Pega la URL de tu temporizador
- Dale un nombre (ej. "Break Timer")
- Elige de posiciones predefinidas o ubicación personalizada
| Predefinido de Gamecaster | Mejor para |
|---|---|
| Top Center | Temporizadores de pausa, cuentas atrás de eventos |
| Top Right | Overlays de temporizador pequeños en esquina |
| Bottom Center | Barras de temporizador de ancho completo |
| Center | Temporizadores de pantalla completa "próximamente" |
| Custom | Posicionamiento manual preciso |
Information
El sistema de overlay simplificado de Gamecaster hace la configuración
más rápida, pero ofrece menos personalización que el editor de escenas
completo de Broadcaster.
Configuraciones avanzadas de XSplit
Aceleración por hardware
La aceleración por hardware de XSplit mejora el rendimiento de la fuente de página web:
| Configuración | Impacto en rendimiento | Usar cuando |
|---|---|---|
| Habilitada | Mejor suavidad de animación, mayor uso de GPU | Tienes una GPU dedicada |
| Deshabilitada | Menor uso de GPU, posible entrecortado de animación | La CPU es más potente que la GPU |
Tip
Si la animación de tu temporizador se ve entrecortada, habilita la
aceleración por hardware. Si experimentas lag general del stream, intenta
deshabilitarla.
Intervalo de actualización
El intervalo de actualización controla con qué frecuencia XSplit recarga la fuente de página web:
| Intervalo | Efecto | Mejor para |
|---|---|---|
| 500ms | Actualizaciones muy frecuentes | Precisión crítica de cuenta atrás |
| 1000ms (1s) | Predeterminado, equilibrado | Uso estándar de temporizador |
| 2000ms | Actualizaciones menos frecuentes | Temporizadores estáticos o de actualización lenta |
Information
Para temporizadores de gettickr.app, el intervalo predeterminado de
1000ms funciona perfectamente. El temporizador continúa contando suavemente
entre actualizaciones.
Propiedades de fuente
Haz clic derecho en tu fuente de página web del temporizador para opciones adicionales:
| Opción | Qué hace | Cuándo usar |
|---|---|---|
| Refresh | Recargar página web manualmente | El temporizador aparece congelado |
| Properties | Reabrir configuración | Cambiar URL o dimensiones |
| Rename | Cambiar nombre de fuente | Mejor organización |
| Duplicate | Copiar fuente | Reutilizar temporizador en otras escenas |
| Remove | Eliminar fuente | Limpiar temporizadores no usados |
Gestión de capas
XSplit usa capas para determinar qué aparece encima:
| Estrategia de capas | Cómo implementar | Caso de uso |
|---|---|---|
| Temporizador encima | Clic derecho → Bring to Front | Temporizador visible sobre todo |
| Temporizador detrás de overlays | Posicionar entre capas | Temporizador visible pero debajo de alertas |
| Temporizador como fondo | Send to Back | Temporizador detrás del gameplay |
| Capas agrupadas | Agrupar fuentes relacionadas | Gestionar múltiples elementos juntos |
Tip
Mantén presionado Ctrl y haz clic en múltiples fuentes para
seleccionarlas juntas, luego haz clic derecho para aplicar transformaciones a
todas a la vez.
Control remoto con XSplit
Control remoto Premium
Los usuarios Premium de gettickr.app pueden controlar temporizadores mientras hacen streaming:
Configuración:
- Abre el Editor en un segundo monitor o pestaña del navegador
- Carga tu temporizador Premium guardado
- Mantén el editor abierto durante el stream
Acciones de control:
| Acción | Efecto | Comportamiento en XSplit |
|---|---|---|
| Start | Comenzar cuenta atrás | Se actualiza instantáneamente en la escena |
| Pause | Congelar temporizador | Se pausa inmediatamente |
| Reset | Volver al inicio | Se reinicia sin actualización |
| Adjust Duration | Cambiar tiempo | Se actualiza en vivo |
| Update Design | Modificar apariencia | Los cambios aparecen instantáneamente |
Premium Feature
Todos los cambios se sincronizan en tiempo real con XSplit. No
se necesita actualización manual de la fuente de página web.
| Característica | Temporizador Free | Temporizador Premium |
|---|---|---|
| Añadir a XSplit | ✅ Sí | ✅ Sí |
| Control remoto | ❌ No | ✅ Sí |
| Estabilidad de URL | ❌ Cambia con ediciones | ✅ Siempre la misma |
| Guardar biblioteca de temporizadores | ❌ No | ✅ Sí |
| Persistencia de estado | ❌ Se reinicia | ✅ Guarda estado |
Configuración de temporizador multi-escena
Estrategia 1: Diferentes temporizadores por escena
Crea escenas especializadas con temporizadores apropiados:
| Nombre de escena | Propósito del temporizador | Fuente de página web |
|---|---|---|
| Starting Soon | Cuenta atrás pre-stream | URL temporizador 1 |
| BRB - Short | Pausa de 5 minutos | URL temporizador 2 |
| BRB - Long | Pausa de 15 minutos | URL temporizador 3 |
| Event Countdown | Evento especial del stream | URL temporizador 4 |
Flujo de trabajo: Cambiar escenas para cambiar temporizadores automáticamente
Estrategia 2: Múltiples fuentes de página web
Añade varias fuentes de página web a una escena:
- Añade primera fuente de página web de temporizador
- Añade segunda fuente de página web de temporizador (URL diferente)
- Usa alternador de visibilidad para mostrar/ocultar temporizadores
- Configura atajos de teclado para cambio rápido
Flujo de trabajo: Quedarse en una escena, alternar visibilidad del temporizador
Estrategia 3: Intercambio de fuentes
Usa una fuente de página web, intercambia URLs según sea necesario:
- Crea fuente de página web con URL de Temporizador A
- Al cambiar temporizadores, clic derecho → Properties
- Cambia URL a Temporizador B
- Haz clic en OK para aplicar
Flujo de trabajo: Fuentes mínimas, cambios de URL manuales
Tip
Mejor enfoque: La Estrategia 1 (diferentes escenas) es la más
limpia para organización. La Estrategia 2 funciona bien para alternancias
rápidas de visibilidad durante streams.
Casos de uso comunes
| Escenario de streaming | Configuración de XSplit | Configuración de temporizador |
|---|---|---|
| Stream Starting Soon | Escena de pantalla completa | Temporizador CountTo 1920×1080 |
| Break Timer | Escena BRB con overlay de temporizador | Countdown 800×400 (5-15 min) |
| Subathon | Temporizador en todas las escenas | Barra superior Countdown 1920×100 |
| Tournament Rounds | Escena de torneo | Temporizador de ronda 600×300 |
| Giveaway | Overlay lateral en escena principal | Cuenta atrás de entradas 400×600 |
Presentaciones de XSplit
La función de presentación de XSplit guarda tu configuración completa:
Guardar tu configuración:
- Configura todas las escenas con temporizadores
- Archivo → Save Presentation
- Nómbrala descriptivamente (ej. "Stream Setup - Timers")
- Carga esta presentación para futuros streams
Beneficios:
| Qué se guarda | Beneficio |
|---|---|
| Todas las escenas | Recreación instantánea de escenas |
| Fuentes de página web con URLs | No hay que volver a introducir URLs |
| Posiciones y tamaños de fuentes | Diseño consistente |
| Orden de capas | Jerarquía visual confiable |
| Asignaciones de atajos | Preservación del flujo de trabajo |
Information
Guarda diferentes presentaciones para diferentes tipos de stream
(stream regular, eventos especiales, streaming IRL) con temporizadores
apropiados pre-configurados.
Solución de problemas
El temporizador no se muestra
| Problema | Causa | Solución |
|---|---|---|
| Fuente de página web en blanco | URL incorrecta | Verificar URL: https://gettickr.app/r/#... |
| Temporizador cortado | Fuente demasiado pequeña | Aumentar ancho/alto para ajustar al temporizador |
| Fondo negro | Transparencia no funciona | Verificar que el diseño del temporizador tiene fondo transparente |
| Nada se carga | Sin internet | Verificar conexión de red |
| Temporizador detrás de otras fuentes | Orden de capas incorrecto | Clic derecho → Order → Bring Forward |
Problemas de rendimiento
| Síntoma | Causa | Solución |
|---|---|---|
| Animación entrecortada del temporizador | Aceleración por hardware desactivada | Habilitar aceleración por hardware |
| XSplit con lag | Demasiadas fuentes de página web | Reducir fuentes de página web activas |
| Alto uso de CPU | Renderizado por software | Habilitar aceleración GPU/hardware |
| Caídas de codificación de stream | Carga general del sistema | Cerrar programas innecesarios |
Tip
XSplit muestra el uso de CPU/GPU en la parte inferior derecha.
Monitorea estas métricas para identificar cuellos de botella de rendimiento.
Problemas de sincronización
| Problema | Solución |
|---|---|
| Temporizador gratuito: Los cambios no aparecen | Copiar nueva URL y actualizar propiedades de fuente de página web |
| Temporizador Premium: Control remoto no funciona | Asegurar que la pestaña del editor está abierta y conectada |
| El temporizador aparece congelado | Clic derecho en fuente → Refresh |
| Temporizador desincronizado | Recargar fuente de página web o reiniciar XSplit |
Warning
Los temporizadores gratuitos generan una nueva URL con cada
edición. Debes actualizar las propiedades de la fuente de página web con la
nueva URL. Los temporizadores Premium mantienen URLs estables.
Próximos pasos
- Integración con OBS - Guía de software de streaming alternativo
- Control remoto - Aprende sobre las funciones de control remoto Premium
- Personalizar diseño - Haz que tu temporizador coincida con la marca de tu stream