Lo primero es crear nuestro personaje. Eso podemos hacerlo con GIMP configurándolo como se indica en este post o podemos bajarnos uno ya realizado.
Algunos sprites de ejemplo
Descargar sprite 1: 56k.es/wp-content/uploads/2022/06/personaje.png
Podemos ver claramente que tiene 2 estados para cuando camina hacia arriba, hacia abajo, hacia la derecha y hacia la izquierda.
256 x 32 pixels es el tamaño de ese archivo. Esto quiere decir que la altura es de 32 pixels y si nos fijamos bien el personaje ocupa en cada estado 32×32 px.
Si mapeamos solamente para ir a la izquierda un solo estado (es decir, no vamos a hacer un sprite animado) el movimiento se vería así de brusco:
Movimiento brusco de un sprite no animado hacia arriba, abajo, izquierda y derecha
Hemos de crear un nodo KinematicBody2D, luego 2 hijos que penden de kinematicBody2D que serán del tipo Sprite y CollisionShape2D.
Y este script en KinematicBody2D
extends KinematicBody2D
export (int) var speed = 200
var velocity = Vector2()
func get_input():
velocity = Vector2()
if Input.is_action_pressed('right'):
velocity.x += 1
get_node("Sprite").region_rect = Rect2(224,0,32,32)
if Input.is_action_pressed('left'):
velocity.x -= 1
get_node("Sprite").region_rect = Rect2(160,0,32,32)
if Input.is_action_pressed('down'):
velocity.y += 1
get_node("Sprite").region_rect = Rect2(96,0,32,32)
if Input.is_action_pressed('up'):
velocity.y -= 1
get_node("Sprite").region_rect = Rect2(0,0,32,32)
velocity = velocity.normalized() * speed
func _physics_process(delta):
get_input()
move_and_slide(velocity)
Esto petará porque nos faltará añadir en Proyecto –> Configuración del proyecto el mapeo de entrada de las teclas.
Una vez asignadas y con esos nombres (podríamos poner otros pero tendríamos que cambiarlos también en el script) cerramos esa ventanita y le damos a play.
Veremos que se mueve brusco
Lo interesante de esto es que hemos indicado mediante código que cuando presionamos una u otra tecla muestre solamente la región del sprite que queremos.
get_node("Sprite").region_rect = Rect2(0,0,32,32)
Para ir arriba he puesto eso. Eso significa x,y,w,h que en cristiano es:
x – Posición x
y – Posición y
w – Ancho
h – Alto
Vamos a mostrar solamente un rectángulo del sprite que queramos. En nuestro caso el adecuado para que se vea el muñeco mirando arriba, abajo, izquierda o derecha.
Movimiento suave de un sprite animado hacia arriba, abajo, izquierda y derecha
Se que se ve este gif rápido pero … digamos que el movimiento al andar se da no como en el ejemplo anterior.
Para hacer esto he añadido un AnimatedSprite en vez de un Sprite.
El código cambia un poco porque he creado 4 animaciones llamadas «right, left, down y up»
Las animaciones son estas que se ven aquí:
He creado 4 animaciones que contienen todas 2 frames (el 0 y el 1) y que van a 5 FPS.
Y de esta forma es como podría por ejemplo moverse un personaje con un poco más de suavidad en los movimientos.
Un saludo cordial.
