{"id":1128,"date":"2020-01-30T15:25:27","date_gmt":"2020-01-30T15:25:27","guid":{"rendered":"http:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/importing-a-font"},"modified":"2024-11-06T14:16:22","modified_gmt":"2024-11-06T14:16:22","slug":"importing-a-font","status":"publish","type":"docs","link":"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/importing-a-font","title":{"rendered":"Importing a text and scores font"},"content":{"rendered":"<h3>TEXT FONT<\/h3>\n<p>Fonts can be an otf (open type) or ttf (true type font) file.<\/p>\n<p>To add a new font to your game, you have to copy the file in the assets\/pictures directory.<br \/>Then, in the same location, create a text file called yourFontName.fontdef.<br \/>Open this file with a text editor, and add this:<\/p>\n<p>font yourFontName<br \/>{<br \/>\u00a0 \u00a0 \u00a0type truetype<br \/>\u00a0 \u00a0 \u00a0source yourFontName.ttf (or yourFontName.otf)<br \/>\u00a0 \u00a0 \u00a0size 64<br \/>\u00a0 \u00a0 \u00a0resolution 72<br \/>\u00a0 \u00a0 \u00a0code_points 32-255<br \/>}<em>\u00a0<\/em><\/p>\n<p><strong>!!! Don&#8217;t forget to replace yourFontName with the name of your font!<\/strong><br \/>For example, if you are importing comic.ttf, the resulting script should be:<\/p>\n<p>font comic<br \/>{<br \/>\u00a0 \u00a0 \u00a0type truetype<br \/>\u00a0 \u00a0 \u00a0source comic.ttf<br \/>\u00a0 \u00a0 \u00a0size 64<br \/>\u00a0 \u00a0 \u00a0resolution 72<br \/>\u00a0 \u00a0 \u00a0code_points 32-255<br \/>}<em>\u00a0<\/em><\/p>\n<p><strong>For Japanese characters:<\/strong><br \/>You need to use this template:<\/p>\n<p>font myJapaneseFont<br \/>{<br \/>\u00a0 \u00a0 \u00a0type truetype<br \/>\u00a0 \u00a0 \u00a0source MochiyPopOne.ttf<br \/>\u00a0 \u00a0 \u00a0size 64<br \/>\u00a0 \u00a0 \u00a0resolution 72<br \/>\u00a0 \u00a0\u00a0 code_points 32-255 \/\/latin<br \/>\u00a0\u00a0\u00a0\u00a0 code_points 12288-12351 \/\/ japanese-style punctuation<br \/>\u00a0\u00a0\u00a0\u00a0 code_points 12353-12447 \/\/ hiragana<br \/>\u00a0\u00a0\u00a0\u00a0 code_points 12448-12543 \/\/ katakana<br \/>\u00a0\u00a0\u00a0\u00a0 code_points 19968-40959 \/\/ kanjis<br \/>\u00a0\u00a0\u00a0 code_points 65280-65519 \/\/ Full-width roman characters and half-width\u00a0 katakana<br \/>}<em>\u00a0<\/em><\/p>\n\n\n<pre class=\"wp-block-preformatted\"><strong>Note: <\/strong>please don't use any space in the font name.<\/pre>\n\n\n<h3>BITMAP FONT<\/h3>\n<p>You can import a custom bitmap font. You can create a font using colors, shadows&#8230; The import process is a little convoluted, but you can do it!<\/p>\n<h5>With a software:<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1273\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/10\/fontBuilder.jpg\" alt=\"\" width=\"909\" height=\"723\" srcset=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/10\/fontBuilder.jpg 909w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/10\/fontBuilder-300x239.jpg 300w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/10\/fontBuilder-768x611.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p>First, download and install Bitmap Font Builder: <br><a href=\"http:\/\/www.lmnopc.com\/bitmapfontbuilder\/\">http:\/\/www.lmnopc.com\/bitmapfontbuilder\/<\/a><br>&gt;&gt; Launch it.<br>&gt;&gt; Choose a font you like as a starting point<br>&gt;&gt; Choose a texture size (ex: 1024)<br>&gt;&gt; You can play with the font size: you can press the checkbox near the font size to maximize the characters. But if you want to add some drop shadows, for instance, you can decrease a little the size to add space around characters.<br>You can display the grid to help you in this case.<br>&gt;&gt; Save the picture in 8-bit in tga.<br>&gt;&gt; Then do File &gt; Save Font Widths (Byte format ) and save this file with the same name as the tga, but with a .dat extension.<\/p>\n<p><strong>Converting the font<\/strong><br>&gt;&gt; Download the small fontConverter.exe tool: <br><a href=\"http:\/\/www.shmupcreator.com\/tools\/fontConverter.exe\">fontConverter.exe<\/a><br>&gt;&gt; Copy it into an empty directory<br>&gt;&gt; Copy your .tga and .dat in this directory.<br>&gt;&gt; Run the converter<br>&gt;&gt; You need to answer some pretty self-explanatory questions:<br>&nbsp;&nbsp;&nbsp;&nbsp; . Enter a name for your new font (ex: hardcoreMetal)<br>&nbsp;&nbsp;&nbsp;&nbsp; . Enter the name of your .tga (ex: hardcoreMetal.tga)<br>&nbsp;&nbsp;&nbsp;&nbsp; . Enter the size of the texture you saved (ex: 256)<br>&nbsp;&nbsp;&nbsp;&nbsp; . Enter the name for the .dat (ex: hardcoreMetal.dat)<br>&nbsp;&nbsp;&nbsp;&nbsp; . Then you need to add pixels around your font, only if you plan to add a drop shadow or glow. If not, answer zero.<\/p>\n\n\n<pre class=\"wp-block-preformatted\"><strong>Note:<\/strong> you can use your paint software to retouch the .tga, add gradient, colors\u2026<\/pre>\n\n\n<p>&gt;&gt; Copy the .tga and the generated .fontdef in the Assets\/pictures directory of your game<\/p>\n<h5>Or, customizing a sample:<\/h5>\n<p>The disadvantage of this method is that the letters have the same squared size. So the space between letters is going to be different.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2398 size-full\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2023\/01\/bitmapFont_example.jpg\" alt=\"\" width=\"154\" height=\"59\">A sample could be downloaded <a href=\"http:\/\/www.shmupcreator.com\/_docAsset\/font_square.rar\">HER<\/a><a href=\"http:\/\/www.shmupcreator.com\/_docAsset\/font_square.rar\">E.<\/a>&nbsp; <br>Then, you can use your paint software to retouch the .tga, add gradient, colors&#8230;<br>Then copy the square.tga and the square.fontdef in:<br>&gt;&gt; Assets\/pictures directory of your game.<\/p>\n<h3>SCORE AND MULTIPLIER FONT<\/h3>\n<p>Scores and multiplier font works like animated sprites.<br>You need to put all the numbers, an X, a dot, and a coma in the same picture. All numbers need to have the same size, like 32&#215;32, or 32&#215;64 for example.<br>Score pictures should be saved in Assets \/ Pictures.<\/p>\n<p>An 832&#215;64 pixels picture:&nbsp;<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2585\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_chrome.png\" alt=\"\" width=\"832\" height=\"64\" srcset=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_chrome.png 832w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_chrome-300x23.png 300w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_chrome-768x59.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>A 416&#215;32 picture:<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2584\" src=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_green.png\" alt=\"\" width=\"416\" height=\"32\" srcset=\"https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_green.png 416w, https:\/\/www.shmupcreator.com\/doc\/wp-content\/uploads\/2020\/01\/score_green-300x23.png 300w\" sizes=\"auto, (max-width: 416px) 85vw, 416px\" \/><\/p>","protected":false},"featured_media":0,"parent":139,"menu_order":7,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-1128","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/1128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1128"}],"version-history":[{"count":25,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/1128\/revisions"}],"predecessor-version":[{"id":2972,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/1128\/revisions\/2972"}],"up":[{"embeddable":true,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/139"}],"next":[{"title":"HUD and bars","link":"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/hud-and-bars","href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/1199"}],"prev":[{"title":"Tanks and turrets","link":"https:\/\/www.shmupcreator.com\/doc\/?docs=shmupcreator\/assets-and-art-creation\/tanks-and-turrets","href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=\/wp\/v2\/docs\/147"}],"wp:attachment":[{"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1128"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.shmupcreator.com\/doc\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_tag&post=1128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}