Crear la escena del jugador
Ya realizando la configuración del proyecto, podemos empezar creando la escena del jugador.
La primera escena va a definir el objeto [su_highlight background=»#13150f» color=»#0d68f9″]Player[/su_highlight] las ventajas de crear las escenas por separado es que se pueden probar individualmente, aún sin antes haber creado otras partes del juego.
Estructura de nodos
Para comenzar elegimos un nodo raiz para el objeto del jugador (cada nodo es una Clase), en este caso vamos crear nodo [su_highlight background=»#13150f» color=»#0d68f9″]Area2D[/su_highlight], haz Click en el botón «Otro Nodo» y escoge el mencionado antes.
Cuando se agrega el nodo [su_highlight background=»#13150f» color=»#0d68f9″]Area2D[/su_highlight], Godot mostrara un icono con una advertencia.
La advertencia nos indica que el nodo [su_highlight background=»#13150f» color=»#0d68f9″]Area2D[/su_highlight] requiere una forma de detectar colisiones o superposiciones, por ahora vamos a ignorar la advertencia, ya que primero vamos a configurar las imagenes de nuestro jugador (usando sprite animados). una vez que agreguemos las imagenes, podemos agregar la colisición como un nodo secundario para asi poder ajustar la forma y el tamaño con precisión según la apariencia de nuentro sprite.
Con el nodo [su_highlight background=»#13150f» color=»#0d68f9″]Area2D[/su_highlight] podemos detectar cuando un objeto en contato o se superponen. cambiaremos el nombre del nodo a [su_highlight background=»#13150f» color=»#0d68f9″]Player[/su_highlight], haciendo doble click encima de [su_highlight background=»#13150f» color=»#0d68f9″]Area2D[/su_highlight] que es nuestro nodo raíz de la escena.
Antes de añadir un cualquier nodo hijo a [su_highlight background=»#13150f» color=»#0d68f9″]Player[/su_highlight], vamos a garantizar de que no lo vamos a mover o re-dimensionamos acidentalmente haciendo clic sobre los nodos hijos. Selecionando el nodo raiz y haciendo clic al lado derecho del candadito; su tooltip dice «Agrupar Nodo(s) Selecionado(s) (Ctrl + G)»
Guardamos la escena como [su_highlight background=»#13150f» color=»#0d68f9″]player.tscn[/su_highlight]. Haz clic en Escena->Guardar Escena, cuando estemos la pantalla vamos a crear un carpeta llamada [su_highlight background=»#13150f» color=»#0d68f9″]scenes[/su_highlight] dentro de la nueva carpeta guardamos la escena
Animación del sprite
Selecionados el nodo principal [su_highlight background=»#13150f» color=»#0d68f9″]Player[/su_highlight], con [su_highlight background=»#13150f» color=»#0d68f9″]Ctrl + A[/su_highlight] o clic derecho + Añadir Nodo Hijo… y creamos un nodo [su_highlight background=»#13150f» color=»#0d68f9″]AnimatedSprite2D[/su_highlight] este nodo se va encargar tando de las imagenes y las animaciones de nuestro personaje, se observa una advertencia en el nodo que nos indica que demos asiganar un recurso de «Sprite Frames» que es el encargado de mostrar los fotogramas. Ahora selecionamos [su_highlight background=»#13150f» color=»#0d68f9″]AnimatedSprite2D[/su_highlight] y nos dirigimos al «Inspector» ubicado lateral derecho y buscamos la propiedad «Sprite Frames» de [su_highlight background=»#13150f» color=»#0d68f9″]AnimatedSprite2D[/su_highlight] en «Animation» , clic en «vacío»->»Nuevo SpriteFrames»
Haz clic en [su_highlight background=»#13150f» color=»#0d68f9″]Nuevo SpriteFrames[/su_highlight] que se acaba de crear y va abrir el panel de [su_highlight background=»#13150f» color=»#0d68f9″]SpriteFrames[/su_highlight], si lo creas y no te aparece solo dale clic en el que acabas de crear y te va aparecer el panel.
A la izquierda vamos a crear nuestra lista de animaciones, en la animación «default» le vamos a cambiar el nombre por «walk» y luego vamos añadir una nueva animación o (Ctrl + N) llamada «up»
En el Sistema de archivos vamos a la carpeta [su_highlight background=»#13150f» color=»#0d68f9″]art[/su_highlight] -> [su_highlight background=»#13150f» color=»#0d68f9″]Pelos[/su_highlight] y arrastramos las imagenes a cada animación creada
[su_highlight background=»#13150f» color=»#0d68f9″]playerGrey_up1.png[/su_highlight] y [su_highlight background=»#13150f» color=»#0d68f9″]playerGrey_up2.png[/su_highlight] para la animación [su_highlight background=»#13150f» color=»#0d68f9″]up[/su_highlight]
[su_highlight background=»#13150f» color=»#0d68f9″]playerGrey_walk1.png[/su_highlight] y [su_highlight background=»#13150f» color=»#0d68f9″]playerGrey_walk2.png[/su_highlight] para la animación [su_highlight background=»#13150f» color=»#0d68f9″]walk[/su_highlight]
Las imagenes del personaje son muy grandes, vamos ajustar la «Scale» selecionamos el nodo principal [su_highlight background=»#13150f» color=»#0d68f9″]Player[/su_highlight] vamos al «Inspector» en la sección «Node2D» en «Transform» buscamos la propieda «Scale» y ajustamos los valores de x y y en «(0.5, 0.5)«
Colisión para el sprite
Igual que se añadio [su_highlight background=»#13150f» color=»#0d68f9″]AnimatedSprite2D[/su_highlight] un nodo hijo, agregamos el nodo hijo [su_highlight background=»#13150f» color=»#0d68f9″] CollisionShape2D[/su_highlight] al nodo principal de [su_highlight background=»#13150f» color=»#0d68f9″] Player[/su_highlight], para determinar el «hitbox» del jugador, o los limites de su área de colisión, para el tipo de personaje ovalado podriamos usar un nodo [su_highlight background=»#13150f» color=»#0d68f9″] CapsuleShape2D[/su_highlight], vamos al «Inspector» en la sección de «CollisionShape2D» en «vacío» selecionamos «Nuevo CapsuleShape2D«, usando los manejadores ajustamos hasta cubrir el personaje.
La escena del [su_highlight background=»#13150f» color=»#0d68f9″] Player[/su_highlight] debería ver asi:
Ya se deben desaparecer la advertencia del [su_highlight background=»#13150f» color=»#0d68f9″] Area2D[/su_highlight], ya que ahora el objeto del [su_highlight background=»#13150f» color=»#0d68f9″] Player[/su_highlight] ya puede interactuar con otros objetos.
Recuerda gurdar la escena.