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)):
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/image-18.png?resize=360%2C162&ssl=1)
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.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-12.png?resize=404%2C208&ssl=1)
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.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-13.png?resize=346%2C159&ssl=1)
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
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-15.png?resize=367%2C297&ssl=1)
Ahora pulsamos en Apply y salimos del editor
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-16.png?resize=399%2C100&ssl=1)
Podemos verificar que se ha separado en el propio visor de Sprites (Assets > Sprites) dónde teníamos la imagen original.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-17.png?resize=725%2C175&ssl=1)
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
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-18.png?resize=643%2C406&ssl=1)
Ahora, para dibujar el suelo en la superficie, abrimos la pestaña de las opciones superiores de Unity Window > 2D > Tile Palette
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-19.png?resize=372%2C457&ssl=1)
Se abrirá el editor Tile Palette
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-20.png?resize=283%2C451&ssl=1)
Pulsamos en Create New Palette, ponemos el nombre que queramos y dejamos el resto de campos por defecto.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-21.png?resize=349%2C217&ssl=1)
Pulsamos en Create y elegimos la ruta para guardarlo, en este caso vamos a crear o elegir una carpeta llamada tiles (Assets > Tiles).
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-23.png?resize=531%2C158&ssl=1)
Y podremos ver nuestro elemento dentro de esta carpeta Assets > Tiles.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-24.png?resize=258%2C159&ssl=1)
Ahora abrimos la carpeta Assets > Sprites y arrastramos tiles_packed al editor de la derecha Tile Palette
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-25.png?resize=527%2C345&ssl=1)
Volverá a preguntar dónde queremos guardarlo y volvemos a elegir la carpeta Assets > Tiles.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-26.png?resize=398%2C232&ssl=1)
Una vez guardado, ya tenemos creada la paleta generada con nuestra imagen de suelo.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-27.png?resize=237%2C384&ssl=1)
Ahora volvemos a Hierachy y seleccionamos el elemento que hemos creado anteriormente (dentro de Grid), yo lo he renombrado como Suelo.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-28.png?resize=363%2C258&ssl=1)
Una vez seleccionado, podemos pintarlo utilizando la paleta creada.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-29.png?resize=501%2C144&ssl=1)
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-30.png?resize=275%2C345&ssl=1)
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.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-31.png?resize=374%2C211&ssl=1)
Ahora elegimos en Pixels Per Unit: 16
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-32.png?resize=338%2C380&ssl=1)
Y de esta forma los elementos ya se quedan en tamaño de la pantalla.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/07/imagen-33.png?resize=434%2C274&ssl=1)
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2022/02/img.png?resize=100%2C100&ssl=1)
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.