pcface
0.3.0
PC Face-это коллекция ресурсов для программиста, которые позволяют рисовать символы CP437 на графическом холсте. Этот проект предоставляет растровые массивы для всех 256 глифов из набора символов CP437, отображаемого с использованием различных бесплатных шрифтов, которые воспроизводят оригинальные OEM -шрифты IBM PC.
Кроме того, этот проект включает в себя несколько функций Python для генерации этих растровых карт и нескольких функций JavaScript, которые отображают эти растровые карты на графическом холсте.
Возможно, вы делаете игру в стиле ретро, в которой вы хотите полностью контролировать, каким должен быть каждый пиксель. Или, возможно, вы хотите отображать глифы CP437, используя звездочки, чтобы сделать текстовый баннер. Растровые массивы, представленные в этом проекте, могут оказаться полезными для таких действий. Доступные растровые массивы могут быть переведены на пиксели на экране или символах для стандартного вывода для отображения глифов CP437.
Посетите susam.github.io/pcface/, чтобы увидеть демонстрацию.
В каталоге этого проекта представлен ряд файлов. Посетите susam.github.io/pcface/out/, чтобы просмотреть эти файлы. Этот каталог содержит несколько подкаталогов для различных бесплатных шрифтов на основе оригинальных OEM -шрифтов IBM PC. Каждый каталог шрифтов содержит растровые массивы для шрифта и несколько других файлов. Ссылки на файлы ресурсов Modern-DOS-8x16 приведены ниже в качестве примеров при описании этих ресурсов. Вот краткое описание каждого файла:
@ ) и Dots ( . ). Каждая строка глифа префикс с бинарным кодом строки, представленной в шестнадцатеричной. Те же двоичные коды появляются в виде комментариев в файлах JavaScript, упомянутых выше.Аналогичные файлы доступны для каждого такого шрифта, включенного в этот проект. Посетите susam.github.io/pcface/out/, чтобы просмотреть их.
Эти файлы также доступны через CDN по адресу https://cdn.jsdelivr.net/npm/pcface/out/.
Для быстрой демонстрации различных растровых карт, доступных в этом проекте, посетите страницу демонстрации по адресу susam.github.io/pcface/. Внизу раскрывается меню, которое можно использовать для выбора растровых карт для разных шрифтов.
Это демонстрация управляет как списком шрифтов от fontlist.js , так и карту шрифта от fontmap.js для выбранного шрифта. Демонстрация списка шрифтов показана на первом холсте с использованием зеленого цвета переднего плана. Демонстрация карты шрифта показана во втором холсте с использованием янтарного цвета.
Визуализированные глифы выглядят одинаково в обоих демонстрациях, потому что в обоих случаях используются одни и те же массивы растрового изображения. Единственная разница между fontlist.js и fontmap.js заключается в том, как эти массивы растрового изображения выставлены в JavaScript const . Первый обнажает массив растровых массивов, тогда как последний выставляет объект, который отображает каждый символ CP437 в свой массив растрового изображения.
Есть еще одна немного более подробная демонстрация, доступная по адресу susam.github.io/pcface/retro.html.
На демонстрационной странице вы заметите, что каждая демонстрация растрового изображения выходит в двух вариантах: один с font-list , а другой-с font-map . Демонстрация font-list загружает fontlist.js выбранного шрифта и делает глифы зеленым. Демонстрация font-map загружает fontmap.js выбранного шрифта и делает глифы в янтаре.
В то время как предыдущая демонстрация показывает только 40 символов на строку на холсте с фиксированным размером с одним размером шрифта, который равняется исходному размеру шрифта дважды, на этом демонстрации показано 80 символов на строку в двух разных размерах шрифта: исходный размер шрифта, а также масштабированный размер шрифта, который в два раза превышает исходный размер шрифта. Кроме того, в этой демонстрации холст автоматически изменяется, чтобы соответствовать размеру окна браузера при изменении браузера.
Формат растровых изображений, доступных в этом проекте, довольно прост. Каждый глиф представлен сеткой WXH пикселей, где W - ширина каждого глифа, а H - высота каждого глифа. Например, каждая растровая карта в ModernDOS-8x16 представляет 16 рядов пикселей с 8 столбцами в каждой строке. Эти 16 рядов представлены как 16 целых чисел в растровом карте для каждого глифа. Например, глиф для заглавной буквы «b», отображаемая с использованием этого шрифта, представлен как:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) Каждое целое число представляет точки, которые должны быть нанесены на график для каждого ряда глифа. Целые числа 0x00 и 0x00 в начале означают, что два лучших ряда глифа пустые. Затем 0xfc (бинарный 1111100 ) означает, что первые 6 пикселей третьего ряда построены с помощью цвета переднего плана шрифта, а последние два пикселя остаются пустыми. Таким образом, 16 рядов пикселей должны быть построены.
Вот пример кода Python, который считывает эти растровые карты и расщепляет глиф на стандартном выходе, используя точку ( . ) На каждый 0 бит и AT Symbol ( @ ) на каждый 1 бит:
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 )Вот выход:
0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........
Если вам нужна дополнительная помощь с написанием кода для перевода растровых карт на пиксели, см. Функции drawChar() , drawString() и drawStrings() в src/pcface.js. Вы также можете загрузить этот скрипт на своей веб -странице, используя URL -адрес CDN и использовать эти функции непосредственно на вашей странице. Это объясняется более подробно в разделе JavaScript API.
Должно быть возможна ссылаться на эти функции и написать аналогичный код на другом языке программирования для графического инструментария по вашему выбору.
Этот проект включает в себя современный шрифт DOS 8x16 (версия 20190101.02), разработанный Jayvee Enaguas. Этот шрифт доступен в соответствии с условиями универсальной посвящения общественной достоянии CC0 1.0. Копия шрифта также архивируется в SRC/Font/ModernDos/Directory этого проекта.
Этот шрифт основан на IBM VGA 8X16 и Verite 8x16 OEM -шрифтах для ПК IBM. Некоторые глифы в этом шрифте выглядят точно так же, как глифы IBM VGA 8x16, в то время как некоторые выглядят точно так же, как глифы Verite 8x16. Тем не менее, в этом шрифте также есть несколько глифов, которые не соответствуют ни одному из двух OEM -шрифтов. Вместо этого они оказываются адаптацией глифов, найденных в одном или обоих OEM -шрифтах.
На мой взгляд, этот шрифт содержит лучшие части обоих OEM -шрифтов. Мне нравится, что этот шрифт имеет срезанную ноль Verite. Мне также нравится более квадратный контур букв в Verite, которые были унаследованы в этом шрифте. В то время как он унаследовал много хорошего дизайна от Verite 8x16, он также наследует несколько хороших функций от IBM VGA 8x16. Например, он имеет поднятый стебель для цифры 2 и изогнутый стебель для цифры 7 от IBM VGA 8x16.
Этот проект включает в себя несколько шрифтов на ПК Oldschool (версия 2.2), разработанные Viler. Эти шрифты доступны в соответствии с Условиями Creative Commons Attribution-Sharealike 4.0 International License. Копии этих шрифтов также архивируются в SRC/Font/Oldschool/Directory этого проекта.
Эти шрифты отлично справляются с воспроизведением оригинальных OEM -шрифтов IBM PC как можно более того. Тем не менее, эти шрифты также отличаются от исходных OEM -шрифтов незначительными способами, особенно для исправления незначительных ошибок в исходных шрифтах. Смотрите FAQ в документации Oldschool PC для получения более подробной информации об этих исправлениях.
В то время как основная цель этого проекта - распространять растровые массивы для глифов CP437, этот проект также делает некоторые работы, которые вступили в создание и тестирование этих растровых карт в качестве функций Python и JavaScript. Функции Python также упакованы в форме инструмента интерфейса командной строки (CLI). Следующие подраздела обеспечивают краткое введение в инструмент CLI, а также функции Python и JavaScript.
Инструмент интерфейса командной строки Python (CLI), который предоставляет этот проект, может использоваться для создания собственных растровых массивов для глифов CP437 с шрифтом по вашему выбору. Следующие шаги объясняют, как мы можем сделать это, используя шрифт Oldschool IBM EGA 9X14, шрифт, который не включен в этот проект.
Сначала скачать и извлечь файл шрифта для 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 "Создайте виртуальную среду Python и установите лицо ПК:
python3 -m venv venv
venv/bin/pip3 install pcfaceВведите следующую команду, чтобы распечатать детали использования инструмента:
venv/bin/pcface -hСоздайте растровые массивы и другие выходные файлы:
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/ Обратите внимание, что имя выходного каталога должно заканчиваться размерностью каждого выходного глифа, выраженного в формате WxH , где W - ширина каждого глифа, а H - высота каждого глифа. Опция -s указывает размер шрифта. Он должен быть установлен на размер шрифта, который приводит к глифам желаемого измерения. Если опция -s опущена, используется размер шрифта H там, где H -высота глифы, считываемая от имени выходного каталога, которое не всегда может создавать правильный размер глифа.
Теперь создайте растровые массивы для того же шрифта, но с удвоенной шириной глифа и высотой:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/Выходные каталоги теперь будут содержать файлы JavaScript, содержащие растровые массивы, а также несколько других файлов, которые иллюстрируют глифы. См. Ресурсы раздела для краткого описания этих файлов.
Следующие шаги показывают, как начать с API Python:
Сначала скачать и извлечь файл шрифта для 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 "Создайте виртуальную среду Python и установите лицо ПК:
python3 -m venv venv
venv/bin/pip3 install pcface Теперь напишите этот сценарий Python и сохраните его в файле, скажем, 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 )Введите следующую команду, чтобы выполнить скрипт:
venv/bin/python3 ex1.pyДолжен появиться следующий выход:
.........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........
См. SRC/ Пример/ для получения дополнительных примеров сценариев Python, которые вызывают Python API этого проекта.
Кроме того, см. Документацию Python API для полной документации всех функций, выявленных в Python API.
Вот минимальный пример HTML, который показывает, как лицо ПК и карта шрифта можно загрузить из CDN на веб -страницу и использовать:
<!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 >Вот еще один пример, который загружает список шрифтов вместо карты шрифтов:
<!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 >См. Документацию JavaScript API для полной документации всех функций, выявленных в API JavaScript.
Первоначальные шрифты, архивные в этом проекте, доступны в соответствии с условиями лицензий orignal, выбранных разработчиками шрифтов, т.е.
Вы можете использовать содержание следующего каталога в соответствии с условиями либо лицензии MIT, либо универсальной посвящения общественной достоянии CC0 1.0:
Вы можете использовать содержание следующего каталога в соответствии с условиями либо общей публичной лицензии GNU, либо международной лицензии Creative Commons Attribution-Sharealike 4.0:
Все остальные файлы в этом проекте, за исключением тех, которые перечислены в трех подразделах выше, доступны в соответствии с условиями лицензии MIT. См. License.md для полного текста лицензии.
Чтобы сообщить об ошибках, предложить улучшения или задавать вопросы, создать проблемы.
Автор этого проекта тусуется в следующих местах онлайн:
Вы можете подписаться, следовать или присоединиться к одному или нескольким из приведенных выше каналов, чтобы получить обновления от автора или задать вопросы об этом проекте.
См. Andromeda Invaders, где небольшое подмножество современных растровых изображений DOS 8x16, доступное в этом проекте, использовалось для визуализации текста на игровом холсте.
