Difference between revisions of "How to Add Characters and Icons to the Font"

From The Powder Toy
Jump to: navigation, search
(Windows)
(Update to refer to meson and font.bz2)
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Defines for the menu sections are located in simulation/SimulationData.h. The names and icons are in LoadMenus() in simulation/SimulationData.cpp. These are what you need to edit to create a new menu.
+
== Icons ==
 +
Any icons specific to The Powder Toy are allocated from one of the private use areas of unicode: U+E000 through U+F8FF. If you wish to add a new icon you should allocate it from that range.
  
If you downloaded the legacy source from Github, then you'll find a folder called font. If you look inside it, you'll see that there is packer.c, unpacker.c and editor.c. If you don't see it, then you either downloaded the C++ source code, or you deleted it somehow. If this is the case, then just download the legacy source code again from here: [https://github.com/FacialTurd/The-Powder-Toy/tree/legacy]. The instructions for Windows and Linux are different, so be sure to follow the correct instructions.
+
== Compiling the font editor ==
  
== Windows ==
+
The data for the font is specified in <code>data/font.bz2</code> but editing that file by hand is a bad idea. The TPT source comes with a graphical editor for this file, which you can build by setting the <code>build_font</code> option to <code>true</code>, as explained in [[Building TPT with Meson|the meson guide]]. This will produce an executable called <code>font</code> or <code>font.exe</code>. You will have to pass the path to <code>data/font.bz2</code> to it as a command line argument, e.g. <code>font.exe ..\data\font.bz2</code> or <code>build\font.exe data\font.bz2</code>.
'''0)''' You will need GNU Make for the next step. You can download GNU Make from here: [https://www.gnu.org/software/make]
 
  
'''1)''' Get a copy of the old c source, and of the new source.  The old source is in the legacy branch on github. Maybe the font editor will eventually be added to the new source.
+
== Editing the font ==
  
'''2)''' Copy font.h from /data in the new source and and paste it into /font from the old source
+
After opening <code>font.bz2</code> using the font editor you will be presented with a GUI. The top part contains the character currently being edited. Below you can select the unicode codepoint you're currently looking at (in hexadecimal, or using the arrows), make the character wider or narrower, create or delete the character, toggle the grid and the rulers (take a look at several uppercase and lowercase characters, characters with lower hooks and accents, to see how these rulers are used).
 +
Below you can configure the foreground and background colors for the editor (sometimes useful for multi-colored icons). "Render" reflects your changes in the font editor program itself, and "Save" saves your changes into <code>font.bz2</code>. On the bottom left there is a text field into which you can enter codepoints in hexadecimal, and they will be rendered on the bottom right, this is to test what they look like among other text.
  
'''3)''' Navigate into /font, and open a Command Prompt here. Compile the font editor tools using the following commands:
+
The font editor also supports some key bindings: Left and Right to switch between characters; Shift-Left, Right, Up, Down to shift the current character by 1 pixel in either direction; C to copy the current character and V to paste; Q to exit.
<syntaxhighlight lang="bash">
 
make unpacker.exe packer.exe editor.exe
 
</syntaxhighlight>
 
Alternatively, just download a premade one [https://github.com/downloads/jacob1/The-Powder-Toy/fontexes.zip here], with the added feature of showing the hex id as you edit.
 
  
'''4)''' In the same terminal run the following command to create a font.bin file the editor can read:
+
Once you're done with editing the font press "Save" and exit. This will update <code>font.bz2</code> so next time you compile TPT it will include your changes to the font.
<syntaxhighlight lang="bash">
 
unpacker.exe
 
</syntaxhighlight>
 
  
'''5)''' Run the editor from the terminal, and then use the "+" and "-" keys to go the end and find an empty character. Empty characters look like thermometers, although be careful not to confuse it with the actual thermometer. If it is just erase it via right clicking and left clicking in the drawing field. It will take a lot of pressing "+" to get to the end. Now draw your character. Look in the stdout.txt file in the same directory, and the last number in the file is the char id that corresponds to whatever icon you drew Remember the char id. If you used the precompiled one, you should have seen this number when editing instead.
+
== Menu Icons ==
  
'''6)''' Close down the editor and run:
+
Defines for the menu sections are located in <code>simulation/SimulationData.h</code>. Take a look at <code>LoadMenus()</code> in <code>simulation/SimulationData.cpp</code>. The first column is the unicode codepoint for the icon, the second column is the menu name. These are what you need to edit to create a new menu.
<syntaxhighlight lang="bash">
 
packer.exe > font.h
 
</syntaxhighlight>
 
 
 
Only use steps 7 and 8 if you downloaded the precompiled version (it's a bit out of date some icons will show different)
 
 
 
'''7)''' Rename stdout.txt to font.h
 
 
 
'''8)''' Open font.h, at the top of the file you should see something like this
 
<syntaxhighlight lang="c">
 
#ifndef FONT_H_CHECK
 
#define FONT_H_CHECK
 
#define FONT_H 10
 
#ifdef INCLUDE_FONTDATA
 
char font_data[] = {
 
</syntaxhighlight>
 
 
 
Replace
 
<syntaxhighlight lang="c">
 
char font_data[] = {
 
</syntaxhighlight>
 
With
 
<syntaxhighlight lang="c">
 
unsigned char font_data[] = {
 
</syntaxhighlight>
 
Go to the bottom of the file and you should see something like this
 
<syntaxhighlight lang="c">
 
};
 
#endif
 
#endif
 
</syntaxhighlight>
 
Change it to this
 
<syntaxhighlight lang="c">
 
};
 
#else
 
extern unsigned char font_data[];
 
extern short font_ptrs[];
 
#endif
 
#endif
 
</syntaxhighlight>
 
 
 
Or otherwise when you compile "The Powder Toy" you will get errors with the Graphics.cpp
 
 
 
'''9)''' Copy the font.h into /data from the new source, replacing the old one.
 
 
 
'''10)''' For your new menu, replace FF with the char id you remembered from step 5.
 
<syntaxhighlight lang="c">
 
{"\xFF", "new menu ftw", 0, 1},
 
</syntaxhighlight>
 
 
 
'''11)''' Recompile The Powder Toy and you should be ready to go.
 
 
 
== Linux ==
 
'''0)''' This guide was written for the old tpt, font.h is in /data in the new source, not /includes, but the font editor is only in /font from the old source. Things won't work correctly, just copy font.h manually into /font and start from the end of step 2. The old source is in the legacy branch on github.
 
 
 
'''1)''' Open a Terminal and ''cd'' to the /font directory that's included with the Git source code.
 
 
 
'''2)''' Enter the following commands to copy font.h from includes to font and compile the font editor tools:
 
<syntaxhighlight lang="bash">
 
cp ../includes/font.h .
 
make unpacker packer editor
 
</syntaxhighlight>
 
 
 
'''3)''' In the same terminal run the following command to create a font.bin file the editor can read:
 
<syntaxhighlight lang="bash">
 
./unpacker > output1.txt
 
</syntaxhighlight>
 
 
 
'''5)''' Run the editor from the terminal and then use the "+" and "-" keys to go the end and find an empty character. Empty characters look like thermometers, although be careful not to confuse it with the actual thermometer. If it is just erase it via right clicking and left clicking in the drawing field. It will take a lot of pressing "+" to get to the end. Now draw your character. and look in output1.txt, and the last number there is the char id and it corresponds to what icon you drew.
 
 
 
'''6)''' close down the editor and run:
 
<syntaxhighlight lang="bash">
 
rm ./font.h
 
./packer > font.h
 
cp -f ./font.h ../includes
 
</syntaxhighlight>
 
 
 
'''8)''' for your new menu, replace FF with the last number from the output1.txt file in the font directory.
 
<syntaxhighlight lang="c">
 
{"\xFF", "new menu ftw", 0, 1},
 
</syntaxhighlight>
 
 
 
'''9)''' Recompile The Powder Toy and you should be ready to go.
 
  
 
[[Category:Development]]
 
[[Category:Development]]

Revision as of 06:01, 25 June 2021

Icons

Any icons specific to The Powder Toy are allocated from one of the private use areas of unicode: U+E000 through U+F8FF. If you wish to add a new icon you should allocate it from that range.

Compiling the font editor

The data for the font is specified in data/font.bz2 but editing that file by hand is a bad idea. The TPT source comes with a graphical editor for this file, which you can build by setting the build_font option to true, as explained in the meson guide. This will produce an executable called font or font.exe. You will have to pass the path to data/font.bz2 to it as a command line argument, e.g. font.exe ..\data\font.bz2 or build\font.exe data\font.bz2.

Editing the font

After opening font.bz2 using the font editor you will be presented with a GUI. The top part contains the character currently being edited. Below you can select the unicode codepoint you're currently looking at (in hexadecimal, or using the arrows), make the character wider or narrower, create or delete the character, toggle the grid and the rulers (take a look at several uppercase and lowercase characters, characters with lower hooks and accents, to see how these rulers are used). Below you can configure the foreground and background colors for the editor (sometimes useful for multi-colored icons). "Render" reflects your changes in the font editor program itself, and "Save" saves your changes into font.bz2. On the bottom left there is a text field into which you can enter codepoints in hexadecimal, and they will be rendered on the bottom right, this is to test what they look like among other text.

The font editor also supports some key bindings: Left and Right to switch between characters; Shift-Left, Right, Up, Down to shift the current character by 1 pixel in either direction; C to copy the current character and V to paste; Q to exit.

Once you're done with editing the font press "Save" and exit. This will update font.bz2 so next time you compile TPT it will include your changes to the font.

Menu Icons

Defines for the menu sections are located in simulation/SimulationData.h. Take a look at LoadMenus() in simulation/SimulationData.cpp. The first column is the unicode codepoint for the icon, the second column is the menu name. These are what you need to edit to create a new menu.