pcface
0.3.0
O PC Face é uma coleção de recursos amigáveis ao programador que permitem desenhar caracteres CP437 em uma tela gráfica. Este projeto fornece matrizes de bitmap para todos os 256 glifos do conjunto de caracteres CP437 renderizado usando várias fontes gratuitas que reproduzem as fontes originais do IBM PC OEM.
Além disso, este projeto inclui algumas funções do Python para gerar esses bitmaps e algumas funções JavaScript que renderizam esses bitmaps em uma tela gráfica.
Talvez você esteja fazendo um jogo de estilo retrô, onde deseja assumir o controle total do que cada pixel deveria ser. Ou talvez você queira renderizar os glifos CP437 usando asteriscos para criar um banner de texto. As matrizes de bitmap fornecidas neste projeto podem ser úteis para essas atividades. As matrizes de bitmap disponíveis podem ser traduzidas em pixels na tela ou símbolos para saída padrão para renderizar os glifos CP437.
Visite Susam.github.io/pcface/ para ver uma demonstração.
Existem vários arquivos fornecidos no diretório ou no diretório deste projeto. Visite Susam.github.io/pcface/out/ para navegar nesses arquivos. Este diretório contém vários subdiretos para várias fontes gratuitas com base nas fontes originais do IBM PC OEM. Cada diretório de fonte contém matrizes de bitmap para a fonte e alguns outros arquivos. Os links para os arquivos de recursos modernos-DOS-8X16 são fornecidos abaixo como exemplos enquanto descrevem esses recursos. Aqui está uma breve descrição de cada arquivo:
@ ) e os pontos ( . ). Cada linha do glifo é prefixada com o código binário da linha representado em hexadecimal. Os mesmos códigos binários aparecem que os comentários nos arquivos JavaScript mencionados acima.Arquivos semelhantes estão disponíveis para cada fonte incluída neste projeto. Visite Susam.github.io/pcface/out/ para navegá -los.
Esses arquivos também estão disponíveis via CDN em https://cdn.jsdelivr.net/npm/pcface/out/.
Para uma demonstração rápida dos vários bitmaps disponíveis neste projeto, visite a página de demonstração em susam.github.io/pcface/. Há um menu suspenso na parte inferior que pode ser usado para selecionar bitmaps para diferentes fontes.
Essa demonstração exerce uma lista de fontes do fontlist.js e um mapa de fontes do fontmap.js para a fonte selecionada. A demonstração da lista de fontes é mostrada na primeira tela usando a cor do primeiro plano verde. A demonstração do mapa da fonte é mostrada na segunda tela usando a cor âmbar.
Os glifos renderizados parecem exatamente iguais nas duas demos, porque as mesmas matrizes de bitmap são usadas nos dois casos. A única diferença entre fontlist.js e fontmap.js é como essas matrizes de bitmap são expostas em um javascript const . O primeiro expõe uma variedade de matrizes de bitmap, enquanto o último expõe um objeto que mapeia cada caractere CP437 para sua matriz de bitmap.
Há outra demonstração um pouco mais detalhada disponível em Susam.github.io/pcface/reto.html.
Na página de demonstração, você notaria que cada demonstração de bitmap vem em duas variantes: uma com a font-list do sufixo e outra com o font-map sufixo. A demonstração font-list carrega fontlist.js da fonte escolhida e torna os glifos em verde. A demonstração de font-map carrega fontmap.js da fonte escolhida e torna os glifos em âmbar.
Embora a demonstração anterior mostre apenas 40 caracteres por linha em uma tela de tamanho fixo com um tamanho de fonte único que é igual ao tamanho da fonte original escalado duas vezes, esta demonstração mostra 80 caracteres por linha em dois tamanhos diferentes de fonte: tamanho da fonte original, bem como um tamanho de fonte em escala que tem o dobro do tamanho da Font original. Além disso, nesta demonstração, a tela se redimensiona automaticamente para ajustar o tamanho da janela do navegador sempre que o navegador for redimensionado.
O formato dos bitmaps disponíveis neste projeto é bastante simples. Cada glifo é representado com uma grade WXH de pixels, onde W é a largura de cada glifo e H é a altura de cada glifo. Por exemplo, cada bitmap no ModernDoS-8X16 representa 16 linhas de pixels com 8 colunas em cada linha. Essas 16 linhas são representadas como 16 números inteiros no bitmap para cada glifo. Por exemplo, o glifo para a letra de maiúscula 'B' renderizada usando esta fonte é representada como:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) Cada número inteiro representa os pontos que devem ser plotados para cada linha do glifo. Os números inteiros 0x00 e 0x00 no início significam que as duas linhas principais do glifo estão em branco. Então 0xfc (binário 1111100 ) significa que os 6 primeiros pixels da terceira linha são plotados com a cor do primeiro plano da fonte e os dois últimos pixels são deixados em branco. Dessa maneira, 16 linhas de pixels devem ser plotadas.
Aqui está um exemplo de código Python que lê esses bitmaps e plota o glifo na saída padrão usando um ponto ( . ) Para cada 0 bits e o símbolo AT ( @ ) para 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 )Aqui está a saída:
0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........
Se você precisar de mais ajuda para escrever o código para traduzir os bitmaps em pixels, consulte as funções drawChar() , drawString() e drawStrings() em SRC/pcface.js. Você também pode carregar esse script na sua página da Web usando um URL de CDN e usar essas funções diretamente na sua página. Isso é explicado em mais detalhes na seção JavaScript API.
Deve ser possível referir -se a essas funções e escrever um código semelhante em uma linguagem de programação diferente para um kit de ferramentas gráfico de sua escolha.
Este projeto inclui a fonte moderna do 8x16 (versão 20190101.02) desenvolvida por Jayvee Enaguas. Esta fonte está disponível nos termos da dedicação do domínio público universal CC0 1.0. Uma cópia da fonte também é arquivada no diretório SRC/Font/ModernDoS/deste projeto.
Esta fonte é baseada nas fontes OEM IBM VGA 8x16 e Verite 8x16 OEM para PCs IBM. Alguns glifos nessa fonte se parecem exatamente com os glifos do IBM VGA 8x16, enquanto outros se parecem exatamente com os glifos do Verite 8x16. No entanto, também existem vários glifos nessa fonte que correspondem a nenhuma das duas fontes OEM. Em vez disso, são adaptações dos glifos encontrados em uma ou ambas as fontes OEM.
Na minha opinião, essa fonte contém as melhores partes de ambas as fontes OEM. Eu gosto que essa fonte tenha o corte de zero da Verite. Eu também gosto do esboço mais quadrado das cartas da Verite que foi herdado nessa fonte. Embora herde muito bom design da Verite 8x16, ele também herda alguns recursos agradáveis do IBM VGA 8x16. Por exemplo, ele possui a haste elevada para o dígito 2 e a haste curva para o dígito 7 da IBM VGA 8x16.
Este projeto inclui várias fontes de PC antigas (versão 2.2) desenvolvidas pela Viler. Essas fontes estão disponíveis nos termos da Creative Commons Commons Attribution-Sharealike 4.0 International License. As cópias dessas fontes também são arquivadas no diretório SRC/Font/Oldschool/deste projeto.
Essas fontes fazem um excelente trabalho de reproduzir as fontes originais do IBM PC OEM o mais fiel possível. No entanto, essas fontes também diferem das fontes OEM originais de maneiras menores, especialmente para corrigir pequenos erros nas fontes originais. Consulte as perguntas frequentes na documentação do Oldschool PC para obter mais detalhes sobre essas correções.
Embora o objetivo principal deste projeto seja distribuir matrizes de bitmap para os glifos CP437, esse projeto também faz parte do trabalho que foi gerado e testar esses bitmaps como funções de python e javascript. As funções Python também são embaladas na forma de uma ferramenta de interface de linha de comando (CLI). As subseções a seguir fornecem uma breve introdução à ferramenta da CLI, bem como às funções Python e JavaScript.
A ferramenta Python Command Line Interface (CLI) que este projeto fornece pode ser usada para gerar suas próprias matrizes de bitmap para os glifos CP437 com uma fonte de sua escolha. As etapas a seguir explicam como podemos fazer isso usando a fonte do Oldschool IBM EGA 9x14, uma fonte que não está incluída neste projeto.
Primeiro download e extraia o arquivo de fonte do Oldschool 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 "Crie um ambiente virtual em Python e instale o PC Face:
python3 -m venv venv
venv/bin/pip3 install pcfaceDigite o seguinte comando para imprimir os detalhes de uso da ferramenta:
venv/bin/pcface -hCrie matrizes de bitmap e outros arquivos de saída:
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/ Observe que o nome do diretório de saída deve terminar com a dimensão de cada glifo de saída expresso no formato WxH , onde W é a largura de cada glifo e H é a altura de cada glifo. A opção -s especifica o tamanho da fonte. Deve ser definido para o tamanho da fonte que leva a glifos da dimensão desejada. Se a opção -s for omitida, um tamanho de fonte de H é usado onde H é a altura do glifo lida no nome do diretório de saída, que nem sempre produzirá a dimensão do glifo correto.
Agora crie matrizes de bitmap para a mesma fonte, mas com a largura e a altura do glifo dobraram:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/Os diretórios de saída agora conteriam arquivos JavaScript contendo as matrizes de bitmap, bem como alguns outros arquivos que ilustram os glifos. Consulte os recursos da seção para obter uma breve descrição desses arquivos.
As etapas seguintes mostram como começar com a API Python:
Primeiro download e extraia o arquivo de fonte do Oldschool 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 "Crie um ambiente virtual em Python e instale o PC Face:
python3 -m venv venv
venv/bin/pip3 install pcface Agora escreva este script python e salve -o em um arquivo, digamos, 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 )Digite o seguinte comando para executar o script:
venv/bin/python3 ex1.pyA saída a seguir deve aparecer:
.........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........
Consulte SRC/ Exemplo/ para obter mais exemplos de scripts Python que invocam a API Python deste projeto.
Além disso, consulte a documentação da API do Python para obter uma documentação completa de todas as funções expostas na API Python.
Aqui está um exemplo mínimo de HTML que mostra como o PC Face e um mapa de fontes podem ser carregados de uma CDN em uma página da web e usados:
<!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 >Aqui está outro exemplo que carrega uma lista de fontes em vez de um mapa de fontes:
<!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 a documentação da API JavaScript para obter uma documentação completa de todas as funções expostas na API JavaScript.
As fontes originais arquivadas neste projeto estão disponíveis nos termos das licenças orignais escolhidas pelos desenvolvedores de fontes, ou seja,
Você pode usar o conteúdo do seguinte diretório nos termos da licença do MIT ou da dedicação do domínio público universal CC0 1.0:
Você pode usar o conteúdo do seguinte diretório nos termos da licença pública geral da GNU V3 ou da Licença Internacional da Creative Commons Attribution-Sharealike 4.0:
Todos os outros arquivos deste projeto, excluindo os listados nas três subseções acima, estão disponíveis nos termos da licença do MIT. Consulte License.md para obter o texto completo da licença.
Para relatar bugs, sugira melhorias ou faça perguntas, crie problemas.
O autor deste projeto fica nos seguintes lugares online:
Você pode se inscrever, seguir ou participar de um ou mais dos canais acima para receber atualizações do autor ou fazer perguntas sobre este projeto.
Veja Andrômeda Invaders, onde um pequeno subconjunto dos modernos bitmaps do DOS 8x16 disponível neste projeto foi usado para renderizar texto em uma tela de jogo.
