Vista previa del material en texto
Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 1 Programación de Video Juegos con Unity. Nivel Avanzado. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 2 Módulo 2: Estética y Finalizado Unidad 4: Unity 2D Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 3 Presentación: Antes de dar por terminado el curso, vale la pena ver las herramientas de Unity que nos permiten hacer juegos completamente diferentes, se trata de las herramientas 2D. Se le ha dedicado una sola unidad a este sistema, porque hoy en día, en realidad, el 2D no existe, no es más que 2D simulado por 3D, por lo que hay muy pocos cambios sobre lo que ya hicimos. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 4 Objetivos: Que los participantes sean capaces de: Importar gráficos 2D y animarlos. Utilizar el sistema de físicas 2D. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 5 Bloques temáticos: Gráficos 2D. Físicas 2D, Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 6 Consignas para el aprendizaje colaborativo En esta Unidad los participantes se encontrarán con diferentes tipos de actividades que, en el marco de los fundamentos del MEC*, los referenciarán a tres comunidades de aprendizaje, que pondremos en funcionamiento en esta instancia de formación, a los efectos de aprovecharlas pedagógicamente: Los foros proactivos asociados a cada una de las unidades. La Web 2.0. Los contextos de desempeño de los participantes. Es importante que todos los participantes realicen algunas de las actividades sugeridas y compartan en los foros los resultados obtenidos. Además, también se propondrán reflexiones, notas especiales y vinculaciones a bibliografía y sitios web. El carácter constructivista y colaborativo del MEC nos exige que todas las actividades realizadas por los participantes sean compartidas en los foros. * El MEC es el modelo de E-learning colaborativo de nuestro Centro. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 7 Tomen nota: Las actividades son opcionales y pueden realizarse en forma individual, pero siempre es deseable que se las realice en equipo, con la finalidad de estimular y favorecer el trabajo colaborativo y el aprendizaje entre pares. Tenga en cuenta que, si bien las actividades son opcionales, su realización es de vital importancia para el logro de los objetivos de aprendizaje de esta instancia de formación. Si su tiempo no le permite realizar todas las actividades, por lo menos realice alguna, es fundamental que lo haga. Si cada uno de los participantes realiza alguna, el foro, que es una instancia clave en este tipo de cursos, tendrá una actividad muy enriquecedora. Asimismo, también tengan en cuenta cuando trabajen en la Web, que en ella hay de todo, cosas excelentes, muy buenas, buenas, regulares, malas y muy malas. Por eso, es necesario aplicar filtros críticos para que las investigaciones y búsquedas se encaminen a la excelencia. Si tienen dudas con alguno de los datos recolectados, no dejen de consultar al profesor-tutor. También aprovechen en el foro proactivo las opiniones de sus compañeros de curso y colegas. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 8 Gráficos 2D Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 9 Vuelven los Sprites A la hora de hablar de gráficos 2D en Unity, lo primero que vamos a ver es que hay muy pocas diferentes con lo que ya vimos, de hecho, en parte, ya vimos algo de 2D. Cuando importamos Sprites en el sistema de GUI, también importamos Sprites para el sistema 2D, por lo que repasemos un poco el proceso. Sprites Los gráficos 3D vienen con imágenes conocidas como Texturas. Son imágenes especialmente pensadas para aplicarse a modelos 3D, por lo que tienen configuraciones para esta función. De la misma forma las imágenes para 2D se conocen como Sprites y también tienen configuraciones especiales. A la hora de importar una imagen pensada para ser utilizada de forma 2D tenemos que configurarla de tal forma. Importar una imagen para ser utilizada como Sprite se hace de la forma que importamos cualquier otro asset, o bajando una imagen del Asset Store o arrastrándola a Unity desde el Explorador de Windows. Como detalle extra también podemos importar assets haciendo clic en “Assets -> Import New Asset” y buscando el archivo desde la ventana que aparece. Luego tenemos que seleccionar la imagen y cambiar la propiedad “Texture Type” a “Sprite (2D and UI)” Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 10 Optimizando la resolución de los Sprites Una configuración que vale la pena destacar es “Max Size”, la cual sirve para especificar la resolución máxima de la textura. Si especificamos un tamaño inferior al original, la textura se va a achicar, ocupando menos espacio. En cambio, sí seleccionamos más grande, la textura no se va a agrandar, por lo que no se agrega más detalle, ya que no se le puede agregar detalle a un original. También esta propiedad tiene un solo valor a pesar de que una textura tiene 2 dimensiones, esto debiéndose a que Unity siempre trata de hacer que las texturas sean cuadradas, lo cual optimiza a nivel placa de video. Esta configuración está disponible para cualquier imagen, no solo Sprites. Esta propiedad está debajo de la barra de selección de plataforma, lo que implica que podemos tener la misma imagen para usar en diferentes plataformas con diferentes resoluciones. Por ejemplo, PC es una plataforma que suele usar pantallas de más de 15 pulgadas, mientras que en celulares Android no suelen superar las 5 pulgadas. El logo del juego en PC se va a ver grande, mientras que en Android mucho más chico. Con esta configuración podemos hacer que el juego en Android pese menos ya que el mismo puede tener texturas más chicas que en PC. También habría que tener en cuenta los DPI. Optimizando la cantidad de Sprites con Atlas Otra forma de mejorar la performance del juego a la hora de usar gráficos 2D es reduciendo la cantidad de Sprites. Esto no implica que tenemos que bajar la cantidad de gráficos que podemos usar, sino la cantidad de assets. La pregunta sería, ¿Cómo hacer para usar menos assets, sin usar menos gráficos?, ello se resuelve con Atlas. Un Atlas (o Spritesheet) es simplemente una imagen que tiene muchas. Si tenemos una imagen por cada parte de una animación podríamos tener demasiadas, en vez de ello se pueden juntar en una sola (si entran). Esta forma de trabajar se debe a un tecnicismo de cómo funciona la placa de video, el cuál dice que cuantasmenos texturas mejor. Un detalle a tener en cuenta es qué a la hora de juntar imágenes en atlas, hay que pensar muy bien como agruparlas. Si tenemos dos animaciones diferentes que no se usan en un mismo nivel, conviene combinarlas por separado. Esto se debe a que, si estuviesen en una sola imagen, tendríamos que tenerla cargada entera, por lo que estuviésemos ocupando memoria en algo que no vamos a utilizar, y puede ser mucha si las animaciones son detalladas. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 11 Importar un Atlas Si nosotros creamos nuestro atlas o conseguimos uno de internet, a la hora de importarlo a Unity tenemos que cambiar el “Sprite Mode” al modo “Multiple”, así indicándole a Unity que es un Atlas. Luego tenemos que “cortar” el Sprite en sus partes, esto pudiéndose lograr haciendo clic en el botón “Sprite Editor”, la cual muestra la ventana de Sprites. Esta nos permite cortar la imagen simplemente haciendo clic y arrastrando el cursor para señalar crear rectángulo de corte. Luego podemos modificarlo arrastrándolo para moverlo, o moviendo los bordes azules para cambiar su tamaño, teniendo cuidado de no mover los puntos verdes (más adelante). Otra opción es especificar a mano la posición y tamaño con el panel debajo a la derecha. Si movieron los puntos verdes aquí mismo pueden modificar la propiedad Border y poner 0 en cada coordenada. Por último, se puede eliminar el corte apretando el botón “Delete” del teclado. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 12 El problema de esta forma es que es manual y tedioso. Hay situaciones las cuales vamos a desear tener control, pero hay formas de automatizar el proceso. Primero se puede hacer clic en el botón Slice arriba a la izquierda, y con la propiedad Type en Automatic hacemos clic en el botón Slice, lo cual detecta los cortes en base a la transparencia de la imagen, siempre y cuando la imagen posea transparencias. Otra forma es cambiar el Type a “Grid by Cell Size” o “Grid by Cell Count”, para Atlas en forma de grilla. Con Grid by Cell Size en la propiedad Pixel Size podemos especificar el tamaño de cada fila y columna, o en Grid by Cell Count la cantidad de filas y columnas. En ambos casos la propiedad offset sirve para mover los cortes y Padding sirve para agregarles separación. Generar un Atlas Unity generar automáticamente un Atlas, juntando las imágenes que tengan el mismo Packing Tag. Por ejemplo, si tenemos 3 imágenes, en vez de juntarlas a mano desde un programa externo, podemos ponerle el mismo Tag y así Unity se encarga de ello. De esta forma si el artista quiere cambiar el tamaño de una parte no tiene que reorganizar todas las partes para aprovechar el espacio, cosa que le llevaría mucho tiempo. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 13 Para ver los atlas generados forma podemos ir “Window -> Sprite Packer” y hacer clic en el botón “Pack”. Luego de ello vemos en el menú View Atlas la lista de todos los atlas generados y sus páginas, ya que un atlas no tiene que exceder cierta resolución, por lo que los que no entraron en uno, se parten en varias páginas. A la hora de terminar el juego, no hace falta hacer clic en el botón Pack, ya que Unity automáticamente empaqueta a la hora de hacer el ejecutable. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 14 Ejercicio N°1 Buscar dos imágenes de personajes que tengan varias partes (buscar “game spritesheet”), una que esté en forma de grilla y una que no. Cortar con los modos Automatic y Grid según el tipo de imagen. Buscar imágenes de botones (“buttons”), ventanas (“Windows”) y barras de vida (“life bar”) por separado. Asignarles un “Packing Tag” en común y verificar que esté correctamente generado en la ventana del Packer. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 15 Bordes de Sprite En su momento hablamos de imágenes de 9 cortes, las cuales en su momento solamente servían para UI, pero en las nuevas versiones de Unity que se están a punto de lanzar a la fecha de la redacción de esta unidad, se anunció que también va a servir para Unity 2D, por lo que repasemos un poco el tema. Las Imágenes de 9 cortes son imágenes que pueden ser cortadas en 9, cada parte perteneciendo a diferentes partes del Sprite. Como vemos en la imagen superior, las esquinas de la imagen no se escalan, o sea, mantienen su tamaño, mientras que los bordes horizontales y verticales entre estas esquinas se estiran en ancho y alto respectivamente, y el centro se estira tanto en ancho como en alto. Esto hace que una sola imagen defina los bordes, esquinas y fondo de un Sprite, y que según como cortemos la imagen, Unity automáticamente sepa cómo adaptar la imagen a su tamaño. Para cortar un Sprite tenemos que seleccionar la imagen, hacer clic en el botón “Sprite Editor” y dentro del Sprite arrastramos los puntos verdes para que aparezcan unos bordes verdes los cuales delimitan los 9 cortes de la imagen. Esta técnica en el mundo 2D quizás no tenga un uso tan claro, y de todas formas todavía no está presente en las versiones actuales de Unity, pero hay que prepararnos para su futuro uso. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 16 Mostrando el Sprite Para renderizar un modelo 3D teníamos el componente MeshRenderer, el cual toma de sus propiedades un material y del MeshFilter el mesh a dibujar, para finalmente mostrarlo en la posición, rotación y escala que dice el transform. Así como tenemos un MeshRenderer, existe un SpriteRenderer, el cual claramente se encarga de dibujar Sprites en la pantalla. El SpriteRenderer internamente no hace más que dibujar una geometría 3D plana que está en el Sprite, la cual tiene el mapeado UV preparado para capturar la parte que deseamos mostrar en el Sprite, o sea, dibuja el Sprite con 3D. Esto implica podemos mover, rotar y escalar un objeto 2D en los 3 ejes, ya que en realidad es 3D. Para comenzar a usarlo simplemente creamos un objeto vacío y le agregamos el componente SpriteRenderer, o lo creamos armado en “GameObject -> 2D -> Sprite”. Luego simplemente seleccionamos el Sprite en la propiedad Sprite del SpriteRenderer. La mayoría de las propiedades se describen a sí mismas, Color cambia el color del Sprite, Flip invierte al Sprite en x o y. El material que viene por defecto “Sprites-Default” es un material que no aplica textura, ya que ello lo hace la propiedad Sprite, pero define que el objeto no va a ser afectado por una luz. En caso de querer ello se puede crear un material con el shader “Sprites/Diffuse”, pero la mayoría de los juegos 2D no requieren ello. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 17 Ejercicio N°2 Crear un objeto 2D tinteado de rojo, con un material “Sprites/Diffuse” y que esté invertido en el eje X (sin escalar).Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 18 Cámara 2D Ya que los objetos 2D no son más que objetos 3D planos, la cámara va a dibujarlos como cualquier otro objeto 3D. El problema reside en que los objetos 3D tienen un tipo de cámara en la cual los objetos se ven chicos o grandes según la distancia, y los que se ven en los bordes de la pantalla sufren de una deformación, debido a la perspectiva. Si bien ello puede llegar a ser algo deseado, la mayoría de los juegos 2D poseen otra cámara. Para configurar la cámara en modo 2D hay que cambiar la propiedad Proyection de la cámara al modo “Orthographic”. Dicho modo evita deformaciones y cambios de tamaño por distancias con la cámara por el modo de perspectiva. Este modo es el que se utiliza en los juegos con la famosa perspectiva Isométrica. Como vemos, en vez de ver el Frustrum de la cámara en forma de pirámide, lo vemos en forma rectangular, especificando que los objetos lejanos se van a ver al mismo tamaño, cosa que en un mundo 3D puede ser extraño. De este modo podemos configurar la cámara de forma tal que mire de frente a los Sprites, en la rotación deseada, y habría que asegurarse de que la cámara mire paralelo a un plano, o sea, que no tenga rotaciones que no sean múltiplos de 90 grados. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 19 Ejercicio N°3 Configurar una cámara en modo 2D, hacer que mire de arriba hacia abajo. Crear objetos 2D, y posicionarlos y rotarlos de forma que la cámara los vea. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 20 Orden de dibujado Los objetos 3D cercanos a la cámara se ven sobre los lejanos como funcionaría en la vida real, y esto sigue siendo válido para los objetos 2D. Podemos ordenar cual se dibuja delante de cual, en base a su distancia con la cámara, pero solamente se tiene en cuenta el pivot. Esto implica que dependiendo de la rotación de la cámara esto puede variar. En el caso de la primera imagen el Mario azul, por la rotación de la cámara, tiene el pivot más cerca de la misma, pero en la segunda esto cambio por la posición de la cámara, los objetos están en la misma posición en ambas imágenes. Por lo general no vamos a rotar mucho la cámara en un juego 2D, pero hay situaciones en las cuales vamos a querer forzar a que un grupo de objetos esté sobre otros independientemente de la profundidad, posición y rotación de la cámara. La primera forma de forzar el orden es con la propiedad “Order In Layer”, la cual indica que objeto se tiene que dibujar encima de cual según un número. En la primera imagen vemos que el Mario azul claramente está más adelante que el Mario rojo, pero cuando vemos los objetos con la cámara desde atrás, vemos que el Mario azul sigue viéndose sobre el otro Mario, ya que tiene un valor más alto en la propiedad. Con esta herramienta logramos nuestro cometido, pero hay una forma más sofisticada y controlable de lograr esto, con los Sorting Layers. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 21 El problema que tiene la solución anterior es que hay que tener un buen control sobre el valor de dicha propiedad, y es muy fácil olvidarse por cual número de profundidad se va contando. Otro problema es que a la hora de cambiar de profundidad muchos objetos es un trabajo difícil re ordenar una gran cantidad de objetos, cambiando sus números. Los Sorting Layers usan el mismo concepto de los Layers, son grupos de objetos, solo que esta vez su propósito es guardar grupos para su fácil reordenamiento de profundidad. Para cambiarlo podemos ir a la propiedad Sorting Layer del SpriteRenderer y seleccionar el correspondiente, y en caso de no haber, podemos hacer clic en “Add Sorting Layer”, para crear nuevos layers. En este caso podemos fácilmente cambiar el orden de los layers arrastrándolos uno encima de otro desde el editor de Layers. De esta forma podemos organizar los objetos que siempre están detrás de todo con un layer “Fondo”, los objetos del juego en otro, y los que siempre van sobre los objetos de juego con otro layer. En caso de querer cambiar dicho orden tan solo movemos los layers y ya. La propiedad Order In Layer en este caso actúa para ordenar los objetos de un Layer, pero por más que un objeto que está en el layer de fondo tenga un valor grande en esta propiedad, solo va a servir para hacer que este delante de todos los objetos de ese layer, nunca encima de otros. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 22 Ejercicio N°4 Crear dos Sorting Layers llamados “Fondo” y “Frente” Agregar un fondo al layer fondo y en frente dos Sprites de personajes Ubicar los personajes detrás del fondo y ver como se siguen dibujando sobre los otros objetos. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 23 Animaciones En 3D vimos que para animar personajes poseemos un sistema de huesos que aplica la animación, y que dichas animaciones se hacen desde fuera de Unity. Tanto para 2D como para otros usos en general, existe un sistema de animaciones que permite crearla directamente desde Unity. Para el caso de animar personajes 3D no es tan conveniente usarlo, por lo que preferimos hacerlos en un Soft 3D, pero para animaciones más simples se puede utilizar el propio sistema de Unity. El sistema crea clips de animaciones como los que importamos de un modelo 3D. Para ello primero hay que seleccionar y agregar al objeto el componente “Animator”, si es que no lo tiene. Luego abrimos la ventana en “Window -> Animation” (no confundirse con “Animator”) y si nuestro objeto no tiene ninguna animación podemos crear una nueva con el botón Create, el cual nos va a pedir que guardemos la animación primero antes de poder editarla. Si ya tuviésemos una animación, podemos crear una nueva haciendo clic en el nombre de la animación arriba a la izquierda, y seleccionar la opción New. Vemos que automáticamente se le crea un Animator Controller al objeto (si es que no posee ya uno) y dentro están las animaciones creadas. Las animaciones hechas en Unity funcionan igual que cualquier otra, por lo que pueden ser usadas como estados de la máquina de estados del animador, crear transiciones, etc. Para comenzar a editar la animación tenemos primero que especificar qué vamos a animar. Ello se logra haciendo clic en el botón Add Property y seleccionar el objeto, el componente y la propiedad que deseamos animar. Unity permite animar prácticamente cualquier propiedad de cualquier componente, incluyendo números y booleanos. En la imagen debajo podemos hacer clic en el botón “+” al lado de position para animarla. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 24 Recordemos que aquí podemos seleccionar todo tipo de propiedades, por ejemplo, el color del objeto, la velocidad del objeto, la rotación, el nivel de metalicidad,etc. Una vez seleccionadas las propiedades que deseamos animar podemos proceder a animarlas utilizando la línea de tiempos. En todo sistema de animación se crean lo que se conoce como “Key Frames” o “Fotogramas clave”, los cuales indica qué valor tiene una propiedad en un momento determinado. En la imagen vemos que animamos la propiedad position, y vemos que al abrir la propiedad vemos un carril de animación por cada propiedad (X, Y, Z). Sobre cada carril correspondiente a una propiedad en la línea de tiempos, vemos unos rombos, los cuales serían los Key Frames de cada objeto. En este caso tenemos en el segundo 0 la posición en (0,0,0) y en el segundo 1 la posición en (0,5,0). Esto lo logramos seleccionando en la barra de tiempos el segundo en el cual queremos crear un KeyFrame, y luego modificamos el valor de la propiedad en la barra lateral izquierda. Hasta ahora las animaciones que hicimos son muy simples, pero si comenzamos a agregar más Key Frames, empezamos a ver que quizás no nos da el resultado esperado. Nosotros si creamos una animación que en el segundo 0 el objeto este en la posición (0,0,0) en el segundo 1 en (5,0,0) y el segundo 2 en (0,0,0) nuevamente, esperaríamos haber creado un objeto que se mueva a la derecha y vuelve, como rebotando. Si bien ello sería correcto, la animación no sería la que esperamos. Los invito a probar dicha animación ya que es difícil de explicar con palabras el resultado. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 25 Ejercicio N°5 Crear un objeto y agregarle una animación que modifique la posición. Dicha animación debe tener en el segundo 0 la posición en (0,0,0) y en el segundo 1 la posición en (1,1,1,). Ejercicio N°6 Crear un objeto y agregarle una animación que modifique la posición. Dicha animación debe tener en el segundo 0 la posición en (0,0,0) en el segundo 1 en (1,1,1,) y en el segundo 2 en (0,0,0). Ejercicio N°7 Crear un objeto y agregarle una animación que modifique el color (ver dentro de MeshRenderer o SpriteRenderer). Dicha animación debe tener en el segundo 0 el color en (1,1,1,0) y en el segundo 1 en (1,1,1,0). Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 26 Controlando la interpolación Como vieron en la animación anteriormente mencionada, el objeto rebota, pero como que va frenando a medida que se aproxima a (5,0,0) y después vuelve a acelerar para volver. Esto, sin que lo hayamos hecho a propósito, quizás sea el resultado esperado, pero quizás en esta situación hubiésemos querido que no desacelere, sino que mantenga su velocidad constante, haciendo un cambio de dirección brusco, pero deseado. Esa desaceleración se debe a las “Curvas de Interpolación”. La forma en la cual se anima entre Key Frame y Key Frame puede ser controlada por una curva, que indica si la transición es lineal, o sea, con velocidad constante, o no lineal, con velocidad variable. Para poder editar ello tenemos que hacer clic en el botón “Curves” que se encuentra debajo, para cambiar el modo del editor. En dicho modo en vez de ver un carril por cada propiedad, vemos una línea con un color distintivo por cada propiedad, la cual grafica la forma en la cual cada valor se mueve, como cuando se grafica una fórmula matemática. Por suerte editar esta curva no requiere de ningún conocimiento matemático, ya que la misma es una “Curva de Bézier”, un tipo de curvas fácilmente editables. Las curvas siempre se encuentran entre 2 Key Frames (los rombos de colores), y se pueden editar desde ellos. Para ello se puede hacer clic derecho sobre un KeyFrame y seleccionar un modo de interpolación. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 27 Cuando hacemos clic derecho sobre un KeyFrame podemos seleccionar entre las opciones Free, Linear y Constant dentro de las opciones Left, Right y Both Tangents. Con Tangents se refiere a como se va a interpolar hacia la izquierda y hacia la derecha del KeyFrame, por ejemplo, si quisiésemos hacer que no haya decremento de velocidad en nuestra animación, podríamos seleccionar todos los KeyFrames y en Both Tangents (ambas direcciones) seleccionar el modo Linear. Esto hace que la interpolación se vea en forma de línea recta En modo Free nosotros podemos controlar la curvatura a gusto modificando los “Handles” o “Tangents”, esas líneas que salen de los Key Frames cuando están seleccionados. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 28 Ejercicio N°8 Crear una animación de rebote de objetos sin desaceleración Ejercicio N°9 Crear una animación de rebote de objetos en la cual el objeto comience moviéndose lento y acelere a medida que se acerca a (0,5,0) y vuelva primero yendo rápido y luego desacelerando cuando vuelve. Ejercicio N°10 Crear una animación de rebote de objetos en la cual el objeto comience moviéndose rápido y desacelere a medida que se acerca a (0,5,0) y vuelva primero yendo rápido y luego desacelerando cuando vuelve. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 29 Animando Sprites Cuando animamos siempre hablamos de propiedades numéricas, posiciones, rotaciones, colores (4 números), etc., lo cual es muy útil para la mayoría de las situaciones, pero para 2D esto no sirve. A diferencia de las animaciones 3D, en 2D generalmente no tenemos huesos, pero Unity permite animar la propiedad Sprite, del Sprite Renderer, de forma tal que en cada Key Frame, en vez de especificar un número, especificamos un Sprite, de forma tal que podemos poner la sucesión de Sprites de una animación 2D. A la hora de cortar Sprites para este sistema hay que prestar atención al pivot de cada Sprite para que no se mueva el Sprite de lugar mientras se anima. El proceso es muy simple, arrastramos los Sprites de la animación al animador, y a pesar de que no hayamos agregado la propiedad Sprite, automáticamente Unity reconoce que es un Sprite y la agrega. De esa forma vamos agregando en orden los diferentes Sprites. Hay que tener en cuenta que es importante la distancia entre los Sprites, ya que esto define cuanto va a durar un Sprite en pantalla hasta que cambie por el próximo, haciendo que la animación pueda ser muy rápida o muy lenta si no se controla bien. Un detalle a tener en cuenta en todo tipo de animación es que todas loopean por defecto, o sea, se repiten constantemente. Si quisiésemos que esto no pase (ej. la animación de salto) podemos seleccionar el clip de animación y destildar la opción Loop Time. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 30 Ejercicio N°11 Crear una animación de correr de un personaje2D con Sprites. Ejercicio N°12 Crear una animación de salto de un personaje 2D con Sprites, que no loopee. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 31 Huesos de Sprites Recién hablamos de que generalmente las animaciones 2D no poseen huesos, lo que es completamente cierto, pero hay una forma de hacer algo similar. En vez de hacer una imagen por cada pose del personaje, se puede partir al personaje en varias partes, emparentarlas y luego rotarlas y moverlas de una forma tal que simule un sistema de huesos. Esto tiene la ventaja de que se necesitan muchos menos Sprites para hacer una animación, por lo que tenemos más memoria para otras cosas, como más gráficos. Si bien esto suena ideal tiene muchas limitaciones y cuidados a tener en cuenta. Las articulaciones del modelo no deben ser muy obvias ya que se va a notar que están separadas, y no se puede simular rotaciones. Por ejemplo, si estamos en un juego de pelea y queremos que nuestro personaje lance un puñetazo, lo que normalmente sucede es que primero vemos la parte superior del antebrazo, y en el giro terminamos viendo la parte lateral, ya que normalmente gira. Lo mismo sucediese si queremos que el personaje salte en forma de espiral al aire, girando, lo cual no puede hacerse con huesos. La solución que muchos juegos están usando últimamente es una mezcla entre ambos, partes emparentadas y móviles, que a la vez cambian de Sprite cuando es necesario. En el material complementario hay un link a un video sobre cómo se hizo el Rayman Legends, juego 2D de plataformas que usa esta técnica, cuyo atlas figura en la imagen a la derecha. Para lograr este tipo de animaciones en Unity simplemente podemos crear un objeto vacío y dentro emparentar las partes, para luego con el animador poner el cabezal de animación (la línea roja) en un momento dado, mover las partes del objeto para la pose deseada y continuar. Un detalle a tener en cuenta es que probablemente convenga tener un objeto vacío, dentro el cuerpo, dentro del cuerpo los brazos y muslos, dentro de los brazos los ante-brazos, y dentro de ellos las manos. Esto sirve para cuando, por ejemplo, queramos rotar el brazo, y que rote el antebrazo, y con él la mano, como sucedía en 3D. También recordemos el orden de dibujado para ver cuál parte está encima de cual. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 32 Ejercicio N°13 Crear una animación de correr con partes de un personaje. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 33 Físicas 2D Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 34 Colisionando Sprites En el curso inicial vimos cómo utilizar el sistema de físicas 3D, el cual vimos que era muy poderoso. Cuando no existían las herramientas 2D de Unity había que usar, por ejemplo, planos para hacer Sprites, y para las físicas se bloqueaba el eje Z y se utilizaba el sistema 3D. Cuando salieron las herramientas 2D, Unity creó una copia casi exacta del sistema de física, pero para 2D. Por más que el sistema sea casi igual, internamente está hecho de otra forma, para optimizar el hecho de que solo tenemos 2 ejes, y a la vez agregó detalles específicos de este sistema. En este bloque vamos a ver las principales diferencias entre el sistema 3D y 2D. Rigidbody y Colliders 2D El sistema 2D maneja los mismos conceptos que en 3D, poseemos tanto el componente Rigidbody como los colliders para la figura física. A diferencia de los Sprites, las físicas son puramente 2D, por lo que, si rotamos el personaje, vamos a seguir viendo una figura 2D física, pero adaptada a la rotación. Las propiedades son parecidas. Se puede especificar la masa del objeto, aunque también tenemos la capacidad de auto calcularla en base a los colliders, cosa que viene por defecto en el sistema 3D, pero aquí se puede reemplazar por otra a gusto. Linear Drag y Angular Drag sería la fricción con el aire. Gravity Scale permite aumentar o disminuir la gravedad en porcentajes, por lo que 0 sería sin gravedad, y 1 sería 100% (2 seria 200%, etc). Y luego tenemos IsKinematic, para freezar la posición y rotación (con menos ejes claramente). En el caso del Collider también posee casi las mismas configuraciones, a diferencia de Used By Effector, cosa que vamos a ver en un momento. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 35 Colliders 2D Cuando vimos Colliders anteriormente vimos que siempre es conveniente utilizar colliders simples, como el Box, Sphere o Capsule Collider. En caso de 2D tendríamos el Box y Circle Collider, los cuales serían las versiones 2D de Box y Sphere Collider. Pero además de ellas poseemos otros colliders específicamente pensados para el 2D, Edge y Polygon. Edge collider sirve para crear un collider en forma de línea, especialmente pensada para juegos de plataformas (Mario, Sonic, etc). La idea es representar el suelo con una línea que delimita su forma. Lo más interesante es que la forma de la línea se puede editar desde el editor haciendo clic en el botón Edit Collider y desde el panel de Scene mover los puntos de las líneas, o agregar más puntos haciendo clic sobre la línea. Luego tenemos Polygon Collider, que como su nombre lo indica, sirve para hacer una figura poligonal cerrada. Esto es similar al MeshCollider, ya que permite especificar una forma a gusto, con la diferencia de que dicha forma se tiene que editar desde Unity al igual que la línea. Algo interesante de este collider, es que, si lo agregamos a un objeto que ya posee un Sprite en el SpriteRenderer, automáticamente toma la forma del objeto. El detalle que hay que tener en cuenta para ambos colliders es que hay que hacer zoom para que aparezca la opción de agregar un nuevo punto. Esto está pensado para evitar agregar puntos de más, ya que cuanto más detalle tengan los colliders, más costoso es calcular las colisiones. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 36 Ejercicio N°14 Crear un collider para un Sprite de avión utilizando Polygon Collider Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 37 Mover objetos 2D Para mover un objeto 2D podemos usar la misma técnica que utilizamos anteriormente, que sería usar la función Translate del componente Transform en el FixedUpdate para sincronizarnos con el sistema de física, y poner drag infinito, lo cual en este caso limitaría a un máximo de 1.000.000, pero que es suficiente para nuestros propósitos. De todas formas, tanto para 2D como 3D existe otra forma de mover objetos sin utilizar físicas realistas, que es modificando la propiedad Velocity. No hemos utilizando antes esta forma porque es un poco más complicada de manejaren principio. Lo que hace esto es cancelar las fuerzas reemplazando constantemente la velocidad del objeto, para anular cualquier fuerza que recibamos, en vez de anularlas con Drag Infinito. En esencia hacen lo mismo ambas formas, pero mover modificando la velocidad tiene la ventaja de que cuando empuja a otros objetos físicos les aplica una fuerza de choque, en vez de moverlos como hacíamos anteriormente, o sea, es más compatible con objetos que sí poseen física realista. Es importante recordar que en esta situación no hay que poner el drag en infinito, ya que si no se anularía la fuerza que estamos especificando. El otro detalle a tener en cuenta es que esta versión aplica fricción sobre otros objetos, cosa que quizás no sea deseada. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 38 Ejercicio N°15 Crear un componente que mueva a un objeto modificando su velocidad directamente (la del Rigidbody2D). Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 39 Raycast En 2D también existen los Raycasts y demás consultas físicas, y se codifican muy similar al sistema 3D. Una de las diferencias es que en vez de devolver un RaycastHit con un parámetro out, directamente le función retorna, y para ver si choco con algo tenemos que preguntar si el collider es diferente de null. Otro detalle a tener en cuenta es que como la función Raycast no sabe de quien salió el rayo choca con lo primero que encuentra, y como generalmente tiramos el rayo desde la posición del objeto, el rayo va a chocar contra el propio collider. Esto en el mundo 3D no sucedía porque el sistema de física 3D ignora por defecto al collider que está en la posición inicial del rayo, pero para lograr el mismo comportamiento en el sistema 2D debemos configurarlo de tal forma. Para ello vamos a las configuraciones 2D en “Edit -> Project Settings -> Physics 2D”, y destildamos la opción “Queries Start In Colliders”. Vale la pena destacar que en estas configuraciones poseemos algunas de las funcionalidades que teníamos en las configuraciones físicas 3D, como la Layer Collision Matrix, para evitar que objetos de ciertos layers choquen contra otros layers, o también podemos alterar la gravedad. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 40 Ejercicio N°16 Crear un componente que dispare un rayo y elimine el primer objeto que se encuentre a la derecha de un objeto 2D, sin eliminar al propio objeto. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 41 Effectors Un agregado que tiene Unity 2D sobre el sistema 3D son los efectos. Los efectos son colliders configurados de forma tal que, en vez de representar un cuerpo sólido, representan un área. Cuando los objetos entran dentro de dichas áreas, sufren de fuerzas físicas. Con esto podemos representar zonas de viento que empujen al jugador, o agua, el cual sube el jugador hacia la superficie, o también objeto que atraigan y repelan a otros, como si fuesen imanes. Lo primero que hay que hacer es declarar que el collider va a ser un effector en vez de un objeto sólido. Ello lo hacemos tildando la opción “Used By Effector” del collider. También hay que tildar la opción IsTrigger, ya que si no seguiría siendo sólido. Luego, agregamos el tipo de Effector que deseemos agregar, te los cuales tenemos los siguientes 5. Area Effector aplica una fuerza direccional a los objetos que entren dentro del mismo. La dirección de la fuerza es hacia el eje X del objeto (ya que no tenemos Z en 2D). El componente tiene una serie de propiedades las cuales son bastante descriptivas, así que los invito a modificarlas y ver los efectos. Buoyancy effector hace que el área actúe como si fuese agua. La diferencia es que no solo aplica una fuerza para arriba, sino que también puede rotar el objeto, como sucedería cuando cae algo debajo del agua. Point Effector atrae o repele objetos. Atrae cuando la propiedad Force Magnitude es negativa, y repele cuando es positiva. Esto puede servir para simular la gravedad de planetas 2D (como el Angry Birds Space). El Platform Effector sirve para simular plataformas, por lo que en este componente habría que destildar el IsTrigger en el Collider. La diferencia con otros colliders es que tiene un sentido de colisión. Solo se puede colisionar si se viene de arriba, si el objeto viene de abajo lo deja pasar, como sucede en los juegos de plataformas (Sonic). Cual cara se puede pasar y cual no depende de la rotación del objeto. Finalmente tenemos Surface Effector. La idea es que el objeto no se pueda traspasar, pero que aun así aplique una fuerza. Este actúa como si fuese una cinta transportadora o una escalera mecánica. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 42 Ejercicio N°17 Crear un Area Effector y sobre el crear círculos con física que cuando caigan se les aplique el efecto. Ejercicio N°18 Crear un Buoyancy Effector y sobre el crear círculos con física que cuando caigan se les aplique el efecto. Ejercicio N°19 Crear un Point Effector y sobre el crear círculos con física que cuando caigan se les aplique el efecto. Ejercicio N°20 Crear un Platform Effector crear círculos debajo de él que con el componente Constant Force que aplique fuerza hacia arriba. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 43 Ejercicio N°21 Crear un Surface Effector y sobre el crear círculos con física que cuando caigan se les aplique el efecto. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 44 Colisiones y Triggers La última diferencia que vamos a ver es como detectar por código las colisiones. El sistema funciona de la misma forma que el 3D, posee Triggers y Colisiones y se detectan bajo las mismas colisiones (objetos bloqueantes o no bloqueantes). La única diferencia es que tanto los eventos de colisión y trigger, como los Colliders y Collision llevan adelante la palabra 2D, como pasó cuando tiramos el rayo con Physics2D, el cual nos daba un RaycastHit2D. Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 45 Ejercicio N°22 Crear un cuadrado 2D que destruya todo lo que toca tanto en modo Trigger como enmodo Bloqueante (no trigger). Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 46 Bibliografía utilizada y sugerida Recursos Online Videotutoriales de la interfaz de Unity. http://unity3d.com/es/learn/tutorials Videotutoriales de programación de Unity. http://unity3d.com/es/learn/tutorials/topics/scripting Libros y otros manuscritos Creighton, Ryan Henson. Unity 3D Game Development by Example Beginner's Guide. 1° Edición. UK. Packt Publishing. 2010. http://unity3d.com/es/learn/tutorials/topics/scripting Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 47 Lo que vimos: En esta unidad hemos visto: 1. Cómo crear gráficos 2D. 2. Cómo hacer que esos gráficos colisionen Centro de e-Learning SCEU UTN - BA. Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148 www.sceu.frba.utn.edu.ar/e-learning 48 Lo que viene: Luego de esto procederíamos a terminar el módulo 2, y, por último, luego del trabajo práctico de cierre, el curso. Espero que hayan disfrutado y aprendido mucho y que puedan comenzar a materializar todas sus ideas de juegos y simulaciones utilizando esta poderosa herramienta. Obviamente el aprendizaje no termina aquí, de hecho hasta el día de hoy todos seguimos aprendiendo cosas nuevas sobre Unity, pero ahora hace falta poner en práctica real todo esto, haciendo un proyecto a gusto de uno, tomando decisiones a la hora de cómo programar el juego, y aprender cosas nuevas necesarias para avanzar sobre este apasionante mundo. El camino que sigue después de esto no es fácil, pero les aseguro que es muy gratificante. Un gusto haber compartido este curso con ustedes, y espero poder volver a verlos en otra oportunidad como ésta. Saludos!.