pcfaceダウンロードpcfaceソースコードのダウンロード

pcface

フォントのダウンロード

0.3.0

ダウンロード

PCフェイス

PC Faceは、グラフィカルキャンバスにCP437文字を描画できるプログラマに優しいリソースのコレクションです。このプロジェクトは、元のIBM PC OEMフォントを再現するさまざまなフリーフォントを使用してレンダリングされたCP437文字セットのすべての256グリフのビットマップアレイを提供します。

さらに、このプロジェクトには、これらのビットマップを生成するためのいくつかのPython関数と、これらのビットマップをグラフィカルキャンバスにレンダリングするいくつかのJavaScript関数が含まれています。

おそらく、各ピクセルがどうあるべきかを完全に制御したいレトロスタイルのゲームを作成しています。または、テキストバナーを作成するためにアスタリスクを使用してCP437グリフをレンダリングする必要があります。このプロジェクトで提供されるビットマップアレイは、そのようなアクティビティに役立つことが判明する可能性があります。使用可能なビットマップアレイは、CP437グリフをレンダリングするために標準出力の画面上のピクセルまたはシンボルに変換できます。

susam.github.io/pcface/にアクセスして、デモをご覧ください。

コンテンツ

リソース
デモ
- クイックデモ
- 詳細なデモ
ビットマップ形式
フォントの詳細
- モダンなDOSフォント
- Oldschool PCフォント
ツールキットの使用
- cli
- Python API
- JavaScript API
ライセンス
- オリジナルフォント
- モダンなDOSビットマップ
- Oldschool PCフォントビットマップ
- ソースコード
サポート
チャネル
もっと

リソース

このプロジェクトのOUT/ディレクトリには、多くのファイルが提供されています。 susam.github.io/pcface/out/にアクセスして、これらのファイルを閲覧してください。このディレクトリには、元のIBM PC OEMフォントに基づいたさまざまなフリーフォントのいくつかのサブディレクトリが含まれています。各フォントディレクトリには、フォント用のビットマップ配列と他のいくつかのファイルが含まれています。これらのリソースを説明しながら、最新のDOS-8x16リソースファイルへのリンクを以下に例として以下に示します。各ファイルの簡単な説明は次のとおりです。

Out/Modern-Dos-8x16/fontlist.js：BitMapアレイのJavaScriptアレイとして公開されたCP437文字セットからのすべての256グリフのビットマップ表現。各ビットマップ配列は、CP437文字のビットマップを表します。
out/moderndos-8x16/fontmap.js：各cp437文字セットからのすべてのcp437グリフのビットマップ表現は、各cp437文字をビットマップアレイにマッピングするJavaScriptオブジェクトとして公開されました。
out/moderndos-8x16/glyph.txt：アスタリスクを使用して表されるすべてのCP437グリフ。
out/moderndos-8x16/graph.txt：ATシンボル（ @ ）とドット（ . ）を使用して表すすべてのCP437グリフ。グリフの各行には、16進数で表される行のバイナリコードが付いています。同じバイナリコードは、上記のJavaScriptファイルにコメントと表示されます。
out/moderndos-8x16/preview-8x16.png：元のフォントファイルから読み取りフォントのプレビュー。
out/moderndos-8x16/preview-16x32.png：元のフォントファイルから読み取りフォントのより大きなプレビュー。

このプロジェクトに含まれるこのようなフォントごとに同様のファイルが利用可能です。 susam.github.io/pcface/out/にアクセスして、閲覧してください。

これらのファイルは、CDN（https://cdn.jsdelivr.net/npm/pcface/out/）からも利用できます。

デモ

クイックデモ

このプロジェクトで利用可能なさまざまなビットマップの簡単なデモについては、susam.github.io/pcface/のデモページにアクセスしてください。下部には、さまざまなフォントのビットマップを選択するために使用できるドロップダウンメニューがあります。

このデモは、 fontlist.jsのフォントリストと、選択したフォントのfontmap.jsからのフォントマップの両方を実行します。フォントリストデモは、緑色の前景色を使用して最初のキャンバスに表示されます。フォントマップデモは、Amber色を使用して2番目のキャンバスに表示されます。

レンダリングされたグリフは、同じビットマップ配列が両方の場合に使用されるため、両方のデモでまったく同じように見えます。 fontlist.jsとfontmap.jsの唯一の違いは、これらのビットマップ配列がJavaScript constでどのように公開されるかです。前者はビットマップアレイの配列を公開しますが、後者は各CP437文字をマップするオブジェクトをビットマップアレイにマップするオブジェクトを公開します。

詳細なデモ

susam.github.io/pcface/retro.htmlで入手可能なもう少し詳細なデモがあります。

デモページでは、各ビットマップデモには2つのバリエーションがあることがわかります。1つはサフィックスfont-listを備え、もう1つは接尾辞font-mapを備えています。 font-listデモは、選択したフォントのfontlist.jsをロードし、グリーフを緑色にします。 font-mapデモは、選択したフォントのfontmap.jsをロードし、amberのグリフをレンダリングします。

前のデモでは、2回スケーリングされた元のフォントサイズに等しい単一のフォントサイズの固定サイズキャンバスで1行あたり40文字のみを表示しますが、このデモは、オリジナルフォントサイズとスケーリングされたフォントサイズの2つの異なるフォントサイズで80文字あたり80文字を示します。さらに、このデモでは、ブラウザがサイズ変更されるたびに、ブラウザのウィンドウサイズに合わせてキャンバスが自動的にサイズを変更します。

ビットマップ形式

このプロジェクトで利用可能なビットマップの形式は非常に簡単です。各グリフはピクセルのwxhグリッドで表され、wは各グリフの幅、hは各グリフの高さです。たとえば、ModernDos-8x16の各ビットマップは、各行に8列の16行のピクセルを表します。これらの16行は、各グリフのビットマップ内の16の整数として表されます。たとえば、このフォントを使用してレンダリングされた大文字「B」のグリフは、次のように表されます。

  [
    0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
    0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
  ] , // [B] (66)

各整数は、グリフのすべての行に対してプロットする必要があるドットを表します。最初の整数0x00および0x00は、グリフの上部2行が空白であることを意味します。次に、 0xfc （バイナリ1111100 ）は、3列目の最初の6ピクセルがフォントの前景色でプロットされ、最後の2つのピクセルが空白のままであることを意味します。このようにして、16行のピクセルをプロットする必要があります。

これらのビットマップを読み取り、 0ビットごとにドット（ . ）を使用して標準出力でグリフをプロットし、 1ビットごとにaTシンボル（ @ ）を使用してグリフをプロットするPythonコードの例を次に示します。

 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 ........

ビットマップをピクセルに翻訳するためにコードを作成するのにより多くのヘルプが必要な場合は、src/pcface.jsのdrawChar() 、 drawString() 、およびdrawStrings()機能を参照してください。また、CDN URLを使用してこのスクリプトをWebページにロードして、これらの機能をページに直接使用することもできます。これについては、セクションJavaScript APIで詳しく説明します。

これらの関数を参照し、選択したグラフィカルツールキットの異なるプログラミング言語で同様のコードを記述することが可能です。

フォントの詳細

モダンなDOSフォント

このプロジェクトには、Jayvee Enaguasが開発したModern DOS 8x16フォント（バージョン20190101.02）が含まれます。このフォントは、CC0 1.0ユニバーサルパブリックドメインの献身の条件で利用できます。フォントのコピーは、このプロジェクトのSRC/Font/ModernDos/ディレクトリにもアーカイブされています。

このフォントは、IBM PCS用のIBM VGA 8x16およびVerite 8x16 OEMフォントに基づいています。このフォントのいくつかのグリフは、IBM VGA 8x16のグリフとまったく同じように見えますが、他のグリフはVerite 8x16のグリフとまったく同じように見えます。ただし、このフォントには、2つのOEMフォントのいずれにも一致しないいくつかのグリフもあります。代わりに、それらはたまたまOEMフォントの一方または両方に見られるグリフの適応であることがあります。

私の意見では、このフォントには両方のOEMフォントの最高の部分が含まれています。私は、このフォントにゼロがゼロになっているのが好きです。また、このフォントに継承されたVeriteの文字のより正常な輪郭が気に入っています。 Verite 8x16から多くの優れたデザインを継承していますが、IBM VGA 8x16の素晴らしい機能も継承しています。たとえば、IBM VGA 8x16からの桁2の上昇したステムと桁7の湾曲した茎があります。

Oldschool PCフォント

このプロジェクトには、Vilerが開発したいくつかのOldschool PCフォント（バージョン2.2）が含まれます。これらのフォントは、Creative Commons Attribution-Sharealike 4.0 Internationalライセンスの条件の下で利用できます。これらのフォントのコピーは、このプロジェクトのSRC/Font/Oldschool/ディレクトリにもアーカイブされています。

これらのフォントは、元のIBM PC OEMフォントを可能な限り忠実に再現するという優れた仕事をします。ただし、これらのフォントは、元のフォント、特に元のフォントのマイナーなエラーを修正するために、マイナーな方法で元のOEMフォントとも異なります。これらの修正の詳細については、Oldschool PCドキュメントのFAQを参照してください。

ツールキットの使用

このプロジェクトの主な目的は、CP437グリフのビットマップアレイを配布することですが、このプロジェクトは、PythonおよびJavaScript機能としてこれらのビットマップを生成およびテストする作業の一部を作成します。 Python関数は、コマンドラインインターフェイス（CLI）ツールの形式でもパッケージ化されています。次のサブセクションは、PythonおよびJavaScript関数だけでなく、CLIツールの簡単な紹介を提供します。

cli

このプロジェクトが提供する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環境を作成し、PCフェイスをインストールします。
```
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は、常に正しいGlyphディメンションを生成するとは限らない出力ディレクトリ名から読み取られます。
同じフォントのビットマップ配列を作成しますが、グリフの幅と高さが2倍になります。
```
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/
```

出力ディレクトリには、ビットマップアレイを含むJavaScriptファイルと、グリフを示す他のいくつかのファイルが含まれるようになりました。これらのファイルの簡単な説明については、セクションリソースを参照してください。

Python API

次の手順では、Python APIを開始する方法を示しています。

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環境を作成し、PCフェイスをインストールします。
```
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

次の出力が表示されます。

 .........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........

このプロジェクトのPython APIを呼び出すPythonスクリプトのその他の例については、SRC/ Example/を参照してください。

また、Python APIで公開されているすべての機能の完全なドキュメントについては、Python APIドキュメントを参照してください。

JavaScript API

PCの対面とフォントマップをCDNからWebページにロードして使用する方法を示す最小限の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/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で公開されているすべての機能の完全なドキュメントについては、JavaScript APIドキュメントを参照してください。

ライセンス

オリジナルフォント

このプロジェクトでアーカイブされた元のフォントは、フォント開発者が選択したOrignalライセンスの条件で利用できます。

SRC/Font/ModernDos/は、CC0 1.0ユニバーサルパブリックドメインの献身の条件の下で入手できます。
SRC/Font/Oldschool/は、Creative Commons Attribution-Sharealike 4.0 Internationalライセンスの条件の下で入手できます。

モダンなDOSビットマップ

MITライセンスまたはCC0 1.0ユニバーサルパブリックドメインの献身のいずれかの条件の下で、次のディレクトリのコンテンツを使用できます。

out/out/moderndos-8x16/

Oldschool PCフォントビットマップ

GNU General Public License v3またはCreative Commons Attribution-Sharealike 4.0 Internationalライセンスのいずれかの条件の下で、次のディレクトリのコンテンツを使用できます。

out/oldschool-bios-8x8/
out/oldschool-cga-8x8/
out/oldschool-ega-8x14/
out/oldschool-mda-9x14/
out/oldschool-model30-8x16/
out/oldschool-pgc-8x16/
Out/Oldschool-verite-8x16/
out/oldschool-vga-8x16/
out/oldschool-vga-9x14/
out/oldschool-vga-9x16/
src/demo.html
src/retro.html

ソースコード

上記の3つのサブセクションにリストされているファイルを除くこのプロジェクトの他のすべてのファイルは、MITライセンスの条件で入手できます。完全なライセンステキストについては、license.mdを参照してください。

サポート

バグを報告したり、改善を提案したり、質問をしたりするには、問題を作成します。

チャネル

このプロジェクトの著者は、次の場所でオンラインでたむろしています。

ウェブサイト：susam.net
Twitter：@susam
Mastodon： @susam @mastodon.social
Github：@susam
マトリックス：#susam：matrix.org
IRC：#susam：libera.chat

上記のチャネルの1つ以上を購読、フォロー、または参加して、著者から更新を受け取るか、このプロジェクトについて質問することをお勧めします。

もっと

このプロジェクトで利用可能な最新のDOS 8x16ビットマップの小さなサブセットが、ゲームキャンバスのテキストをレンダリングするために使用されているAndromeda Invadersを参照してください。

拡大する

追加情報

バージョン 0.3.0
タイプフォントのダウンロード
更新時間 2025-07-31
サイズ 429.39KB
から Github

pcface

PCフェイス

コンテンツ

リソース

デモ

クイックデモ

詳細なデモ

ビットマップ形式

フォントの詳細

モダンなDOSフォント

Oldschool PCフォント

ツールキットの使用

cli

Python API

JavaScript API

ライセンス

オリジナルフォント

モダンなDOSビットマップ

Oldschool PCフォントビットマップ

ソースコード

サポート

チャネル

もっと

ACE スペースシューティングゲーム

P

エースアニメ

ComicFaceアプリ

戦国ACEインストール

戦国ACE モバイル版

chat.petals.dev

GPT Prompt Templates

GPTyped

fedraserif

fontplayer

XiaoyaPixel

Google Dorks

shepherd

mongo express