Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Art Effects
Gamedevelopment

Cómo generar efectos de relámpagos 2D sorprendentemente buenos

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Lightning tiene muchos usos en los juegos, desde el ambiente de fondo durante una tormenta hasta los devastadores ataques de un hechicero. En este tutorial, explicaré cómo generar genialmente impresionantes efectos de relámpago 2D: pernos, ramas e incluso texto.

Nota: Aunque este tutorial está escrito usando C # y XNA, debería ser capaz de usar las mismas técnicas y conceptos en casi cualquier entorno de desarrollo de juegos.Vista previa del video final


Vista previa del video


Paso 1: Dibuje una línea brillante

El bloque de construcción básico que necesitamos para hacer un rayo es un segmento de línea. Empiece abriendo su software de edición de imágenes favorito y dibujando una línea recta de rayos. Aquí está como se ve el mío:

Line Segment

Queremos dibujar líneas de diferentes longitudes, por lo que vamos a cortar el segmento de línea en tres piezas como se muestra a continuación. Esto nos permitirá estirar el segmento medio a cualquier longitud que nos guste. Puesto que vamos a estar estirando el segmento medio, podemos guardarlo como sólo un píxel de espesor. Además, como las piezas izquierda y derecha son imágenes especulares entre sí, sólo necesitamos guardar una de ellas. Podemos voltearlo en el código.

Divided Line Segment

Ahora, vamos a declarar una nueva clase para manejar segmentos de línea de dibujo:

A y B son puntos finales de la línea. Mediante el escalado y la rotación de las piezas de la línea, podemos dibujar una línea de cualquier grosor, longitud y orientación. Agregue el siguiente método Draw() a la clase de línea Line :

Aquí, Art.LightningSegment y Art.HalfCircle son variables estáticas Texture2D que contienen las imágenes de las piezas del segmento de línea. ImageThickness se establece en el grosor de la línea sin el resplandor. En mi imagen, son 8 píxeles. Se establece el origen de la tapa a la derecha, y el origen del segmento medio a su lado izquierdo. Esto hará que se unan perfectamente cuando los dibujamos en el punto A. El segmento medio se estira al ancho deseado, y otro tapón se dibuja en el punto B, girado 180 °.

La clase SpriteBatch de XNA le permite pasarle un SpriteSortMode en su constructor, que indica el orden en el que debe dibujar los sprites. Cuando dibuja la línea, asegúrese de pasarle un SpriteBatch con su SpriteSortMode establecido en SpriteSortMode.Texture. Esto es para mejorar el rendimiento.

Las tarjetas gráficas son excelentes para dibujar la misma textura muchas veces. Sin embargo, cada vez que cambiar texturas, hay gastos generales. Si dibujamos un montón de líneas sin clasificar, estaríamos dibujando nuestras texturas en este orden:

LightningSegment, HalfCircle, HalfCircle, LightningSegment, HalfCircle, HalfCircle, ...

Esto significa que estaríamos cambiando las texturas dos veces por cada línea que dibujemos. SpriteSortMode.Texture le dice a SpriteBatch que ordene las llamadas de Draw() por textura para que todos los LightningSegments se dibujen juntos y todos los HalfCircles se dibujen juntos. Además, cuando usamos estas líneas para hacer rayos, nos gustaría usar la mezcla aditiva para hacer que la luz de las piezas superpuestas de relámpagos se suman.


Paso 2: Líneas dentadas

El rayo tiende a formar líneas dentadas, así que necesitaremos un algoritmo para generar estas. Haremos esto escogiendo puntos al azar a lo largo de una línea, y desplazándolos a una distancia aleatoria de la línea. Usando un desplazamiento completamente aleatorio tiende a hacer la línea demasiado irregular, por lo que vamos a suavizar los resultados mediante la limitación de la distancia entre sí puntos vecinos pueden ser desplazados.

Making Jagged Lines

La línea se suaviza colocando puntos en un desplazamiento similar al punto anterior; esto permite que la línea en su conjunto pasee hacia arriba y hacia abajo, evitando que cualquier parte de ella sea demasiado dentada. Aquí está el código:

El código puede parecer un poco intimidante, pero no es tan malo una vez que entienda la lógica. Comenzamos calculando los vectores normales y tangentes de la línea, junto con la longitud. Entonces elegimos aleatoriamente un número de posiciones a lo largo de la línea y las guardamos en nuestra lista de posiciones. Las posiciones se escalan entre 0 y 1 tal que 0 representa el comienzo de la línea y 1 representa el punto final. Estas posiciones se clasifican entonces para permitirnos agregar fácilmente segmentos de línea entre ellos.

El bucle pasa a través de los puntos elegidos al azar y los desplaza a lo largo de la normal por una cantidad aleatoria. El factor de escala está ahí para evitar ángulos demasiado agudos, y el sobre asegura que el rayo realmente va al punto de destino limitando el desplazamiento cuando estamos cerca del final.

Lightning Bolt

Paso 3: Animación

El relámpago debe destellar brillantemente y luego apagarse. Para manejar esto, vamos a crear una clase LightningBolt.

Para usar esto, simplemente cree un nuevo LightningBolt y llame a Update() y Draw() cada frame. Llamar a Update() hace que se desvanezca. IsComplete le dirá cuándo el perno se ha desvanecido completamente.

Ahora puede dibujar sus pernos usando el siguiente código en su clase de juego:


Paso 4: Rayo de la rama

Puede utilizar la clase LightningBolt como un bloque de construcción para crear efectos de relámpago más interesantes. Por ejemplo, puede hacer que los pernos se ramifiquen como se muestra a continuación:

Brand Lightning

Para hacer la rama del rayo, elegimos puntos aleatorios a lo largo del rayo y agregamos nuevos tornillos que se ramifican fuera de estos puntos. En el siguiente código, creamos entre tres y seis ramas que se separan del perno principal en ángulos de 30 °.


Paso 5: Texto relámpago

A continuación se muestra un video de otro efecto que puedes hacer de los rayos:

Primero tenemos que obtener los píxeles en el texto que nos gustaría dibujar. Hacemos esto dibujando nuestro texto a un RenderTarget2D y leyendo los datos de píxeles con RenderTarget2D.GetData<T>(). Si desea leer más acerca de cómo hacer efectos de partículas de texto, tengo un tutorial más detallado aquí.

Almacenamos las coordenadas de los píxeles en el texto como una lista List<Vector2>. Entonces, cada marco, elegimos al azar pares de estos puntos y creamos un relámpago entre ellos. Queremos diseñarlo de tal manera que cuanto más cerca estén los dos puntos entre sí, mayor será la probabilidad de que creemos un cerrojo entre ellos. Hay una técnica simple que podemos utilizar para lograr esto: seleccionaremos el primer punto al azar y luego seleccionaremos un número fijo de otros puntos al azar y elegiremos el más cercano.

El número de puntos candidatos que probamos afectará la apariencia del texto del relámpago; comprobar un mayor número de puntos nos permitirá encontrar puntos muy cercanos para atraer a los pernos, lo que hará que el texto sea muy limpio y legible, pero con menos rayos largos entre las letras. Los números más pequeños harán que el texto del rayo parezca más loco pero menos legible.


Paso 6: Optimización

El texto relámpago, como se muestra arriba, puede funcionar sin problemas si usted tiene una computadora en la parte superior de la línea, pero sin duda es muy gravoso. Cada perno dura más de 30 cuadros, y creamos docenas de pernos nuevos cada marco. Dado que cada rayo puede tener hasta un par de cientos de segmentos de línea, y cada segmento de línea tiene tres piezas, terminamos dibujando un montón de sprites. Mi demo, por ejemplo, extrae más de 25.000 imágenes de cada fotograma con las optimizaciones desactivadas. Podemos hacerlo mejor.

En lugar de dibujar cada perno hasta que se desvanece, podemos dibujar cada perno nuevo a un objetivo de renderizado y atenuar el render target cada marco. Esto significa que, en vez de tener que dibujar cada perno para 30 o más marcos, sólo lo dibujamos una vez. También significa que no hay costo de rendimiento adicional para hacer que nuestros rayos se desvanezcan más lentamente y duren más.

Primero, modificaremos la clase LightningText para dibujar solo cada perno para un fotograma. En su clase de juego Game , declare dos variables RenderTarget2D: currentFrame y lastFrame. En LoadContent(),  inicialízalos de la siguiente manera:

Observe que el formato de la superficie se establece en HdrBlendable. HDR significa High Dynamic Range, e indica que nuestra superficie HDR puede representar una gama más amplia de colores. Esto es necesario porque permite que el destino de render tenga colores que son más brillantes que blanco. Cuando varios rayos se superponen, necesitamos que el objetivo de procesamiento almacene la suma completa de sus colores, lo que puede aumentar más allá del rango de colores estándar. Mientras que estos colores brillantes-que-blancos seguirán siendo mostrados como blanco en la pantalla, es importante para almacenar su brillo completo con el fin de hacer que se funden correctamente.

Consejo XNA: Tenga en cuenta también que para que la mezcla HDR funcione, debe establecer el perfil de proyecto XNA en Hi-Def. Puede hacerlo haciendo clic con el botón derecho del ratón en el proyecto en el explorador de soluciones, eligiendo propiedades y luego eligiendo el perfil de alta definición en la pestaña XNA de Game Studio.

Cada trama, dibujamos primero el contenido del último cuadro al marco actual, pero ligeramente oscurecido. A continuación, agregamos los tornillos recién creados al marco actual. Finalmente, renderizamos nuestro marco actual a la pantalla y luego cambiamos los dos objetivos de render para que para nuestro próximo fotograma, lastFrame haga referencia al fotograma que acabamos de representar.


Paso 7: Otras Variaciones

Hemos discutido la posibilidad de hacer relámpagos de ramas y relámpagos, pero éstos no son los únicos efectos que puedes hacer. Echemos un vistazo a un par de otras variaciones sobre el relámpago que puede manera de utilizar.

Relámpagos en movimiento

A menudo, es posible que desee hacer un rayo de movimiento. Puede hacerlo añadiendo un nuevo perno corto cada marco en el punto final del rayo del frame anterior.

Relámpago liso

Usted puede haber notado que el relámpago brilla más brillante en las articulaciones. Esto se debe a la mezcla aditiva. Usted puede desear una mirada más lisa, más uniforme para su relámpago. Esto puede lograrse cambiando su función de estado de mezcla para elegir el valor máximo de los colores de origen y de destino, como se muestra a continuación.

A continuación, en su función Draw(), llame a SpriteBatch.Begin() con maxBlend como BlendState en lugar de BlendState.Additive. Las imágenes de abajo muestran la diferencia entre mezcla aditiva y mezcla máxima en un rayo.

Additive Blending
Max Blending

Por supuesto, la mezcla máxima no permitirá que la luz de múltiples tornillos o desde el fondo para sumarse bien. Si desea que el perno se vea suave, pero también se mezcle de forma aditiva con otros tornillos, primero puede convertir el tornillo en un destino de renderizado utilizando la mezcla máxima y, a continuación, dibujar el destino de renderización en la pantalla utilizando mezcla aditiva. Tenga cuidado de no utilizar demasiados objetivos de render grandes, ya que esto dañará el rendimiento.

Otra alternativa, que funcionará mejor para un gran número de pernos, es eliminar el resplandor incorporado en las imágenes del segmento de línea y volver a añadirlo usando un efecto de resplandor post-procesamiento. Los detalles del uso de shaders y efectos de resplandor están más allá del alcance de este tutorial, pero puede utilizar el XNA Bloom Sample para empezar. Esta técnica no requerirá más objetivos de renderización a medida que añada más.


Conclusión

Relámpago es un gran efecto especial para arreglar sus juegos. Los efectos descritos en este tutorial son un buen punto de partida, pero ciertamente no es todo lo que puedes hacer con los rayos. ¡Con un poco de imaginación puedes hacer todo tipo de impresionantes efectos de relámpagos! Descargue el código fuente y experimente con el suyo propio.

Si disfrutó de este artículo, eche un vistazo a mi tutorial sobre los efectos de agua 2D, también.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.