Godot Engine – Mover sprite animado

En el anterior post sobre Godot “Godot Engine – Instalación y primeros pasos” se habló de como instalar Godot Engine y poco más. Pero se habló de como crear un proyecto.

Es por eso que voy a partir de que hemos creado un proyecto y andamos en el editor (en modo 2D) de godot.

 

La finalidad es conseguir mover un personaje por pantalla. Concretamente este:

 

 

Así es como comenzamos este post. Con godot abierto en el modo 2D del editor.

 

 

El siguiente paso es descargar un conjunto de frames (imágenes separadas que usaremos para crear un personaje que se mueve) desde aquí:

https://gameoverlibre.net/wp-content/uploads/animationFrames.zip

No he creado esos gráficos. Los he cogido de este post en el cual me he basado para crear este que tenemos entre manos.

Una vez se baja el zip se descomprime en el directorio del proyecto.

 

En mi caso el directorio del proyecto se llama frames. Y dentro he copiado el directorio animationFrames que estaba dentro del zip.

Y si regresamos al editor veremos o los frames directamente en el lateral izquierdo o directamente el directorio si es que hemos copiado el directorio. Yo prefiero tenerlos organizados en un directorio.

 

 

El siguiente paso es añadir un Nodo. En el anterior post citado al principio de este se habló de como añadir nodos a la escena. En este caso no vamos a añadir una “label” como la anterior vez. Esta vez vamos a añadir un “AnimatedSprite”.

 

 

Ahora vamos a la parte izquierda en la que se encuentran los recursos y hacemos doble click sobre el directorio “AnimationFrames”.  En la parte derecha de la pantalla, al lado de Escenas veremos una pestaña llamada “Importar”. Pinchamos en ella.

 

Lo siguiente es seleccionar todos los frames pinchando en el primero, luego dejando pulsada la tecla shift y finalmente pinchando sin soltar en el último frame.

 

 

En la pestaña importar se mostrará el texto “25 Archivos”. Ahora vamos a indicar que son “2D pixel”.

 

 

Eso se hace pinchando en “Ajustes” y luego en “2D Pixel”. Finalmente le damos al botón “Reimportar”.

Una vez “Reimportados” los frames vamos a ir abajo a la derecha. A la pestaña “Inspector”. En el Inspector vamos a ver las propiedades de los objetos nodos. En este caso si tenemos seleccionado el nodo “AnimationSprite” veremos algo como esto:

 

 

Hemos de pinchar en donde pone null al lado derecho de Frames. Luego en el menú que se despliega sobre “Nuevo SpriteFrames”. Una vez creado vamos a poder editarlo tal que así:

 

Y veremos una ventana abajo como esta:

 

 

Una ventana en la que a la izquierda vamos a poder crear diferentes animaciones y darles un nombre. En nuestro caso podemos llamarlo andando o dejar el nombre que viene.

Si que vamos a pinchar en Cargar recurso. Y cargaremos los frames.

 

 

Finalmente podemos darle una velocidad diferente a la animación e indicar por ejemplo que se repita.
Para probar que todo va bien podemos pinchar en “Playing: Activado”. Marcarlo para que se mueva el sprite animado.

 

 

La parte interesante no es colocar un objeto en pantalla que se mueva. La parte molona es usar teclas para que se desplace a izquierda y derecha.

Para ello se ha de programar esa parte. Y para ello en la parte del Inspector abajo añadimos un script.

 

Este por ejemplo que permite moverlo de izquierda a derecha:

 

extends AnimatedSprite

var screensize

func _ready():
	screensize = get_viewport_rect().size
	centered = 0
	set_frame(0)
	position.x = 0
	position.y = 480
	set_process(true)
	playing = false
	
func _process(delta):
	#print(screensize)
	var input = Vector2(0, 0)
	if (Input.is_action_pressed("ui_right")):
		playing = true
		position.x = position.x + 5
		flip_h = false
	if (Input.is_action_pressed("ui_left")):
		playing = true
		position.x = position.x - 5
		flip_h = true
	if (Input.is_action_just_released("ui_right")):
		playing = false
		set_frame(0)
	if (Input.is_action_just_released("ui_left")):
		playing = false
		set_frame(0)

 

Y si todo va bien ya tenemos algo de código de ejemplo de como mover un scripteAnimado.

 

Si nos fijamos bien en el código (en otros posts me centraré posiblemente más en el código) podemos alterar las propiedades del nodo AnimationScript que hemos añadido a la escena.

Por ejemplo aunque le dijimos que playing = true a golpe de click. En el código podemos decir que comience sin moverse. Se irá moviendo cuando presionemos el cursor derecho o el izquierdo y dejará de moverse cuando soltemos la tecla.

 

También es importante saber que se puede alterar la animación y voltearla horizontalmente. Es de esa forma que conseguimos que cuando pulsamos cursor izquierdo no haga un moonwalker.

Respecto a que parece que va viajando en una cinta transportadora. Eso se ha de aumentar los frames por segundo. Yo puse 20. Por defecto viene a 5.

 

Puede hacerse con código o a golpe de click.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir a la barra de herramientas