PC Face เป็นคอลเลกชันของทรัพยากรที่เป็นมิตรกับโปรแกรมเมอร์ที่อนุญาตให้วาดอักขระ CP437 บนผืนผ้าใบกราฟิก โครงการนี้มีอาร์เรย์บิตแมปสำหรับ 256 ร่ายมนตร์ทั้งหมดจากชุดอักขระ CP437 ที่แสดงโดยใช้แบบอักษรฟรีต่างๆที่ทำซ้ำแบบอักษร IBM PC OEM ดั้งเดิม
นอกจากนี้โครงการนี้ยังมีฟังก์ชั่น Python เพียงเล็กน้อยเพื่อสร้างบิตแมปเหล่านี้และฟังก์ชั่น JavaScript สองสามอย่างที่ทำให้บิตแมปเหล่านี้บนผืนผ้าใบกราฟิก
บางทีคุณอาจสร้างเกมสไตล์ย้อนยุคที่คุณต้องการควบคุมอย่างเต็มที่ว่าแต่ละพิกเซลควรเป็นอย่างไร หรือบางทีคุณต้องการแสดง Glyphs CP437 โดยใช้เครื่องหมายดอกจันเพื่อสร้างแบนเนอร์ข้อความ อาร์เรย์บิตแมปที่มีให้ในโครงการนี้อาจเป็นประโยชน์สำหรับกิจกรรมดังกล่าว อาร์เรย์บิตแมปที่มีอยู่สามารถแปลเป็นพิกเซลบนหน้าจอหรือสัญลักษณ์สำหรับเอาท์พุทมาตรฐานเพื่อแสดง Glyphs CP437
เยี่ยมชม susam.github.io/pcface/ เพื่อดูการสาธิต
มีไฟล์จำนวนมากที่มีให้ในไดเรกทอรี/ ไดเรกทอรีของโครงการนี้ เยี่ยมชม susam.github.io/pcface/out/ เพื่อเรียกดูไฟล์เหล่านี้ ไดเรกทอรีนี้มีไดเรกทอรีย่อยหลายแบบสำหรับแบบอักษรฟรีต่างๆตามแบบอักษร IBM PC OEM ดั้งเดิม ไดเรกทอรีตัวอักษรแต่ละตัวมีอาร์เรย์บิตแมปสำหรับตัวอักษรและไฟล์อื่น ๆ สองสามไฟล์ ลิงก์ไปยังไฟล์ทรัพยากรที่ทันสมัย DOS-8X16 มีให้ด้านล่างเป็นตัวอย่างในขณะที่อธิบายทรัพยากรเหล่านี้ นี่คือคำอธิบายสั้น ๆ ของแต่ละไฟล์:
@ ) และจุด ( . ) แต่ละแถวของสัญลักษณ์จะถูกนำหน้าด้วยรหัสไบนารีของแถวที่แสดงใน hexadecimal รหัสไบนารีเดียวกันนี้ปรากฏเป็นความคิดเห็นในไฟล์ 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 คือวิธีที่อาร์เรย์บิตแมปเหล่านี้ถูกเปิดเผยใน const JavaScript อดีตเปิดเผยอาร์เรย์ของอาร์เรย์บิตแมปในขณะที่หลังเปิดเผยวัตถุที่แมปแต่ละตัวอักษร CP437 กับอาร์เรย์บิตแมป
มีการสาธิตรายละเอียดเพิ่มเติมอีกเล็กน้อยที่ susam.github.io/pcface/retro.html
ในหน้าการสาธิตคุณจะสังเกตเห็นว่าการสาธิตบิตแมปแต่ละครั้งมีสองสายพันธุ์: หนึ่งที่มี font-list ต่อท้ายและอีกรายการหนึ่งที่มี font-map ท้าย การสาธิต font-list โหลด fontlist.js ของตัวอักษรที่เลือกและทำให้ร่ายมนตร์เป็นสีเขียว การสาธิต font-map โหลด fontmap.js ของตัวอักษรที่เลือกและแสดงร่ายมนตร์ในอำพัน
ในขณะที่การสาธิตก่อนหน้านี้แสดงเพียง 40 อักขระต่อบรรทัดบนผืนผ้าใบขนาดคงที่ที่มีขนาดตัวอักษรเดียวที่เท่ากับขนาดตัวอักษรดั้งเดิมที่ปรับขนาดขึ้นสองครั้งการสาธิตนี้แสดง 80 ตัวอักษรต่อบรรทัดในขนาดตัวอักษรสองขนาดที่แตกต่างกัน: ขนาดตัวอักษรดั้งเดิมรวมถึงขนาดตัวอักษรที่ปรับขนาดขึ้นสองเท่าของขนาดตัวอักษรดั้งเดิม นอกจากนี้ในการสาธิตนี้ผ้าใบปรับขนาดตัวเองโดยอัตโนมัติเพื่อให้พอดีกับขนาดหน้าต่างเบราว์เซอร์เมื่อใดก็ตามที่เบราว์เซอร์ถูกปรับขนาด
รูปแบบของบิตแมปที่มีอยู่ในโครงการนี้ค่อนข้างง่าย สัญลักษณ์แต่ละตัวจะแสดงด้วยตาราง WXH ของพิกเซลที่ w คือความกว้างของแต่ละ glyph และ h คือความสูงของแต่ละ glyph ตัวอย่างเช่นแต่ละบิตแมปใน ModernDOS-8X16 แสดงถึง 16 แถวของพิกเซลที่มี 8 คอลัมน์ในแต่ละแถว แถว 16 แถวเหล่านี้แสดงเป็นจำนวนเต็ม 16 จำนวนในบิตแมปสำหรับแต่ละร่ายมนตร์ ตัวอย่างเช่น Glyph สำหรับตัวอักษรตัวพิมพ์ใหญ่ 'B' ที่แสดงโดยใช้แบบอักษรนี้จะแสดงเป็น:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) จำนวนเต็มแต่ละอันแสดงถึงจุดที่ต้องพล็อตสำหรับทุก ๆ แถวของ Glyph จำนวนเต็ม 0x00 และ 0x00 ที่จุดเริ่มต้นหมายความว่าสองแถวบนของร่ายมนตร์ว่างเปล่า จากนั้น 0xfc (ไบนารี 1111100 ) หมายความว่า 6 พิกเซลแรกของแถวที่สามจะถูกพล็อตด้วยสีพื้นหน้าของตัวอักษรและสองพิกเซลสุดท้ายจะถูกทิ้งไว้ ในลักษณะนี้ต้องมีการพล็อตพิกเซล 16 แถว
นี่คือตัวอย่างโค้ด Python ที่อ่านบิตแมปเหล่านี้และแปลง Glyph บนเอาต์พุตมาตรฐานโดยใช้ DOT ( . ) สำหรับทุก ๆ 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 Fonts สำหรับพีซี IBM ร่ายมนตร์บางตัวในฟอนต์นี้มีลักษณะเหมือนร่ายมนตร์ของ IBM VGA 8x16 ในขณะที่บางคนดูเหมือนร่ายมนตร์ของ Verite 8x16 อย่างไรก็ตามยังมีร่ายมนตร์หลายตัวในแบบอักษรนี้ที่ไม่ตรงกับแบบอักษร OEM สองตัว แต่พวกมันกลับกลายเป็นว่าการดัดแปลงของร่ายมนตร์ที่พบในแบบอักษร OEM หนึ่งหรือทั้งสองตัว
ในความคิดของฉันแบบอักษรนี้มีส่วนที่ดีที่สุดของทั้งแบบอักษร OEM ฉันชอบที่ตัวอักษรนี้มีศูนย์เฉือน ฉันยังชอบเค้าโครงของตัวอักษรใน Verite ที่ได้รับการสืบทอดในแบบอักษรนี้มากขึ้น ในขณะที่มันสืบทอดการออกแบบที่ดีมากมายจาก Verite 8x16 แต่ก็สืบทอดคุณสมบัติที่ดีบางอย่างจาก IBM VGA 8x16 ตัวอย่างเช่นมันมีก้านยกสำหรับ Digit 2 และลำต้นโค้งสำหรับ Digit 7 จาก IBM VGA 8x16
โครงการนี้มีฟอนต์พีซี OldSchool หลายแบบ (เวอร์ชัน 2.2) พัฒนาโดย Viler ฟอนต์เหล่านี้มีให้ภายใต้เงื่อนไขของใบอนุญาตสร้างแหล่งที่มาของ Creative Commons Sharealike 4.0 สำเนาของแบบอักษรเหล่านี้จะถูกเก็บถาวรใน SRC/Font/Oldschool/Directory ของโครงการนี้
แบบอักษรเหล่านี้ทำงานได้อย่างยอดเยี่ยมในการทำซ้ำแบบอักษร IBM PC OEM ดั้งเดิมที่ซื่อสัตย์ที่สุดเท่าที่จะทำได้ อย่างไรก็ตามฟอนต์เหล่านี้ยังแตกต่างจากแบบอักษร OEM ดั้งเดิมในรูปแบบเล็กน้อยโดยเฉพาะอย่างยิ่งเพื่อแก้ไขข้อผิดพลาดเล็กน้อยในแบบอักษรดั้งเดิม ดูคำถามที่พบบ่อยที่เอกสารประกอบ PC ของ OldSchool สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการแก้ไขเหล่านี้
ในขณะที่วัตถุประสงค์หลักของโครงการนี้คือการแจกจ่ายอาร์เรย์บิตแมปสำหรับ Glyphs CP437 โครงการนี้ยังทำให้งานบางอย่างที่เข้าสู่การสร้างและทดสอบบิตแมปเหล่านี้เป็นฟังก์ชัน Python และ JavaScript ฟังก์ชั่น Python ยังบรรจุในรูปแบบของเครื่องมืออินเตอร์เฟสบรรทัดคำสั่ง (CLI) ส่วนย่อยต่อไปนี้ให้การแนะนำสั้น ๆ เกี่ยวกับเครื่องมือ CLI เช่นเดียวกับฟังก์ชัน Python และ JavaScript
เครื่องมืออินเตอร์เฟสบรรทัดคำสั่ง Python (CLI) ที่โครงการนี้มีให้สามารถใช้ในการสร้างอาร์เรย์บิตแมปของคุณเองสำหรับ Glyphs CP437 ด้วยตัวอักษรที่คุณเลือก ขั้นตอนต่อไปนี้อธิบายวิธีที่เราสามารถทำได้โดยใช้แบบอักษร OldSchool IBM EGA 9X14 แบบอักษรที่ไม่รวมอยู่ในโครงการนี้
ดาวน์โหลดและแยกไฟล์ FONT สำหรับ 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 Face:
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 คือความกว้างของแต่ละ glyph และ H คือความสูงของแต่ละ glyph ตัวเลือก -s ระบุขนาดตัวอักษร ควรตั้งค่าเป็นขนาดตัวอักษรที่นำไปสู่ร่ายมนตร์ของมิติที่ต้องการ หากตัวเลือก -s ถูกละเว้นขนาดตัวอักษรของ H จะถูกใช้โดยที่ H คือความสูงของ Glyph ที่อ่านจากชื่อไดเรกทอรีเอาท์พุทซึ่งอาจไม่ได้สร้างมิติของร่ายมนตร์ที่ถูกต้องเสมอไป
ตอนนี้สร้างอาร์เรย์บิตแมปสำหรับตัวอักษรเดียวกัน แต่ด้วยความกว้างของร่ายมนตร์และความสูงเป็นสองเท่า:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/ไดเรกทอรีเอาท์พุทจะมีไฟล์ JavaScript ที่มีอาร์เรย์บิตแมปรวมถึงไฟล์อื่น ๆ สองสามไฟล์ที่แสดงร่ายมนตร์ ดูทรัพยากรส่วนสำหรับคำอธิบายสั้น ๆ ของไฟล์เหล่านี้
ขั้นตอนต่อไปนี้แสดงวิธีเริ่มต้นด้วย Python API:
ดาวน์โหลดและแยกไฟล์ FONT สำหรับ 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 Face:
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 สำหรับเอกสารที่สมบูรณ์ของฟังก์ชั่นทั้งหมดที่เปิดเผยใน JavaScript API
แบบอักษรดั้งเดิมที่เก็บถาวรในโครงการนี้มีอยู่ภายใต้เงื่อนไขของใบอนุญาต orignal ที่เลือกโดยนักพัฒนาแบบอักษรเช่น
คุณสามารถใช้เนื้อหาของไดเรกทอรีต่อไปนี้ภายใต้ข้อกำหนดของใบอนุญาต MIT หรือการอุทิศโดเมนสาธารณะ CC0 1.0 Universal:
คุณสามารถใช้เนื้อหาของไดเรกทอรีต่อไปนี้ภายใต้ข้อกำหนดของใบอนุญาตสาธารณะ GNU ทั่วไป V3 หรือ Creative Commons Attribution-Sharealike 4.0 ใบอนุญาตระหว่างประเทศ:
ไฟล์อื่น ๆ ทั้งหมดในโครงการนี้ไม่รวมไฟล์ที่ระบุไว้ในสามส่วนย่อยด้านบนมีอยู่ภายใต้ข้อกำหนดของใบอนุญาต MIT ดู License.md สำหรับข้อความใบอนุญาตที่สมบูรณ์
ในการรายงานข้อบกพร่องแนะนำการปรับปรุงหรือถามคำถามสร้างปัญหา
ผู้เขียนโครงการนี้ออกไปเที่ยวที่สถานที่ต่อไปนี้ทางออนไลน์:
คุณสามารถสมัครสมาชิกติดตามหรือเข้าร่วมหนึ่งช่องทางข้างต้นเพื่อรับการอัปเดตจากผู้แต่งหรือถามคำถามเกี่ยวกับโครงการนี้
ดู Andromeda Invaders ที่ชุดย่อยขนาดเล็กของ Bitmaps Dos 8x16 ที่ทันสมัยที่มีอยู่ในโครงการนี้ถูกนำมาใช้เพื่อแสดงข้อความบนผืนผ้าใบเกม