-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathNESFonts.html
More file actions
118 lines (108 loc) · 4.18 KB
/
NESFonts.html
File metadata and controls
118 lines (108 loc) · 4.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en" spellcheck="false">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NES Fonts</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/project.css" />
<link rel="stylesheet" href="css/main700.css" />
<link rel="stylesheet" href="css/project700.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;600&display=swap"
/>
</head>
<body>
<div id="tagline">
<p>
<br />> <b><a href="https://hallotype.github.io/">HalloType</a></b> =
Thom Janssen = font maker, type engineer, programmer, creative coder
<a href="./type/fonts.html"
><span class="typelink"> > typefaces </span></a
>
</p>
</div>
<!-- <div id="gohere">
↑↑↑
<br/>
go here!
</div>
<div id="construction">
<br/>
← still<br/>
← under<br/>
↙︎ construction<br/>
↙︎
</div> -->
<div id="main">
<img src='content/NESFont/cover.png'/>
<p class="description">The fonts in NES games are usually build up by 8x8 bytes per character. By plotting the binary data, the graphic tiles become visible and the font is exposed. If you know where the font data is located, you can draw the characters into a UFO and generate a fully working font.</p>
<p class="description desctop">
Here is the graphic data set of Super Mario Bros.<br />
In this game the type is monochome, so there is only one layer. Very
convenient, the font clearly visible, and extracting is easy.
</p>
<img src="content/NESFont/SMB1.png" />
<p class="description">
For extracting the font, a few parameters are needed:<br />
<b>></b> the byte where the font starts <br />
<b>></b> order of characters <br /><br />
Quite often there is a blank character between letters in the rom. I think
this is because one is the foreground layer and the next is the background (or
vise versa). For now, I just skip every second character.
</p>
<p class="description">
<b>The sprites</b>
<br />
The sprite order in these images is: top to bottom, left to right.<br />
Starting at $9000, the next 128 sprites look like this.<br /><br />
<img
class="img_halfwidth"
src="content/NESFont/SMB1_$9000.png"
alt="plaatje"
/>
<br />
Let’s ignore the very first 2 sprites; starting with the zero.<br />
The glyph order is: <b>"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ "</b>.<br />
Notice the space at the end.
<br />
Than some sprites we don’t care about, these can be ignored with an
@-symbol.<br />
The final glyph order look like:<br />
<b>glyphOrder = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ @@@-×@!"</b>
<br /><br />
So now we know where the font starts: $9000 + 2*$8 = $9010 and we have the
glyphOrder.
</p>
<p class="description">
<b>Draw the font</b><br />
Since it is all pixels, we need a pixelSize: <b>pixelSize = 100</b>.<br />
Let’s loop through the glyphOrder and add a glyph to the font. The glyphName
we can get from the <b>glyphNameFormatter</b> module. <br />
Starting at $9010, we fetch a byte and draw pixels in the glyph. Every glyph
is 8 bytes. And.. that is all.<br /><br />
The most work is finding out where the font-characters are. And define the
glyphOrder. Sometimes the fonts is not in one place and is scattered in the
data. An <b>addGlyph(byte, glyphName)</b> would be handy. But, ‘I leave that
as an exercise’.
</p>
<p class="description">
<b>Goodies</b><br />
Here are some scripts:<br />
<a href="content/NESFont/DrawRom.py">> DrawRom.py</a> <br />
<a href="content/NESFont/NESFonter.py">> NESFonter.py</a> <br /><br />
I can not provide the actual rom files of course.
</p>
<br /><br /><br />
<p class="description">
The End<br />You made it all the way to the bottom! If you have any feedback
on my tutorial, please get in digitally-touch. I am new to these kind of
tutorial / instructions I want to learn to do better. Find my mail within the
scripts. <br /><br />Thanks, Thom
</p>
<!-- <div id="bottomline"> </div> -->
</div>
</body>
</html>