Noticias

Se ha publicado un nuevo servicio, el Portal de Juegos Online

Comunidad Game Maker

Bienvenid@ a la comunidad hispana de Game Maker. Nuestro objetivo es crear videojuegos y dar soporte en castellano de GM. Para mejorar nuestro servicio hemos implantado, como adicion al reglamento general, algunas normas especificas en los subforos más comunes. ¡No olvides informarte antes de participar!.

Autor Tema: integración Fontawesome [Iconos]  (Leído 179 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Frenzy

en: Septiembre 25, 2019, 03:27:56 am
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


draw_text_color(room_width*0.5,room_height*0.5,global.fai_HandPeace+" Hola",c_white,c_white,c_white,c_white,1);

¿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

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);

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
draw_text_color(room_width*0.5,room_height*0.5,"\uf25b"+" Hola",c_white,c_white,c_white,c_white,1);
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
global.fai_HandPeace = "\uf25b";
global.fai_HandPaper = "\uf256";
global.fai_HandLizard = "\uf258";
...
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

draw_set_font(fa_solid);
draw_text(0,0,global.fai_Award+" Premio Mayor ");



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!




 


No Tienes Permisos Para Dar Puntos
point 24 Puntos

Usuarios que puntuaron el tema » RzCpGames (2 Pts) » Iros (10 Pts) » knd144 (12 Pts)