<html> <body bgColor="#0d3c12" text="#baffd5"> <center><h1 id = Title> <FONT color="#ffff66">Ogre Image Font Tutorial</FONT> </h1></center> <I>Last Modified: Dec. 13, 2003</I> <hr> <FONT color="#66ffff"><B>Overview:</B></FONT><br> This tutorial is intended to help people add image fonts to their Ogre projects. If you don't know what Ogre is check out <A href= "http://www.ogre3d.org">www.ogre3d.org/</A>. You'll need Bitmap Font Builder program <A href= "Http://www.lmnopc.com/bitmapfontbuilder/">www.lmnopc.com/bitmapfontbuilder/</A>. Adobe photoshop(<A href= "Http://www.adobe.com/">www.Adobe.com/</A>) to copy/paste the fonts onto a transparent background. You could probably figure out how to do this with other image editing programs. Lastly, you'll need the BitmapFontBuilderTool which I have modified, and should be included with this tutorial.<br><br> <FONT color="#66ffff"><B>BitmapFontBuilderTool Changes:</B></FONT><br> Made a few minor changes to the BitmapFontBuilderTool that comes with Ogre. Basicly instead of generating the Ogre .fontdef 'glyph' statements. It generates a complete font script file. By removing all the 'glyph' statements before "!" and after "~". Theres an option to generate all of them if needed. "(Not Recommended)" shows up when it asks you if you want to generate all 'glyph' statements. I believe Ogre only handles glyph statements that are bound to standard keys or only handles a certain number of them. So if you decide to generate all the statements, the font script won't work until you fix or delete them.<br><br> <FONT color="#66ffff"><B>Steps:</B></FONT><br> <a href="Tutorial.html#BuilderSteps">Bitmap Font Builder Steps</a><br> <a href="Tutorial.html#PhotoshopSteps">Photoshop Steps</a><br> <a href="Tutorial.html#ToolSteps">BitmapFontBuilderTool Steps</a><br><br> <a href="Tutorial.html#Watchout">Things to watchout for</a><br> <a href="Tutorial.html#FAQ">FAQ</a> <hr> <FONT color="#ffff66"><h2 id=BuilderSteps>Bitmap Font Builder Steps</h2></FONT> 1: Startup Bitmap Font Builder program.<br><br> 2. Click on "Charater Set" and make sure "Full ASCII Charater Set(0-255)" is checked.<br><img src="images\CharacterSet.jpg"><br><br> 3. Click on "Font Smoothing" and make sure "Enable (Default)" is checked.<br><img src="images\FontSmoothing.jpg"><br><br> 4. Select the font you want from the Font 1 combobox. You can adjust the font size by unchecking the box and typing in the size you want. You'll also be able to adjust the font size in .overlay scripts.<br><img src="images\Font1.jpg"><br><br> 5. Select your the texture size. 256x256 or 512x512 is recommend.<br><img src="images\TextureSize.jpg"><br><br> 6. Next comes the interesting part. This is where the image compression effects the look of your font. Below are images rendered in Ogre showing the different effects of compression. The example font is Arial, size 256x256, .png. Anti-aliasing option is dealt with in the image editing program. I'll explain a little later.<br><br> <center><B>Bitmap <U>with</U> Anti-aliasing option</B></center><center><img src="images\BmpAA.jpg"></center> <center><B>Bitmap <U>without</U> Anti-aliasing option</B></center><center><img src="images\BmpNoAA.jpg"></center><br> <center><B>8-bit TGA <U>with</U> Anti-aliasing option</B></center><center><img src="images\8bitTgaAA.jpg"></center> <center><B>8-bit TGA <U>without</U> Anti-aliasing option</B></center><center><img src="images\8bitTgaNoAA.jpg"></center><br> <center><B>24-bit TGA <U>with</U> Anti-aliasing option</B></center><center><img src="images\24bitTgaAA.jpg"></center> <center><B>24-bit TGA <U>without</U> Anti-aliasing option</B></center><center><img src="images\24bitTgaNoAA.jpg"></center><br> <center><B>32-bit TGA <U>with</U> Anti-aliasing option</B></center><center><img src="images\32bitTgaAA.jpg"></center> <center><B>32-bit TGA <U>without</U> Anti-aliasing option</B></center><center><img src="images\32bitTgaNoAA.jpg"></center><br> <center><B>Raw <U>with</U> Anti-aliasing option</B></center><center><img src="images\RawAA.jpg"></center> <center><B>Raw <U>without</U> Anti-aliasing option</B></center><center><img src="images\RawNoAA.jpg"></center><br><br> 7. Once you have decided which file type you want click "File" then select it. Save the file in a temp directory.<br><img src="images\FileMenu.jpg"><br><br> 8. You now need to save the Font widths file which will be used with the Tool. Click "File" then select "Save Font Widths (Byte Format)", save it to the same directory as the BitmapFontBuilderTool. Then you can exit Bitmap Font Builder. <br><img src="images\FileMenu2.jpg"><br><br> <hr> <FONT color="#ffff66"><h2 id=PhotoshopSteps>Photoshop Steps</h2></FONT> 1. Startup Photoshop and load the image file you made with Bitmap Font Builder.<br><br> 2. Find the tool called "Magic Wand" in the toolbar panel <img src="images\PhotoshopWand.jpg">.<br><br> 3. Find the panel under the Menu bar with Tolerance/Anti-Alised/... This is where you configure the wand tool. First make sure "Contiguous" is unchecked. Keeping it checked will leave the inter parts of characters. "Tolerance" should be low, if its to high some parts of characters could be left out. Don't worry about "Use All Layers" cause we're not using layers. Finally, look at the test images above to see if you want the "Anti-alised" option checked or not.<br><img src="images\PhotoshopWandConfig.jpg"><br><br> 4. If you've saved your image font as a 32-bit TGA file look at b. <P> a. Take the magic wand that you've configured and click in the black area of the image. You should see dashed lines around everything. Right click in the black area and a menu should popup. Select "Select Inverse" from the popup menu. If you don't inverse select you will be selecting everything but the fonts(All the Black area). Continue to step 5.</P><img src="images\PhotoshopSelectInverse.jpg"> <P> b. If you're using a 32-bit TGA file you should be looking at a white image. You need to edit the alpha layer of the image. To do this you need to use the Layers/Channels/Paths window. If its not already showing click "Window" from the menu bar at the top and select "Show Layers". That should bring up the window. In the window click on the Channels tab. You should now see five channels RGB/Red/Green/Blue/Alpha 1. Click on the Alpha 1 channel. The characters should now show up. Follow the above instructions(a.). Note: There will also be one extra step in part 5.</P><img src="images\PhotoshopChannels.jpg"><br><br> 5. If you did the 32-bit TGA image you need to click on the RGB channel now. Next 32-bit or not click on "Edit" and select "Copy".<br><img src="images\PhotoshopCopy.jpg"><br><br> 6. Now comes the important part. Click "File" then click "New...". Photoshop will auto size your copied area. So you need to make sure that the new image is the same size as the file you copied from. If you don't the letters will be bunched up or out of place when you render them in Ogre. You also need to have the "Tranparent" Background option selected. Then click "Ok".<br><img src="images\PhotoshopNew.jpg"><br><br> 7. After clicking Ok to create the new transparent image. You should be looking at a checkered image. Now click "Edit" and select "Paste". To paste the image onto the transparent background. Photoshop with center the fonts so you don't need to move them around.<br><br> 8. Ogre recommends .png or .tga image fonts. To save your file click "File" then select "Save As...". In the Save As window select the "Format" from the combobox. After you have saved the file you can exit Photoshop.<br><img src="images\PhotoshopSaveAs.jpg"><br><hr> <FONT color="#ffff66"><h2 id=ToolSteps>BitmapFontBuilderTool Steps</h2></FONT> 1. Make sure you have the widths file that Bitmap Font Builder generated for you in the same directory as the tool. Then start the tool.<br><br> 2. Unqiue font name: Ogre uses it to identify the font script. Ex. MyFont<br><br> 3. Font image name: Is the image you just made with your image editing program. Make sure you give the full name. Ex. MyFont.png<br><br> 4. Size of texture: This is the dimension of your font image. If your image is 256x256 type 256.<br><br> 5. Name of binary widths file: The file Bitmap Font Builder generated. Ex. MyFont.dat<br><br> 6. Generate all glyph statements say n if you just want to get a script generated. Read the "BitmapFontBuilderTool Changes" at the top of this document if you want to know more.<br><br> 7. Finally, enter the name of the file you want generated. The file it generates is a text file with the script in it. You can name it Ex."MyFont.fontdef" or you can copy it into another .fontdef file. Your Done! <br><br> If you want to test your font, move both .fontdef and font image into Ogre/Samples/Media directory. Or copy the font script into the sample.fontdef file and copy your font image to the Ogre/Samples/Media directory. Next edit the BasicOgreGuiTemplates.inc in the media directory with a text editor like notepad. Look for "font_name" under "template element TextArea(SS/Templates/BasicText)". Change "font_name Ogre" to font_name whatever your unique font name was(Ex. font_name Myfont). Save BasicOgreGuiTemplates.inc then goto Ogre/Samples/Common/bin/Debug or Release and run "Demo_Gui.exe". You should be able to see your font in the GUI. Hope this helped.<br><br><hr> <FONT color="#ffff66"><h2 id=Watchout>Things to watchout for</h2></FONT> The Bitmap Font Builder program can generate characters that are to close together. Allowing parts of other characters to show up. <br><center><img src="images\Watchout.jpg"> and <img src="images\Watchout2.jpg"></center><br> This is what it looked like in the Bitmap Font Builder program. (Example: Arail 256x256 font size 10.5). <b><center><img src="images\Watchout3.jpg"></center> <br><br> There are a couple of ways you can fix this. You can increase the size of the font texture file in Bitmap Font Builder while keeping the font size the same. Which increases the space between the characters. The other way is to unselect the characters that are over lapping when you're doing the magic wond step. Meaning don't include them in the image font, if there useless characters. <br><br><hr> <FONT color="#ffff66"><h2 id=FAQ>FAQ</h2></FONT> Q: Who wrote this tutorial?<br> A: [Shug]... I don't know.<br><br> Q: Why did you write this tutorial?<br> A: Well a long time ago... Hey, you tricked me!<br><br> Q: How many people do you think will read this tutorial?<br> A: LOL!<br><br> Q: Will you be writting more Ogre Tutorials?<br> A: Hmm... depends apon the real answer to the previous question.<br><br> Q: Can anybody modify and correct your mistakes?<br> A: No!<br><br> Q: Please!?<br> A: Oh alright, you can modify anything you want.<br><br> Q: Where can I find more information about .fontdef files or scripts in general?<br> A: Ogre Manaul(ie. Ogre/Docs/manual)<br><br> Q: Why is this tutorial so long?<br> A: Because of people like you!<br><br> Q: Whats that supposed to mean?<br> A: Sigh<br><br><hr> <a href="Tutorial.html#Title">Top</a> </body> </html>
distrib
>
Mandriva
>
10.0
>
i586
>
media
>
contrib
>
by-pkgid
>
06719cf03808e17ae6f0852ca1052dc2
>
files
>
234
