Página 1 de 1

Scoreboards para streams

MensajePublicado:Dom Ago 21, 2016 8:53 pm
por Temporalin
Scoreboards para streams ajustables con HTML5 y Javascript, compatible con OBS
Antiguo post:
Oculto:
Tras un Sonic Boom muy intenso me retiré a las lejanas tierras de Granada a descansar con mi familia. Pero un buen streamer nunca descansa, así que me puse a trabajar para arreglar todo lo que no me gustó del stream del Sonic Boom. Tuve algún que otro problemilla porque nunca había tocado nada como esto, pero al final he podido sacarlo adelante.

Sin más dilación, os presento
Scoreboards para streams ajustables con HTML5 y Javascript, compatible con OBS
Imagen
Disponible para descargar en Dropbox
¿Qué es exactamente?
La carpeta incluye todo lo necesario para cubrir y controlar la escena ingame de cualquier stream de Smash. Sus características son:
  • Dos archivos HTML, una para la parte superior y otra para la parte inferior
  • Incluye StreamControl, de Farp's Noodle. Configurado para guardar los datos de los jugadores y sus regiones y cambiar las rondas rápidamente. Por ejemplo, con escribir "LF" ya se pondrá solo "Losers Finals". Si se escriben rondas nuevas se guardarán.
  • Animados para darle un toque más profesional y vistoso
  • Algunas banderas ya incluidas, pero es posible agregar todas las que se deseen
  • Totalmente personalizable: se pueden cambiar las imágenes, las posiciones de los textos, los colores, la fuente... Hay que ser mínimamente habilidoso con el ordenador, eso sí (para editar imágenes y los parámetros del HTML)
  • Compatible con OBS (esto es lo mejor y lo sabéis). Estoy seguro de que es compatible con cualquier otro software de streaming, pero no lo voy a comprobar
¿Cómo se usa?
  • Abre OBS
  • Agrega una "Browser Source" para cada HTML. El tamaño debe ser 1280 de ancho y 720 de alto a no ser que se cambie el tamaño del canvas del HTML y las imágenes.
  • Ejecuta StreamControl
  • Listo
¿Qué planeas añadir?
  • Icono de micrófono para los casters
  • Versión sin banderas para regionales, donde pueden molestar más que otra cosa
  • Algún texto en la parte inferior izquierda. ¿Hashtag para el torneo? ¿Fecha? ¿Bracket?
  • Twitter para los casters en StreamControl
  • Raw: Marcadores en lugar de puntuación numérica para saber si es Bo3 ó Bo5
  • Adry_vk: Alternar entre bandera y personaje
  • Layout para las escenas en las que se vean a los jugadores y/o a los casters
  • Limpiar el código y comentarlo para hacer la personalización lo más sencilla posible




ACTUALIZACIÓN: COUNTDOWN: ARCADIAN
Muestras:
Imágenes:
Oculto:
Imagen
Imagen
Vídeo para verlo funcionando: https://www.youtube.com/watch?v=zK8wfJ5t75s



Disponible para descargar en Dropbox
Podéis utilizarlo como queráis pero DADNOS CRÉDITO A SYLVALUM Y A MÍ. Podéis mencionarnos en Twitter (@HeroOfTemp y @Sylvalum) o simplemente enlazar este post.









¿Qué es esto exactamente?
Es un layout para streamings de torneos cuyo objetivo es facilitar la actualización de información en pantalla además de darle un toque profesional utilizando animaciones. Está formado por escenas para OBS que utilizan archivos HTML con JavaScript. Incluye también StreamControl, el programa encargado de actualizar la información.

La carpeta incluye todo lo necesario, tanto las escenas como el software StreamControl ya configurado.

Características
  • Textos animados para darle un toque más profesional y vistoso
  • Algunas banderas ya incluidas, pero es posible agregar todas las que se deseen
  • Totalmente personalizable: se pueden cambiar las imágenes, las posiciones de los textos, los colores, la fuente... Para ello hay que tener conocimientos básicos de programación y mucha paciencia.
  • Compatible con OBS. Estoy seguro de que es compatible con cualquier otro software de streaming, pero no lo voy a comprobar.
Incluye:
  • StreamControl, de Farp's Noodle. Configurado para guardar los datos de los jugadores y sus regiones y cambiar las rondas rápidamente. Por ejemplo, con escribir "LF" ya se pondrá solo "Losers Finals". Si se escriben rondas nuevas se guardarán.
  • 2 escenas para stream: una in-game, que se usa durante la partida, y otra mid-game, que se utiliza entre partidas.
  • Escenas auxiliares para facilitar la instalación, tan sólo hay que añadir las webcams y la capturadora a sus respectivas escenas y listo.
  • Archivos HTML para los marcadores, que incluyen nombres, puntuación, ronda y, opcionalmente, banderas. En la escena ingame, además, se incluyen los nombres de los casters y un texto auxiliar, como puede ser el nombre del torneo.
¿Cómo lo instalo?
  • Abre OBS, dale a Archivo/File y dale a Ver carpeta de ajustes/View settings folder. De la carpeta que acaba de salir, abre la carpeta basic. Cierra OBS.
  • Copia la carpeta scenes de Dropbox a la carpeta basic. Con esto agregarás la colección de escenas SmashPlateau. Puedes cambiarle el nombre después en OBS.
  • Crea una carpeta en D: llamada SmashPlateau. Si no tienes D: crea la carpeta en C: y realiza el paso siguiente.
  • SÓLO SI NO TIENES D: Vuelve a abrir la carpeta de ajustes de OBS. En la carpeta basic/scenes busca el archivo SmashPlateau.json y ábrelo con tu editor de texto preferido. Busca y reemplaza D: por C:
  • De la carpeta de Dropbox, copia todo en la carpeta SmashPlateau que has creado.
¿Cómo se usa?
  • Abre OBS
  • Selecciona la colección de escenas SmashPlateau. Puedes renombrarla si quieres. Si no se ven bien asegúrate de que tu canvas sea 1080p.
  • Ejecuta StreamControl.exe, que se encuentra en D:/SmashPlateau/ScoreboardForTournaments
  • Listo
¿Qué planeas añadir?
  • Icono de micrófono para los casters
  • HECHO EN VERSIÓN ARCADIAN: Versión sin banderas para regionales, donde pueden molestar más que otra cosa. Cambia la variable useFlags del HTML de true a false
  • HECHO EN VERSIÓN ARCADIAN: Algún texto en la parte inferior izquierda. ¿Hashtag para el torneo? ¿Fecha? ¿Bracket? En StreamControl cambia el Aux. Text 1
  • Twitter para los casters en StreamControl
  • Raw: Marcadores en lugar de puntuación numérica para saber si es Bo3 ó Bo5
  • Adry_vk: Alternar entre bandera y personaje
  • HECHO EN VERSIÓN ARCADIAN: Layout para las escenas en las que se vean a los jugadores y/o a los casters
  • HECHO EN VERSIÓN ARCADIAN: Limpiar el código y comentarlo para hacer la personalización lo más sencilla posible
Sugerencias o peticiones
Si queréis utilizarlo y no sabéis cómo hacer algo contactadme, a ser posible por Twitter (@HeroOfTemp) o Telegram (@Temporalin)

Si queréis que haga yo algo acepto encargos, con precio a negociar según el trabajo que me cueste.

Reconocimientos
  • Los assets de la primera versión son del Sonic Boom, las hizo Joseluisasdfg
  • Los assets de la versión Arcadian los ha hecho Sylvalum
  • El HTML original es de Farp's Noodle, lo mío son modificaciones de su Generic Scoreboard with Flags

Re: Scoreboards para streams

MensajePublicado:Dom Ago 21, 2016 9:01 pm
por Temporalin
[Reservado para changelogs]

Re: Scoreboards para streams

MensajePublicado:Dom Ago 21, 2016 10:25 pm
por El_Bardo
Muy interesante y con ganas de probarlo. Muchas gracias por el curro en nombre de todos los TO's :4DDD: !

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 12:52 am
por Nail
Mola

Tengo que comentar que personalmente nunca me han gustado las layouts que tapan cosas aunque sea ligeramente como en este caso y la mayoria de casos que veo, que son las stock :S

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 12:54 am
por yagg
Muchas gracias tío, gran aporte para los TOs. Me molaría implantarlo para nuestro Rexional del mes que viene. Esta semana me pongo en contacto contigo para unas dudillas y para pasarte imágenes para unos layouts :4Estela:

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 9:28 am
por Temporalin
Muy interesante y con ganas de probarlo. Muchas gracias por el curro en nombre de todos los TO's :4DDD: !
De nada! Espero que sea útil y lo mejoremos entre todos
Mola

Tengo que comentar que personalmente nunca me han gustado las layouts que tapan cosas aunque sea ligeramente como en este caso y la mayoria de casos que veo, que son las stock :S
Te comprendo, a mí me pasa igual. En los Pixel no los tapo y cuando use esto tampoco lo haré. Si sale en la imagen es porque es lo que tenía a mano para probar los HTML.
Muchas gracias tío, gran aporte para los TOs. Me molaría implantarlo para nuestro Rexional del mes que viene. Esta semana me pongo en contacto contigo para unas dudillas y para pasarte imágenes para unos layouts :4Estela:
Genial, cuando quieras :4Falco:

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 9:56 am
por Raw
Un cuadro donde se indique si es Bo3 ,Bo5 o Bo123 ayudaria para cualquiera que venga al stream de la nada y no sepa a cuantas partidas es el set. O simplemente sustituir los numeros por 2 cuadrados para rellenar con algun color (2 por jugador para los bo3 y 3 por jugador para los bo5). Es algo pequeño pero que creo que puede ayudar mucho y no creo que sea full matada tenerlo. Ya me diras que opinas.

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 12:25 pm
por Temporalin
Un cuadro donde se indique si es Bo3 ,Bo5 o Bo123 ayudaria para cualquiera que venga al stream de la nada y no sepa a cuantas partidas es el set. O simplemente sustituir los numeros por 2 cuadrados para rellenar con algun color (2 por jugador para los bo3 y 3 por jugador para los bo5). Es algo pequeño pero que creo que puede ayudar mucho y no creo que sea full matada tenerlo. Ya me diras que opinas.
Lo apunto. No es "full matada" pero tampoco es cosa de 5 min.

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 3:23 pm
por pelotaz0
Lo que dice Raw está muy bien, es la clásica forma de marcar las rondas de un combate en los fighting games. En el Heir III lo han hecho así por lo que vi ayer.
Está genial Tempi, eres un hacha (y)

Re: Scoreboards para streams

MensajePublicado:Lun Ago 22, 2016 4:15 pm
por adry_vk
seguramente lo que diga sea bastante tedioso, pero en el heir por ejemplo la bandera se alternaba con el PJ que usaba cada jugador. Esto sería algo que estaria genial incorporarlo ya que si entras de nuevas en el stream y no conoces bien los jugadores no sabes que jugador utiliza que personaje hasta que lo ves.

otra cosa que se me ocurre es que debajo del score y ronda aparezca el cuadro de debajo a la izquierda donde se indica el torneo, fecha y lugar. así podriamos centrar en la parte de abajo los casters y subir un poco el logo del torneo, destapando completamente los stocks.

los layouts del heir estaban muy bien la verdad, pero tambien son para melee que con la resolucion de 4:3 da mas juego el hueco del lateral, aunque nuestro layout de melee tambien deberia mejorarse.

En fin, que para el streaming eres basicamente el amo. JL ten cuidado que tempi te coge xD

Re: Scoreboards para streams

MensajePublicado:Mar Ago 23, 2016 10:48 am
por Jamiro
Yo pensaba que todo esto era automático, habrá que aprender de las tramas de Tempi para los futuros streaming que haga ;)

PD: Pepo en Grand Final en un Nacional, acaso esto es Brawl? :4Charizard:

Re: Scoreboards para streams

MensajePublicado:Mié Ago 01, 2018 9:16 pm
por Temporalin
Casi dos años después, ¡actualización!

He subido todo lo necesario para instalar y utilizar el layout que hicimos Sylvalum y yo para el torneo Countdown: Arcadian. Además el código es mucho más limpio y fácil de editar, aunque he de reconocer que hay que estar un buen rato encima de él para saber manejarlo.

Como digo al final del post, para cualquier duda, sugerencia o encargo podéis contactarme por Twitter (@HeroOfTemp) o por Telegram (@Temporalin).

¡Saludos!

Re: Scoreboards para streams

MensajePublicado:Mié Ago 01, 2018 9:37 pm
por Sylvalum
Muy buenas. Como bien ha dicho Temporalin, tenéis total libertad para poder usar los overlays como queráis (por algo estamos en comunidad <3), pero pedimos que de ser así enlacéis a este hilo o pongáis nuestras @s de Twitter, sobre todo por si hay más gente a la que le pudiese interesar.

Aunque yo también soy programador, de la parte técnica mejor preguntarle a Tempi que es quien la ha montado, pero si tenéis alguna duda de diseño, de Photoshop o lo que sea, podéis preguntarme a mí, que también responderé encantado.

Nuestra idea es ir mejorando los layouts, hacerlos más bonitos (el del Countdown: Arcadian es así como más gótico por la temática del torneo), ponerles más features y tal, así que cualquier feedback también se agradece un montón. :)