Skip to content
This repository has been archived by the owner on May 16, 2020. It is now read-only.

Commit

Permalink
Use CDN for fnt and fnt image defaults
Browse files Browse the repository at this point in the history
Should allow component to be used with script tag alone.
  • Loading branch information
bryik committed Jul 5, 2016
1 parent 30e2f5c commit aa0655c
Show file tree
Hide file tree
Showing 10 changed files with 4,114 additions and 27 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -4,3 +4,4 @@ examples/node_modules/
gh-pages
node_modules/
npm-debug.log
debug.log
32 changes: 15 additions & 17 deletions README.md
Expand Up @@ -12,28 +12,15 @@ Basically this component wraps Matt DesLauriers' [three-bmfont-text](https://git
| width | width of the text box | None |
| align | 'left', 'center', 'right' | left |
| letterSpacing | the letter spacing in pixels | 0 |
| fnt | path to 'fnt' file | ../fonts/DejaVu-sdf.fnt |
| fntImage | path to font image file | ../fonts/DejaVu-sdf.png |
| 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 |

More details on these properties [here](https://github.com/Jam3/three-bmfont-text#usage).

Explanation of 'mode' property [here](https://github.com/mattdesl/word-wrapper).

### Fonts and Font Images

More than just a script tag is needed for this component to work. You will also need a 'fnt', font image file, and to pass the paths to these files with 'fnt' and 'fntImage' properties.

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

Since the paths "../fonts/DejaVu-sdf.fnt" and "../fonts/DejaVu-sdf.png" are set by default, it is possible to avoid declaring them explicitly by using the DejaVu font and organizing your project folders to match the defaults.

It should be possible to use different fonts, but I have yet to try. A guide for generating SDF fonts can be found [here](https://github.com/libgdx/libgdx/wiki/Distance-field-fonts).

### Usage

Write some text:
Expand All @@ -58,6 +45,19 @@ Text can be wrapped by specifying width:

To be honest, I'm not sure what units width uses as it is not specified by three-bmfont-text. You will have to play around a bit.

### Fonts and Font Images

Custom fonts can be specified with 'fnt' and 'fntImage' properties.

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

These default to hosted "DejaVu-sdf.fnt" and "DejaVu-sdf.png" files thanks to RawGit.

It should be possible to use different fonts, but I have yet to try. A guide for generating SDF fonts can be found [here](https://github.com/libgdx/libgdx/wiki/Distance-field-fonts).

### Advanced Usage

This component does not make use of all of the features of [three-bmfont-text](https://github.com/Jam3/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.
Expand Down Expand Up @@ -93,5 +93,3 @@ Install and use by directly including the [browser files](dist):
</a-scene>
</body>
```

Remember to include font files in your project directory!
File renamed without changes.
File renamed without changes
1 change: 0 additions & 1 deletion debug.log

This file was deleted.

8 changes: 4 additions & 4 deletions dist/aframe-bmfont-text-component.js
Expand Up @@ -75,11 +75,11 @@
},
fnt: {
type: 'string',
default: '../fonts/DejaVu-sdf.fnt'
default: 'https://cdn.rawgit.com/bryik/aframe-bmfont-text-component/master/assets/DejaVu-sdf.fnt'
},
fntImage: {
type: 'string',
default: '../fonts/DejaVu-sdf.png'
default: 'https://cdn.rawgit.com/bryik/aframe-bmfont-text-component/master/assets/DejaVu-sdf.png'
},
mode: {
type: 'string',
Expand Down Expand Up @@ -929,7 +929,7 @@

function setIndex (geometry, data, itemSize, dtype) {
if (typeof itemSize !== 'number') itemSize = 1
if (typeof dtype !== 'number') dtype = 'uint16'
if (typeof dtype !== 'string') dtype = 'uint16'

var isR69 = !geometry.index && typeof geometry.setIndex !== 'function'
var attrib = isR69 ? geometry.getAttribute('index') : geometry.index
Expand All @@ -942,7 +942,7 @@

function setAttribute (geometry, key, data, itemSize, dtype) {
if (typeof itemSize !== 'number') itemSize = 3
if (typeof dtype !== 'number') dtype = 'float32'
if (typeof dtype !== 'string') dtype = 'float32'
if (Array.isArray(data) &&
Array.isArray(data[0]) &&
data[0].length !== itemSize) {
Expand Down
6 changes: 3 additions & 3 deletions dist/aframe-bmfont-text-component.min.js

Large diffs are not rendered by default.

0 comments on commit aa0655c

Please sign in to comment.