New Text examples.

Author: photonstorm

examples/text/dynamic text shadow.js

@@ -0,0 +1,49 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update });
+
+var text;
+
+function create() {
+
+	game.stage.setBackgroundColor(0xfbf6d5);
+
+    text = game.add.text(game.world.centerX, 250, '  dynamic shadows  ');
+    text.anchor.set(0.5);
+    text.align = 'center';
+
+    text.font = 'Arial Black';
+    text.fontSize = 70;
+    text.fontWeight = 'bold';
+    text.fill = '#ec008c';
+
+    text.setShadow(0, 0, 'rgba(0, 0, 0, 0.5)', 0);
+
+}
+
+function update() {
+
+	var offset = moveToXY(game.input.activePointer, text.x, text.y, 8);
+
+    text.setShadow(offset.x, offset.y, 'rgba(0, 0, 0, 0.5)', distanceToPointer(text, game.input.activePointer) / 30);
+
+}
+
+function distanceToPointer(displayObject, pointer) {
+
+    this._dx = displayObject.x - pointer.x;
+    this._dy = displayObject.y - pointer.y;
+    
+    return Math.sqrt(this._dx * this._dx + this._dy * this._dy);
+
+}
+
+function moveToXY(displayObject, x, y, speed) {
+
+    var _angle = Math.atan2(y - displayObject.y, x - displayObject.x);
+    
+    var x = Math.cos(_angle) * speed;
+    var y = Math.sin(_angle) * speed;
+
+    return { x: x, y: y };
+
+}

examples/text/text gradient.js

@@ -0,0 +1,30 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });
+
+var text = null;
+
+function create() {
+
+    text = game.add.text(game.world.centerX, game.world.centerY, "- phaser gradient text -");
+
+    //  Centers the text
+    text.anchor.set(0.5);
+    text.align = 'center';
+
+    //  Our font + size
+    text.font = 'Arial';
+    text.fontWeight = 'bold';
+    text.fontSize = 70;
+
+    //  Here we create a linear gradient on the Text context.
+    //  This uses the exact same method of creating a gradient as you do on a normal Canvas context.
+    var grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height);
+
+    //  Add in 2 color stops
+    grd.addColorStop(0, '#8ED6FF');   
+    grd.addColorStop(1, '#004CB3');
+
+    //  And apply to the Text
+    text.fill = grd;
+
+}

examples/text/text reflect.js

@@ -0,0 +1,49 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });
+
+var text = null;
+var textReflect = null;
+
+function create() {
+
+    game.stage.backgroundColor = 0x3b0760;
+
+    text = game.add.text(game.world.centerX, game.world.centerY, "- PHASER -");
+
+    //  Centers the text
+    text.anchor.set(0.5);
+    text.align = 'center';
+
+    //  Our font + size
+    text.font = 'Arial';
+    text.fontWeight = 'bold';
+    text.fontSize = 70;
+    text.fill = '#ffffff';
+
+    //  Here we create our fake reflection :)
+    //  It's just another Text object, with an alpha gradient and flipped vertically
+
+    textReflect = game.add.text(game.world.centerX, game.world.centerY + 50, "- PHASER -");
+
+    //  Centers the text
+    textReflect.anchor.set(0.5);
+    textReflect.align = 'center';
+    textReflect.scale.y = -1;
+
+    //  Our font + size
+    textReflect.font = 'Arial';
+    textReflect.fontWeight = 'bold';
+    textReflect.fontSize = 70;
+
+    //  Here we create a linear gradient on the Text context.
+    //  This uses the exact same method of creating a gradient as you do on a normal Canvas context.
+    var grd = textReflect.context.createLinearGradient(0, 0, 0, text.canvas.height);
+
+    //  Add in 2 color stops
+    grd.addColorStop(0, 'rgba(255,255,255,0)');
+    grd.addColorStop(1, 'rgba(255,255,255,0.08)');
+
+    //  And apply to the Text
+    textReflect.fill = grd;
+
+}

examples/text/text shadow.js

@@ -0,0 +1,42 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update });
+
+function create() {
+
+	game.stage.setBackgroundColor(0xefefef);
+
+    //	Here we set the shadow:
+    //	The first 2 parameters control x and y distance
+    //	The 3rd the shadow colour
+    //	The 4th the amount of blur
+
+	var text = createText(100, 'shadow 5');
+    text.setShadow(3, 3, 'rgba(0,0,0,0.5)', 5);
+
+	text = createText(300, 'shadow 0');
+    text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 15);
+
+	text = createText(500, 'shadow 10');
+    text.setShadow(-5, 5, 'rgba(0,0,0,0.5)', 0);
+
+}
+
+function createText(y) {
+
+    var text = game.add.text(game.world.centerX, y, '- phaser text shadow -');
+    text.anchor.set(0.5);
+    text.align = 'center';
+
+    //	Font style
+    text.font = 'Arial Black';
+    text.fontSize = 50;
+    text.fontWeight = 'bold';
+    text.fill = '#ff00ff';
+
+    return text;
+
+}
+
+function update() {
+
+}

examples/text/text stroke.js

@@ -1,18 +1,32 @@
 
 var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update });
 
-var s;
+var text;
 
 function create() {
 
-    var text = "--- phaser ---\nwith a sprinkle of\npixi dust";
-    var style = { font: "bold 40pt Arial", fill: "#ffffff", align: "center", stroke: "#258acc", strokeThickness: 8 };
+	game.stage.setBackgroundColor(0x2d2d2d);
 
-    s = game.add.text(game.world.centerX, game.world.centerY, text, style);
-    s.anchor.setTo(0.5, 0.5);
+    text = game.add.text(game.world.centerX, game.world.centerY, '- phaser text stroke -');
+
+    //	Center align
+    text.anchor.set(0.5);
+    text.align = 'center';
+
+    //	Font style
+    text.font = 'Arial Black';
+    text.fontSize = 50;
+    text.fontWeight = 'bold';
+
+    //	Stroke color and thickness
+    text.stroke = '#000000';
+    text.strokeThickness = 6;
+    text.fill = '#43d637';
 
 }
 
 function update() {
-    s.angle += 1;
+
+    // text.angle += 1;
+
 }

src/gameobjects/Text.js

@@ -470,6 +470,7 @@ Object.defineProperty(Phaser.Text.prototype, 'text', {
         {
             this._text = value.toString() || ' ';
             this.dirty = true;
+            this.updateTransform();
         }
 
     }
@@ -493,6 +494,7 @@ Object.defineProperty(Phaser.Text.prototype, 'font', {
             this._font = value.trim();
             this.style.font = this._fontWeight + ' ' + this._fontSize + "px '" + this._font + "'";
             this.dirty = true;
+            this.updateTransform();
         }
 
     }
@@ -518,6 +520,7 @@ Object.defineProperty(Phaser.Text.prototype, 'fontSize', {
             this._fontSize = value;
             this.style.font = this._fontWeight + ' ' + this._fontSize + "px '" + this._font + "'";
             this.dirty = true;
+            this.updateTransform();
         }
 
     }
@@ -541,6 +544,7 @@ Object.defineProperty(Phaser.Text.prototype, 'fontWeight', {
             this._fontWeight = value;
             this.style.font = this._fontWeight + ' ' + this._fontSize + "px '" + this._font + "'";
             this.dirty = true;
+            this.updateTransform();
         }
 
     }
@@ -695,6 +699,7 @@ Object.defineProperty(Phaser.Text.prototype, 'lineSpacing', {
         {
             this._lineSpacing = parseFloat(value);
             this.dirty = true;
+            this.updateTransform();
         }
 
     }