Added the new BitmapFont class. This is for rendering retro style fixed-width bitmap fonts into an Image object.

Author: photonstorm

Gruntfile.js

@@ -96,6 +96,7 @@ module.exports = function (grunt) {
         'src/gameobjects/Graphics.js',
         'src/gameobjects/RenderTexture.js',
         'src/gameobjects/SpriteBatch.js',
+        'src/gameobjects/BitmapFont.js',
 
         'src/system/Canvas.js',
         'src/system/StageScaleMode.js',

README.md

@@ -109,6 +109,7 @@ New features:
 * BitmapText now uses the new XML parser which should work under CocoonJS without clashes.
 * BitmapText signature changed so you can support fonts with spaces in their names.
 * Loader.bitmapFont now has 2 extra parameters: xSpacing and ySpacing. These allow you to add extra spacing to each letter or line of the font.
+* Added the new BitmapFont class. This is for rendering retro style fixed-width bitmap fonts into an Image object.
 
 
 Updates:

build/config.php

@@ -142,6 +142,7 @@
     <script src="$path/src/gameobjects/Graphics.js"></script>
     <script src="$path/src/gameobjects/RenderTexture.js"></script>
     <script src="$path/src/gameobjects/SpriteBatch.js"></script>
+    <script src="$path/src/gameobjects/BitmapFont.js"></script>
 
     <script src="$path/src/system/Canvas.js"></script>
     <script src="$path/src/system/StageScaleMode.js"></script>

examples/wip/bitmaptext1.js

@@ -24,7 +24,6 @@ function create() {
 function change() {
 
 	text.align = 'center';
-
     text2.tint = Math.random() * 0xFFFFFF;
 
 }

examples/wip/bitmaptext2.js

@@ -0,0 +1,41 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+
+function preload() {
+
+    game.load.image('font', 'assets/fonts/gold_font.png');
+
+}
+
+var font;
+
+function create() {
+
+    // text = game.add.bitmapText(100, 100, 'carrier', 'Phaser and Pixi\nrocking!', 32);
+
+    font = new Phaser.BitmapFont(game, 'font', 16, 16, "!     :() ,?." + Phaser.BitmapFont.TEXT_SET10, 20, 0, 0);
+
+    font.text = "using bitmap fonts rocks";
+
+    game.world.add(font);
+
+			// font = new FlxBitmapFont(AssetsRegistry.goldFontPNG, 16, 16, "!     :() ,?." + FlxBitmapFont.TEXT_SET10, 20, 0, 0);
+			// font.setText("using bitmap fonts\nin flixel is", true, 0, 8, FlxBitmapFont.ALIGN_CENTER, false);
+
+
+    // game.input.onDown.add(change, this);
+
+}
+
+function change() {
+
+	// text.align = 'center';
+ //    text2.tint = Math.random() * 0xFFFFFF;
+
+}
+
+function update() {
+
+    // text.text = 'Phaser & Pixi\nrocking!\n' + Math.round(game.time.now);
+
+}

src/Phaser.js

@@ -35,7 +35,8 @@ var Phaser = Phaser || {
 	CANVAS_FILTER: 14,
 	WEBGL_FILTER: 15,
 	ELLIPSE: 16,
-	SPRITEBATCH: 16,
+	SPRITEBATCH: 17,
+	BITMAPFONT: 18,
 
 	NONE: 0,
 	LEFT: 1,

src/gameobjects/BitmapData.js

@@ -144,6 +144,27 @@ Phaser.BitmapData.prototype = {
 
     },
 
+    /**
+    * Resizes the BitmapData.
+    * @method Phaser.BitmapData#resize
+    */
+    resize: function (width, height) {
+
+        if (width !== this.width || height !== this.height)
+        {
+            this.width = width;
+            this.height = height;
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.textureFrame.width = width;
+            this.textureFrame.height = height;
+            this.imageData = this.context.getImageData(0, 0, width, height);
+        }
+    
+        this._dirty = true;
+
+    },
+
     refreshBuffer: function () {
 
         this.imageData = this.context.getImageData(0, 0, this.width, this.height);
@@ -246,6 +267,12 @@ Phaser.BitmapData.prototype = {
 
     },
 
+    copyPixels: function (source, area, destX, destY) {
+
+        this.context.drawImage(source, area.x, area.y, area.width, area.height, destX, destY, area.width, area.height);
+
+    },
+
     /**
     * If the game is running in WebGL this will push the texture up to the GPU if it's dirty.
     * This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function.