Icon Tab
BittyFont Plugin
New to BG2 is BittyFont, which creates bitmap representations of text created with bitmap fonts. Included with BittyFont is a BittyFont Editor, which can import a single picture of font characters and create the font metrics for it, so that it can be used as a BittyFont font. These fonts, once created are stored in the Font folder inside the Plugins directory, inside the ButtonGadget folder.
When you first open BittyFont, youll need to choose a font from which to render. There is a default font called Textend. You can then sent the color for the text, and whether you want it to be on a transparent background or opaque one. If opaque, you can choose the color for the background as well. You can set the character and line spacing as well as the background padding for the text you will generate. Type the text in the Text field and choose an alignment (left, center, right) and press the render button. The newly generated text will be displayed in the dark area at the bottom of the BittyFont window. You can Export the button to JPG, PNG or GIF, or copy it to the clipboard.
Pressing the Add Text button will REPLACE the current icon for the selected button state. Because BittyFont text is an image, you cannot have an icon with BittyFont text, only one or the other.
Clicking the Editor button takes you to the BittyFont Editor.
When you first open BittyFont, youll need to choose a font from which to render. There is a default font called Textend. You can then sent the color for the text, and whether you want it to be on a transparent background or opaque one. If opaque, you can choose the color for the background as well. You can set the character and line spacing as well as the background padding for the text you will generate. Type the text in the Text field and choose an alignment (left, center, right) and press the render button. The newly generated text will be displayed in the dark area at the bottom of the BittyFont window. You can Export the button to JPG, PNG or GIF, or copy it to the clipboard.
Pressing the Add Text button will REPLACE the current icon for the selected button state. Because BittyFont text is an image, you cannot have an icon with BittyFont text, only one or the other.
Clicking the Editor button takes you to the BittyFont Editor.
Icon Tab
New to ButtonGadget2 is the ability to add small images or icons to your buttons. In many ways, this works pretty much the same as text in the sense you can move the icon around and copy the image and position settings to other button states. You can load the icon (either a JPG or PNG) via the Load Image button. Once loaded, you can move the icon by pressing on any of the Move Icon Image buttons. Shift-Clicking while pressing will move it in increments of 5 pixels, while a normal press only moves it a single pixel.
Once you have assigned an icon to the current button state, you can then apply it to all the other visible button states by clicking the Copy Image to All button. If you wish, you can check the also copy position checkbox and the icon will be copied to the same place on each button state you designate.
Once you have assigned an icon to the current button state, you can then apply it to all the other visible button states by clicking the Copy Image to All button. If you wish, you can check the also copy position checkbox and the icon will be copied to the same place on each button state you designate.
BittyFont Editor
The BittyFont Editor is for those who wish to create their own BittyFonts. Heres an overview of how it works.
First you create in Photoshop a PNG file with the characters you want. The characters should be black on a white background and you can use any characters (or omit any characters) you want in an alphabet.
Once youve created a PNG file with your characters, youll need to create a new font. Do this by pressing the New button. Name your font and select the image for it. The name will be placed in the Installed Fonts list and the image imported and displayed in the Font Bitmap window.
Next, click the Edit Text checkbox and type in the characters as you see them in your imported image. Press return to create a new line. If youre unsure, click the Textend font file in the font list and see how its done.
If you're only creating capital letters, check the caps only checkbox.
Once youve finished typing the letters as they appear in the font image, you can uncheck the Edit Text checkbox. Then press the Set Char Map button and you will see the characters you just typed appear in the Font Rect Map field. Now, youll need to designate a region on your font image for each letter in the Font Rect Map field.
Heres how we do this. Create a basic width and height for your character in pixels. Dont worry, it doesn't have to be perfect…yet. Next, drag the baseline guide (the Blue guide) down a bit to the bottom of the first row of characters, Then drag the character start guide (the Red Guide) to the right to the beginning of the first character. Now you've initialized the settings and you're ready to start designating regions for each character.
Click on a character in the Font Character Map field. This will highlight that same character in the Font Rect Map. Next, you need to adjust the character spacing for that character. Find the character in the Font Bitmap and set the baseline for it (drag the blue guide). Next set the left character start guide (drag the red guide) to the beginning of the character. You should now see the character appear in the preview. There you can modify the width spacing by dragging either the red or green guide. You can also adjust character spacing by adjusting any of the Char fields at the right of the preview image, then press the render button to preview.
Continue setting the character spacing for each character in your alphabet. Once you're satisfied with all the characters, you can press the Save button on the upper right. It will save your new BittyFont in the fonts folder inside the plugins folder. Now you can use it within BittyFont.
First you create in Photoshop a PNG file with the characters you want. The characters should be black on a white background and you can use any characters (or omit any characters) you want in an alphabet.
Once youve created a PNG file with your characters, youll need to create a new font. Do this by pressing the New button. Name your font and select the image for it. The name will be placed in the Installed Fonts list and the image imported and displayed in the Font Bitmap window.
Next, click the Edit Text checkbox and type in the characters as you see them in your imported image. Press return to create a new line. If youre unsure, click the Textend font file in the font list and see how its done.
If you're only creating capital letters, check the caps only checkbox.
Once youve finished typing the letters as they appear in the font image, you can uncheck the Edit Text checkbox. Then press the Set Char Map button and you will see the characters you just typed appear in the Font Rect Map field. Now, youll need to designate a region on your font image for each letter in the Font Rect Map field.
Heres how we do this. Create a basic width and height for your character in pixels. Dont worry, it doesn't have to be perfect…yet. Next, drag the baseline guide (the Blue guide) down a bit to the bottom of the first row of characters, Then drag the character start guide (the Red Guide) to the right to the beginning of the first character. Now you've initialized the settings and you're ready to start designating regions for each character.
Click on a character in the Font Character Map field. This will highlight that same character in the Font Rect Map. Next, you need to adjust the character spacing for that character. Find the character in the Font Bitmap and set the baseline for it (drag the blue guide). Next set the left character start guide (drag the red guide) to the beginning of the character. You should now see the character appear in the preview. There you can modify the width spacing by dragging either the red or green guide. You can also adjust character spacing by adjusting any of the Char fields at the right of the preview image, then press the render button to preview.
Continue setting the character spacing for each character in your alphabet. Once you're satisfied with all the characters, you can press the Save button on the upper right. It will save your new BittyFont in the fonts folder inside the plugins folder. Now you can use it within BittyFont.