Clase 6. Componentes de unty
En primer lugar, y muy en relación con la anterior clase y su contenido extra, os dejo un editor de código on-line.
Ya sabéis que el editor de código que viene por defecto en Unity es visual studio, el cual es de pago.
Hay varias opciones gratuitas,que ya veremos pero hasta entonces si queréis poner en práctica lo aprendido relativo al código o cualquier cosa vuestra, ésta herramienta puede resultaros útil:
Vamos a ir acomodándonos a la interfaz de Unity, así como sus elementos principales o los que más vamos a utilizar:
Dado que queremos una animación, utilizaremos un componente que anime el objeto que tenemos en escena.
Ese componente es el "animator".
Agregar un componente, implica agregar unas propiedades que se encargan de modificar la información de un objeto traído a escena, es decir, necesitamos un objeto, como puede ser un cubo, una esfera, un cuadrado, una imagen o incluso un objeto vacío en el cual iremos metiendo componentes que por ejemplo, muestren una imagen:
2- Podemos traer un cubo 3D por ejemplo, haciendo click derecho en un espacio en blanco en la ventana del Hiterachy /create /objeto 3D.
Otra opción será la de importar a la ventana proyecto nuestro Asset 3D y luego arrastrarlo al Hiterachy (es lo que vamos a hacer con nuestros modelos 3D).
En nuestro caso y al tratarse de un proyecto 2D, buscaremos una imagen cualquiera (las imágenes son planas, es decir, no tienen 3º dimensión, son 2D, por eso son perfectas para éste ejemplo).
Buscaremos en internet. Vamos a poner en google:
"Sprite character 2D".
*Ejemplo:
https://i.pinimg.com/originals/4a/6c/06/4a6c064c30d2346481000e1cf07ce952.png
En el mejor de los casos nos aparecerá una imagen de muchas imágenes de un personaje. Ahora lo explicaremos:
Descargamos en el escritorio e importamos al proyecto, arrastrándola a la pestaña "proyect".
Si ahora arrastramos nuevamente al Hiterachy, tendríamos esa imagen en la escena (antes estaba solo en el proyecto, pero no se veía o no se utilizaba) y por consiguiente, nuestro objeto al que poder agregar componentes.
Pero ¿por qué aparecen muchas imágenes?
Para ello explicaremos como funciona la animación:
Agregar un componente, implica agregar unas propiedades que se encargan de modificar la información de un objeto traído a escena, es decir, necesitamos un objeto, como puede ser un cubo, una esfera, un cuadrado, una imagen o incluso un objeto vacío en el cual iremos metiendo componentes que por ejemplo, muestren una imagen:
2- Podemos traer un cubo 3D por ejemplo, haciendo click derecho en un espacio en blanco en la ventana del Hiterachy /create /objeto 3D.
Otra opción será la de importar a la ventana proyecto nuestro Asset 3D y luego arrastrarlo al Hiterachy (es lo que vamos a hacer con nuestros modelos 3D).
En nuestro caso y al tratarse de un proyecto 2D, buscaremos una imagen cualquiera (las imágenes son planas, es decir, no tienen 3º dimensión, son 2D, por eso son perfectas para éste ejemplo).
Buscaremos en internet. Vamos a poner en google:
"Sprite character 2D".
*Ejemplo:
https://i.pinimg.com/originals/4a/6c/06/4a6c064c30d2346481000e1cf07ce952.png
En el mejor de los casos nos aparecerá una imagen de muchas imágenes de un personaje. Ahora lo explicaremos:
Descargamos en el escritorio e importamos al proyecto, arrastrándola a la pestaña "proyect".
Si ahora arrastramos nuevamente al Hiterachy, tendríamos esa imagen en la escena (antes estaba solo en el proyecto, pero no se veía o no se utilizaba) y por consiguiente, nuestro objeto al que poder agregar componentes.
Pero ¿por qué aparecen muchas imágenes?
Para ello explicaremos como funciona la animación:
3- Como veis son imágenes 2D que al ser pasadas rápidamente, dan la sensación de movimiento. Concretamente, 24 imágenes por segundo, es el mínimo que nuestro ojo necesita para que le de la sensación de movimiento (en el vídeo lo pone a 30 (FPS (frames por segundo)) y en cada uno de esos momentos, una imagen diferente.
Cada una de las imágenes de ese conjunto de imágenes representa cada una de la imágenes que hemos de poner en cada frame para que en un segundo nos de la sensación de que por ejemplo, el personaje anda.
4- La siguiente pregunta es: "¿Cómo hago que esa imagen, conjunto de muchas imágenes, se convierta en un conjunto de imágenes independientes?
Unity tiene una herramienta que afortunadamente reconoce cada una de ésas imágenes, y las separa en diferentes imágenes, consiguiendo exactamente lo que queremos, ¡pero ojo!, esa imágen ha de ser formato "png":
Éste formato, reconoce el color trasnparente, importatísimo para éste proceso, ya que si nuestro fondo es transparente, ésta herramienta, sabrá distinguir entre cada una de los dibujos de las poses del personaje, es decir, cada vez que haya algo no transparente, lo tomará como un nuevo sprite a reconocer.
Si la imágen fuera por ejemplo "jpg" (otro formato de imágen), nada sería trasnparente y por lo tanto, unity tomaría la imágen en su totalidad, como un sprite (los colores trasnparentes, el "jpg" lo traduce como flanco, así que tendríamos un color blanco de fondo)
Para ello, seleccionamos la imagen en la ventana proyect. Ahora en la venta inspector nos sale una opción que nos pregunta si ese sprite es un sprite simple o es múltiple, es decir, contiene muchos sprites (sprite mode).
Seleccionamos múltiple y pulsamos el botón "sprite editor".
En la nueva ventana, pulsamos en "slice", dejamos las opciones tan cual están, Slice de nuevo y apply.
Podemos ahora, dar en la flechita que aparece al lado de la imagen del proyect para ver cada uno de los elementos de los cuales formaba, por separado.
Cada una de las imágenes de ese conjunto de imágenes representa cada una de la imágenes que hemos de poner en cada frame para que en un segundo nos de la sensación de que por ejemplo, el personaje anda.
4- La siguiente pregunta es: "¿Cómo hago que esa imagen, conjunto de muchas imágenes, se convierta en un conjunto de imágenes independientes?
Unity tiene una herramienta que afortunadamente reconoce cada una de ésas imágenes, y las separa en diferentes imágenes, consiguiendo exactamente lo que queremos, ¡pero ojo!, esa imágen ha de ser formato "png":
Éste formato, reconoce el color trasnparente, importatísimo para éste proceso, ya que si nuestro fondo es transparente, ésta herramienta, sabrá distinguir entre cada una de los dibujos de las poses del personaje, es decir, cada vez que haya algo no transparente, lo tomará como un nuevo sprite a reconocer.
Si la imágen fuera por ejemplo "jpg" (otro formato de imágen), nada sería trasnparente y por lo tanto, unity tomaría la imágen en su totalidad, como un sprite (los colores trasnparentes, el "jpg" lo traduce como flanco, así que tendríamos un color blanco de fondo)
Para ello, seleccionamos la imagen en la ventana proyect. Ahora en la venta inspector nos sale una opción que nos pregunta si ese sprite es un sprite simple o es múltiple, es decir, contiene muchos sprites (sprite mode).
Seleccionamos múltiple y pulsamos el botón "sprite editor".
En la nueva ventana, pulsamos en "slice", dejamos las opciones tan cual están, Slice de nuevo y apply.
Podemos ahora, dar en la flechita que aparece al lado de la imagen del proyect para ver cada uno de los elementos de los cuales formaba, por separado.
5- Volvemos a la ventana de proyecto: Click derecho/Create/Animation. Si ese Asset, le agregamos al inspector del objeto que hemos llevado a escena, ya tenemos nuestro componente encargado de animar, en el objeto a animar. Ahora hay que editarlo para que haga el movimiento que queremos.
Otra forma sería, en inspector / add component/buscamos "animator".
Para editarla Window/animation, independientemente de cómo lo hemos creado y con el objeto a animar "Sliceado" seleccionado:
Eso que vemos es una línea de tiempo que por defecto va a animar el objeto que queremos por haberle seleccionado previamente.
Para editarla Window/animation, independientemente de cómo lo hemos creado y con el objeto a animar "Sliceado" seleccionado:
Eso que vemos es una línea de tiempo que por defecto va a animar el objeto que queremos por haberle seleccionado previamente.
6- Arrastramos a la línea de tiempo los sprites encargados de hacer una animación concreta (Seguramente en la imagen que nos hemos descargado y "sliceado", estaba la animación de atacar, andar, correr, etc...).
Se nos han creado unos Keyframes o puntos donde a la animación le pasa algo. Si ahora damos al play de la animation, nos aparece la animación (importante poner el ultimo key frame, idéntico al primero.
Si queremos que la animación vaya más deprisa o más despacio es cuestión de separar o acercar entre sí, los KeyFrames.
7- Una vez puestos los sprites en la línea de tiempo, podemos, siempre y cuando tengamos el botón de grabación activado, cambiar las propiedades de rotación, escala y traslación, moviendo, rotando o escalando en el frame que nosotros queramos, bien de los gizmos que aparecen pulsando los botones de la izquierda o cambiando los parámetros de la ventana inspector una vez seleccionamos el objeto que queremos animar, si no está ya seleccionado, claro está. El animation generará una interpolación entre la posición inicial y la que hemos indicado para generar un movimiento lógico.
8- Por último, seleccionamos la animación en el proyecto y en el isnpector, seleccionamos la opción "loop time" para que genere un loop y no se reproduzca una sola vez.
Se nos han creado unos Keyframes o puntos donde a la animación le pasa algo. Si ahora damos al play de la animation, nos aparece la animación (importante poner el ultimo key frame, idéntico al primero.
Si queremos que la animación vaya más deprisa o más despacio es cuestión de separar o acercar entre sí, los KeyFrames.
7- Una vez puestos los sprites en la línea de tiempo, podemos, siempre y cuando tengamos el botón de grabación activado, cambiar las propiedades de rotación, escala y traslación, moviendo, rotando o escalando en el frame que nosotros queramos, bien de los gizmos que aparecen pulsando los botones de la izquierda o cambiando los parámetros de la ventana inspector una vez seleccionamos el objeto que queremos animar, si no está ya seleccionado, claro está. El animation generará una interpolación entre la posición inicial y la que hemos indicado para generar un movimiento lógico.
8- Por último, seleccionamos la animación en el proyecto y en el isnpector, seleccionamos la opción "loop time" para que genere un loop y no se reproduzca una sola vez.
9- File/Buld setting:
A) Add current --> nos añade la escena en la que estamos trabajando
B) Plataforma PC 64 bits y Build --> indicamos donde lo guardamos. (podemos hacerlo también en Android, instalarlo en el móvil y reproducirlo desde ahí)
A) Add current --> nos añade la escena en la que estamos trabajando
B) Plataforma PC 64 bits y Build --> indicamos donde lo guardamos. (podemos hacerlo también en Android, instalarlo en el móvil y reproducirlo desde ahí)
Tenemos dos posibilidades para conseguirlo
Comentarios
Publicar un comentario