👾 Developing a 2D Indie Game in Construct 3 [Character Animation] ...

Hola qué tal?
^{Hello everyone!}

Comenzamos la primera parte del desarrollo de un video juego 2D en Construct. Si quieres saber más sobre que trata este videojuego te invito a que leas la parte introductoria de esta serie.

^{We started the first part of the development of a 2D video game in Construct. If you want to know more about what this game is about, I invite you to read the introductory part of this serie.}

👾 Developing a 2D Indie Game in Construct 3 [Introduction] | Desarrollando un Juego Indie 2D en Construct 3 [Introducción]

Como lo mencioné en el post anterior iniciaremos animando nuestro personaje principal. Para ello se debe tener diseñadas o creadas las animaciones (Sprites) correspondientes.

^{As I mentioned in the previous post, we will start animating our main character. For this, the corresponding animations (Sprites) must be designed or created.}

¿Dónde puedes crear tus animaciones? Puedes usar Adobe Illustrator o Photoshop para hacerlas, pero hay muchos programas donde puedes crear una animación sencilla, incluso Paint de Windows. Tambien puedes encontrar sprites gratuitos en diferentes páginas como Freepik.es.

^{Where can you create your animations? You can use Adobe Illustrator or Photoshop to make them, but there are many programs where you can create a simple animation, even Windows Paint. You can also find free sprites on different pages like Freepik.es.}

Antes de comenzar con nuestro personaje, pondré en la escena un piso donde caminará nuestro personaje y poder realizar las pruebas, si no nuestro personaje caerá al vacío. Para ello, importé un tilemap y de esta forma crearlo rapidamente con la función que trae Construct de creación de mapas.

^{Before starting with our character, I will put in the scene a floor where our character will walk and be able to carry out the tests, otherwise our character will fall into the void. To do this, I imported a tilemap and in this way create it quickly with the Construct function for creating maps.}

Simplemente se selecciona la parte del tilemap que quieres poner en la escena y luego haga clic donde lo quieres posicionar.

^{Simply select the part of the tilemap that you want to put on the scene and then click where you want to position it.}

Una vez creado nuestro piso, insertamos un sprite para importar las animaciones del personaje. ^{Once our floor is created, we insert a sprite to import the character animations.}

Insertando el Personaje - Inserting the Character

Comienzo agregando la animación IDLE, esta animación es cuando el personaje está en reposo. Es una animación simple, pero que le da vida al personaje.

^{I start by adding the IDLE animation, this animation is when the character is at rest. It is a simple animation, but one that brings the character to life.}

Finalmente agrego todas las animaciones, una por una. He agregado las siguientes animaciones: ^{Finally I add all the animations one by one. I have added the following animations:}

IDLE	Run	Died	Hurt
En reposo	Correr	Muerte	Herido

Jump-start	Jump-loop	Fallinw-down	Throwing
Inicio de Salto	En el aire	Cayendo	Lanzar

Slashing	Slashing-air
Ataque con espada	ataque con espada en el aire

Luego de insertar todas las animaciones básicas, agregamos un compartamiento al personaje de Plataforma. Este comportamiento permitirá que el personaje pueda desplazarse hacia a la derecha, izquierda y saltar pero sin animaciones, simplemente será un objeto sin vida.

^{After inserting all the basic animations, we add a share to the Platform character. This behavior will allow the character to move to the right, left and jump but without animations, it will simply be a lifeless object.}

Hoja de Eventos - Configuración del personaje | Event Sheet - Character Settings

Las hojas de eventos en Construct permiten agregar códigos, eventos, condiciones, etc... Aquí es donde le daremos vida a nuestro personaje.

^{The event sheets in Construct allow us to add codes, events, conditions, etc... This is where we will bring our character to life.}

Primero, crearé un grupo llamado Héroe y un subgrupo llamado Movimientos. Los grupos se crean para mantener el orden de los eventos, tambien pueden desactivarse o habilitarse al ejecutar alguna función si ésta es requerida. Por ejemplo, al morir el personaje podemos desactivar el grupo movimiento.

^{First, I will create a group called Hero and a subgroup called Movements. Groups are created to maintain the order of events, they can also be disabled or enabled when executing any function if it is required. For example, when the character dies we can deactivate the movement group.}

A continuación todos los eventos explicados brevemente: ^{Here are all the events briefly explained:}

Eventos en el grupo Heroe - Events in the Heroe group

1. Inserto una función y la llamo 'Salto'. ^{I insert a function and call it 'Jump'.}
Dentro de esta función se ejecutará la animacion 'Jump-Start' y luego 'Jump-loop'. Podrás entenderla mejor más adelante. ^{Within this function the animation 'Jump-Start' and then 'Jump-loop' will be executed. You will be able to understand it better later.}

2. Inserto una función y la llamo 'Slashing-air'. ^{I insert a function and call it 'Slashing-air'.}
Dentro de esta función se ejecutará la animacion 'Jump-Start' y luego 'Slashing-air'. Podrás entenderla mejor más adelante. ^{Within this function the animation 'Jump-Start' and then 'Slashing-air' will be executed. You will be able to understand it better later.}

Dentro del grupo movimiento inserto los siguientes eventos.

^{Within the movement group I insert the following events.}

1. Opciones del Teclado -> inserto el evento 'Al mantener presionada la tecla D'. ^{Keyboard Options -> I insert the event 'By holding down the D key'.}
Dentro de este evento agrego: El personaje simulará desplazarse a la derecha, al mismo tiempo ejecutará la animación 'Run' y no estará reflejado. ^{Within this event I add: The character will simulate moving to the right, at the same time it will execute the 'Run' animation and it will not be reflected.}

1.1 Agrego un SubEvento a las opciones del teclado para crear una condición. Si el personaje está Saltando mientras corre... ^{I add a SubEvent to the keyboard options to create a condition. If the character is Jumping while running ...}
Ejecutará la función 'Salto'.^{It will execute the 'Jump' function.}

1.2 Agrego otro SubEvento a las opciones del teclado para crear una condición. Si el personaje está Cayendo mientras corre...^{I add another SubEvent to the keyboard options to create a condition. If the character is Falling while he runs ...}
Ejecutará la animación 'Falling-Down'. ^{It will run the 'Falling-Down' animation.}

Ahora creo que ya estás entendiendo como funcionan los eventos y condiciones. Haremos los mismo para el lado izquierdo.

^{Now I think you are already understanding how events and conditions work. We will do the same for the left side.}

2. Opciones del Teclado -> inserto el evento 'Al mantener presionada la tecla A'.^{Keyboard Options -> I insert the event 'By holding down the A key'.}
Dentro de este evento agrego: El personaje simulará desplazarse a la izquierda, al mismo tiempo ejecutará la animación 'Run' y estará reflejado. ^{Within this event I add: The character will simulate moving to the left, at the same time it will execute the 'Run' animation and it will be reflected.}

2.1 Agrego un SubEvento a las opciones del teclado para crear una condición. Si el personaje está Saltando mientras corre...^{I add a SubEvent to the keyboard options to create a condition. If the character is Jumping while running ...}
Ejecutará la función 'Salto'.^{It will execute the 'Jump' function.}

2.2 Agrego otro SubEvento a las opciones del teclado para crear una condición. Si el personaje está Cayendo mientras corre...^{I add another SubEvent to the keyboard options to create a condition. If the character is Falling while he runs ...}
Ejecutará la animación 'Falling-Down'. ^{It will run the 'Falling-Down' animation.}

Qué quiere decir está reflejado? Activamos el reflejo para dar la sensación que nuestro personaje se voltea, en realidad simplemente estamos cambiando la orientación de una imagen y reutilizamos la animación.
^{What do you mean is mirrored? We activate the reflection to give the feeling that our character is flipping, in reality we are simply changing the orientation of an image and reusing the animation.}

3. Opciones del Teclado -> inserto el evento 'Al presionar la tecla W'.^{Keyboard Options -> I insert the event 'On pressing the W key'.}
Ejecutará el evento 'Simular Salto'. ^{It will execute the event 'Simulate Jump'.}

3.1 Agrego un SubEvento a las opciones del teclado para crear una condición. Si se hace Clic mientras se haya presionado la tecla W...^{I add a SubEvent to the keyboard options to create a condition. If Click is done while the W key is pressed ...}
Ejecutará la función 'Slashing-air'. ^{It will execute the 'Slashing-air' function.}

4. Evento 'Al saltar' el personaje.^{Event 'When jumping' the character.}	5. Evento 'Al caer' el personaje.^{Event 'When the character falls.}
Ejecutará la función 'Salto'.^{It will execute the 'Jump' function.}	Ejecutará la animación 'Falling-down'. ^{It will run the 'Falling-down' animation.}

6. Evento 'Al detenerse' el personaje.^{Event 'On stopping' the character.}	7. Evento 'Al aterrizar' el personaje.^{Event 'Upon landing' the character.}
Ejecutará la animación 'IDLE'. ^{It will run the 'IDLE' animation.}	Ejecutará la animación 'IDLE'. ^{It will run the 'IDLE' animation.}

8. Evento 'Al hacer clic'.^{'On click' event.}	9. Evento 'Al finalizar animación 'Slashing'.^{Event 'At the end of animation' Slashing '.}
Ejecutará la animación 'Slashing'. ^{It will run the 'Slashing' animation.}	Ejecutará la animación 'IDLE'. ^{It will run the 'IDLE' animation.}

10. Opciones del Teclado -> inserto el evento 'Al presionar la tecla 'E'.^{Keyboard Options -> I insert the event 'On pressing the' E 'key.}
Ejecutará la animación 'Throwing'. ^{It will run the 'Throwing' animation.}

Con todas estas codiciones hemos finalizado con las animaciones básicas. Podemos hacer la prueba de las animaciones...

^{With all these conditions we have finished with the basic animations. We can test the animations...}

Este es el resultado.

This is the result.

No queda nada mal verdad? La animación 'Died' la ejecutaremos cuando el enemigo nos ataque y la vida del personaje llegue a 0. Esto lo explicaré mas adelante.

^{Looks great, right? We will execute the animation 'Died' when the enemy attacks us and the life of the character reaches 0. I will explain this later.}

En la próxima parte animaremos a un enemigo y le insertaremos Inteligencia Artificial (IA) para que nos pueda seguir y atacar si estamos cerca. Por favor, deja tu comentario si te ha gustado este post.

^{In the next part we will animate an enemy and insert Artificial Intelligence (AI) so that it can follow us and attack if we are close. Please leave your comment if you liked this post.}

Gracias por leer! 👾
^{Thank you for reading!}

Links

👾 Developing a 2D Indie Game in Construct 3 [Introduction] | Desarrollando un Juego Indie 2D en Construct 3 [Introducción]

Software:

Construct 3 engine.
Adobe Illustrator
Camtasia

👾 Developing a 2D Indie Game in Construct 3 [Character Animation] | Desarrollando un Juego Indie 2D en Construct 3 [Animación del Personaje] Part.1

Insertando el Personaje - Inserting the Character

Hoja de Eventos - Configuración del personaje | Event Sheet - Character Settings

Eventos en el grupo Heroe - Events in the Heroe group

Dentro del grupo movimiento inserto los siguientes eventos.

Este es el resultado.