pcface
0.3.0
PC Face ist eine Sammlung von programmiererfreundlichen Ressourcen, mit denen CP437-Zeichen auf einer grafischen Leinwand zeichnen können. Dieses Projekt enthält Bitmap -Arrays für alle 256 Glyphen aus dem CP437 -Zeichensatz, das mit verschiedenen kostenlosen Schriftarten, die die ursprünglichen IBM -PC -OEM -Schriftarten reproduzieren, wiedergegeben werden.
Darüber hinaus enthält dieses Projekt einige Python -Funktionen, um diese Bitmaps zu generieren, und einige JavaScript -Funktionen, die diese Bitmaps auf einer grafischen Leinwand übertragen.
Vielleicht machen Sie ein Spiel im Retro-Stil, bei dem Sie die volle Kontrolle über das, was jedes Pixel sein sollte, übernehmen möchten. Oder Sie möchten CP437 -Glyphen mit Sternchen mit einem Textbanner rendern. Die in diesem Projekt bereitgestellten Bitmap -Arrays könnten sich für solche Aktivitäten als nützlich herausstellen. Die verfügbaren Bitmap -Arrays können auf Bildschirm oder Symbole für die Standardausgabe übersetzt werden, um CP437 -Glyphen zu rendern.
Besuchen Sie susam.github.io/pcface/, um eine Demo zu sehen.
Es gibt eine Reihe von Dateien im Out/ Verzeichnis dieses Projekts. Besuchen Sie susam.github.io/pcface/out/, um diese Dateien zu durchsuchen. Dieses Verzeichnis enthält mehrere Unterverzeichnisse für verschiedene kostenlose Schriftarten, die auf den ursprünglichen IBM PC OEM -Schriftarten basieren. Jedes Schriftverzeichnis enthält Bitmap -Arrays für die Schriftart und einige andere Dateien. Links zu modernen DOS-8x16-Ressourcendateien werden im Folgenden als Beispiele bereitgestellt, während diese Ressourcen beschrieben werden. Hier finden Sie eine kurze Beschreibung jeder Datei:
@ ) und Punkten ( . ) dargestellt. Jede Zeile der Glyphe wird mit dem in Hexadezimal dargestellten Binärcode der Zeile vorangestellt. Dieselben binären Codes werden in den oben genannten JavaScript -Dateien als Kommentare angezeigt.Ähnliche Dateien sind für jede in diesem Projekt enthaltene Schriftart verfügbar. Besuchen Sie susam.github.io/pcface/out/, um sie zu durchsuchen.
Diese Dateien sind auch über CDN unter https://cdn.jsdelivr.net/npm/pcface/out/ verfügbar.
Eine kurze Demo der verschiedenen in diesem Projekt verfügbaren Bitmaps finden Sie auf der Demo -Seite unter susam.github.io/pcface/. Am unteren Rand befindet sich ein Dropdown -Menü, mit dem Bitmaps für verschiedene Schriftarten ausgewählt werden können.
Diese Demo übt sowohl eine Schriftliste von fontlist.js als auch eine Schriftart von fontmap.js für die ausgewählte Schriftart aus. Die Demo der Schriftartliste wird in der ersten Leinwand unter Verwendung einer grünen Vordergrundfarbe angezeigt. Die Schriftart -Demo wird in der zweiten Leinwand unter Verwendung der Bernsteinfarbe angezeigt.
Die gerenderten Glyphen sehen in beiden Demos genau gleich aus, da in beiden Fällen dieselben Bitmap -Arrays verwendet werden. Der einzige Unterschied zwischen fontlist.js und fontmap.js besteht darin, wie diese Bitmap -Arrays in einer JavaScript const exponiert werden. Ersteres enthüllt eine Array von Bitmap -Arrays, während letzteres ein Objekt ausschließt, das jeden CP437 -Zeichen seinem Bitmap -Array ordnet.
Es gibt eine weitere etwas detailliertere Demo unter susam.github.io/pcface/retro.html.
Auf der Demo-Seite würden Sie feststellen, dass jede Bitmap-Demo in zwei Varianten erhältlich ist: eines mit der Suffix font-list und eines mit dem Suffix font-map . Die Demo font-list lädt die fontlist.js der ausgewählten Schriftart und macht die Glyphen in Grün. Die font-map -Demo lädt fontmap.js der ausgewählten Schriftart und rendert die Glyphen in Bernstein.
Während die vorherige Demo nur 40 Zeichen pro Zeile auf einer festen Größe Leinwand mit einer einzelnen Schriftgröße zeigt, die zweimal der ursprünglichen Schriftgröße entspricht, zeigt diese Demo 80 Zeichen pro Zeile in zwei verschiedenen Schriftgrößen: Original -Schriftgröße sowie eine skalierte UP -Schriftgröße, die doppelt so hoch ist wie die ursprüngliche Schriftgröße. Darüber hinaus ändert sich in dieser Demo die Leinwand automatisch, wenn sich die Größe des Browserfensters anpasst, wenn der Browser geändert wird.
Das Format der in diesem Projekt verfügbaren Bitmaps ist recht einfach. Jede Glyphe wird mit einem WXH -Gitter von Pixeln dargestellt, wobei W die Breite jeder Glyphe und H die Höhe jeder Glyphe ist. Beispielsweise enthält jede Bitmap in ModernDOS-8x16 16 Pixelreihen mit 8 Spalten in jeder Zeile. Diese 16 Zeilen werden als 16 Ganzzahlen in der Bitmap für jede Glyphe dargestellt. Zum Beispiel wird der Glyphe für den Großbuchstaben 'B' mit dieser Schriftart dargestellt als:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) Jede Ganzzahl repräsentiert die Punkte, die für jede Zeile der Glyphe aufgetragen werden müssen. Die Ganzzahlen 0x00 und 0x00 am Anfang bedeuten, dass die beiden oberen Zeilen der Glyphen leer sind. Dann bedeutet 0xfc (binär 1111100 ), dass die ersten 6 Pixel der dritten Reihe mit der Vordergrundfarbe der Schriftart und die letzten beiden Pixel leer gelassen werden. Auf diese Weise müssen 16 Pixelreihen aufgetragen werden.
Hier ist ein Beispiel für Python -Code, der diese Bitmaps liest und die Glyphe der Standardausgabe unter Verwendung eines Punktes ( . ) Für jedes 0 -Bit und das AT -Symbol ( @ ) für jedes 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 )Hier ist die Ausgabe:
0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........
Wenn Sie mehr Hilfe beim Schreiben des Codes benötigen, um die Bitmaps in Pixel zu übersetzen, lesen Sie die Funktionen drawChar() , drawString() und drawStrings() in SRC/PCFace.js. Sie können dieses Skript auch in Ihrer Webseite über eine CDN -URL laden und diese Funktionen direkt auf Ihrer Seite verwenden. Dies wird in Abschnitt JavaScript -API ausführlicher erläutert.
Es sollte möglich sein, auf diese Funktionen zu verweisen und ähnliche Code in einer anderen Programmiersprache für ein grafisches Toolkit Ihrer Wahl zu schreiben.
Dieses Projekt umfasst die von Jayvee Enaguas entwickelte moderne DOS 8x16 -Schriftart (Version 20190101.02). Diese Schriftart ist gemäß den Bestimmungen des CC0 1.0 Universal Public Domain Engagement erhältlich. Eine Kopie der Schriftart ist auch im SRC/FONT/ModernDos/Verzeichnis dieses Projekts archiviert.
Diese Schriftart basiert auf den IBM VGA 8x16- und Verite 8x16 -OEM -Schriftarten für IBM -PCs. Einige Glyphen in dieser Schriftart sehen genau wie die Glyphen von IBM VGA 8x16 aus, während einige andere genau wie die Glyphen von Verite 8x16 aussehen. Es gibt jedoch auch mehrere Glyphen in dieser Schriftart, die von beiden nicht der beiden OEM -Schriftarten entsprechen. Stattdessen sind sie Anpassungen der Glyphen in einem oder beiden OEM -Schriftarten.
Meiner Meinung nach enthält diese Schrift die besten Teile beider OEM -Schriftarten. Ich mag, dass diese Schrift die zerschlitzte Null von Verite hat. Ich mag auch den quadratischeren Umriss der Buchstaben in Verite, die in diese Schriftart geerbt wurden. Während es viel gutes Design von Verite 8x16 erbt, erbt es auch einige schöne Funktionen von IBM VGA 8x16. Zum Beispiel hat es den erhöhten Stamm für die Ziffer 2 und den gebogenen Stamm für die Ziffer 7 von IBM VGA 8x16.
Dieses Projekt enthält mehrere Oldschool -PC -Schriftarten (Version 2.2), die von Viler entwickelt wurden. Diese Schriftarten sind gemäß den Bestimmungen der Creative Commons Attribution-Sharealike 4.0 International Lizenz erhältlich. Kopien dieser Schriftarten sind auch im SRC/Schriftart/Oldschool/Verzeichnis dieses Projekts archiviert.
Diese Schriftarten leisten hervorragende Arbeit, um die ursprünglichen IBM PC OEM -Schriftarten so treu wie möglich zu reproduzieren. Diese Schriftarten unterscheiden sich jedoch auch von den ursprünglichen OEM -Schriftarten auf geringfügige Weise, um geringfügige Fehler in den ursprünglichen Schriftarten zu korrigieren. Weitere Informationen zu diesen Korrekturen finden Sie in den FAQ in der Oldschool -PC -Dokumentation.
Der Hauptzweck dieses Projekts besteht jedoch darin, Bitmap -Arrays für CP437 -Glyphen zu verteilen, aber dieses Projekt macht auch einige der Arbeiten, die diese Bitmaps als Python- und JavaScript -Funktionen generieren und testen. Die Python-Funktionen sind auch in Form eines CLI-Tools (Command Line Interface) verpackt. Die folgenden Unterabschnitte bieten eine kurze Einführung in das CLI -Tool sowie die Python- und JavaScript -Funktionen.
Das CLI -Tool (Python Command Line Interface), das dieses Projekt bietet, kann verwendet werden, um Ihre eigenen Bitmap -Arrays für CP437 -Glyphen mit einer Schriftart Ihrer Wahl zu generieren. Die folgenden Schritte erläutern, wie wir dies mit der Oldschool IBM EGA 9x14 -Schriftart tun können, einer Schriftart, die nicht in diesem Projekt enthalten ist.
Laden Sie die Schriftart für Oldschool IBM EGA 9x14 zuerst herunter und extrahieren Sie zuerst.
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 "Erstellen Sie eine virtuelle Python -Umgebung und installieren Sie das PC -Gesicht:
python3 -m venv venv
venv/bin/pip3 install pcfaceGeben Sie den folgenden Befehl ein, um die Verwendungsdetails des Tools zu drucken:
venv/bin/pcface -hErstellen Sie Bitmap -Arrays und andere Ausgabedateien:
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/ Beachten Sie, dass der Name des Ausgangsverzeichnisses mit der Dimension jeder Ausgangsglyphe enden muss, die im WxH -Format ausgedrückt wird, wobei W die Breite jeder Glyphe und H die Höhe jedes Glyphs ist. Die Option -s gibt die Schriftgröße an. Es sollte auf die Schriftgröße eingestellt werden, die zu Glyphen der gewünschten Dimension führt. Wenn die Option -s weggelassen wird, wird eine Schriftgröße von H verwendet, wobei H die Glyphenhöhe aus dem Ausgangsverzeichnisnamen ist, der möglicherweise nicht immer die korrekte Glyph -Dimension erzeugt.
Erstellen Sie nun Bitmap -Arrays für dieselbe Schriftart, aber mit der Glyphenbreite und der Höhe verdoppelt sich:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/Die Ausgabeverzeichnisse würden nun JavaScript -Dateien enthalten, die die Bitmap -Arrays sowie einige andere Dateien enthalten, die die Glyphen veranschaulichen. Eine kurze Beschreibung dieser Dateien finden Sie in Abschnittsressourcen.
Die folgenden Schritte zeigen, wie Sie mit der Python -API beginnen:
Laden Sie die Schriftart für Oldschool IBM EGA 9x14 zuerst herunter und extrahieren Sie zuerst.
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 "Erstellen Sie eine virtuelle Python -Umgebung und installieren Sie das PC -Gesicht:
python3 -m venv venv
venv/bin/pip3 install pcface Schreiben Sie nun dieses Python -Skript und speichern Sie es in einer Datei, beispielsweise 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 )Geben Sie den folgenden Befehl ein, um das Skript auszuführen:
venv/bin/python3 ex1.pyDie folgende Ausgabe sollte angezeigt werden:
.........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........
Weitere Beispiele für Python -Skripte, die die Python -API dieses Projekts aufrufen, finden Sie SRC/ Beispiel/ Weitere Beispiele für Python -Skripte.
In der Python -API -Dokumentation finden Sie auch die vollständige Dokumentation aller in der Python -API aufgedeckten Funktionen.
Hier ist ein minimales HTML -Beispiel, das zeigt, wie PC -Gesicht und eine Schriftkarte von einem CDN in eine Webseite geladen und verwendet werden können:
<!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 >Hier ist ein weiteres Beispiel, das eine Schriftliste anstelle einer Schriftart lädt:
<!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 >In der Dokumentation der JavaScript -API finden Sie die vollständige Dokumentation aller in der JavaScript -API aufgedeckten Funktionen.
Die in diesem Projekt archivierten ursprünglichen Schriftarten sind gemäß den Bestimmungen der Orignallizenzen verfügbar, die von den Schriftartenentwicklern, dh, ausgewählt wurden.
Sie können den Inhalt des folgenden Verzeichnisses gemäß den Bestimmungen der MIT -Lizenz oder der CC0 1.0 Universal Public Domain Widmung verwenden:
Sie können den Inhalt des folgenden Verzeichnisses gemäß den Bestimmungen der GNU General Public Lizenz V3 oder der Creative Commons Attribution-Sharealike 4.0 International Lizenz verwenden:
Alle anderen Dateien in diesem Projekt, ausgenommen die in den drei obigen Unterabschnitten aufgeführten, sind gemäß den Bestimmungen der MIT -Lizenz verfügbar. Siehe Lizenz.MD für den vollständigen Lizenztext.
Um Fehler zu melden, Verbesserungen vorzuschlagen oder Fragen zu stellen, Probleme zu erstellen.
Der Autor dieses Projekts hängt an folgenden Orten online ab:
Sie können gerne einen oder mehrere der oben genannten Kanäle abonnieren, folgen oder sich anschließen, um Aktualisierungen vom Autor zu erhalten oder Fragen zu diesem Projekt zu stellen.
Siehe Andromeda Invaders, wo eine kleine Untergruppe der modernen DOS 8x16 -Bitmaps, die in diesem Projekt verfügbar sind, zum Rendern von Text auf einer Spiel -Leinwand verwendet wurde.
