29.- Iniciando con el mundo 2d de Unity


Los Sprites son imágenes especiales para juegos y se caracterizan por tener un fondo transparente.

El formato mas popular para Sprites es el PNG, lo puede reconocer por tener un fondo cuadriculado.

Un poco de historia...
El término Sprite viene de la palabra "Duende", desde los tiempos de los arcade en los 80s y 90s se conocia como SpriteSheet al archivo digital grabado en una memoria ROM con los dibujos pixeleados de los duendes, el término se amplió para llamar Sprite a cualquier imagen de juego.

Para probar el diseño 2D en Unity iniciamos con otro proyecto.

Iniciando%202D-Esfera-Azul

Nuevo proyecto 2D:

Creamos un nuevo proyecto: Unity 2D test, con la opción 2D.

Proyect-New-Proyect



La principal diferencia de los juegos 2D no consideran el eje de profundidad Z, todo se encuentra en Z=0 y los objetos se mueven en X,Y.

2D-View



Seleccione 2D en Scene:

En Game seleccione la relación 16:9:

Al iniciar como proyecto 2D la cámara de juego tiene proyección tipo Orthografic para 2D, ahora el tamaño de la pantalla de juego se controla con el parámetro “Size” y no con la lejanía de una cámara 3D con perspectiva.

Observe el área de la cámara corresponde con la pantalla game.

2D-Escena-Relacion%2016-9-Unity-Viewport



Descargando Sprites 2D:


Para hacer pruebas con el motor de físicas 2D ocupamos Sprites (imágenes para juegos)...

Cuidando el orden del proyecto creamos una carpeta My sprites para guardar los archivos.

2D-Creando-Mi-Carpeta-Mis-Sprites



Entramos a Google para buscar la imagen de una pelota en formato PNG y las guardamos directamente en la carpeta My sprites.

2D-Google-Descargando-Sprites



Antes de continuar es posible que en la ventana Game se vea el Skybox por defecto de Unity, por tratarse de un proyecto 2D es conveniente eliminarlo y usar otro fondo.

En el menú Window -> Rendering –> Lighting -> Casilla: Skybox Material

2D-Unity-Poner-Skybox-Window-Lightingd



Seleccione la opción None, no queremos Skybox.

Es importante quitar el Skybox del mundo 3d, estamos en 2d y se ve muy extraño un cielo de ese tipo.

2D-Unity-Poner-Skybox-Window-Skybox-Material



Con nuestra pelota en la carpeta My sprites la convertimos en Sprite (2D and UI).

Es importante entender que la transparencia del PNG permite que Unity pueda dar forma al colisionador.

Seleccione la pelota y arrástrela a la escena, si no puede arrastrarla a escena es porque aún no la convierte en Sprite, cuando son Sprites aparece un triángulo al lado izquierdo de la imagen.

2D-Unity-Poner-Transparencia-2D-Sprite



Para el caso de los Sprites debemos agregar los colisionadores manualmente, no es como las esferas y cubos que ya tienen colisionador integrado.

Con su pelota seleccionada nos vamos al menú de Component -> Physics 2D -> Circle Collider

Puede ver como se agrega el colisionador verde tratando de respetar el radio de la pelota, si no se ajusta puede modificar el radio y el centro para que coincida con el Sprite.

2D-Unity-Poner-Box-Collider-2D-Pared



Para tener un piso donde colisione nuestra pelota buscamos en Google una imagen de pared o muro. Cuando son imágenes cuadradas se pueden usar formatos JPG.

Repetimos el mismo proceso de convertir a Sprite 2D y la arrastramos abajo la pelota…

Con nuestra pared (wall) en escena le agregamos un Box Collider 2D, en este caso no ocupamos Rigidbody, será una pared fija.

2D-Unity-Descargar-Sprite-Muro



Por ahora tenemos dos objetos con colisionadores solamente, al simular con Play no pasa nada, ocupamos físicas.

Seleccione sólo su pelota y agrege un Rigidbody 2d con masa de 1 kg.

Component -> Physics -> Rigidbody 2D

Importante: ¡El Sprite wall no lleva Rigidbody!, es sólo una pared fija en el mundo 2d.

2D-Unity-Box-Collider-2D-Check

Al ejecutar debe ver como cae la pelota...

"Bienvenido a las físicas 2d en Unity".

Ahora probemos imágenes irregulares, "ni cuadradas ni redondas".

2D-Unity-Blue-Ball-Play-Collision



Entramos a Google y buscamos una imagen PNG con forma de gancho (Letra J), aplicaremos el Polygon Collider 2D.

La arrastramos a la escena y asignamos el Polygon Collider 2D, Unity forma el “campo de fuerza” basado en su transparencia.

Acomode y escale la J como un columpio para la pelota, no debe poner Rigidbody.

Importante: La imagen debe tener fondo transparente, sea PNG o GIF.

2D-Unity-Descargar-J-Sprite



Al ejecutar la pelota debe caer siguiendo la ruta del Polygon Collider 2D...

Formas irregulares como letras, estrellas o rocas nos abren muchas posibilidades para juegos 2D, es importante no poner efectos de brillo o sombra en los contornos para ayudar a Unity a formar el colisionador 2D.

Muy bien, en el siguiente tema entenderemos sobre los controles UI (botones, textos, etc).


Siguiente: 30.- Controles UI de Unity con eventos
Tutoriales Tecno Trainer Unity-C#-3dsmax

2D-Unity-J-Sprite-Play-Test