¡Ya está disponible el creador de escenas gratuito! Ha pasado un tiempo desde que lanzamos un recurso gratuito, pero espero que este nuevo recurso gratuito haga que la espera merezca la pena. Con nuestro creador de escenas, puedes crear y personalizar tus propias escenas de introducción, de regreso (AFK) y de salida de forma rápida, sencilla y, por supuesto, gratuita. Incluso puedes crear escenas que muestren tu juego en segundo plano mientras esperas las colas del juego.

¡Consigue el Scene Maker!

¿Qué es el "Scene Maker"?

Hay muchas maneras de utilizar este producto, así que vamos a echar un vistazo rápido a lo que estoy hablando. El diseño de la escena por defecto se muestra a continuación. Podrás cambiar el video de fondo o usar una imagen, actualizar lo que dice todo el texto, cambiar las fuentes, cambiar los colores y mucho más. Todo esto se puede hacer con un par de sencillos pasos que explicaré en este post.

En la parte superior izquierda tenemos ventanas emergentes en las redes sociales que animará y mostrará tus redes sociales. En la parte inferior izquierda, verás etiquetas que mostrará tu seguidor reciente, tu mayor propina, tu última subvención y mucho más. La parte inferior derecha tiene un cuenta atrás que se pueden personalizar para que duren más tiempo y muestren diferentes mensajes. También hay un mensaje que se muestra cuando termina la cuenta atrás. En el centro tenemos un título y subtítulo que se puede cambiar, e incluso un logo o imagen de marcaque también puedes añadir. Utilizaremos el generador de ajustes para personalizar todos los ajustes, por lo que será rápido, fácil e incluso podrás hacer varias escenas si lo deseas.

Diseño por defecto del Scene Maker

Cómo empezar

Para empezar, encontrarás este creador de escenas en nuestra nueva sección Recursos gratuitos sección. Aquí encontrarás todos los artículos de nuestra tienda que puedes utilizar gratuitamente, como nuestros creadores de paneles y superposición. Vamos a hacer clic en el creador de escenas - el enlace directo está aquí. Añade el artículo a tu cesta y pasa por el proceso de compra. Una vez descargados los archivos en tu ordenador, vamos a descomprimirlos. Como verás, hay una carpeta principal llamada "transmisiónResources" con otras dos carpetas dentro de ella.

Estructura de las carpetas

 

Una vez extraído todo, podemos pasar al generador de ajustes.

Uso del generador de ajustes

En primer lugar, empecemos con el generador de ajustes. Aquí es donde ocurre la verdadera magia. En la carpeta 'SceneMaker" que acabamos de extraer hay un enlace para abrir el generador de ajustes, sigue adelante y haz clic en él. En la parte superior, verás todas las categorías de opciones que podrás cambiar - puedes hacer clic en ellas para saltar a diferentes conjuntos de opciones. También verás dos botones a la derecha. El primero te permitirá cambiar el tamaño de la ventana de vista previa para hacerla más grande. También puedes hacer clic directamente en el área de vista previa para cambiar su tamaño. El segundo botón es para descargar el archivo de configuración, que luego colocaremos en la carpeta "Settings". Más adelante hablaremos de ello. También verás una vista previa de ev vivoen la parte superior derecha. Esto te dará una idea de cómo será tu escena.

Tenga en cuenta que contendrá los vídeos y las imágenes de fondo por defecto - así como los nombres de usuario por defecto que se han introducido en las etiquetas. Vamos a ir sobre el cambio de estos hacia fuera después de ir a través de la configuración que podemos cambiar aquí.

Ejemplo de generador de ajustes

Además, la vista previa de ev vivopasará por una sola red social y luego por la agenda, esto es para que puedas tener una idea de cómo se verá todo más rápido.

Opciones disponibles

Principales opciones

Tenga en cuenta que algunos elementos no se actualizarán a través de la vista previa de ev vivo. Las animaciones pueden interrumpirse al alternar la visualización de ciertas secciones.

  • Tipo de fondo - ¿Desea utilizar una imagen o un vídeo como fondo?
  • Fondo superposiciónOpacidad - Esto le permitirá decidir cuánto del color de fondo se muestra. Deslízalo hacia arriba para tener un color más sólido o hacia abajo para que sea más transparente.
  • Desenfoque de fondo - Añade desenfoque a tu imagen o vídeo, si lo deseas.
  • Escala de fondo - Aumenta el tamaño de tu imagen o vídeo de fondo. Recomiendo escalar un poco si añades desenfoque al fondo.
  • Mostrar marca - Decida si quiere mostrar un logotipo en el centro o no.
  • Opacidad del logotipo - Cambia el grado de solidez o transparencia de la imagen de marca.
  • Escala del logotipo - Cambia el tamaño de su logotipo.
  • Anchura del marco - Cambia el grosor del marco alrededor de la escena.
  • Título de la escena - El título principal de la escena.
  • Lema - El texto más pequeño debajo del título.

Colores

Aquí puedes utilizar los selectores de color para decidir qué color quieres utilizar en el creador de escenas. Simplemente haz clic en "Cambiar color" para abrir estos selectores. El cuadro de la derecha mostrará el color actual elegido. Veremos que podemos arrastrar para conseguir lo que queremos, e incluso ajustar la opacidad de cada elemento.

  • Color de fondo - Color sobre la imagen de fondo. Si desea un color de fondo sólido, puede mover este deslizador de opacidad hasta el 100%. También puede moverlo hasta el 0% para no tener ningún color en la parte superior.
  • Color de acento - Se utiliza en todo el diseño. Por defecto es amarillo en los bordes de las etiquetas, para los iconos de las redes sociales y los bordes, y el borde de la agenda también.
  • Color del marco - El color del marco.
  • Color del texto primario y secundario - Cambia los distintos colores del texto.
  • Fondos de contenido - Colores detrás de nuestra etiqueta, medios sociales y áreas de programación. De nuevo, puedes ajustar el nivel de opacidad si lo deseas.

Uso del selector de color

Etiquetas

Hay un máximo de cuatro etiquetas que puedes mostrar a la vez con el creador de escenas. Cada una te permitirá cambiar el mensaje del encabezado. Por ejemplo, puedes cambiar "Nuevo seguidor" por "Último seguidor" o el mensaje que quieras que diga.

  • Mostrar etiquetas - Elija si desea que esta sección se muestre o no.
  • Encabezados de etiqueta - El nombre de cada sección de la etiqueta. Por ejemplo, "Seguidor reciente", "Consejo principal", "Último sub".
  • Rutas de etiquetas - Nombre del archivo de texto a importar en la escena. Coincide con los nombres de los archivos de texto del programa Muxy Ticker o StreamLabs transmisiónLabel.

Etiquetas de apoyo

Puede ocultar cualquier etiqueta simplemente dejando el área de la cabecera de cada una en blanco. Recomiendo encarecidamente que sólo se utilicen los archivos de texto que proporcionan un único nombre de usuario, los que normalmente tendrías desplazados no funcionarán bien aquí.

Horario

El sistema de escenas incorpora una pantalla de programación animada. Si no tiene un horario establecido, puede utilizar la visualización de horario para ocultar esta área por completo.

Visualización de horarios animados incorporada

Aquí podrás establecer tus horarios para cada día de la semana. Digamos que usted no transmisiónlos domingos y miércoles, simplemente cambie el texto para decir "Off" o algo así. Simplemente cambia el cuadro de texto para cada día, para que se muestre en tu escena.

Escala

Esto le permitirá aumentar o disminuir el tamaño de cada sección. Simplemente mueva el deslizador para cada sección respectiva que desee cambiar. Es posible que tengas que esperar a que se muestren las áreas de programación o de redes sociales para ver los cambios que estás haciendo.

Fuentes

Esta sección le permite establecer los distintos tipos de letra que se van a utilizar, así como ajustar sus tamaños de letra más y sus posiciones verticales.

  • Fuente principal - La fuente principal de la escena.
  • Fuente secundaria - La fuente secundaria en la escena.
  • Deslizadores de tamaño - Cambia el tamaño de la fuente para cada sección respectiva.
  • Desplazamiento vertical - Cambia la posición vertical de cada sección respectiva.

Para utilizar los selectores de fuentes, haz clic en "Buscar" y se te presentarán todas las fuentes que ofrece Google Fonts, por las que puedes desplazarte. Para limitar las cosas, puedes utilizar los botones de categoría para seleccionar los tipos de fuentes que te gustaría utilizar.

Opciones de fuentes

Si estás un poco abrumado por la cantidad de fuentes que se encuentran en el creador de escenas, puedes consultar https://fonts.google.com/ para ver el directorio completo de fuentes disponibles. Contiene las fuentes destacadas y las más populares, lo que facilita la navegación. Después, sólo tienes que volver al generador de configuraciones y buscar el nombre de la fuente que te gustaría utilizar. Yo buscaré Oswald, que es una fuente que ya he utilizado antes, la seleccionaré y haré clic en cerrar.

Cuenta atrás

La cuenta atrás está integrada en el creador de escenas y es perfecta para las escenas de introducción. ¡Deje que su público entre antes de hacer su saludo oficial!

  • Mostrar cuenta atrás - Muestra u oculta la cuenta atrás. Algunas escenas pueden no requerir una cuenta atrás.
  • Tiempo de la cuentaatrás - Tiempo, en minutos, de la cuenta atrás para durar.
  • Mensaje - Mensaje mostrado mientras la cuenta atrás está activa.
  • Mensaje de finalización - Mensaje mostrado cuando la cuenta atrás termina.

Cuenta atrás

Medios de comunicación social

Por último, tenemos la sección de redes sociales. ¡Esta sección tiene animaciones incorporadas y ayudará a que tus espectadores se conecten contigo en Twitter, Facebook, Instagram y YouTube!

  • Mostrar Social - Mostrar u ocultar estas animaciones.
  • Nombre de la red - El nombre de sus medios para cada red respectiva.
  • Encabezados de red - El encabezado que le gustaría mostrar encima de cada red respectiva. Por ejemplo, "Sígueme en Twitter".

Ventana emergente animada para redes sociales

Puedes ocultar redes específicas poniendo en blanco los cuadros de texto de las ventanas emergentes de las redes sociales que no quieras mostrar.

Añadir en su archivo de configuración

Haz clic en el botón de descarga para guardar nuestros ajustes. Si quieres hacer archivos de configuración adicionales para futuras escenas, puedes hacerlo editando de nuevo, y haciendo clic en descargar cuando hayas terminado.

Terminemos con esta escena. Ahora que su archivo de configuración se ha descargado. Necesitarás colocarlo dentro de la carpeta de ajustes. Este archivo debe ser el único archivo ubicado aquí. Su nombre completo es settings.js - asegúrate de que el archivo se llame así cuando lo coloques aquí. A veces, si descargas varios archivos, tu ordenador añadirá un número al final del nombre del archivo, como settings (1). Para utilizar el archivo de configuración en nuestras escenas, tendríamos que eliminar el (1) y asegurarnos de que el archivo se llama simplemente configuración.

Archivo de configuración en la carpeta adecuada

Cómo añadir tu escena a OBS u otro software de streaming

Añade tu escena en OBS, o cualquier programa de streaming que utilices, para que podamos ver que todo está funcionando hasta ahora. Para OBS, vamos a añadir en una fuente del navegador. Querremos añadir un Archivo Local, y luego pulsar el navegador para seleccionar el archivo scene.html que encontraremos en la carpeta "SceneMaker".

Cómo añadir una escena a la OBS

Ajuste el ancho a 1920 y el alto a 1080. Si quieres, puedes marcar "Apagar la fuente cuando no sea visible". Asegúrese de que "Actualizar el navegador cuando la escena se activa" está marcada. Una vez que le des a OK, deberías ver tu diseño hasta el momento.

Ajustes adicionales para la OBS

Vinculación de los archivos de texto de las etiquetas

Para enlazar correctamente nuestro StreamLabs transmisiónLabel, los archivos de texto de Muxy Ticker, o cualquier otro programa que puedas utilizar para generar archivos de texto en tu ordenador, necesitamos enlazar las cosas correctamente. La carpeta "Text Files" tiene que ser almacenada en tu carpeta principal, y será utilizada para sacar tus últimos seguidores, tippers, y subs directamente en la escena. Así que para ser claros, mi carpeta "transmisiónResources" tiene la carpeta "TextFiles" y "SceneMaker" en ella actualmente. Esto nos permitirá utilizar la carpeta de archivos de texto para múltiples escenas que podemos crear más tarde.

El siguiente paso es opcional, y sólo es necesario si quieres que tu escena muestre tus seguidores de transmisiónautomáticamente - así que si no planeas que se muestren tus últimos seguidores o tu top tipper en tu escena, o quizás no quieres mover tus archivos de texto de donde están guardados actualmente, entonces puedes saltarte el paso. Todo lo que tenemos que hacer es configurar las etiquetas de transmisiónLab's transmisióno el ticker de Muxy para guardar los archivos en la carpeta "Text Files".

Colocación correcta de los archivos de texto

Repasemos rápidamente los pasos para cada programa. Recuerde, si ya utiliza estos programas, tendrá que ir a su programa de streaming y actualizar las rutas de los archivos a sus archivos de texto adecuados, o no se mostrarán - ya que se moverán y no se actualizarán.

Con las etiquetas de StreamLabs transmisión

En el caso de transmisiónLabels, abrirá el programa, iniciará la sesión y hará clic en "cambiar el directorio de salida". A continuación, simplemente seleccione la carpeta "TextFiles". Todos sus archivos se moverán ahora a esta carpeta. Puede volver a entrar en el generador de ajustes y actualizar los nombres de las rutas de los archivos si es necesario.

Recuerda, si actualizas tu archivo settings.js, que sólo hay un archivo en la carpeta settings con el nombre adecuado.

Con el Muxy Ticker

Con el Muxy Ticker, simplemente inicia sesión, haz clic en la pestaña de configuración y luego en el directorio de archivos. Navega hasta donde está guardada tu carpeta "TextFiles" y selecciona esa carpeta y pulsa "seleccionar carpeta".

Archivos de texto con Muxy Ticker

Es posible añadir vítores a través de Muxy Ticker. Tendrás que añadir /cheer/TheNameOfTheFile . Así, la porra más reciente usando Muxy Ticker, se verá como /cheer/most_recent_cheerer en la ruta del generador de ajustes.

De nuevo, si actualizas tu archivo settings.js, que sólo haya un archivo en la carpeta settings con el nombre adecuado.

Sustitución de la imagen de fondo o del vídeo y del logotipo/imagen de marca

Imagen o vídeo de fondo

Ve a la carpeta "Escena" y ahora a la carpeta "Fondos". Aquí, usted tendrá que poner la imagen O el vídeo que desea utilizar. También puede utilizar un color de fondo sólido si lo desea - como se muestra en la parte de cambio de color. En esta carpeta he incluido una imagen por defecto llamada bg.jpg y un vídeo llamado bg.mp4. Si no desea utilizar esta imagen o vídeo, simplemente elimínelos. Ahora, tienes que colocar tu propia imagen de fondo o vídeo.

Recomiendo encarecidamente utilizar uno que tenga un tamaño de 1920 píxeles de ancho y 1080 píxeles de alto, de lo contrario podría ver alguna distorsión o sesgo de la imagen/vídeo cuando se ponga en el creador de escenas. Todo lo que tienes que hacer es asegurarte de que tu imagen o vídeo tiene el nombre de "bg", y funcionará. Las imágenes aceptarán .pngs y .jpgs, los vídeos funcionarán con .mp4s y .oggs. Digamos que quieres usar un jpg, asegúrate de que se llama bg.jpg y es el único archivo en esta carpeta. Para un vídeo que es un .mp4 se llamaría bg.mp4 y se pondría en esta carpeta.

Cambiar las imágenes o vídeos de fondo

Como alternativa, podría eliminar todas las imágenes y vídeos de la carpeta de fondo y, a continuación, simplemente añadir su imagen de fondo o lista de reproducción de vídeo en OBS directamente. Sin embargo, no obtendrías el efecto de desenfoque de fondo sin añadirle un filtro en OBS Studio.

Por ejemplo, si eliminas las imágenes de fondo por completo, podrías poner la captura de tu juego detrás de esta escena en OBS, y crear un genial superposiciónmientras esperas a que aparezca una cola.

Logotipo/imagen de marca

Para el logotipo o la imagen de marca, se aplica el mismo tipo de proceso de pensamiento. De nuevo, si no quieres añadir una imagen aquí, no tienes que hacerlo. Vayamos a la carpeta "Logo" y coloquemos el logotipo que deseamos utilizar, que deberá ser un archivo .png. Hay muchos convertidores de imágenes en línea, como TinyPng, y recomiendo imágenes de mayor resolución. En torno a la marca de 1000 píxeles por 1000 píxeles.

Creación de escenas múltiples/diferentes

Ahora puedes actualizar por última vez y ver tu escena en todo su esplendor. Tómate un momento para comprobar que todo se ve bien. Vamos a hablar de lo fácil que será hacer múltiples escenas ahora.

Para ello, todo lo que tienes que hacer es ir a la carpeta principal, copiar y pegar la carpeta "SceneMaker". Puedes renombrar esta carpeta como quieras. Por ejemplo, yo la llamaré "BRB". Ahora, simplemente actualiza la configuración según sea necesario - tal vez quieras que el título y el subtítulo digan un mensaje diferente. Tal vez no quieras que la cuenta atrás se muestre aquí.

Creación de nuevas escenas

Descargue, y luego tome el nuevo archivo de configuración y colóquelo en la carpeta de configuración de su nueva escena. Sólo asegúrate de anular el archivo antiguo si está allí. Asegúrese de que el archivo se llama "ajustes" y no algo como ajustes (1) o (2).

Acabando

Este es un post bastante largo, pero de nuevo, esto es algo en lo que hemos puesto mucho trabajo. Queremos que usted tenga tantas opciones como sea posible para que pueda personalizar esto a sus necesidades. Si te gusta este tipo de producto, házmelo saber compartiendo o comentando.

Si este tipo de cosas son populares, estaré encantado de hacer más como esta, e incluso mejores en el futuro.

Entradas de tendencia

Los mejores paneles gratuitos de Twitch

Twitch Paneles gratuitos - Creador y plantillas

Cree los paneles de Twitch o descargue una de nuestras plantillas gratuitas. Personaliza tu...


179 Comentarios16 minutos

FreeTwitchPanels

Twitch Paneles gratuitos y guía de instalación

Estoy encantado de publicar otro recurso gratuito para todos los streamers de Twitch ...


78 Comentarios4 minutos

SocialMediaPopupForTwitch

Ventana emergente animada de medios sociales para Twitch, Hitbox, o YouTube transmisión

Esta guía le mostrará cómo añadir una ventana emergente animada de medios sociales de gran aspecto...


24 Comentarios8 minutos

Ir al blog