Página 91: Apuntes de "Avatares de personajes estilo JRPG/Visual novel para mostrar expresiones en los diálogos"

  

Hoy vamos a empezar algo creado por mí, aplicando lo que he aprendido hasta ahora. En este caso, haremos el típico avatar que aparece en los JRPG y novelas visuales: la imagen del personaje junto al diálogo, mostrando también sus expresiones y emociones en cada momento.

Seguramente haya una forma mejor de hacerlo, pero me hace ilusión tener algo creado por mi en el blog.

---

Antes de ponernos manos a la obra, vamos ajustar el tamaño del viewport y la resolución del juego.

No se si este blog puede servir para ayudar aprender a trabajar con Godot, pero como mínimo, aquí saldréis expertos en modificar el viewport y la resolución.

Vamos a buscar un faceset que incluya el busto del personaje y las diferentes caras.

En mi caso, he agarrado el faceset de Ayana Amamoto de Caligula Effect.

https://caligula.fandom.com/wiki/Ayana_Amamoto?file=TCEOD_Ayana_Sprite_Sheet.png

 Vamos a crear la escena AvatarAnimado (Node2D) 

 

Ambos Sprites2D, Busto y cara contiene la misma imagen.

Busto mostrara solo el busto del personaje y Cara mostrara una de los cuadros de cara.

Empezaremos con el Sprite2D Busto. 

 

 Vamos ajustar Region > Rect para quitarle decimales, esto tendra mas utilidad para las caras.

 

Para seleccionar la cara, deberemos intentar la mejor precisión posible, ya que usaremos su tamaño para seleccionar, para eso nos puede ayudar Snap Mode, yo he usado Pixel Snap para tener mas precisión.

 

Vamos a intentar encajar el Sprite2D Cara en la cara del personaje del Sprite2D Busto.

No soy muy amigo de hacer las cosas a ojo, pero en este caso no va quedar mas remedio que hacerlo así de momento hasta averiguar si existe alguna alternativa. 

 

Vamos a quedarnos con las referencias de Region Rect de busto y cara, porque va ser importante.

• Busto 

 

• Cara 

 

 

Es recomendable crear una guía como esta, teniendo en cuenta el tamaño de la cara y del busto, así como la separación que hay entre las caras.

 

 

Vamos a trabajar en la parte del código. Una vez creado el script, añadiremos un OptionButton y un Button para probar el cambio de cara del personaje.

 

 

 

 No agregaremos opciones al OptionButton, eso lo haremos por código.

Actualizamos script.

  

Normalmente  no explico el código, porque eso ya lo hace el video de referencia, pero como no hay video de referencia lo tendré que hacer yo.

 Esto es lo que habia comentado que habia que tener en cuenta con los Rect, usaremos la altura del Rect de busto para que sea la coordenada Y de donde empiezan las caras en el sprite.

Tamaño_cara son las dimensiones que ocupa cada cara y la usaremos tambien para calcular donde empieza la siguiente cara.

 

Usando como referencia lo visto en la [Página 37: Apuntes de Zelda-like CAMERA in GODOT], podemos aplicar una lógica similar: imaginar que cada cara está colocada en una cuadrícula.
De esta forma es más sencillo calcular su posición y organizarlas en un diccionario.

Además, trabajar con un nombre como faces.sorprendida resulta mucho más intuitivo que usar un índice numérico como faces[5].

  

Esta es la parte de la interfaz de pruebas, agregamos todas las caras que tenemos faces y las agregamos en en el selector y con Button enviaremos las coordenadas de Face para que calcule la posición del Rect.

Verificamos que exista el indice en faces, pero en este caso no debería haber problema, pero viene bien saber hacerlo, el saber no ocupa lugar.

 

 

Aquí es donde calculamos la posición.

Como las caras se encuentran debajo del busto, usaremos altura_busto para establecer la altura Y en la que empezaremos a contar la posición Y.

tamaño_cara * coords calculamos la posición que se encuentra el inicio de la posición de la cara, pero sin tener en cuenta el espació de las separaciones.

(coords * Vector2(3,3)) + Vector(2,3), esta parte es para calcula la separación entre las cara. 

(coords * Vector2(3,3)), calcula el espacio entre caras.

Vector(2,3), agrega el la separación del margen del área de las caras.

 

Y eso es todo, compartiré el proyecto en Github, esto solo lo haré con mis proyectos.

Creé esta entrada porque me conviene tenerla guardada en el blog. Si la dejo en la tarjeta M2, tarde o temprano se perderá y recuperarla sería un fastidio. Además, tengo otro proyecto sobre un tema del que no he visto tutoriales, y me gustaría publicarlo aquí para que el blog tenga contenido exclusivo que no se encuentre en ningún otro lado.

Enlace al proyecto en GitHub: https://github.com/ApuntesGodot/apuntesgodot.blogspot.com/tree/main/AvatarAnimado

9 entradas para llegar a las 100 páginas.