banner_post

Generación Procedural o cómo generar escenarios sexys

Querido lector. Si tienes curiosidad de ver cómo las matemáticas pueden ayudar a generar mapas aleatorios tan hermosos como el siguiente, ¡este es tu articulo! Agárrate que vienen curvas.

central-zone-2

En cada partida de Sticks & Stones, los mapas son diferentes, para que el jugador no pueda memorizarlos y haga uso de la habilidad y su experiencia para superarlos. Además, es un juego difícil, donde se repite una y otra vez lo mismo. Por lo tanto, la variedad es una característica esencial en la generación de mapas.

Crear pantallas lo más mutables, bonitas y orgánicas posibles, es una muy buena manera de conseguir esta variedad ¿Pero cómo se puede lograr esto? Con algo llamado generación procedural:

En computación generación procedural es el método de creación de datos con algoritmos en lugar de forma manual

Es decir, que para generar las pantallas es necesario recurrir a las matemáticas y a sus fórmulas. ¡Ah! Las matemáticas… yo siempre me preguntaba de pequeño que para qué diablos sirven las matemáticas en la vida… 😛

Volviendo al tema, para nuestra generación de mapas, hemos usado un algoritmo llamado Perlin Noise. Para entender su funcionamiento, vamos a imaginarnos una onda de radio. Y que mediante 3 parámetros (frecuencia, amplitud y octavas), podemos llegar a cambiar su apariencia. En el siguiente gráfico hay algunos ejemplos visuales:

perlinnoise

  • La frecuencia determina el número de ondas
  • La amplitud determina la altura de las ondas
  • Las octavas determina la suavidad de las ondas

Una vez explicado esto, vayamos a cómo implementar esta onda a nuestra generación de mapas. Para ello, primero vamos a crear celdas con texturas totalmente planas. En nuestro ejemplo vamos a usar un mapa de 3×3.

1

A continuación se genera un Perlin Noise de 3 dimensiones XYZ para cada una de las celdas. Donde la XY son las coordenadas del píxel, y la Z es la ALTURA.

En la siguiente animación tenéis 3 muestras de 3 generaciones distintas de Perlin Noise. Fijaos en lo diferentes que pueden llegar a ser unos mapas de otros. Para facilitar su visualización, se ha establecido una franja de color distinto a cada una de las ALTURAs.

5-7-6

Ahora solo falta establecer una relación entre ALTURATEXTURA. En este caso usamos la misma que utilizan los mapas topográficos,

world_map

Para nuestro ejemplo vamos a usar la siguiente relación:

[∞ .. 300] = Hierba
[0 .. -200] = Tierra
[-500 .. -700] = Tierra con piedras
[-900 .. ∞] = Agua (transparencia del 10%) 

Y estas son las texturas que vamos a usar para la generación:

texturas

Si metemos en una coctelera el Perlin Noise, las franjas de terreno y las texturas, obtenemos este resultado:

5-7-6

Si este proceso lo repetimos, variando únicamente uno de los valores base como puede ser la frecuencia, la amplitud o las octavas, el resultado puede llegar a cambiar bastante.

Amplitud = 1 (menos diferencia entre altura mínima y máxima)

5-1-6

5-1-6

Frecuencia = 1 (espacio entre cambios de altura más espaciados)

1-7-6

1-7-6

Octavas = 1 (transición entre alturas mucho más suavizada)

5-7-1

5-7-1

Mediante este sencillo proceso de configurar un Perlin Noise, estableciendo las franjas de terreno y texturas,  podemos obtener resultados como estos:

magma

meadowsnowedswampdesertwater

Llegados a este punto, lo único que falta por hacer es colocar objetos en el terreno, y para ello volveremos a usar la ALTURA y vincular en este caso OBJETOS (usando un % de aparición).

Veamos un ejemplo:

[∞ .. 500] = Árboles
[500..0] = Plantas, flores
[0 .. -200] = Rocas
[-500 .. -700] = Piedras, árboles secos
[-900 .. ∞] = Juncos

¡¡Y aquí tenéis el resultado!! forest

¿No es fascinante lo natural que parecen los objetos una vez colocados?

La ventaja de configurar todo el escenario en base al concepto de la ALTURA, es que si se desplaza la base de esta ALTURA, el escenario cambia:

forest

Si ahora le aplicamos un efecto de desenfoque en la parte superior e inferior, además de unos bonitos rayos de luz, obtenemos el aspecto que tiene en la actualidad el juego:

central-zone-2

Si te ha gustado el artículo: comenta y comparte.

¡Gracias!

Published by

David Flores

A los 11 años me regalaron un Spectrum ZX 48k y ahí es donde empecé mi relación con los videojuegos. He ido pasando por todas las consolas domésticas hasta la actualidad. Me apasionan los videojuegos, tanto como jugador como diseñador. Actualmente estoy inmerso en el desarrollo de un videojuego para BaseTIS.IO

2 thoughts on “Generación Procedural o cómo generar escenarios sexys”

Leave a Reply

Your email address will not be published. Required fields are marked *