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
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
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
Luego en el menu de dialogo abierto elegiremos el archivo background.png
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
Aqui vemos la integracion de background y logo
Luego deberian ir a disposicion, con el nodo logo seleccionado, y elegir Center Top
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
Se nos abrira el siguiente menu de dialogo y elegiremos el archivo start_normal.png
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
Nuevamente con el nodo de start seleccionado, elegiremos disposicion y la opcion Center bottom para ubicarlo por debajo de nuestro logo
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
Si hacen click en donde esta el circulo se abre el siguiente menu
En cualquiera de los casos, se ingresa el texto y el resultado final es el siguiente
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
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
Una vez creado lo renombraremos a anim y debera quedar algo asi
Cuando seleccionamos el tipo AnimatedPlayer se nos habilitara el editor de animaciones para crear las animaciones
Ahora procederemos a crear nuestra animacion, primero seleccionaremos este boton para crear una nueva animacion
Una vez seleccionado, nos aparecera una ventana para nombrar la animacion
En este caso elegi el nombre nvaanim, puede ser cualquier otro, una vez seleccionado nos quedara asi
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
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
Luego elegiremos el boton derecho para crear nuestro primer keyFrame
Como es nuestro primer keyFrame nos aparecera el siguiente mensaje de notificacion
Elegimos Crear y nos generara nuestro primer keyFrame
Luego debemos seleccionar nuestro destino podemos hace click antes del numero uno y ahi definimos nuestro rango
Luego iremos a Position nuevamente donde setearemos los valores de X e Y a los valores 117,0
Haremos click de nuevo en el boton de la derecha para crear nuestro segundo keyFrame, con esto tenemos creado nuestra animacion
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
Ya con esto damos por finalizada nuestra animacion, asi deberia quedar
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.
El blog de Tinchicus 