jvillalobos
SoftwareRVG
Por
En el desarrollo de juegos hay dos métodos de reproducción de texto: A traves de bitmap fonts y de vector fonts. Bitmap fonts son esencialmente una imagen en sprite sheet que contiene todos los caracteres de una fuente dada. El sprite sheet utiliza un archivo de fuente normal (tradicionalmente .ttf). ¿Como se aplica al desarrollo de juegos en la Web y juegos HTML5?
Puedes utilizar bitmap fonts como de costumbre – son simplemente imágenes, despues de todo, y la mayoría de los motores de juego HTML 5 o librerías los soportan correctamente. Para reproducir vector font , podemos confiar en cualquier fuente que sea accesible via CSS: Esto incluye tanto las fuentes del sistema ya presentes en el ordenador del jugador (como Arial o Times New Roman), como las Fuentes Web, que se pueden descargar sobre la marcha, si no están ya presentes en el sistema.
Sin embargo , no todos los motores de juego o frameworks incluyen mecanismos para cargar esas fuentes como activos regulares –como imágenes o archivos de audio – y confían en que ellos estén ya presentes. Esto puede conducir a peculiaridades en las que el juego intenta reproducir un texto con una fuente que no está cargada todavía… En cambio, el jugador no obtendrá ningun texto, o texto reproducido con una fuente alternativa por defecto.
En este artículo vamos a explorar algunas técnicas para precargar Fuentes Web en nuestros juegos, y descubrir como integrarlas con un popular framework de juego 2D: Phaser.
Como funciona la carga de Fuentes Web
Hay dos maneras de cargar una Fuente Web: A traves de CSS (utilizando @font-face) o a través de JavaScript (utilizando Font Loading API). La solución CSS ha estado disponible desde hace algún tiempo; mientras que la JavaScript API no se ha adoptado ampliamente por los navegadores todavía. Si quieres lanzar un juego en estos días, recomendamos el método CSS por su portabilidad.
Declaración con @font-face
Esto es simplemente una declaración en tu código CSS que te permite instalar una familia de fuentes y apunta a los lugares en los que se pueden recuperar. En este fragmento se declara una familia de fuentes llamada Amatica SC, y asume que tenemos un archivo TTF como un activo.
@font-face {
font-family: 'Amatica SC';
font-style: normal;
font-weight: 400;
src: local('Amatica SC'),
local('AmaticaSC-Regular'),
url(fonts/amaticasc-regular.ttf) format('truetype');
}
Nota: además de señalar a archivos específicos, también podemos apuntar a nombres de fuentes que pueden estar instaladas en el ordenador del usuario (en este caso, Amatica SC o Amatica SC-Regular).
Carga actual
Es importante recordar que la declaración de una familia de fuentes via CSS no carga la fuente! la fuente es cargada unicamente cuando el navegador detecta por primera vez que va a ser utilizada.
Esto puede causar un fallo visual: O bién el texto se muestra con una fuente por defecto y después cambia a la Fuente Web (esto es conocido como FOUT o Flash De Texto Sin Estilo); o el texto no se representa en absoluto y permanece invisible hasta que la fuente está disponible. En sitios Web esto no suele ser un gran problema, pero en juegos (Canvas/WebGL) no conseguimos que el navegador automaticamente lo vuelva a reproducir cuando la fuente está disponible! Por lo que si intentamos reproducir el texto y la fuente no está disponible, este es un gran problema.
Así que en realidad tenemos que descargar la fuente antes de intentar utilizarla en nuestro juego ...
Un comentario
```-
CreativeSpark
```
11 Julio , 2016 a las 14:07
```