java
/
jMonkeyEngine-wiki
의 미러 https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132
							<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Asciidoctor 1.5.4"><title>Font Creation</title><link rel="stylesheet" href="./asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./coderay-asciidoctor.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"></head><body class="article toc2 toc-left"><div id="header"><div id="toolbar"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/src/docs/asciidoc/sdk/font_creation.adoc"><i class="fa fa-pencil-square" aria-hidden="true"></i></a><a href="https://github.com/jMonkeyEngine/wiki/new/master/src/docs/asciidoc/sdk/"><i class="fa fa-plus-square" aria-hidden="true"></i></a><input dir="auto" style="position: relative; vertical-align: top;" spellcheck="false" autocomplete="off" class="searchbox__input aa-input" id="doc-search" name="search" placeholder="Search in the doc" required="required" type="search"></div><h1>Font Creation</h1><div class="details"><span class="author" id="author"></span><br><span id="revnumber">version ,</span> <span id="revdate">2016/03/17 20:48</span></div><div id="toc" class="toc2"><div id="toctitle">Table of Contents</div><ul class="sectlevel1"><li><a href="#font-settings">Font Settings</a></li><li><a href="#image-settings">Image Settings</a></li><li><a href="#preview">Preview</a></li><li><a href="#finishing">Finishing</a><ul class="sectlevel2"><li><a href="#advanced-effects">Advanced Effects</a></li></ul></li></ul></div></div><div id="content"><div id="preamble"><div class="sectionbody"><div class="paragraph"><p>Most jME3 projects use Bitmap Fonts in order to display text to the user. This is because they render much faster than alternatives, although they do have a number of limitations. The main limitation being that the text will not scale in or out very well, it is designed to be displayed at a certain pixel size on the screen and will lose quality if it zooms too far in or out from that size.</p></div>
<div class="paragraph"><p>All current jME3 <abbr title="Graphical User Interface">GUI</abbr> libraries use Bitmap Fonts, as does the BitmapText class provided within jME3.</p></div>
<div class="paragraph"><p>Bitmap Fonts are actually composed of two files. One is a PNG image containing the individual letters, the other is a .fnt text file containing definitions of all of the characters supported by the font and where to find them inside the PNG image.</p></div>
<div class="paragraph"><p>The SDK provides a tool for automatically creating a Bitmap Font from any font installed on your computer.</p></div>
<div class="paragraph"><p>To create a font right click on the asset folder where you want to create the font, for example Interface/Fonts.</p></div>
<div class="paragraph"><p>Open the “new sub menu and then select “other.</p></div>
<div class="paragraph"><p><span class="image"><img src="../sdk/newother.png" alt="newother.png" width="" height=""></span></p></div>
<div class="paragraph"><p>Within the window that pops up select <abbr title="Graphical User Interface">GUI</abbr> and then Font then click Next</p></div>
<div class="paragraph"><p><span class="image"><img src="../sdk/newothergui.png" alt="newothergui.png" width="" height=""></span></p></div>
<div class="paragraph"><p>A list of every standard font installed on your system is then displayed, select the font that you would like to use to create the Bitmap Font file from and then click Next.</p></div>
<div class="paragraph"><p>When selecting fonts you should check that this use does not breach the license of the font.</p></div>
<div class="paragraph"><p><span class="image"><img src="../sdk/selectfont.png" alt="selectfont.png" width="" height=""></span></p></div>
<div class="paragraph"><p>With your font selected you can move onto the final screen which looks as follows:</p></div>
<div class="paragraph"><p><span class="image"><img src="../sdk/configurefont.png" alt="configurefont.png" width="" height=""></span></p></div></div></div>
<div class="sect1"><h2 id="font-settings">Font Settings</h2><div class="sectionbody"><div class="paragraph"><p>The settings in the box to the left configure how the font is rendered. The Font Name is shown again to confirm your choice. Use the Back button if you want to change your mind.</p></div>
<div class="paragraph"><p>The Style (For example Bold, Plain, Italic) and Font Size (in Points) can be selected as can the spacing between letters.</p></div>
<div class="paragraph"><p>The Char Range selects the characters to render from the Unicode Character set. The default range of 0 to 256 renders every displayable character used in the most western languages, however the range can be extended if more characters are needed at the expense of a larger Image file.</p></div></div></div>
<div class="sect1"><h2 id="image-settings">Image Settings</h2><div class="sectionbody"><div class="paragraph"><p>The settings in the box to the right control the generated files.</p></div>
<div class="paragraph"><p>The first option specifies the file name. This should not contain a file extension as two files will be generated, both using this name but one with a .fnt extension and one with a .png extension. Note that as the generated .fnt file references the .png one then if you rename the files after generating them you will need to go into the .fnt file and manually update the reference.</p></div>
<div class="paragraph"><p>The next setting shows the Image Size of the image to produce. It is recommended that you use a square power-of-two texture (256x256, 512x512, etc) for maximum performance across various graphics cards.</p></div>
<div class="paragraph"><p>The final two settings are for the horizontal and vertical padding to add around each character. For most cases these can be left as 0 but sometimes it can be useful to expand them.</p></div></div></div>
<div class="sect1"><h2 id="preview">Preview</h2><div class="sectionbody"><div class="paragraph"><p>The black area at the top of the window shows a preview of the generated file. You can use it to get some idea of what the characters will look like. The blue lines show the edges between the various characters that make up the font.</p></div></div></div>
<div class="sect2"><h3 id="finishing">Finishing</h3><div class="paragraph"><p>When you are ready press Finish to generate the files or Cancel to abort.</p></div>
<div class="sect2"><h3 id="advanced-effects">Advanced Effects</h3><div class="paragraph"><p>The generated file is a standard PNG file so it can be loaded into an image editing program and effects added. For example you could add a padding onto each of the characters using the padding-x and padding-y settings and then use that to add an outer glow, drop shadow, or anything else you liked.</p></div>
<div class="paragraph"><p>When rendered the Bitmap Font is multiplied with the text colour specified so if the text is set to white then any colour can be used inside the PNG file. If the PNG file just uses white then any colour can be used for the text. Furthermore the two settings can be combined if desired although this should be done with care as the multiplication will tend to make colours darker or even disappear entirely. (For example red multiplied with green gives black).</p></div></div></div></div><div id="footer"><div id="footer-text">Version <br>Last updated 2018-02-28 16:23:40 +00:00</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script><script>docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#doc-search',
  debug: false // Set debug to true if you want to inspect the dropdown
});</script></body></html>