Merge pull request #1656 from nockawa/bmfont

BREAKING change on babylon.fontTexture.ts, support of BMFont and minor fixes

Babylon.csproj

@@ -24,7 +24,7 @@
     <SccLocalPath>SAK</SccLocalPath>
     <SccAuxPath>SAK</SccAuxPath>
     <SccProvider>SAK</SccProvider>
-    <TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>
+    <TypeScriptToolsVersion>2.1</TypeScriptToolsVersion>
     <UseGlobalApplicationHostFile />
   </PropertyGroup>
   <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
@@ -154,7 +154,7 @@
     <TypeScriptCompile Include="src\Materials\Textures\babylon.colorGradingTexture.ts" />
     <TypeScriptCompile Include="src\Materials\Textures\babylon.cubeTexture.ts" />
     <TypeScriptCompile Include="src\Materials\Textures\babylon.dynamicTexture.ts" />
-    <TypeScriptCompile Include="src\Materials\Textures\babylon.fontTexture.ts" />
+    <TypeScriptCompile Include="canvas2D\src\Engine\babylon.fontTexture.ts" />
     <TypeScriptCompile Include="src\Materials\Textures\babylon.mapTexture.ts" />
     <TypeScriptCompile Include="src\Materials\Textures\babylon.refractionTexture.ts" />
     <TypeScriptCompile Include="src\Materials\Textures\babylon.mirrorTexture.ts" />

Tools/Gulp/config.json

@@ -159,7 +159,6 @@
       "../../src/Math/babylon.math.SIMD.js",
       "../../src/Tools/babylon.rectPackingMap.js",
       "../../src/Tools/babylon.dynamicFloatArray.js",
-      "../../src/Materials/Textures/babylon.fontTexture.js",
       "../../src/Materials/Textures/babylon.mapTexture.js",
       "../../src/Materials/babylon.shaderMaterial.js",
       "../../src/Tools/babylon.tools.dds.js",
@@ -468,6 +467,7 @@
         "../../canvas2D/src/Tools/babylon.IPropertyChanged.ts",
         "../../canvas2D/src/Tools/babylon.observableArray.ts",
         "../../canvas2D/src/Tools/babylon.observableStringDictionary.ts",
+        "../../canvas2D/src/Engine/babylon.fontTexture.js",
         "../../canvas2D/src/Engine/babylon.bounding2d.ts",
         "../../canvas2D/src/Engine/babylon.canvas2dLayoutEngine.ts",
         "../../canvas2D/src/Engine/babylon.brushes2d.ts",

Tools/Gulp/custom.config.json

@@ -129,7 +129,6 @@
       "../../src/Math/babylon.math.SIMD.js",
       "../../src/Tools/babylon.rectPackingMap.js",
       "../../src/Tools/babylon.dynamicFloatArray.js",
-      "../../src/Materials/Textures/babylon.fontTexture.js",
       "../../src/Materials/Textures/babylon.mapTexture.js",
       "../../src/Materials/babylon.shaderMaterial.js",
       "../../src/Tools/babylon.tools.dds.js",

canvas2D/src/Engine/babylon.atlasPicture.ts

@@ -28,45 +28,6 @@
         smartupdate: string;
     }
 
-    // Loader class for the TexturePacker's JSON Array data format
-    class JSONArrayLoader implements IAtlasLoader {
-
-        loadFile(content): { api: AtlasPictureInfo, errorMsg: string, errorCode: number } {
-            let errorMsg: string = null;
-            let errorCode: number = 0;
-            let root = null;
-            let api: AtlasPictureInfo = null;
-            try {
-                try {
-                    root = JSON.parse(content);
-                    let frames = <Array<IFrame>>root.frames;
-                    let meta = <IMeta>root.meta;
-
-                    api = new AtlasPictureInfo();
-                    api.atlasSize = new Size(meta.size.w, meta.size.h);
-                    api.subPictures = new StringDictionary<AtlasSubPictureInfo>();
-
-                    for (let f of frames) {
-                        let aspi = new AtlasSubPictureInfo();
-                        aspi.name = f.filename;
-                        aspi.location = new Vector2(f.frame.x, api.atlasSize.height - (f.frame.y + f.frame.h));
-                        aspi.size = new Size(f.frame.w, f.frame.h);
-
-                        api.subPictures.add(aspi.name, aspi);
-                    }
-
-                } catch (ex1) {
-                    errorMsg = "Invalid JSON file";
-                    errorCode = -1;
-                }                 
-            } catch (ex2) {
-                errorMsg = "Unknown Exception: " + ex2;
-                errorCode = -2;
-            } 
-            return { api: api, errorMsg: errorMsg, errorCode: errorCode };
-        }
-    }
-
     /**
      * This class will contains information about a sub picture present in an Atlas Picture.
      */
@@ -235,8 +196,6 @@
          * @param plugin the instance of the loader
          */
         public static addLoader(fileExtension: string, plugin: IAtlasLoader) {
-            AtlasPictureInfoFactory._initialize();
-
             let a = AtlasPictureInfoFactory.plugins.getOrAddWithFactory(fileExtension.toLocaleLowerCase(), () => new Array<IAtlasLoader>());
             a.push(plugin);
         }
@@ -245,12 +204,10 @@
          * Load an Atlas Picture Info object from a data file at a given url and with a given texture
          * @param texture the texture containing the atlas bitmap
          * @param url the URL of the Atlas Info data file
-         * @param loaded a callback that will be called when the AtlasPictureInfo object will be loaded and ready
-         * @param error a callback that will be called in case of error
+         * @param onLoad a callback that will be called when the AtlasPictureInfo object will be loaded and ready
+         * @param onError a callback that will be called in case of error
          */
-        public static loadFromUrl(texture: Texture, url: string, loaded: (api: AtlasPictureInfo) => void, error: (msg: string, code: number) => void = null) {
-            AtlasPictureInfoFactory._initialize();
-
+        public static loadFromUrl(texture: Texture, url: string, onLoad: (api: AtlasPictureInfo) => void, onError: (msg: string, code: number) => void = null) {
             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = () => {
                 if (xhr.readyState === XMLHttpRequest.DONE) {
@@ -258,26 +215,33 @@
                         let ext = url.split('.').pop().split(/\#|\?/)[0];
                         let plugins = AtlasPictureInfoFactory.plugins.get(ext.toLocaleLowerCase());
                         if (!plugins) {
-                            if (error) {
-                                error("couldn't find a plugin for this file extension", -1);
+                            if (onError) {
+                                onError("couldn't find a plugin for this file extension", -1);
                             }
                             return;
                         }
                         for (let p of plugins) {
                             let ret = p.loadFile(xhr.response);
                             if (ret) {
-                                if (ret.api && loaded) {
+                                if (ret.api) {
                                     ret.api.texture = texture;
-                                    loaded(ret.api);
-                                } else if (error) {
-                                    error(ret.errorMsg, ret.errorCode);
+                                    if (onLoad) {
+                                        onLoad(ret.api);
+                                    }
+                                } else if (onError) {
+                                    onError(ret.errorMsg, ret.errorCode);
                                 }
-                                break;
+                                return;
                             }
                         }
+
+                        if (onError) {
+                            onError("No plugin to load this Atlas Data file format", -1);
+                        }
+
                     } else {
-                        if (error) {
-                            error("Couldn't load file through HTTP Request, HTTP Status " + xhr.status, xhr.status);
+                        if (onError) {
+                            onError("Couldn't load file through HTTP Request, HTTP Status " + xhr.status, xhr.status);
                         }
                     }
                 }
@@ -287,16 +251,61 @@
             return null;
         }
 
-        private static _initialize() {
-            if (AtlasPictureInfoFactory.plugins !== null) {
-                return;
-            }
+        private static plugins: StringDictionary<Array<IAtlasLoader>> = new StringDictionary<Array<IAtlasLoader>>();
+    }
 
-            AtlasPictureInfoFactory.plugins = new StringDictionary<Array<IAtlasLoader>>();
-            AtlasPictureInfoFactory.addLoader("json", new JSONArrayLoader());
+     // Loader class for the TexturePacker's JSON Array data format
+    @AtlasLoaderPlugin("json", new JSONArrayLoader())
+    class JSONArrayLoader implements IAtlasLoader {
 
+        loadFile(content): { api: AtlasPictureInfo, errorMsg: string, errorCode: number } {
+            let errorMsg: string = null;
+            let errorCode: number = 0;
+            let root = null;
+            let api: AtlasPictureInfo = null;
+            try {
+                let frames: Array<IFrame>;
+                let meta: IMeta;
+                try {
+                    root = JSON.parse(content);
+                    frames = <Array<IFrame>>root.frames;
+                    meta = <IMeta>root.meta;
+                    if (!frames || !meta) {
+                        throw Error("Not a JSON Array file format");
+                    }
+                } catch (ex1) {
+                    return null;
+                }                 
+
+                api = new AtlasPictureInfo();
+                api.atlasSize = new Size(meta.size.w, meta.size.h);
+                api.subPictures = new StringDictionary<AtlasSubPictureInfo>();
+
+                for (let f of frames) {
+                    let aspi = new AtlasSubPictureInfo();
+                    aspi.name = f.filename;
+                    aspi.location = new Vector2(f.frame.x, api.atlasSize.height - (f.frame.y + f.frame.h));
+                    aspi.size = new Size(f.frame.w, f.frame.h);
+
+                    api.subPictures.add(aspi.name, aspi);
+                }
+            } catch (ex2) {
+                errorMsg = "Unknown Exception: " + ex2;
+                errorCode = -2;
+            } 
+
+            return { api: api, errorMsg: errorMsg, errorCode: errorCode };
         }
+    }
 
-        private static plugins: StringDictionary<Array<IAtlasLoader>> = null;
+    /**
+     * Use this decorator when you declare an Atlas Loader Class for the loader to register itself automatically.
+     * @param fileExtension the extension of the file that the plugin is loading (there can be many plugin for the same extension)
+     * @param plugin an instance of the plugin class to add to the AtlasPictureInfoFactory
+     */
+    export function AtlasLoaderPlugin(fileExtension: string, plugin: IAtlasLoader): (target: Object) => void {
+        return () => {
+            AtlasPictureInfoFactory.addLoader(fileExtension, plugin);
+        }
     }
 }

src/Materials/Textures/babylon.fontTexture.ts

@@ -17,55 +17,335 @@
         charWidth: number;
     }
 
-    interface ICharInfoMap {
-        [char: string]: CharInfo;
-    }
+    /**
+     * This is an abstract base class to hold a Texture that will contain a FontMap
+     */
+    export abstract class BaseFontTexture extends Texture {
 
-    export class FontTexture extends Texture {
-        private _canvas: HTMLCanvasElement;
-        private _context: CanvasRenderingContext2D;
-        private _lineHeight: number;
-        private _lineHeightSuper: number;
-        private _xMargin: number;
-        private _yMargin: number;
-        private _offset: number;
-        private _currentFreePosition: Vector2;
-        private _charInfos: ICharInfoMap = {};
-        private _curCharCount = 0;
-        private _lastUpdateCharCount = -1;
-        private _spaceWidth;
-        private _spaceWidthSuper;
-        private _usedCounter = 1;
-        private _superSample: boolean;
-        private _sdfCanvas: HTMLCanvasElement;
-        private _sdfContext: CanvasRenderingContext2D;
-        private _signedDistanceField: boolean;
-        private _cachedFontId: string;
-        private _sdfScale: number;
+        constructor(url: string, scene: Scene, noMipmap: boolean = false, invertY: boolean = true, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE) {
 
+            super(url, scene, noMipmap, invertY, samplingMode);
+
+            this._cachedFontId = null;
+            this._charInfos = new StringDictionary<CharInfo>();
+        }
+
+        /**
+         * Is the Font is using Super Sampling (each font texel is doubled).
+         */
         public get isSuperSampled(): boolean {
             return this._superSample;
         }
 
+        /**
+         * Is the Font was rendered using the Signed Distance Field algorithm
+         * @returns {} 
+         */
         public get isSignedDistanceField(): boolean {
             return this._signedDistanceField;
         }
 
+        /**
+         * Get the Width (in pixel) of the Space character
+         */
         public get spaceWidth(): number {
             return this._spaceWidth;
         }
 
+        /**
+         * Get the Line height (in pixel)
+         */
         public get lineHeight(): number {
             return this._lineHeight;
         }
 
-        public static GetCachedFontTexture(scene: Scene, fontName: string, supersample: boolean = false, signedDistanceField: boolean = false) {
-            let s = <any>scene;
-            if (!s.__fontTextureCache__) {
-                s.__fontTextureCache__ = new StringDictionary<FontTexture>();
+        /**
+         * When the FontTexture is retrieved through the FontCache, there's a reference counter that is incremented for each use.
+         * You also have the possibility to extend the lifetime of the FontTexture when passing it to another object by calling this method
+         * Don't forget to call the corresponding decCachedFontTextureCounter method when you no longer have use of the FontTexture.
+         * Each call to incCachedFontTextureCounter must have a corresponding call to decCachedFontTextureCounter.
+         */
+        abstract incCachedFontTextureCounter();
+
+        /**
+         * Decrement the reference counter, if it reaches 0 the FontTexture is disposed
+         */
+        abstract decCachedFontTextureCounter();
+
+        /**
+         * Is the font dynamically updated, if true is returned then you have to call the update() before using the font in rendering if new character were adding using getChar()
+         */
+        abstract get isDynamicFontTexture(): boolean;
+
+        /**
+         * Will fetch the new characters retrieved with getChar() to the texture.
+         * If there were no new char, this call is harmless and quit in no time.
+         * If there were new chars a texture lock/update is made, which is a costy operation.
+         */
+        abstract update(): void;
+
+        /**
+         * Measure the width/height that will take a given text
+         * @param text the text to measure
+         * @param tabulationSize the size (in space character) of the tabulation character, default value must be 4
+         */
+        measureText(text: string, tabulationSize?: number): Size {
+            let maxWidth: number = 0;
+            let curWidth: number = 0;
+            let lineCount = 1;
+            let charxpos: number = 0;
+
+            // Parse each char of the string
+            for (var char of text) {
+
+                // Next line feed?
+                if (char === "\n") {
+                    maxWidth = Math.max(maxWidth, curWidth);
+                    charxpos = 0;
+                    curWidth = 0;
+                    ++lineCount;
+                    continue;
+                }
+
+                // Tabulation ?
+                if (char === "\t") {
+                    let nextPos = charxpos + tabulationSize;
+                    nextPos = nextPos - (nextPos % tabulationSize);
+
+                    curWidth += (nextPos - charxpos) * this.spaceWidth;
+                    charxpos = nextPos;
+                    continue;
+                }
+
+                if (char < " ") {
+                    continue;
+                }
+
+                let ci = this.getChar(char);
+                if (!ci) {
+                    throw new Error(`Character ${char} is not supported by FontTexture ${this.name}`);
+                }
+                curWidth += ci.charWidth;
+                ++charxpos;
+            }
+            maxWidth = Math.max(maxWidth, curWidth);
+
+            return new Size(maxWidth, lineCount * this.lineHeight);
+        }
+
+        /**
+         * Retrieve the CharInfo object for a given character
+         * @param char the character to retrieve the CharInfo object from (e.g.: "A", "a", etc.)
+         */
+        abstract getChar(char: string): CharInfo;
+
+        protected _charInfos: StringDictionary<CharInfo>;
+        protected _lineHeight: number;
+        protected _spaceWidth;
+        protected _superSample: boolean;
+        protected _signedDistanceField: boolean;
+        protected _cachedFontId: string;
+    }
+
+    export class BitmapFontInfo {
+        kerningDic = new StringDictionary<number>();
+        charDic = new StringDictionary<CharInfo>();
+
+        textureSize : Size;
+        atlasName   : string;
+        padding     : Vector4;       // Left, Top, Right, Bottom
+        lineHeight: number;
+        textureUrl  : string;
+        textureFile : string;
+    }
+
+    export interface IBitmapFontLoader {
+        loadFont(fontDataContent: any, scene: Scene, invertY: boolean): { bfi: BitmapFontInfo, errorMsg: string, errorCode: number };
+    }
+
+    export class BitmapFontTexture extends BaseFontTexture {
+        public constructor( scene: Scene,
+                            bmFontUrl: string,
+                            textureUrl: string = null,
+                            noMipmap: boolean = false,
+                            invertY: boolean = true,
+                            samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, 
+                            onLoad: () => void = null,
+                            onError: (msg: string, code: number) => void = null)
+        {
+            super(null, scene, noMipmap, invertY, samplingMode);
+
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === XMLHttpRequest.DONE) {
+                    if (xhr.status === 200) {
+                        let ext = bmFontUrl.split('.').pop().split(/\#|\?/)[0];
+                        let plugins = BitmapFontTexture.plugins.get(ext.toLocaleLowerCase());
+                        if (!plugins) {
+                            if (onError) {
+                                onError("couldn't find a plugin for this file extension", -1);
+                            }
+                            return;
+                        }
+
+                        for (let p of plugins) {
+                            let ret = p.loadFont(xhr.response, scene, invertY);
+                            if (ret) {
+                                let bfi = ret.bfi;
+
+                                if (textureUrl != null) {
+                                    bfi.textureUrl = textureUrl;
+                                } else {
+                                    let baseUrl = bmFontUrl.substr(0, bmFontUrl.lastIndexOf("/") + 1);
+                                    bfi.textureUrl = baseUrl + bfi.textureFile;
+                                }
+
+                                this._texture = scene.getEngine().createTexture(bfi.textureUrl, noMipmap, invertY, scene, samplingMode, () => {
+                                    if (ret.bfi && onLoad) {
+                                        onLoad();
+                                    }
+                                });
+
+                                this._lineHeight = bfi.lineHeight;
+                                this._charInfos.copyFrom(bfi.charDic);
+                                let ci = this.getChar(" ");
+                                if (ci) {
+                                    this._spaceWidth = ci.charWidth;
+                                } else {
+                                    this._charInfos.first((k, v) => this._spaceWidth = v.charWidth);
+                                }
+
+                                if (!ret.bfi && onError) {
+                                    onError(ret.errorMsg, ret.errorCode);
+                                }
+                                return;
+                            }
+                        }
+
+                        if (onError) {
+                            onError("No plugin to load this BMFont file format", -1);
+                        }
+                    } else {
+                        if (onError) {
+                            onError("Couldn't load file through HTTP Request, HTTP Status " + xhr.status, xhr.status);
+                        }
+                    }
+                }
+            }
+            xhr.open("GET", bmFontUrl, true);
+            xhr.send();
+        }
+
+        public static GetCachedFontTexture(scene: Scene, fontTexture: BitmapFontTexture): BitmapFontTexture {
+            let dic = scene.getOrAddExternalDataWithFactory("BitmapFontTextureCache", () => new StringDictionary<BitmapFontTexture>());
+
+            let ft = dic.get(fontTexture.uid);
+            if (ft) {
+                ++ft._usedCounter;
+                return ft;
+            }
+
+            dic.add(fontTexture.uid, fontTexture);
+
+            return ft;
+        }
+
+        public static ReleaseCachedFontTexture(scene: Scene, fontTexture: BitmapFontTexture) {
+            let dic = scene.getExternalData<StringDictionary<BitmapFontTexture>>("BitmapFontTextureCache");
+            if (!dic) {
+                return;
+            }
+
+            var font = dic.get(fontTexture.uid);
+            if (--font._usedCounter === 0) {
+                dic.remove(fontTexture.uid);
+                font.dispose();
+            }
+        }
+
+        /**
+         * Is the font dynamically updated, if true is returned then you have to call the update() before using the font in rendering if new character were adding using getChar()
+         */
+        get isDynamicFontTexture(): boolean {
+            return false;
+        }
+
+        /**
+         * This method does nothing for a BitmapFontTexture object as it's a static texture
+         */
+        update(): void {
+        }
+
+        /**
+         * Retrieve the CharInfo object for a given character
+         * @param char the character to retrieve the CharInfo object from (e.g.: "A", "a", etc.)
+         */
+        getChar(char: string): CharInfo {
+            return this._charInfos.get(char);
+        }
+
+        /**
+         * For FontTexture retrieved using GetCachedFontTexture, use this method when you transfer this object's lifetime to another party in order to share this resource.
+         * When the other party is done with this object, decCachedFontTextureCounter must be called.
+         */
+        public incCachedFontTextureCounter() {
+            ++this._usedCounter;
+        }
+
+        /**
+         * Use this method only in conjunction with incCachedFontTextureCounter, call it when you no longer need to use this shared resource.
+         */
+        public decCachedFontTextureCounter() {
+            let dic = this.getScene().getExternalData<StringDictionary<BitmapFontTexture>>("BitmapFontTextureCache");
+            if (!dic) {
+                return;
+            }
+            if (--this._usedCounter === 0) {
+                dic.remove(this._cachedFontId);
+                this.dispose();
             }
+        }
+        private _usedCounter = 1;
+
+        static addLoader(fileExtension: string, plugin: IBitmapFontLoader) {
+            let a = BitmapFontTexture.plugins.getOrAddWithFactory(fileExtension.toLocaleLowerCase(), () => new Array<IBitmapFontLoader>());
+            a.push(plugin);
+        }
+
+        static plugins: StringDictionary<IBitmapFontLoader[]> = new StringDictionary<Array<IBitmapFontLoader>>();
+    }
+
+    /**
+     * This class is a special kind of texture which generates on the fly characters of a given css style "fontName".
+     * The generated texture will be updated when new characters will be retrieved using the getChar() method, but you have
+     *  to call the update() method for the texture to fetch these changes, you can harmlessly call update any time you want, if no
+     *  change were made, nothing will happen.
+     * The Font Texture can be rendered in three modes: normal size, super sampled size (x2) or using Signed Distance Field rendering.
+     * Signed Distance Field should be prefered because the texture can be rendered using AlphaTest instead of Transparency, which is way more faster. More about SDF here (http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf).
+     * The only flaw of SDF is that the rendering quality may not be the best or the edges too sharp is the font thickness is too thin.
+     */
+    export class FontTexture extends BaseFontTexture {
+        private _canvas: HTMLCanvasElement;
+        private _context: CanvasRenderingContext2D;
+        private _lineHeightSuper: number;
+        private _xMargin: number;
+        private _yMargin: number;
+        private _offset: number;
+        private _currentFreePosition: Vector2;
+        private _curCharCount = 0;
+        private _lastUpdateCharCount = -1;
+        private _spaceWidthSuper;
+        private _sdfCanvas: HTMLCanvasElement;
+        private _sdfContext: CanvasRenderingContext2D;
+        private _sdfScale: number;
+        private _usedCounter = 1;
 
-            let dic = <StringDictionary<FontTexture>>s.__fontTextureCache__;
+        get isDynamicFontTexture(): boolean {
+            return true;
+        }
+
+        public static GetCachedFontTexture(scene: Scene, fontName: string, supersample: boolean = false, signedDistanceField: boolean = false): FontTexture {
+            let dic = scene.getOrAddExternalDataWithFactory("FontTextureCache", () => new StringDictionary<FontTexture>());
 
             let lfn = fontName.toLocaleLowerCase() + (supersample ? "_+SS" : "_-SS") + (signedDistanceField ? "_+SDF" : "_-SDF");
             let ft = dic.get(lfn);
@@ -82,8 +362,7 @@
         }
 
         public static ReleaseCachedFontTexture(scene: Scene, fontName: string, supersample: boolean = false, signedDistanceField: boolean = false) {
-            let s = <any>scene;
-            let dic = <StringDictionary<FontTexture>>s.__fontTextureCache__;
+            let dic = scene.getExternalData<StringDictionary<FontTexture>>("FontTextureCache");
             if (!dic) {
                 return;
             }
@@ -105,7 +384,8 @@
          * @param samplingMode the texture sampling mode
          * @param superSample if true the FontTexture will be created with a font of a size twice bigger than the given one but all properties (lineHeight, charWidth, etc.) will be according to the original size. This is made to improve the text quality.
          */
-        constructor(name: string, font: string, scene: Scene, maxCharCount=200, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, superSample: boolean = false, signedDistanceField: boolean = false) {
+        constructor(name: string, font: string, scene: Scene, maxCharCount = 200, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, superSample: boolean = false, signedDistanceField: boolean = false) {
+
             super(null, scene, true, false, samplingMode);
 
             this.name = name;
@@ -132,7 +412,6 @@
             this._context.font = font;
             this._context.fillStyle = "white";
             this._context.textBaseline = "top";
-            this._cachedFontId = null;
 
             var res = this.getFontHeight(font);
             this._lineHeightSuper = res.height+4;
@@ -207,7 +486,7 @@
                 return null;
             }
 
-            var info = this._charInfos[char];
+            var info = this._charInfos.get(char);
             if (info) {
                 return info;
             }
@@ -255,7 +534,7 @@
             info.charWidth = this._superSample ? (width/2) : width;
 
             // Add the info structure
-            this._charInfos[char] = info;
+            this._charInfos.add(char, info);
             this._curCharCount++;
 
             // Set the next position
@@ -411,46 +690,6 @@
             return res;
         }
 
-        public measureText(text: string, tabulationSize: number = 4): Size {
-            let maxWidth: number = 0;
-            let curWidth: number = 0;
-            let lineCount = 1;
-            let charxpos: number = 0;
-
-            // Parse each char of the string
-            for (var char of text) {
-
-                // Next line feed?
-                if (char === "\n") {
-                    maxWidth = Math.max(maxWidth, curWidth);
-                    charxpos = 0;
-                    curWidth = 0;
-                    ++lineCount;
-                    continue;
-                }
-
-                // Tabulation ?
-                if (char === "\t") {
-                    let nextPos = charxpos + tabulationSize;
-                    nextPos = nextPos - (nextPos % tabulationSize);
-
-                    curWidth += (nextPos - charxpos) * this.spaceWidth;
-                    charxpos = nextPos;
-                    continue;
-                }
-
-                if (char < " ") {
-                    continue;
-                }
-
-                curWidth += this.getChar(char).charWidth;
-                ++charxpos;
-            }
-            maxWidth = Math.max(maxWidth, curWidth);
-
-            return new Size(maxWidth, lineCount * this.lineHeight);
-        }
-
         private getSuperSampleFont(font: string): string {
             // Eternal thank to http://stackoverflow.com/a/10136041/802124
             let regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\"\sa-z]+?)\s*$/;
@@ -541,15 +780,165 @@
          * Use this method only in conjunction with incCachedFontTextureCounter, call it when you no longer need to use this shared resource.
          */
         public decCachedFontTextureCounter() {
-            let s = <any>this.getScene();
-            let dic = <StringDictionary<FontTexture>>s.__fontTextureCache__;
+            let dic = this.getScene().getExternalData<StringDictionary<FontTexture>>("FontTextureCache");
             if (!dic) {
                 return;
             }
             if (--this._usedCounter === 0) {
                 dic.remove(this._cachedFontId);
                 this.dispose();
-            }         
+            }
         }
+
     }
+
+    /**
+     * Orginial code from cocos2d-js, converted to TypeScript by Nockawa
+     * Load the Text version of the BMFont format, no XML or binary supported, just plain old text
+     */
+    @BitmapFontLoaderPlugin("fnt", new BMFontLoaderTxt())
+    class BMFontLoaderTxt implements IBitmapFontLoader {
+        private static INFO_EXP    = /info [^\r\n]*(\r\n|$)/gi;
+        private static COMMON_EXP  = /common [^\n]*(\n|$)/gi;
+        private static PAGE_EXP    = /page [^\n]*(\n|$)/gi;
+        private static CHAR_EXP    = /char [^\n]*(\n|$)/gi;
+        private static KERNING_EXP = /kerning [^\n]*(\n|$)/gi;
+        private static ITEM_EXP    = /\w+=[^ \r\n]+/gi;
+        private static INT_EXP     = /^[\-]?\d+$/;
+
+        private _parseStrToObj(str) {
+            var arr = str.match(BMFontLoaderTxt.ITEM_EXP);
+            if (!arr) {
+                return null;
+            }
+
+            var obj = {};
+            for (var i = 0, li = arr.length; i < li; i++) {
+                var tempStr = arr[i];
+                var index = tempStr.indexOf("=");
+                var key = tempStr.substring(0, index);
+                var value = tempStr.substring(index + 1);
+                if (value.match(BMFontLoaderTxt.INT_EXP)) value = parseInt(value);
+                else if (value[0] === '"') value = value.substring(1, value.length - 1);
+                obj[key] = value;
+            }
+            return obj;
+        }
+
+        private _buildCharInfo(initialLine: string, obj: any, textureSize: Size, invertY: boolean, chars: StringDictionary<CharInfo>) {
+            let char: string = null;
+            let x: number = null;
+            let y: number = null;
+            let xadv: number = null;
+            let width: number = null;
+            let height: number = null;
+            let ci = new CharInfo();
+            for (let key in obj) {
+                let value = obj[key];
+                switch (key) {
+                    case "id":
+                        char = String.fromCharCode(value);
+                        break;
+                    case "x":
+                        x = value;
+                        break;
+                    case "y":
+                        y = value;
+                        break;
+                    case "width":
+                        width = value;
+                        break;
+                    case "height":
+                        height = value;
+                        break;
+                    case "xadvance":
+                        xadv = value;
+                        break;
+                }
+            }
+
+            if (x != null && y != null && width != null && height != null && char != null) {
+                if (xadv) {
+                    width = xadv;
+                }
+                if (invertY) {
+                    ci.topLeftUV = new Vector2(1 - (x / textureSize.width), 1 - (y / textureSize.height));
+                    ci.bottomRightUV = new Vector2(1 - ((x + width) / textureSize.width), 1 - ((y + height) / textureSize.height));
+                } else {
+                    ci.topLeftUV = new Vector2(x / textureSize.width, y / textureSize.height);
+                    ci.bottomRightUV = new Vector2((x + width) / textureSize.width, (y + height) / textureSize.height);
+                }
+                ci.charWidth = width;
+                chars.add(char, ci);
+            } else {
+                console.log("Error while parsing line " + initialLine);
+            }
+        }
+
+        public loadFont(fontContent: any, scene: Scene, invertY: boolean): { bfi: BitmapFontInfo, errorMsg: string, errorCode: number } {
+            let fontStr = <string>fontContent;
+            let bfi = new BitmapFontInfo();
+            let errorCode = 0;
+            let errorMsg = "OK";
+
+            //padding
+            let info = fontStr.match(BMFontLoaderTxt.INFO_EXP);
+            let infoObj = this._parseStrToObj(info[0]);
+            if (!infoObj) {
+                return null;
+            }
+            let paddingArr = infoObj["padding"].split(",");
+            bfi.padding = new Vector4(parseInt(paddingArr[0]), parseInt(paddingArr[1]), parseInt(paddingArr[2]), parseInt(paddingArr[3]));
+
+            //common
+            var commonObj = this._parseStrToObj(fontStr.match(BMFontLoaderTxt.COMMON_EXP)[0]);
+            bfi.lineHeight = commonObj["lineHeight"];
+            bfi.textureSize = new Size(commonObj["scaleW"], commonObj["scaleH"]);
+
+            var maxTextureSize = scene.getEngine()._gl.getParameter(0xd33);
+            if (commonObj["scaleW"] > maxTextureSize.width || commonObj["scaleH"] > maxTextureSize.height) {
+                errorMsg = "FontMap texture's size is bigger than what WebGL supports";
+                errorCode = -1;
+            } else {
+                if (commonObj["pages"] !== 1) {
+                    errorMsg = "FontMap must contain one page only.";
+                    errorCode = -1;
+                } else {
+                    //page
+                    let pageObj = this._parseStrToObj(fontStr.match(BMFontLoaderTxt.PAGE_EXP)[0]);
+                    if (pageObj["id"] !== 0) {
+                        errorMsg = "Only one page of ID 0 is supported";
+                        errorCode = -1;
+                    } else {
+                        bfi.textureFile = pageObj["file"];
+
+                        //char
+                        let charLines = fontStr.match(BMFontLoaderTxt.CHAR_EXP);
+                        for (let i = 0, li = charLines.length; i < li; i++) {
+                            let charObj = this._parseStrToObj(charLines[i]);
+                            this._buildCharInfo(charLines[i], charObj, bfi.textureSize, invertY, bfi.charDic);
+                        }
+
+                        //kerning
+                        var kerningLines = fontStr.match(BMFontLoaderTxt.KERNING_EXP);
+                        if (kerningLines) {
+                            for (let i = 0, li = kerningLines.length; i < li; i++) {
+                                let kerningObj = this._parseStrToObj(kerningLines[i]);
+                                bfi.kerningDic.add(((kerningObj["first"] << 16) | (kerningObj["second"] & 0xffff)).toString(), kerningObj["amount"]);
+                            }
+                        }
+                    }
+                }
+
+            }
+            return { bfi: bfi, errorCode: errorCode, errorMsg: errorMsg };
+        }
+    };
+
+    export function BitmapFontLoaderPlugin(fileExtension: string, plugin: IBitmapFontLoader): (target: Object) => void {
+        return () => {
+            BitmapFontTexture.addLoader(fileExtension, plugin);
+        }
+    }
+
 } 

canvas2D/src/Engine/babylon.text2d.ts

@@ -4,7 +4,7 @@
         vb: WebGLBuffer                                 = null;
         ib: WebGLBuffer                                 = null;
         instancingAttributes: InstancingAttributeInfo[] = null;
-        fontTexture: FontTexture                        = null;
+        fontTexture: BaseFontTexture                    = null;
         effect: Effect                                  = null;
         effectInstanced: Effect                         = null;
 
@@ -266,7 +266,7 @@
             return this._textSize;
         }
 
-        protected get fontTexture(): FontTexture {
+        protected get fontTexture(): BaseFontTexture {
             if (this._fontTexture) {
                 return this._fontTexture;
             }
@@ -356,6 +356,7 @@
             fontName                ?: string,
             fontSuperSample         ?: boolean,
             fontSignedDistanceField ?: boolean,
+            bitmapFontTexture       ?: BitmapFontTexture,
             defaultFontColor        ?: Color4,
             size                    ?: Size,
             tabulationSize          ?: number,
@@ -384,9 +385,16 @@
 
             super(settings);
 
-            this.fontName            = (settings.fontName==null) ? "12pt Arial" : settings.fontName;
-            this._fontSuperSample    = (settings.fontSuperSample!=null && settings.fontSuperSample);
-            this._fontSDF            = (settings.fontSignedDistanceField!=null && settings.fontSignedDistanceField);
+            if (settings.bitmapFontTexture != null) {
+                this._fontTexture     = settings.bitmapFontTexture;
+                this._fontName        = null;
+                this._fontSuperSample = false;
+                this._fontSDF         = false;
+            } else {
+                this._fontName       = (settings.fontName==null) ? "12pt Arial" : settings.fontName;
+                this._fontSuperSample= (settings.fontSuperSample!=null && settings.fontSuperSample);
+                this._fontSDF        = (settings.fontSignedDistanceField!=null && settings.fontSignedDistanceField);
+            }
             this.defaultFontColor    = (settings.defaultFontColor==null) ? new Color4(1,1,1,1) : settings.defaultFontColor;
             this._tabulationSize     = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
             this._textSize           = null;
@@ -547,7 +555,7 @@
             return !this._fontSDF;
         }
 
-        private _fontTexture: FontTexture;
+        private _fontTexture: BaseFontTexture;
         private _tabulationSize: number;
         private _charCount: number;
         private _fontName: string;

tests/Canvas2d/Jasmine/chutzpah.json

@@ -83,7 +83,6 @@
         { "Path": "../../../src/Materials/textures/babylon.refractionTexture.js" },
         { "Path": "../../../src/Materials/textures/babylon.dynamicTexture.js" },
         { "Path": "../../../src/Materials/textures/babylon.videoTexture.js" },
-        { "Path": "../../../src/Materials/textures/babylon.fontTexture.js" },
         { "Path": "../../../src/Materials/textures/babylon.mapTexture.js" },
         { "Path": "../../../src/Materials/babylon.effect.js" },
         { "Path": "../../../src/Materials/babylon.materialHelper.js" },
@@ -92,22 +91,23 @@
         { "Path": "../../../src/Materials/babylon.standardMaterial.js" },
         { "Path": "../../../src/Materials/babylon.pbrMaterial.js" },
         { "Path": "../../../src/Materials/babylon.multiMaterial.js" },
-        { "Path": "../../../src/Canvas2d/babylon.bounding2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.canvas2dLayoutEngine.js" },
-        { "Path": "../../../src/Canvas2d/babylon.brushes2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.smartPropertyPrim.js" },
-        { "Path": "../../../src/Canvas2d/babylon.prim2dBase.js" },
-        { "Path": "../../../src/Canvas2d/babylon.modelRenderCache.js" },
-        { "Path": "../../../src/Canvas2d/babylon.renderablePrim2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.shape2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.group2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.rectangle2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.sprite2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.text2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.canvas2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.ellipse2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.lines2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.worldspacecanvas2dNode.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.fontTexture.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.bounding2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.canvas2dLayoutEngine.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.brushes2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.smartPropertyPrim.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.prim2dBase.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.modelRenderCache.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.renderablePrim2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.shape2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.group2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.rectangle2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.sprite2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.text2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.canvas2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.ellipse2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.lines2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.worldspacecanvas2dNode.js" },
         { "Path": "../../../src/GUI/babylon.gui.UIElement.js" },
         { "Path": "../../../src/GUI/babylon.gui.control.js" },
         { "Path": "../../../src/GUI/babylon.gui.label.js" },

tests/Tools/Jasmine/chutzpah.json

@@ -83,7 +83,6 @@
         { "Path": "../../../src/Materials/textures/babylon.refractionTexture.js" },
         { "Path": "../../../src/Materials/textures/babylon.dynamicTexture.js" },
         { "Path": "../../../src/Materials/textures/babylon.videoTexture.js" },
-        { "Path": "../../../src/Materials/textures/babylon.fontTexture.js" },
         { "Path": "../../../src/Materials/textures/babylon.mapTexture.js" },
         { "Path": "../../../src/Materials/babylon.effect.js" },
         { "Path": "../../../src/Materials/babylon.materialHelper.js" },
@@ -92,22 +91,23 @@
         { "Path": "../../../src/Materials/babylon.standardMaterial.js" },
         { "Path": "../../../src/Materials/babylon.pbrMaterial.js" },
         { "Path": "../../../src/Materials/babylon.multiMaterial.js" },
-        { "Path": "../../../src/Canvas2d/babylon.bounding2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.canvas2dLayoutEngine.js" },
-        { "Path": "../../../src/Canvas2d/babylon.brushes2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.smartPropertyPrim.js" },
-        { "Path": "../../../src/Canvas2d/babylon.prim2dBase.js" },
-        { "Path": "../../../src/Canvas2d/babylon.modelRenderCache.js" },
-        { "Path": "../../../src/Canvas2d/babylon.renderablePrim2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.shape2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.group2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.rectangle2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.sprite2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.text2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.canvas2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.ellipse2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.lines2d.js" },
-        { "Path": "../../../src/Canvas2d/babylon.worldspacecanvas2dNode.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.fontTexture.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.bounding2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.canvas2dLayoutEngine.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.brushes2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.smartPropertyPrim.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.prim2dBase.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.modelRenderCache.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.renderablePrim2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.shape2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.group2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.rectangle2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.sprite2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.text2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.canvas2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.ellipse2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.lines2d.js" },
+        { "Path": "../../../canvas2d/src/Engine/babylon.worldspacecanvas2dNode.js" },
         { "Path": "../../../src/GUI/babylon.gui.UIElement.js" },
         { "Path": "../../../src/GUI/babylon.gui.control.js" },
         { "Path": "../../../src/GUI/babylon.gui.label.js" },