pcface
0.3.0
PC Face es una colección de recursos amigables para el programador que permiten dibujar caracteres CP437 en un lienzo gráfico. Este proyecto proporciona matrices de mapa de bits para los 256 glifos del conjunto de caracteres CP437 representados utilizando varias fuentes libres que reproducen las fuentes OEM de PC IBM originales.
Además, este proyecto incluye algunas funciones de Python para generar estos mapas de bits y algunas funciones de JavaScript que representan estos mapas de bits en un lienzo gráfico.
Quizás esté haciendo un juego de estilo retro donde desee tomar el control total de lo que debería ser cada píxel. O tal vez desee representar glifos CP437 usando asteriscos para hacer un banner de texto. Las matrices de mapa de bits proporcionadas en este proyecto pueden ser útiles para tales actividades. Las matrices de mapa de bits disponible se pueden traducir a píxeles en la pantalla o símbolos para la salida estándar para renderizar glifos CP437.
Visite susam.github.io/pcface/ para ver una demostración.
Hay una serie de archivos proporcionados en el directorio out/ directorio de este proyecto. Visite susam.github.io/pcface/out/ para explorar estos archivos. Este directorio contiene varios subdirectorios para varias fuentes gratuitas basadas en las fuentes OEM de IBM PC originales. Cada directorio de fuentes contiene matrices de mapa de bits para la fuente y algunos otros archivos. Los enlaces a los archivos de recursos modernos-8x16 se proporcionan a continuación como ejemplos mientras describen estos recursos. Aquí hay una breve descripción de cada archivo:
@ ) y los puntos ( . ). Cada fila del glifo tiene el prefijo con el código binario de la fila representada en hexadecimal. Los mismos códigos binarios aparecen como comentarios en los archivos JavaScript mencionados anteriormente.Hay archivos similares disponibles para cada fuente incluida en este proyecto. Visite susam.github.io/pcface/out/ para navegarlos.
Estos archivos también están disponibles a través de CDN en https://cdn.jsdelivr.net/npm/pcface/out/.
Para obtener una demostración rápida de los diversos mapas de bits disponibles en este proyecto, visite la página de demostración en Susam.github.io/pcface/. Hay un menú desplegable en la parte inferior que se puede usar para seleccionar mapas de bits para diferentes fuentes.
Esta demostración ejerce una lista de fuentes de fontlist.js y un mapa de fuentes de fontmap.js para la fuente seleccionada. La demostración de la lista de fuentes se muestra en el primer lienzo usando color verde en primer plano. La demostración del mapa de fuentes se muestra en el segundo lienzo usando color ámbar.
Los glifos renderizados se ven exactamente igual en ambas demostraciones porque las mismas matrices de mapa de bits se usan en ambos casos. La única diferencia entre fontlist.js y fontmap.js es cómo estas matrices de mapa de bits están expuestas en un const JavaScript. El primero expone una matriz de matrices de mapa de bits, mientras que el segundo expone un objeto que mapea cada carácter CP437 a su matriz de mapa de bits.
Hay otra demostración un poco más detallada disponible en Susam.github.io/pcface/reto.html.
En la página de demostración, notaría que cada demostración de mapa de bits viene en dos variantes: una con la font-list de sufijo y otra con el font-map sufijo. La demostración de font-list carga fontlist.js de la fuente elegida y hace que los glifos en verde. La demostración font-map carga fontmap.js de la fuente elegida y hace que los glifos en ámbar.
Mientras que la demostración anterior muestra solo 40 caracteres por línea en un lienzo de tamaño fijo con un tamaño de fuente único que es igual al tamaño de fuente original ampliado dos veces, esta demostración muestra 80 caracteres por línea en dos tamaños de fuente diferentes: tamaño de fuente original, así como un tamaño de fuente escalado que es el doble del tamaño de fuente original. Además, en esta demostración, el lienzo se cambia automáticamente para que se ajuste al tamaño de la ventana del navegador cada vez que el navegador se redimensione.
El formato de los mapas de bits disponibles en este proyecto es bastante simple. Cada glifo se representa con una cuadrícula WXH de píxeles donde W es el ancho de cada glifo y H es la altura de cada glifo. Por ejemplo, cada mapa de bits en Moderndos-8x16 representa 16 filas de píxeles con 8 columnas en cada fila. Estas 16 filas se representan como 16 enteros en el mapa de bits para cada glifo. Por ejemplo, el glifo para la letra mayúscula 'B' representada usando esta fuente se representa como:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) Cada entero representa los puntos que deben trazarse para cada fila del glifo. Los enteros 0x00 y 0x00 al principio significa que las dos filas superiores del glifo están en blanco. Luego, 0xfc (binario 1111100 ) significa que los primeros 6 píxeles de la tercera fila se trazan con el color de primer plano de la fuente y los dos últimos píxeles quedan en blanco. De esta manera, se deben trazar 16 filas de píxeles.
Aquí hay un ejemplo de código Python que lee estos mapas de bits y traza el glifo en la salida estándar usando un punto ( . ) Por cada 0 bits y el símbolo AT ( @ ) por cada 1 bit:
bitmap = [
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00 ,
]
s = ''
for row in bitmap :
s += f' { row :#04x } ' + f' { row :08b } n ' . translate ( str . maketrans ( '01' , '.@' ))
print ( s )Aquí está la salida:
0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........
Si necesita más ayuda para escribir el código para traducir los mapas de bits a píxeles, consulte las funciones drawChar() , drawString() y drawStrings() en SRC/PCFace.js. También puede cargar este script en su página web utilizando una URL CDN y usar estas funciones directamente en su página. Esto se explica con más detalle en la Sección de la API JavaScript.
Debería ser posible referirse a estas funciones y escribir código similar en un lenguaje de programación diferente para un juego de herramientas gráfico de su elección.
Este proyecto incluye Fuente Modern Dos 8x16 (versión 20190101.02) desarrollado por Jayvee Enaguas. Esta fuente está disponible bajo los términos de la dedicación del dominio público universal CC0 1.0. Una copia de la fuente también se archiva en el directorio SRC/Font/Moderndos/de este proyecto.
Esta fuente se basa en las fuentes OEM IBM VGA 8x16 y Verite 8x16 para PC IBM. Algunos glifos en esta fuente se ven exactamente como los glifos de IBM VGA 8x16, mientras que otros se ven exactamente como los glifos de Verite 8x16. Sin embargo, también hay varios glifos en esta fuente que coinciden con ninguna de las dos fuentes OEM. En cambio, son adaptaciones de los glifos que se encuentran en una o ambas fuentes OEM.
En mi opinión, esta fuente contiene las mejores partes de ambas fuentes OEM. Me gusta que esta fuente tenga el cero cortado de Verite. También me gusta el contorno más cuadrático de las letras en Verite que ha sido heredada en esta fuente. Si bien hereda un montón de buen diseño de Verite 8x16, también hereda algunas características agradables de IBM VGA 8x16. Por ejemplo, tiene el tallo elevado para el dígito 2 y el vástago curvo para el dígito 7 de IBM VGA 8x16.
Este proyecto incluye varias fuentes de PC de la vieja escuela (versión 2.2) desarrolladas por Viler. Estas fuentes están disponibles bajo los términos de Creative Commons Attribution-Sharealike 4.0 International License. Las copias de estas fuentes también se archivan en el directorio SRC/FONT/OldSchool/de este proyecto.
Estas fuentes hacen un excelente trabajo al reproducir las fuentes OEM de IBM PC originales de la manera más fiel posible. Sin embargo, estas fuentes también difieren de las fuentes OEM originales de manera menor, especialmente para corregir errores menores en las fuentes originales. Vea las preguntas frecuentes en la documentación de la PC de OldSchool para obtener más detalles sobre estas correcciones.
Si bien el objetivo principal de este proyecto es distribuir matrices de mapa de bits para los glifos CP437, este proyecto también hace parte del trabajo que se generó y la prueba de estos mapas de bits como funciones de Python y JavaScript. Las funciones de Python también están empaquetadas en forma de una herramienta de interfaz de línea de comandos (CLI). Las siguientes subsecciones proporcionan una breve introducción a la herramienta CLI, así como a las funciones de Python y JavaScript.
La herramienta Python Command Line Interface (CLI) que proporciona este proyecto se puede utilizar para generar sus propias matrices de mapa de bits para glifos CP437 con una fuente de su elección. Los siguientes pasos explican cómo podemos hacer esto usando la fuente EGM EGA 9x14 de la vieja escuela, una fuente que no está incluida en este proyecto.
Primero descargue y extraiga el archivo de fuentes para la vieja escuela IBM EGA 9x14:
curl -o oldschool.zip https://int10h.org/oldschool-pc-fonts/download/oldschool_pc_font_pack_v2.2_FULL.zip
unzip -j oldschool.zip " ttf - Px (pixel outline)/Px437_IBM_EGA_9x14.ttf "Cree un entorno virtual de Python e instale la cara de PC:
python3 -m venv venv
venv/bin/pip3 install pcfaceIngrese el siguiente comando para imprimir los detalles de uso de la herramienta:
venv/bin/pcface -hCrear matrices de mapa de bits y otros archivos de salida:
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/ Tenga en cuenta que el nombre del directorio de salida debe terminar con la dimensión de cada glifo de salida expresado en formato WxH donde W es el ancho de cada glifo y H es la altura de cada glifo. La opción -s especifica el tamaño de fuente. Debe establecerse en el tamaño de fuente que conduce a los glifos de la dimensión deseada. Si se omite la opción -s , se usa un tamaño de fuente de H donde H es la altura del glifo leída del nombre del directorio de salida que puede no siempre producir la dimensión del glifo correcta.
Ahora cree matrices de mapa de bits para la misma fuente, pero con el ancho del glifo y la altura se duplicaron:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/Los directorios de salida ahora contendrían archivos JavaScript que contienen las matrices de mapa de bits, así como algunos otros archivos que ilustran los glifos. Consulte los recursos de la sección para obtener una breve descripción de estos archivos.
Los siguientes pasos muestran cómo comenzar con la API de Python:
Primero descargue y extraiga el archivo de fuentes para la vieja escuela IBM EGA 9x14:
curl -o oldschool.zip https://int10h.org/oldschool-pc-fonts/download/oldschool_pc_font_pack_v2.2_FULL.zip
unzip -j oldschool.zip " ttf - Px (pixel outline)/Px437_IBM_EGA_9x14.ttf "Cree un entorno virtual de Python e instale la cara de PC:
python3 -m venv venv
venv/bin/pip3 install pcface Ahora escriba este script de Python y guárdelo en un archivo, por ejemplo, ex1.py
import pcface
bitmap = pcface . make_bitmap ( 'A' , 'Px437_IBM_EGA_9x14.ttf' , 16 , 9 , 14 )
graph = pcface . make_graph ( bitmap , 9 , '.@' , False )
print ( graph )Ingrese el siguiente comando para ejecutar el script:
venv/bin/python3 ex1.pyDebe aparecer la siguiente salida:
.........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........
Consulte SRC/ Ejemplo/ para obtener más ejemplos de scripts de Python que invocan la API de Python de este proyecto.
Además, consulte la documentación de la API de Python para la documentación completa de todas las funciones expuestas en la API de Python.
Aquí hay un ejemplo HTML mínimo que muestra cómo PC Face y un mapa de fuentes se pueden cargar desde un CDN en una página web y usarse:
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > PC Face Demo </ title >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, user-scalable=no " >
< style >
body {background: #111}
canvas {background: #000; image-rendering: pixelated; margin: auto; display: block}
</ style >
< script src =" https://cdn.jsdelivr.net/npm/pcface/src/pcface.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/pcface/out/moderndos-8x16/fontmap.js " > </ script >
< script >
'use strict'
window . addEventListener ( 'load' , function ( ) {
const canvas = document . getElementById ( 'canvas' )
const ctx = canvas . getContext ( '2d' )
ctx . fillStyle = '#3f3'
pcface . drawString ( PC_FACE_MODERNDOS_8X16_FONT_MAP , ctx , 8 , "hello, world" , 0 , 0 , 2 )
} )
</ script >
</ head >
< body >
< canvas id =" canvas " > </ canvas >
</ body >
</ html >Aquí hay otro ejemplo que carga una lista de fuentes en lugar de un mapa de fuentes:
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > PC Face Demo </ title >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, user-scalable=no " >
< style >
body {background: #111}
canvas {background: #000; image-rendering: pixelated; margin: auto; display: block}
</ style >
< script src =" https://cdn.jsdelivr.net/npm/pcface/src/pcface.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/pcface/out/moderndos-8x16/fontlist.js " > </ script >
< script >
'use strict'
window . addEventListener ( 'load' , function ( ) {
const canvas = document . getElementById ( 'canvas' )
const ctx = canvas . getContext ( '2d' )
ctx . fillStyle = '#3f3'
pcface . drawString ( PC_FACE_MODERNDOS_8X16_FONT_LIST , ctx , 8 ,
[ 65 , 32 , 61 , 32 , 227 , 114 , 253 ] , 0 , 0 , 2 )
} )
</ script >
</ head >
< body >
< canvas id =" canvas " > </ canvas >
</ body >
</ html >Consulte la documentación de la API de JavaScript para la documentación completa de todas las funciones expuestas en la API de JavaScript.
Las fuentes originales archivadas en este proyecto están disponibles bajo los términos de las licencias orignas elegidas por los desarrolladores de fuentes, es decir,, es decir,
Puede usar el contenido del siguiente directorio bajo los términos de la licencia MIT o la dedicación del dominio público universal CC0 1.0:
Puede usar el contenido del siguiente directorio bajo los términos de la Licencia Pública General GNU V3 o la Licencia Internacional Creative Commons Attribution-Sharealike 4.0:
Todos los demás archivos en este proyecto, excluyendo los que figuran en las tres subsecciones anteriores, están disponibles bajo los términos de la licencia MIT. Vea la licencia.md para el texto completo de la licencia.
Para informar errores, sugerir mejoras o hacer preguntas, crear problemas.
El autor de este proyecto pasa el rato en los siguientes lugares en línea:
Puede suscribirse, seguir o unirse a uno o más de los canales anteriores para recibir actualizaciones del autor o hacer preguntas sobre este proyecto.
Vea los invasores de Andrómeda donde se ha utilizado un pequeño subconjunto de los modernos mapas de bits DOS 8x16 disponibles en este proyecto para representar el texto en un lienzo de juego.
