En el post de hoy, os voy a enseñar cómo podemos crear una superficie utilizando Unity.
He utilizado esta imagen que podéis descargar aquí (tiene licencia CC0 Created/distributed by Kenney (www.kenney.nl)):

Vamos a copiar esta imagen .png dentro de la carpeta de Sprites (Assets > Sprites) en nuestro proyecto Unity, si no tenemos la carpeta, la creamos.

Para separar el tile, podemos utilizar el editor de Unity, para ello pulsamos encima de la imagen tiles_packed y en las opciones que aparecen en la derecha pulsamos en Sprite Editor.

Ahora dentro del editor pulsamos en la segunda flecha hacia abajo que aparece al lado de Sprite Editor y seleccionamos:
- Type: grid by cell count
- Colum & Row: C: 19 R: 10
Y pulsamos en Slice

Ahora pulsamos en Apply y salimos del editor

Podemos verificar que se ha separado en el propio visor de Sprites (Assets > Sprites) dónde teníamos la imagen original.

Ahora vamos a colocar la superficie en la escena. Para ello vamos al Hierachy y pulsamos con el botón derecho dentro para crear un nuevo elemento 2D Object > Tilemap > Rectangular

Ahora, para dibujar el suelo en la superficie, abrimos la pestaña de las opciones superiores de Unity Window > 2D > Tile Palette

Se abrirá el editor Tile Palette

Pulsamos en Create New Palette, ponemos el nombre que queramos y dejamos el resto de campos por defecto.

Pulsamos en Create y elegimos la ruta para guardarlo, en este caso vamos a crear o elegir una carpeta llamada tiles (Assets > Tiles).

Y podremos ver nuestro elemento dentro de esta carpeta Assets > Tiles.

Ahora abrimos la carpeta Assets > Sprites y arrastramos tiles_packed al editor de la derecha Tile Palette

Volverá a preguntar dónde queremos guardarlo y volvemos a elegir la carpeta Assets > Tiles.

Una vez guardado, ya tenemos creada la paleta generada con nuestra imagen de suelo.

Ahora volvemos a Hierachy y seleccionamos el elemento que hemos creado anteriormente (dentro de Grid), yo lo he renombrado como Suelo.

Una vez seleccionado, podemos pintarlo utilizando la paleta creada.


Si salen los elementos muy pequeños como los que han salido en mi imagen, podemos hacerlos mas grandes. Para ello volvemos a Assets > Sprites y pulsamos en tiles_packed.

Ahora elegimos en Pixels Per Unit: 16

Y de esta forma los elementos ya se quedan en tamaño de la pantalla.


Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.