aframe-bmfont-text-component

    0.1.4 • Public • Published

    aframe-bmfont-text-component

    This component is useful for rendering bitmap and signed distance field font text in A-Frame. Basically, it wraps Matt DesLauriers' three-bmfont-text and load-bmfont.

    screenshot

    Properties

    Property Description Default Value
    text the text you want to appear None
    width width of the text box None
    align 'left', 'center', 'right' left
    letterSpacing the letter spacing in pixels 0
    lineHeight the line height in pixels 38
    fnt path to 'fnt' file https://cdn.rawgit...
    fntImage path to font image file https://cdn.rawgit...
    mode 'pre' and 'nowrap' 'normal'
    color by RGB, hex, or name #000
    opacity Extent of transparency. 1.0

    More details on these properties here.

    Explanation of 'mode' property here.

    Usage

    Write some text:

    <a-entity bmfont-text="text: Hello World;"></a-entity>

    Rather than add the bmfont-text component to a blank entity, you can try using the text primitive:

    <a-text text="Hello World;"></a-text>

    This is more convenient, but experimental and buggy (e.g. color failing to apply).

    To change the size of the text, use the scale component or position the text closer or further away.

    Text can be wrapped by specifying width, but I'm not sure what units three-bmfont-text uses. You will have to play around a bit.

    Custom Fonts

    A guide for generating SDF fonts can be found here; here is an example comparing Arial Black and DejaVu. Bitmap fonts also work, but do not look nearly as good.

    Different fonts can be specified with the 'fnt' and 'fntImage' properties.

    <a-entity bmfont-text="text: Hello World; fnt:../fonts/DejaVu-sdf.fnt; fntImage:../fonts/DejaVu-sdf.png">
    </a-entity>

    Thanks to RawGit, these default to hosted "DejaVu-sdf.fnt" and "DejaVu-sdf.png" files.

    Limitations

    This component does not make use of all of the features of three-bmfont-text and its sister modules, if you require more advanced functionality such as tabSize and start and end indices, I recommend forking this component and modifying it. Pull requests are welcome, but please include a test example.

    Bitmap font rendering limits you to the characters included in the font (Unicode this is not). SDF font (in particular) tends to smooth sharp edges though there are ways around this.

    Additional Information

    If you are interested in text rendering in WebGL/ThreeJS/A-Frame and want to learn more, I recommend reading the documentation for three-bmfont-text.

    Here are some additional resources:

    Installation

    Browser

    Install and use by directly including the browser files:

    <head>
      <title>My A-Frame Scene</title>
      <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script> 
      <script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script> 
    </head>
     
    <body>
      <a-scene>
        <a-entity bmfont-text="text: Hello world"></a-entity>
      </a-scene>
    </body>

    NPM

    Install via NPM:

    npm install aframe-bmfont-text-component

    Then register and use.

    require('aframe');
    require('aframe-bmfont-text-component');

    Install

    npm i aframe-bmfont-text-component

    DownloadsWeekly Downloads

    10

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • bryik