Este tutorial ofrece dos métodos posibles para animar un sprite para que mire y "camine" en la dirección en la que se mueve. El primer método funciona tanto para los sprites controlados por el jugador como para los no controlados por el jugador, mientras que el segundo sólo funciona para un sprite controlado por el jugador, pero parece un poco más suave en algunas circunstancias. Este tutorial fue hecho con Construct 2 Release 108.2, 64-bit.
Primero, necesitarás un sprite animado de algún tipo. En este tutorial, estoy usando el spritesheet de abajo, hecho por Holder of Holder's Animated Battlers.
Para importarlo a Construct 2, haz clic con el botón derecho del ratón en el lienzo, selecciona "Insertar nuevo objeto", elige "Sprite" y, a continuación, vuelve a hacer clic en el lienzo. (Si tienes problemas con esto, probablemente deberías volver y hacer the beginner's tutorial.)
Aparecerá un editor de imágenes con una imagen en blanco, y en la parte inferior habrá una ventana llamada "Marcos de Animación (1)". Haga clic con el botón derecho en esta ventana y seleccione "Importar tira de sprites...".
En el siguiente cuadro de diálogo, tendrás que introducir el número de columnas y filas en la hoja de sprites que estés usando. En este caso, hay tres columnas y cuatro filas.
Ahora tienes una animación de 13 fotogramas - los 12 fotogramas de la hoja de sprites, más el fotograma en blanco con el que empezaste. Haga clic con el botón secundario en el marco en blanco para eliminarlo.
Debe de asegurarse de que las animaciones se ejecuten en bucle de forma continua, en lugar de que se reproduzcan una sola vez y luego se detengan. En "Propiedades", en la esquina superior izquierda, ajuste "Bucle" a "Sí".
Estos doce cuadros están pensados para formar cuatro animaciones diferentes: tres cuadros para caminar hacia abajo, tres para caminar hacia la izquierda, tres para caminar hacia la derecha y tres para caminar hacia arriba. Pero ahora mismo, todos ellos forman una larga animación, titulada "Default":
Por lo tanto, es necesario dividirlos en animaciones separadas. La forma más fácil de hacerlo es duplicar la animación cuatro veces y borrar los fotogramas innecesarios de cada una:
(Es mejor ponerle un título a cada animación que sea fácil de recordar - como puedes ver, acabo de usar "WalkUp", "WalkLeft", "WalkDown" y "WalkRight").
Sus animaciones finales para caminar deben tener tres cuadros cada una, así:
hora que tiene preparadas las animaciones itinerantes, necesita hacer las animaciones de parada. Duplica las cuatro animaciones de nuevo, nombrándolas "StandUp", "StandLeft", "StandDown" y "StandRight". A continuación, borre el primer y último fotograma de cada uno, dejando sólo el fotograma de pie central.
Mientras tanto, vuelva atrás y edite la animación "Default" para que sea idéntica a la animación "StandDown". Es decir, borra todos los cuadros excepto el de estar parado y mirar hacia adelante. Tu sprite comenzará en esta posición.
Ahora tienes todas las animaciones que necesitas - es hora de ponerlas en uso. Cierre la ventana de edición y cambie el nombre de su sprite "PlayerAnimations".
Ahora haz clic derecho en algún lugar de tu lienzo y crea otro sprite. Déjalo en blanco y ponle el título de "Reproductor".
El sprite de PlayerAnimations tiene 64x64 píxeles. Cambie el tamaño de su nuevo sprite Player al mismo tamaño bajo "Propiedades" en la esquina superior izquierda.
oma nota de la posición del sprite de tu jugador; este está en 456, 324. Haz clic en tu sprite PlayerAnimations y colócalo en la misma posición, de forma que se superpongan.
Ahora necesitas conectar el sprite de PlayerAnimations al sprite del Player, usando el comportamiento "Pin". (Usted hace esto en lugar de simplemente controlar el sprite de PlayerAnimations para hacer las colisiones un poco más predecibles; hay explicaciones más profundas elsewhere.) Haz clic con el botón derecho en PlayerAnimations en la barra lateral, luego haz clic en "Behaviors..."
Añada el comportamiento del Pin.
Ahora cierre el diálogo de Comportamientos y haga clic en la pestaña Hoja de Eventos en la parte superior de su pantalla. Allí, haz clic en "Add event."
Selecciona "System" en el mensaje que aparece.
A continuación, seleccione "On start of layout." Este evento ejecuta una acción inmediatamente cuando se carga el diseño (es decir, cuando comienza el juego).
De vuelta en la Hoja de Eventos, seleccione "Add action"en el evento que acaba de crear.
Selecciona el sprite PlayerAnimations.
Luego "Pin to object."
Haga clic en el botón etiquetado "<pick to choose>", y luego seleccione el sprite del reproductor.
Ahora puedes decirle al sprite del reproductor que responda a las órdenes del reproductor. Bajo "Objects", right click "Player" y seleccione "Behaviors..."
Añada el comportamiento "8 Direction" behavior.Esto le dice a tu sprite que se mueva cuando el jugador golpea las teclas de flechas.
Si intentas jugar al juego ahora, tu sprite actuará de forma un poco extraña, girará en función de la dirección en la que se esté moviendo y podrá moverse en diagonal, algo para lo que no tenemos animaciones.
Para solucionar esto, necesitamos hacer algunos cambios en los ajustes de la barra de herramientas de la izquierda: En "8 Directions," cambie "Set angle" a "No," y establecer "Directions" a "4 directions."
Ahora tu sprite se moverá más predeciblemente, pero aún así no será animado. Para activar las animaciones, necesitamos volver a la Hoja de Eventos y crear dos grupos de nuevos eventos.
El primer grupo debe activarse cuando el sprite del reproductor está en movimiento. Cree un nuevo evento, seleccione Player, y luego seleccione "Is moving" debajo de "8 Direction."
Construct 2 no rastrea en qué dirección se movió por última vez tu sprite. Debido a esto, necesitarás crear una variable de instancia para que el sprite del reproductor la use para rastrear esto, para que pueda recordar en qué dirección debe estar cuando deje de moverse. Si no lo haces, siempre dejará de mirar en la misma dirección, lo cual no quieres.
Para crear la variable, seleccione el icono Player sprite en Objects menu y click "Instance variables..."
Luego cree una nueva variable de instancia haciendo clic en el botón "+" en la esquina superior izquierda del diálogo. Asigne un nombre a la variable "Direction," y establezca el tipo a "Text."
Haga clic con el botón derecho del ratón en el nuevo evento que creó hace un minuto y seleccione "Add" >> "Add sub-event (s)".
Seleccione "System" >> "Compare two values."
Lo que estás haciendo aquí es, cada vez que el sprite está en movimiento, comprobar cada "tick" -es decir, comprobar una y otra vez cada segundo- para ver en qué dirección se está moviendo el sprite, y guardar esa dirección en la variable que acabamos de crear.
Un sprite con movimiento de 8 direcciones habilitado almacena su dirección actual en su variable 8Direction.MovingAngle. En este caso, como estás trabajando con el sprite del reproductor, la variable que queremos se llama Player.8Direction.MovingAngle. Ese es tu primer valor.
La dirección se almacena como un ángulo, en grados. Debido a que limitaste tu sprite a un movimiento en 4 direcciones, sólo hay 4 ángulos posibles: -90 para arriba, 180 para la izquierda, 90 para abajo, y 0 para la derecha.
En este subevento, comprobaremos si el sprite está subiendo. Entonces, nuestro segundo valor es -90.
Si el sprite se está moviendo hacia arriba, tiene que establecer su variable Direction instance en "Up". Para su acción, diríjase a la siguiente dirección "Player" >> "Set value".
E ingresar "Up" (entre comillas) como un valor.
Cree tres subeventos más haciendo lo mismo con las otras tres direcciones.
Finalmente hemos llegado al paso en el que realmente animamos el sprite. Cree otro nuevo sub-event, "Player" >> "Compare instance variable".
Ingrese "Up" como valor. Este evento comprueba si el sprite se está moviendo hacia arriba.
Si es así, queremos reproducir la animación "WalkUp". Para la acción, vaya a "PlayerAnimations" >> "Set animation."
Ingrese "WalkUp" como unaanimación.
Haga lo mismo para las otras tres direcciones.
Si intentas jugar el juego ahora, tu sprite será animado - pero hay un problema. Cuando deja de moverse, sigue caminando en su lugar. Para que se detenga, necesitamos crear un nuevo grupo de eventos, separado del que acabamos de crear.
Haga clic en "Añadir evento" y vaya a "Player" >> "Se está moviendo", como antes. A continuación, haga clic con el botón derecho en el nuevo evento y seleccione "Invertir". Esto le indica al grupo de eventos que debería ejecutarse sólo cuando el sprite del reproductor no se mueve.
Como antes, crea un subevento que compruebe la dirección del sprite seleccionando "Add" >> "Add sub-event (s)" >> "Player" >> "Compare instance variable," e ingrese "Up" como valor.
Para la acción, vaya a "PlayerAnimations" >> "Set animation" e introduzca "StandUp".
Y luego haz lo mismo con las otras tres animaciones de pie.
Esto es para lo que creaste esa variable de instancia en primer lugar: cuando un sprite deja de moverse, 8Direction.MovingAngle siempre se resetea a 0, lo que significa que si sólo lo usas para decirle al juego qué animación usar, el sprite detenido siempre estará mirando hacia la derecha. Si Scirra cambia esto, este tutorial será mucho más corto. (Si añaden soporte nativo para el cambio de animaciones basado en la dirección del movimiento, por supuesto desaparecerá por completo.
Si ejecuta el juego ahora, su sprite debe caminar y detenerse en cuatro direcciones de una manera bastante suave. Pero añadamos un obstáculo y veamos cómo se comporta en caso de colisión. Añade otro sprite nuevo, usa el cubo de pintura para pintarlo de cualquier otro color que no sea el blanco, y asígnale el comportamiento "Sólido".
Ahora ejecuta el juego de nuevo y trata de ejecutar tu sprite en él desde cada dirección. Notarás que tiembla un poco como si estuviera pasando por diferentes animaciones; a veces incluso puede girar en una dirección diferente y detenerse ahí.
Si creas una pantalla HUD para mostrarte el MovingAngle del sprite, verás que al colisionar se moverá a través de varios números. No estoy seguro de por qué debería ser así, y espero que Scirra lo arregle en un futuro lanzamiento, pero por el momento es un poco molesto.
La ventaja de usar este método de animación es que funciona tanto para los sprites controlados por el jugador como para los enemigos u otros sprites no jugadores en movimiento. Sin embargo, después de experimentar un poco, he determinado que puedes conseguir un movimiento ligeramente más suave para los sprites controlados por el jugador añadiendo un objeto de teclado al juego:
Y luego cambiar este bloque de eventos:
Con este:
De nuevo, no estoy muy seguro de cuál es la diferencia, pero hacerlo así no parece causar que el sprite de pie tartamudee o se dé la vuelta.
Otra cosa que puede notar con ambos métodos es que, si le da al sprite del reproductor el comportamiento "Ligado al diseño" y lo camina hacia el borde del diseño, seguirá caminando en su lugar. Sin embargo, esto se fija fácilmente colocando sprites colisionables a lo largo de los bordes del mapa.
Puede descargar un archivo ZIP que contiene archivos de muestra completos que muestran ambos métodos here. Los archivos incluyen un poco de HUD que muestra cómo Player.8Direction.MovingAngle y Player. Cambio de dirección a medida que el sprite se mueve.
Si alguien tiene alguna idea de cómo solucionar el problema de las fluctuaciones, por favor comente aquí y háganoslo saber.
(2015/10/13: Added another copy of CAPX files.)