Hola, a todos sean bienvenidos a mi nuevo post. En el post de hoy veremos dos lecciones, primero vamos a crear una pantalla de inicio, y luego haremos una animacion para esa pantalla de inicio, empecemos creando la misma. Primero vamos a descargar el siguiente archivo robisplash_assets, luego crearemos un nuevo proyecto y lo llamaremos Robi Splash, para ver como crear un proyecto les recomiendo este post, una vez creado, extraeremos el contenido del archivo anterior dentro de la carpeta del proyecto, por un tema de prolijidad les recomiendo crear una carpeta llamada Assets dentro de la carpeta del proyecto y luego extraigan los archivos ahi dentro, no se preocupen una vez hecha la extraccion el editor de Godot se encargara de importarlos automaticamente. Luego vamos a modificar los seteos de pantalla, vamos a Ajustes del Proyecto->Display->Windows y ahi deben corregir el Width y Height por estos valores, Width:800 y Height:450, nos deberia quedar algo asi

godot08

Una vez modificado, procederemos a crear nuestros nodos:

  • Nodo Principal, llamado background del tipo TextureRect
  • Primer child, llamado logo tambien del tipo TextureRect
  • Segundo child, llamado start del tipo TextureButton
  • Tercer child, llamado copyright del tipo Label

Una vez terminados deberian quedar asi

godot09

Ahora procederemos a cargar las texturas de cada uno de ellos, para background iremos a la solapa Inspector y elegiremos Texture y la opcion Cargar

godot10

Luego en el menu de dialogo abierto elegiremos el archivo background.png

godot11

Y con esto tendremos cargado nuestro fondo de pantalla, ahora procederemos a cargar la textura de logo, es exactamente igual al anterior, elegimos el nodo logo, vamos a la solapa Inspector elegimos la propiedad Texture y luego cargar pero ahora cargaremos el archivo robisplash_logo.png, quedando algo asi

godot12
Aqui vemos la integracion de background y logo

Luego deberian ir a disposicion, con el nodo logo seleccionado, y elegir Center Top

godot13

Esto ubicara de mejor forma a logo con respecto al background, luego pasemos a start, el cual es un tipo TextureButton, este tipo de nodo tiene la posibilidad de almacenar  varios tipos de texturas, cada una de las cuales sera para mostrar los distintos estados de nuestro boton pero para nuestro ejemplo veremos solamente dos, el estado normal y presionado (pressed), procedamos a cargar las texturas en los mismos. Primero elegimos el boton start y luego en la solapa Inspector vamos a la propiedad Textures donde elegiremos Normal y seleccionaremos Cargar

godot14

Se nos abrira el siguiente menu de dialogo y elegiremos el archivo start_normal.png

godot15

Luego elegimos abrir y ya quedo cargado, el mismo procedimiento deberiamos hacer para la texture pressed pero en este caso seleccionaremos start_pressed.png, una vez realizado todo esto nos queda una escena de este estilo

godot16

Nuevamente con el nodo de start seleccionado, elegiremos disposicion y la opcion Center bottom para ubicarlo por debajo de nuestro logo

godot17

Una vez hecho esto, el nodo se ubicara automaticamente por debajo de logo, ahora procederemos al ultimo nodo, copyright. En este caso por tratarse de un nodo de tipo Label podremos poner el texto que nosotros queramos, para esto seleccionan el nodo copyright y escriben el texto en la propiedad text o eligen la opcion de la derecha y abren el menu para escribir mejor

godot18
Si hacen click en donde esta el circulo se abre el siguiente menu

godot19

En cualquiera de los casos, se ingresa el texto y el resultado final es el siguiente

godot20

Este nodo pueden dejarlo o sino reordenarlo, como hicimos en los casos anteriores seleccionamos el nodo (copyright) vamos a disposicion y seleccionamos bottom right dando como resultado final nuestra pantalla de inicio, para chequearlo pueden presionar F5 o dar al boton de play en la esquina superior izquierda, sino grabaron la escena se les va a preguntar para guardar la misma, en mi caso le puse el nombre robisplash.tscn y luego de guardada deberian tener algo asi

godot21

Hasta aqui hemos creado nuestra pantalla de inicio, ahora procederemos a crear la animacion de nuestro logo, pongamos manos a la obra. Primero vamos a crear un nuevo child de background del tipo AnimatedPlayer

godot22

Una vez creado lo renombraremos a anim y debera quedar algo asi

godot23

Cuando seleccionamos el tipo AnimatedPlayer se nos habilitara el editor de animaciones  para crear las animaciones

godot24

Ahora procederemos a crear nuestra animacion, primero seleccionaremos este boton para crear una nueva animacion

godot25

Una vez seleccionado, nos aparecera una ventana para nombrar la animacion

godot26

En este caso elegi el nombre nvaanim, puede ser cualquier otro, una vez seleccionado nos quedara asi

godot27

Una vez llegado hasta aca, se nos habilitara la opcion de animacion en todos y cada uno de nuestro nodos, vean la imagen de abajo

godot28
En la imagen resalte las nuevas opciones habilitadas.

Ahora procederemos a crear nuestra animacion. Primero elegimos el nodo logo, y luego debemos elegir en la propiedad Rect, el valor Position y debemos setear los valores de X e Y con estos valores 117,-400

godot29

Luego elegiremos el boton derecho para crear nuestro primer keyFrame

godot30

Como es nuestro primer keyFrame nos aparecera el siguiente mensaje de notificacion

godot31

Elegimos Crear y nos generara nuestro primer keyFrame

godot32

Luego debemos seleccionar nuestro destino podemos hace click antes del numero uno y ahi definimos nuestro rango

godot35

Luego iremos a Position nuevamente donde setearemos los valores de X e Y a los valores 117,0

godot36

Haremos click de nuevo en el boton de la derecha para crear nuestro segundo keyFrame, con esto tenemos creado nuestra animacion

godot37

Si no selecciono automaticamente la opcion de Autoplay deben apretar el siguiente boton y debe quedar en colo azul como se ve en la imagen

godot38

Ya con esto damos por finalizada nuestra animacion, asi deberia quedar

out.gif
Perdon por no poder capturar la animacion total, asi que tome prestada esta animacion (Fuente:docs.godotengine.org)

Con esto, hicimos nuestra pantalla inicial ubicando todos nuestro elementos, luego creamos la animacion de nuestro logo para darle otra vistosidad de nuestra pagina de inicio, espero les haya gustado nos veremos en el proximo post.

 

Anuncios