rtalon83 / multifont-react-app

Multi fonts packer app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MULTIFONT PACKER

image

MultiFont Packer is a web based tool for make BitmapFonts, like Shoe Box. The main objective of this tool is to optimize font based resources by using a single atlas to support multiple bitmap fonts. In this first version we use the XML descriptor format Angel Code.

<font>
     <info face="{{name}}" size="{{size}}" />
     <common lineHeight="{{lineHeight}}" scaleW="{{scaleW}}" scaleH="{{scaleH}}" pages="{{num_pages}}" />
     <pages>
     {{#pages}}
         <page id="{{id_page}}" file="{{file_name}}" />
     {{/pages}}
     </pages>
     <chars count="{{chars_count}}">
     {{#chars}}
         <char letter="{{letter}}" id="{{code}}" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" xoffset="{{xoffset}}" yoffset="{{yoffset}}" xadvance="{{xadvance}}" />
     {{/chars}}
     </chars>
     <kernings count="{{kernings_count}}">
     {{#kernings}}
     {{/kernings}}
     </kernings>
 </font>

How to use?

1 Drag and Drop your font image pre-created (ex. Photoshop)

tuto1

2 Set correct letter in each image. In the future I'll use Tesseract.js

tuto2

3 You can set font properties.

tuto3

4 And test the result.

tuto4

Pixi.js Test

Inside this project you can test the result with Pixi.js engine.

folder: /test/

  1. npm install
  2. Modify /src/index.js PIXI.BitmapText, your correct name font and size.
  3. webpack to compile
  4. Launch a server ( ex. http-server ) in /test/dist/
  5. And look at the result

tuto6

References

This project is based on:

Project Map

https://github.com/rtalon83/multifont-react-app/projects/1

About

Multi fonts packer app


Languages

Language:JavaScript 90.0%Language:CSS 8.4%Language:HTML 1.6%