Differences

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

--- bitmapfonts [2015/01/30 16:36] – created alex_curran
+++ bitmapfonts [2015/01/31 17:47] (current) – fixed headline levels splitbrain
@@ 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?
-Well for starters Bitmap fonts let you create Photoshop quality text effects ... //in Photoshop//?!
+Well for starters Bitmap fonts let you create Photoshop quality text effects ... //in Photoshop//!!
-What's good with Bitmap Fonts :
+{{:bmfont.png?200|}}
-- They render and update quicker on your watch as textures are pre-built
-- You can use your favorite photo editor, e.g. Photoshop, GIMP, to create high quality effects: shadows, gradients, blur, etc
-With Bitmap fonts, you have to pre-select a text size to render and choose supported characters, e.g. A-Z, a-z, 0-9, etc.
+===== What's good about Bitmap Fonts =====
+  * 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
-Depending on where you want to use Bitmap fonts on your watch, you should generate a sensible number of characters and render the text at a size so it looks sharp on your watchface.
+===== What is a Bitmap Font? =====
+  * 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 .png file is a spritesheet with all your characters - this can be edited in Photoshop
+  * See example files at the bottom
-How do I create a Bitmap Font?
+===== How to build a Bitmap Font? =====
-There are lots of libraries for PC or Mac which will get you started - these are used every day by game developers so they are fairly mature and easy to use.
+  * There are apps for PC, Mac and web that will help :
+  * [[http://kvazars.com/littera/|Littera]] Web Based Free ... (Use Format: Text .fnt)
+  * [[http://www.bmglyph.com|bmGlyph]] Mac Paid
+  * [[http://www.angelcode.com/products/bmfont|AngelCode]] PC Free
+===== Tips =====
+  * Aim for a png resolution of under 1000x1000
+  * Remember watches can crash if you send textures that are too large
+  * Create text at the smallest size that will look good on your watch
+  * Don't generate characters you won't use, e.g. lowercase letters, punctuation, etc.
+===== Using Bitmap fonts in WatchMaker =====
+  * Copy both the .png and .fnt files to the folder BeautifulWatches/fonts_bm/
+  * Customize a watch
+  * Select a text layer
+  * Select Font -> Bitmap Font and you should see your new font!
+===== Example Bitmap Font =====
+  * 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]]
+  * Metal.png:
+  * {{:metal.png?200|}}