Bienvenidos a Smash Bros. Spain

Smash Bros. Spain es el hogar de la comunidad española de Smash Bros.

¡Únete y podrás participar en los torneos online, enterarte de cuándo serán los próximos torneos presenciales y compartir con nosotros todas tus inquietudes!

Avatar de Usuario
BY Temporalin
#187369
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
Última edición por Temporalin el Mié Ago 01, 2018 9:14 pm, editado 1 vez en total.
Avatar de Usuario
BY Nail
#187385
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
Avatar de Usuario
BY yagg
Moderador global
#187386
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:
Avatar de Usuario
BY Temporalin
#187395
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:
Avatar de Usuario
BY Raw
#187396
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.
Avatar de Usuario
BY Temporalin
#187401
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.
Avatar de Usuario
BY pelotaz0
#187407
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)
Avatar de Usuario
BY adry_vk
#187408
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
Avatar de Usuario
BY Jamiro
#187467
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:
Avatar de Usuario
BY Temporalin
#203252
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!
Avatar de Usuario
BY Sylvalum
#203253
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. :)
long long title how many chars? lets see 123 ok more? yes 60

We have created lots of YouTube videos just so you can achieve [...]

Another post test yes yes yes or no, maybe ni? :-/

The best flat phpBB theme around. Period. Fine craftmanship and [...]

Do you need a super MOD? Well here it is. chew on this

All you need is right here. Content tag, SEO, listing, Pizza and spaghetti [...]

Lasagna on me this time ok? I got plenty of cash

this should be fantastic. but what about links,images, bbcodes etc etc? [...]