Buen día, comunidad
Hoy les comparto un pequeño tutorial para integrar el paquete de iconos Fontawesome
¿Que es Fontawesome?
Fontawesome es una colección de iconos vectoriales de gran variedad y calidad. Estos iconos están en disponibles en diversas extensiones, por lo que puedes integrarlos en una gran gama de páginas y programas.
La licencia gratuita te permite acceder a más de 1500 iconos, los cuales son bastante útiles para muchos proyectos.
¿Que ventajas tiene usar fontawesome en GM?
Fontawesome es realmente una fuente de texto, por lo que podríamos simplemente dibujar iconos llamando la función de "draw_text()" en nuestro código.
Como podrás imaginar, también sera posible mostrar un texto, con un icono a lado, de forma muy sencilla.
Veamos un ejemplo
[gml]draw_text_color(room_width*0.5,room_height*0.5,global.fai_HandPeace+" Hola",c_white,c_white,c_white,c_white,1);[/gml]
¿Que necesito para conseguir estas fuentes?
Realmente podrías descargar el proyecto adjunto, pero la forma más legal y correcta es la siguiente:
Hacer estos pasos nos asegura haber activado una licencia gratuita para usar los recursos sin problemas.
Preparando las fuentes
Dentro de la carpeta "otfs" veremos 3 tipos de fuentes:
Brands: Son iconos de marcas reconocidas, por ejemplo, logo de amazon, apple, etc.
Regular: Son iconos sin relleno
Solid: Son iconos con relleno sólido
Es preferente renombrar los archivos, eliminando espacios y guiones, dejándolos con un nombre más concreto y menos largo, como el siguiente:
FontAwesome5BrandsRegular.otf
Integrando las fuentes
Una vez tengas listos los 3 archivos, abre tu proyecto de Game Maker y agrégalos en la carpeta de "Included Files".
Declarando las fuentes
Una vez tengamos las fuentes dentro, Crearemos un script para declarar las variables de tipo fuente.
Nuestro script quedaria algo asi
[gml]
globalvar
fa_regular,
fa_brands,
fa_solid;
fa_regular = font_add(working_directory+"FontAwesome5FreeRegular.otf",32,0,0,0,255);
fa_brands = font_add(working_directory+"FontAwesome5BrandsRegular.otf",32,0,0,0,255);
fa_solid = font_add(working_directory+"Font Awesome5FreeSolid.otf",32,0,0,0,255);
[/gml]
Declarando los Ids de los Iconos
Cada uno de los iconos, tiene su propio ID de tipo string.
Por ejemplo, el id de el icono de arriba es el siguiente
"\uf25b"
Si ponemos
[gml]draw_text_color(room_width*0.5,room_height*0.5,"\uf25b"+" Hola",c_white,c_white,c_white,c_white,1);[/gml]
Tendremos el resultado de arriba
Esto es muy poco eficiente, ya que no podemos estar viendo el código de cada icono, ni tampoco nos ayuda a recordar que demonios estamos mostrando
Es por eso que la mejor opción es declarar cada código como una variable global, debajo de donde declaramos las fuentes
De la siguiente forma
[gml]
global.fai_HandPeace = "\uf25b";
global.fai_HandPaper = "\uf256";
global.fai_HandLizard = "\uf258";
...
[/gml]
La verdad es que no voy a ponerte a declarar cada uno, ya que son cientos
Existe ya un script con todas las declaraciones, el cual puedes consultar en el proyecto de muestra adjunto
De la misma forma, puedes ir agregando la colección de iconos que solo requieras para tu proyecto
Puedes consultar la lista completa de iconos en la pagina oficial
https://fontawesome.com/icons
Dibujando iconos
Finalmente, solo debes definir tu fuente y dibujar el texto con tu icono deseado
[gml]
draw_set_font(fa_solid);
draw_text(0,0,global.fai_Award+" Premio Mayor ");
[/gml]
Recuerda que, para usar tu propia fuente, deberás primero dibujar con la fuente de iconos y después la tuya
Para esto requerirás de 2 códigos draw y un poco de imaginación.
¡Eso es todo!
Hoy les comparto un pequeño tutorial para integrar el paquete de iconos Fontawesome
¿Que es Fontawesome?
Fontawesome es una colección de iconos vectoriales de gran variedad y calidad. Estos iconos están en disponibles en diversas extensiones, por lo que puedes integrarlos en una gran gama de páginas y programas.
La licencia gratuita te permite acceder a más de 1500 iconos, los cuales son bastante útiles para muchos proyectos.
¿Que ventajas tiene usar fontawesome en GM?
Fontawesome es realmente una fuente de texto, por lo que podríamos simplemente dibujar iconos llamando la función de "draw_text()" en nuestro código.
Como podrás imaginar, también sera posible mostrar un texto, con un icono a lado, de forma muy sencilla.
Veamos un ejemplo
[gml]draw_text_color(room_width*0.5,room_height*0.5,global.fai_HandPeace+" Hola",c_white,c_white,c_white,c_white,1);[/gml]
¿Que necesito para conseguir estas fuentes?
Realmente podrías descargar el proyecto adjunto, pero la forma más legal y correcta es la siguiente:
- Crear una cuenta en https://fontawesome.com
- Entrar a tu perfil -> descargas -> free for desktop
- Descomprimimos la descarga y guardamos la carpeta "otfs"
- ¡Listo! dentro tenemos las fuentes que integraremos
Hacer estos pasos nos asegura haber activado una licencia gratuita para usar los recursos sin problemas.
Preparando las fuentes
Dentro de la carpeta "otfs" veremos 3 tipos de fuentes:
Brands: Son iconos de marcas reconocidas, por ejemplo, logo de amazon, apple, etc.
Regular: Son iconos sin relleno
Solid: Son iconos con relleno sólido
Es preferente renombrar los archivos, eliminando espacios y guiones, dejándolos con un nombre más concreto y menos largo, como el siguiente:
FontAwesome5BrandsRegular.otf
Integrando las fuentes
Una vez tengas listos los 3 archivos, abre tu proyecto de Game Maker y agrégalos en la carpeta de "Included Files".
Declarando las fuentes
Una vez tengamos las fuentes dentro, Crearemos un script para declarar las variables de tipo fuente.
Nuestro script quedaria algo asi
[gml]
globalvar
fa_regular,
fa_brands,
fa_solid;
fa_regular = font_add(working_directory+"FontAwesome5FreeRegular.otf",32,0,0,0,255);
fa_brands = font_add(working_directory+"FontAwesome5BrandsRegular.otf",32,0,0,0,255);
fa_solid = font_add(working_directory+"Font Awesome5FreeSolid.otf",32,0,0,0,255);
[/gml]
Declarando los Ids de los Iconos
Cada uno de los iconos, tiene su propio ID de tipo string.
Por ejemplo, el id de el icono de arriba es el siguiente
"\uf25b"
Si ponemos
[gml]draw_text_color(room_width*0.5,room_height*0.5,"\uf25b"+" Hola",c_white,c_white,c_white,c_white,1);[/gml]
Tendremos el resultado de arriba
Esto es muy poco eficiente, ya que no podemos estar viendo el código de cada icono, ni tampoco nos ayuda a recordar que demonios estamos mostrando
Es por eso que la mejor opción es declarar cada código como una variable global, debajo de donde declaramos las fuentes
De la siguiente forma
[gml]
global.fai_HandPeace = "\uf25b";
global.fai_HandPaper = "\uf256";
global.fai_HandLizard = "\uf258";
...
[/gml]
La verdad es que no voy a ponerte a declarar cada uno, ya que son cientos
Existe ya un script con todas las declaraciones, el cual puedes consultar en el proyecto de muestra adjunto
De la misma forma, puedes ir agregando la colección de iconos que solo requieras para tu proyecto
Puedes consultar la lista completa de iconos en la pagina oficial
https://fontawesome.com/icons
Dibujando iconos
Finalmente, solo debes definir tu fuente y dibujar el texto con tu icono deseado
[gml]
draw_set_font(fa_solid);
draw_text(0,0,global.fai_Award+" Premio Mayor ");
[/gml]
Recuerda que, para usar tu propia fuente, deberás primero dibujar con la fuente de iconos y después la tuya
Para esto requerirás de 2 códigos draw y un poco de imaginación.
¡Eso es todo!