Hola qu茅 tal?
Hello everyone!
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.
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.
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.
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.
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
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 |
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
The event sheets in Construct allow us to add codes, events, conditions, etc... This is where we will bring our character to life.
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. |
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. |
With all these conditions we have finished with the basic animations. We can test the animations...
Este es el resultado.
This is the result.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.
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
Software:
- Construct 3 engine.
- Adobe Illustrator
- Camtasia
漏 2021 - oscarcc89