Crea botones con Custom Styles en Godot

Antes solía buscar texturas para botones o botones base en imagen para usarlos en mis proyectos, sin embargo, Godot hace tiempo ofrece la posibilidad de crear estilos en muchos nodos Control.

Los estilos en Godot se guardan en formato .tres o .res y en esta ocasión veremos cómo crear un botón personalizado.
Usaremos el nodo Button y nos dirigimos a la sección Custom Styles, ahí veremos varias opciones, para ver directamente los cambios usaremos el estilo de Normal, ya que representa al botón en su estado principal.

Donde dice Vacío podemos agregar varios tipos de estilo, pero en este caso nos enfocaremos en StyleBoxFlat.

Ahora aparecen varias opciones para customizar el botón, a continuación una breve explicación de cada opción.

Bg Color: Cambia el color de fondo del botón.

Corner Detail: Se refiere a la cantidad de líneas que se usarán para redondear las esquinas, en caso de tener esquinas redondeadas.

Border Width: Se refiere al ancho del contorno del botón, similar a un Stroke o Borde en software de diseño gráfico.

Border: Personaliza el borde del botón, aquí puedes cambiar el color y añadir un degradado (blend).

Corner Radius: Indica el radio (redondez digamos) que ocuparán las esquinas del botón.

Expand Margin: Como lo indica su nombre, sirve para añadir margen al botón, útil cuando la fuente queda muy completo dentro del botón. A diferencia de Content Margin, este añade espacio al nodo.

Shadow: Permite añadir una sombra al botón, útil para darle sensación de profundidad.

Antialiasing: Sirve para añadir suavidad al botón. Los valores por defecto son mas que suficiente para la mayoría de casos.

Content Margin: Sirve para ajustar el espacio entre el area del botón y el texto. Esto sería similar a un padding.

Dado esto, te muestro cómo he configurado mi botón.

Le puse el rect en 64x64, y se ve así:
Como podrás ver, he creado el botón pensando en que sea para niveles, como texto tendrá el número del nivel. He dejado mas borde en la parte inferior para simular un efecto de tecla.

Ahora seleccionamos el botón de la flechita y le damos guardar, tal como aparece en la imagen.
Podemos guardar el estilo en una carpeta "styles" para mantener ordenado el proyecto.

Ahora procederemos a crear el estilo para el Pressed. Damos click en limpiar en Normal para crear el nuevo estilo ahí, hacemos esto para poder ver los cambios, de lo contrario, tendríamos que ejecutar el juego para poder verlos.

Creamos un nuevo StyleBoxFlat.

Lo guardamos y colocamos los estilos donde corresponden, en este caso no me interesa el Hover (estilo que se activa cuando tenemos el mouse encima del botón), en este caso pongo el mismo estilo de Normal para que no interfiera, ahora los botones quedan con un estilo bastante bonito.

 Si te gustó el contenido apoyame por Ko-fi!

Comentarios

Publicar un comentario