pcface
0.3.0
PC Face adalah kumpulan sumber daya ramah-programmer yang memungkinkan menggambar karakter CP437 pada kanvas grafis. Proyek ini menyediakan array bitmap untuk semua 256 mesin terbang dari set karakter CP437 yang diberikan menggunakan berbagai font gratis yang mereproduksi font OEM IBM PC asli.
Selain itu, proyek ini mencakup beberapa fungsi Python untuk menghasilkan bitmap ini dan beberapa fungsi JavaScript yang membuat bitmap ini pada kanvas grafis.
Mungkin Anda membuat permainan bergaya retro di mana Anda ingin mengambil kendali penuh atas apa yang seharusnya menjadi piksel. Atau mungkin Anda ingin membuat mesin terbang CP437 menggunakan tanda bintang untuk membuat spanduk teks. Array bitmap yang disediakan dalam proyek ini mungkin berubah menjadi berguna untuk kegiatan tersebut. Array bitmap yang tersedia dapat diterjemahkan ke piksel di layar atau simbol untuk output standar untuk membuat mesin terbang CP437.
Kunjungi susam.github.io/pcface/ untuk melihat demo.
Ada sejumlah file yang disediakan dalam direktori/ direktori proyek ini. Kunjungi susam.github.io/pcface/out/ untuk menelusuri file -file ini. Direktori ini berisi beberapa subdirektori untuk berbagai font gratis berdasarkan font IBM PC OEM asli. Setiap direktori font berisi array bitmap untuk font dan beberapa file lainnya. Tautan ke file sumber daya Modern-DOS-8X16 disediakan di bawah ini sebagai contoh sambil menggambarkan sumber daya ini. Berikut adalah deskripsi singkat dari setiap file:
@ ) dan titik-titik ( . ). Setiap baris mesin terbang diawali dengan kode biner dari baris yang diwakili dalam heksadesimal. Kode biner yang sama muncul sebagai komentar dalam file JavaScript yang disebutkan di atas.File serupa tersedia untuk setiap font yang termasuk dalam proyek ini. Kunjungi susam.github.io/pcface/out/ untuk menjelajahinya.
File -file ini juga tersedia melalui CDN di https://cdn.jsdelivr.net/npm/pcface/out/.
Untuk demo cepat dari berbagai bitmap yang tersedia dalam proyek ini, kunjungi halaman demo di susam.github.io/pcface/. Ada menu dropdown di bagian bawah yang dapat digunakan untuk memilih bitmap untuk font yang berbeda.
Demo ini menggunakan daftar font dari fontlist.js dan peta font dari fontmap.js untuk font yang dipilih. Demo daftar font ditampilkan di kanvas pertama menggunakan warna latar depan hijau. Demo peta font ditampilkan di kanvas kedua menggunakan warna kuning.
Mesin terbang yang diberikan terlihat persis sama di kedua demo karena array bitmap yang sama digunakan dalam kedua kasus. Satu -satunya perbedaan antara fontlist.js dan fontmap.js adalah bagaimana array bitmap ini terpapar dalam const JavaScript. Yang pertama memaparkan array array bitmap sedangkan yang terakhir memaparkan objek yang memetakan masing -masing karakter Cp437 ke array bitmap.
Ada demo lain yang sedikit lebih rinci yang tersedia di susam.github.io/pcface/retro.html.
Di halaman demo, Anda akan melihat bahwa setiap demo bitmap hadir dalam dua varian: satu dengan font-list dan satu lagi dengan akhiran font-map . Demo font-list memuat fontlist.js dari font yang dipilih dan membuat mesin terbang berwarna hijau. Demo font-map memuat fontmap.js dari font yang dipilih dan membuat mesin terbang di amber.
Sementara demo sebelumnya hanya menunjukkan 40 karakter per baris pada kanvas ukuran tetap dengan ukuran font tunggal yang sama dengan ukuran font asli yang ditingkatkan dua kali, demo ini menunjukkan 80 karakter per baris dalam dua ukuran font yang berbeda: ukuran font asli serta ukuran font yang diperkecil yang dua kali ukuran font asli. Lebih lanjut, dalam demo ini, kanvas secara otomatis mengubah ukuran dirinya agar sesuai dengan ukuran jendela browser setiap kali browser diubah ukurannya.
Format bitmap yang tersedia dalam proyek ini cukup sederhana. Setiap mesin terbang diwakili dengan grid piksel WXH di mana W adalah lebar masing -masing mesin terbang dan h adalah ketinggian masing -masing mesin terbang. Misalnya, setiap bitmap di ModernDOS-8X16 mewakili 16 baris piksel dengan 8 kolom di setiap baris. 16 baris ini direpresentasikan sebagai 16 bilangan bulat dalam bitmap untuk setiap mesin terbang. Misalnya, mesin terbang untuk huruf besar 'B' yang diberikan menggunakan font ini diwakili sebagai:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) Setiap bilangan bulat mewakili titik -titik yang harus diplot untuk setiap baris mesin terbang. Integers 0x00 dan 0x00 di awal berarti bahwa dua baris teratas mesin terbang kosong. Kemudian 0xfc (biner 1111100 ) berarti bahwa 6 piksel pertama dari baris ketiga diplot dengan warna latar depan font dan dua piksel terakhir dibiarkan kosong. Dengan cara ini, 16 baris piksel harus diplot.
Berikut adalah contoh kode Python yang membaca bitmap ini dan memplot mesin terbang pada output standar menggunakan titik ( . ) Untuk setiap 0 bit dan simbol AT ( @ ) untuk setiap 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 )Ini outputnya:
0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........
Jika Anda membutuhkan lebih banyak bantuan dengan menulis kode untuk menerjemahkan bitmap ke piksel, lihat fungsi drawChar() , drawString() , dan drawStrings() di src/pcface.js. Anda juga dapat memuat skrip ini di halaman web Anda menggunakan URL CDN dan menggunakan fungsi -fungsi ini secara langsung di halaman Anda. Ini dijelaskan secara lebih rinci di bagian JavaScript API.
Seharusnya dimungkinkan untuk merujuk pada fungsi -fungsi ini dan menulis kode serupa dalam bahasa pemrograman yang berbeda untuk toolkit grafis pilihan Anda.
Proyek ini mencakup font DOS 8X16 modern (versi 20190101.02) yang dikembangkan oleh Jayvee Enaguas. Font ini tersedia di bawah ketentuan Dedikasi Domain Publik Universal CC0 1.0. Salinan font juga diarsipkan dalam direktori SRC/Font/ModernDos/dari proyek ini.
Font ini didasarkan pada font IBM VGA 8X16 dan Verite 8x16 OEM untuk PC IBM. Beberapa mesin terbang dalam font ini terlihat persis seperti mesin terbang IBM VGA 8x16 sementara beberapa yang lain terlihat persis seperti mesin terbang dari Verite 8x16. Namun, ada juga beberapa mesin terbang dalam font ini yang tidak cocok dengan kedua font OEM. Sebaliknya mereka adalah adaptasi dari mesin terbang yang ditemukan di salah satu atau kedua font OEM.
Menurut pendapat saya, font ini berisi bagian terbaik dari kedua font OEM. Saya suka bahwa font ini memiliki nol verite yang dipotong. Saya juga menyukai garis besar kuadrat dari huruf -huruf di verite yang telah diwarisi ke dalam font ini. Meskipun mewarisi banyak desain yang bagus dari Verite 8x16, ia juga mewarisi beberapa fitur bagus dari IBM VGA 8x16. Misalnya, ia memiliki batang yang terangkat untuk Digit 2 dan batang melengkung untuk Digit 7 dari IBM VGA 8x16.
Proyek ini mencakup beberapa font pc oldschool (versi 2.2) yang dikembangkan oleh Viler. Font-font ini tersedia di bawah ketentuan Lisensi Internasional Creative Commons Attribution-Sharealike 4.0. Salinan font ini juga diarsipkan dalam direktori SRC/font/oldschool/dari proyek ini.
Font -font ini melakukan pekerjaan yang sangat baik untuk mereproduksi font IBM PC OEM yang asli setia mungkin. Namun, font ini juga berbeda dari font OEM asli dengan cara -cara kecil, terutama, untuk memperbaiki kesalahan kecil dalam font asli. Lihat FAQ di dokumentasi PC oldschool untuk detail lebih lanjut tentang koreksi ini.
Sementara tujuan utama dari proyek ini adalah untuk mendistribusikan array bitmap untuk mesin terbang CP437, proyek ini juga membuat beberapa pekerjaan yang digunakan untuk menghasilkan dan menguji bitmap ini sebagai fungsi Python dan JavaScript. Fungsi Python juga dikemas dalam bentuk alat antarmuka baris perintah (CLI). Subbagian berikut memberikan pengantar singkat untuk alat CLI serta fungsi Python dan JavaScript.
Alat antarmuka baris perintah Python (CLI) yang disediakan proyek ini dapat digunakan untuk menghasilkan array bitmap Anda sendiri untuk mesin terbang CP437 dengan font pilihan Anda. Langkah -langkah berikut menjelaskan bagaimana kita dapat melakukan ini dengan menggunakan font oldschool IBM EGA 9X14, font yang tidak termasuk dalam proyek ini.
Unduh pertama dan ekstrak file font untuk 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 "Buat lingkungan Python virtual dan instal PC Face:
python3 -m venv venv
venv/bin/pip3 install pcfaceMasukkan perintah berikut untuk mencetak detail penggunaan alat:
venv/bin/pcface -hBuat array bitmap dan file output lainnya:
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/ Perhatikan bahwa nama direktori output harus diakhiri dengan dimensi setiap mesin terbang output yang diekspresikan dalam format WxH di mana W adalah lebar masing -masing mesin terbang dan H adalah ketinggian masing -masing mesin terbang. Opsi -s menentukan ukuran font. Itu harus diatur ke ukuran font yang mengarah ke mesin terbang dari dimensi yang diinginkan. Jika opsi -s dihilangkan, ukuran font H digunakan di mana H adalah tinggi mesin terbang yang dibaca dari nama direktori output yang mungkin tidak selalu menghasilkan dimensi mesin terbang yang benar.
Sekarang buat array bitmap untuk font yang sama tetapi dengan lebar mesin terbang dan tinggi dua kali lipat:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/Direktori output sekarang akan berisi file JavaScript yang berisi array bitmap serta beberapa file lain yang menggambarkan mesin terbang. Lihat Sumber Daya Bagian untuk deskripsi singkat file -file ini.
Langkah -langkah berikut menunjukkan cara memulai dengan API Python:
Unduh pertama dan ekstrak file font untuk 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 "Buat lingkungan Python virtual dan instal PC Face:
python3 -m venv venv
venv/bin/pip3 install pcface Sekarang tulis skrip python ini dan simpan dalam file, katakanlah, 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 )Masukkan perintah berikut untuk menjalankan skrip:
venv/bin/python3 ex1.pyOutput berikut akan muncul:
.........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........
Lihat SRC/ Contoh/ Untuk lebih banyak contoh skrip Python yang memohon API Python dari proyek ini.
Juga, lihat dokumentasi API Python untuk dokumentasi lengkap dari semua fungsi yang diekspos dalam API Python.
Berikut adalah contoh HTML minimal yang menunjukkan bagaimana wajah PC dan peta font dapat dimuat dari CDN ke halaman web dan digunakan:
<!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 >Berikut adalah contoh lain yang memuat daftar font alih -alih peta font:
<!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 >Lihat Dokumentasi API JavaScript untuk dokumentasi lengkap dari semua fungsi yang diekspos dalam JavaScript API.
Font asli yang diarsipkan dalam proyek ini tersedia di bawah ketentuan lisensi orignal yang dipilih oleh pengembang font, yaitu
Anda dapat menggunakan konten dari direktori berikut berdasarkan ketentuan lisensi MIT atau Dedikasi Domain Publik Universal CC0 1.0:
Anda dapat menggunakan konten dari direktori berikut berdasarkan ketentuan Lisensi Publik Umum GNU V3 atau Lisensi Internasional Atribusi-Sharealike 4.0 Creative Commons:
Semua file lain dalam proyek ini, tidak termasuk yang tercantum dalam tiga subbagian di atas, tersedia di bawah ketentuan lisensi MIT. Lihat lisensi.md untuk teks lisensi lengkap.
Untuk melaporkan bug, menyarankan perbaikan, atau mengajukan pertanyaan, membuat masalah.
Penulis proyek ini nongkrong di tempat -tempat berikut secara online:
Anda dipersilakan untuk berlangganan, mengikuti, atau bergabung dengan satu atau lebih saluran di atas untuk menerima pembaruan dari penulis atau mengajukan pertanyaan tentang proyek ini.
Lihat Invaders Andromeda di mana sebagian kecil bitmap DOS 8X16 modern yang tersedia dalam proyek ini telah digunakan untuk membuat teks pada kanvas game.
