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

From The Powder Toy
Jump to: navigation, search
(Text formating and fixed some of my bad grammer)
(Update to refer to meson and font.bz2)
(19 intermediate revisions by 8 users not shown)
Line 1: Line 1:
==''' Adding an Icon to menus''' ==
+
== 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 ==
  
If you downloaded the source from github you would have a folder called font if you look in side you will see that there is packer.c, unpacker.c and editor.c, if you don't see it then you either downloaded the source code off the website powdertoy.co.uk or you deleted it somehow, if this is the case re-download it from here [https://github.com/FacialTurd/The-Powder-Toy The-Powder-Toy]
+
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>.
  
'''1)''' copy font.h from /includes and paste it into /font.
+
== Editing the font ==
  
'''2)''' compile the editor, unpacker and packer i am not sure how one would do this on windows but on linux it would just be make editor unpacker packer
+
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)''' open cmd prompt/terminal and change the directory to /The-Powder-Toy and run
+
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.
linux: ./unpacker >> font.bin
 
windows: not sure it might be similar to linux
 
  
'''4)''' you would now have a file called font.bin it is a file that /font that is what is needed to run the editor with the current icons tpt use.  
+
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.
  
'''5)''' run the editor via cmd/terminal and then press space/backspace to find an empty character, it may be a thermometer if it is just erase it via right clicking and left clicking in the drawing field. now draw you character and look in cmd/terminal and the last number you will see there is the char id and it corresponds to what icon you drew.
+
== Menu Icons ==
  
'''6)''' close down the editor and delete the font.h then 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.
linux: ./packer >> font.h
 
windows : not sure
 
  
'''7)''' copy the new font.h into /includes replacing the old one.
+
[[Category:Development]]
 
 
'''8)''' for your new menu set the char id to what i told you to remember before.
 
etc: {"\xFF", "new menu ftw", 0, 1},
 
FF is the char id.
 
 
 
'''9)''' recompile and you should be ready to go.
 

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.