Watchmaker Wiki

The ultimate watch maker for Android Wear!

User Tools

Site Tools


bitmapfonts

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
bitmapfonts [2015/01/30 21:37]
alex_curran [How to build a Bitmap Font?]
bitmapfonts [2015/01/31 18:47] (current)
splitbrain fixed headline levels
Line 1: Line 1:
-=====Bitmap Fonts=====+====== Bitmap Fonts ======
  
 So you already have a huge library of True Type fonts ... so why would you use Bitmap fonts? So you already have a huge library of True Type fonts ... so why would you use Bitmap fonts?
Line 6: Line 6:
  
 {{:​bmfont.png?​200|}} {{:​bmfont.png?​200|}}
-====What'​s good about Bitmap Fonts :====+ 
 +===== What's good about Bitmap Fonts =====
   * They render and update quicker on your watch!   * They render and update quicker on your watch!
   * You can use your favorite photo editor, e.g. Photoshop, GIMP, to create high quality effects: shadows, gradients, blur, etc   * You can use your favorite photo editor, e.g. Photoshop, GIMP, to create high quality effects: shadows, gradients, blur, etc
  
-====What is a Bitmap Font? :====+===== What is a Bitmap Font? =====
   * Made up of 2 files, e.g. Metal.fnt and Metal.png   * Made up of 2 files, e.g. Metal.fnt and Metal.png
   * The .fnt file is the font definition which specifies supported characters, e.g. A-Z, and the size of each character in the spritesheet   * The .fnt file is the font definition which specifies supported characters, e.g. A-Z, and the size of each character in the spritesheet
Line 16: Line 17:
   * See example files at the bottom   * See example files at the bottom
  
-====How to build a Bitmap Font?====+===== How to build a Bitmap Font? =====
   * There are apps for PC, Mac and web that will help :   * There are apps for PC, Mac and web that will help :
   * [[http://​kvazars.com/​littera/​|Littera]] Web Based Free ... (Use Format: Text .fnt)   * [[http://​kvazars.com/​littera/​|Littera]] Web Based Free ... (Use Format: Text .fnt)
Line 22: Line 23:
   * [[http://​www.angelcode.com/​products/​bmfont|AngelCode]] PC Free   * [[http://​www.angelcode.com/​products/​bmfont|AngelCode]] PC Free
  
-====Tips====+===== Tips =====
   * Aim for a png resolution of under 1000x1000   * Aim for a png resolution of under 1000x1000
   * Remember watches can crash if you send textures that are too large   * Remember watches can crash if you send textures that are too large
Line 28: Line 29:
   * Don't generate characters you won't use, e.g. lowercase letters, punctuation,​ etc.   * Don't generate characters you won't use, e.g. lowercase letters, punctuation,​ etc.
  
-====Using Bitmap fonts in WatchMaker====+===== Using Bitmap fonts in WatchMaker ​=====
   * Copy both the .png and .fnt files to the folder BeautifulWatches/​fonts_bm/​   * Copy both the .png and .fnt files to the folder BeautifulWatches/​fonts_bm/​
   * Customize a watch   * Customize a watch
Line 34: Line 35:
   * Select Font -> Bitmap Font and you should see your new font!   * Select Font -> Bitmap Font and you should see your new font!
  
-====Example Bitmap Font====+===== Example Bitmap Font =====
   * You can play with this metal font, e.g. change the png file and save to WatchMaker :   * You can play with this metal font, e.g. change the png file and save to WatchMaker :
   * [[http://​androidslide.net/​images/​metal.txt|Metal.fnt]]   * [[http://​androidslide.net/​images/​metal.txt|Metal.fnt]]
   * Metal.png:   * Metal.png:
   * {{:​metal.png?​200|}}   * {{:​metal.png?​200|}}
bitmapfonts.txt · Last modified: 2015/01/31 18:47 by splitbrain