Huge update to Phaser.Text. Much more lean, but loads of great new options added including drop shadows, gradient fills, fonts with spaces in the name, etc.

Author: photonstorm

README.md

@@ -72,6 +72,7 @@ Significant API changes:
 * PixiPatch no longer needed, all features that it patched are now native in Pixi :)
 * Removed: Sprite.offset, center, topLeft, topRight, bottomRight, bottomLeft and bounds as no longer needed internally. Use Sprite.getBounds() to derive them.
 * Button now extends Phaser.Image not Phaser.Sprite, all the same functionality as before remains, just no animations or physics body.
+* Text.content has been replaced with Text.text.
 
 
 New features:
@@ -80,6 +81,10 @@ New features:
 * You can now use the hitArea property on Sprites and Image objects. hitArea can be a geometry object (Rectangle, Circle, Polygon, Ellipse) and is used in pointerOver checks.
 * InputManager.getLocalPosition(displayObject, pointer, output) will return the local coordinates of the specified displayObject and pointer.
 * InputManager.hitTest will test for pointer hits against a Sprite/Image, its hitArea (if set) or any of its children.
+* Text has lots of new methods to help style it: Text.fill, Text.align, Text.stroke, etc.
+* Text now works happily with font names with spaces in them.
+* Text.setShadow applies a drop shadow to the Text being rendered. Control the x, y, color and blur.
+* Text.lineSpacing allows you to control the spacing between each line that is rendered.
 
 
 New Examples:

examples/wip/destroy.js

@@ -0,0 +1,49 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }, false);
+
+function preload() {
+
+	game.load.image('pic', 'assets/pics/backscroll.png');
+
+}
+
+var sprite;
+var sprite2;
+var g;
+var p;
+
+function create() {
+
+	game.stage.backgroundColor = '#ff5500';
+
+	game.renderer.useFillRect = false;
+
+	sprite = game.add.sprite(0.5, 0, 'pic');
+	sprite2 = game.add.sprite(0, 300, 'pic');
+
+	game.input.onDown.add(tint, this);
+
+	// game.add.tween(sprite).to({y: 500}, 3000, Phaser.Easing.Linear.None, true);
+
+	// p = new PIXI.Point(43, 45);
+
+}
+
+function tint() {
+
+	sprite.destroy();
+	// sprite.tint = Math.random() * 0xFFFFFF;
+	// sprite2.tint = Math.random() * 0xFFFFFF;
+
+}
+
+function update() {
+
+
+}
+
+function render() {
+
+	// game.debug.renderText(sprite.position.y, 32, 32);
+
+}

examples/wip/pixi1.js

@@ -14,7 +14,9 @@ var p;
 
 function create() {
 
-	// game.stage.backgroundColor = '#ff5500';
+	game.stage.backgroundColor = '#ff5500';
+
+	game.renderer.useFillRect = false;
 
 	sprite = game.add.sprite(0.5, 0, 'pic');
 
@@ -29,7 +31,7 @@ function create() {
 
 	// game.input.onDown.add(tint, this);
 
-	// game.add.tween(sprite).to({y: 500}, 3000, Phaser.Easing.Linear.None, true);
+	game.add.tween(sprite).to({y: 500}, 3000, Phaser.Easing.Linear.None, true);
 
 	p = new PIXI.Point(43, 45);
 

examples/wip/text.js

@@ -0,0 +1,60 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }, false);
+// var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render }, false);
+
+function preload() {
+
+	game.load.image('pic', 'assets/pics/backscroll.png');
+
+}
+
+var text;
+
+function create() {
+
+	game.stage.backgroundColor = '#c48844';
+
+    text = game.add.text(game.world.centerX, game.world.centerY, "- phaser -\nwith a sprinkle of\npixi dust");
+
+    text.anchor.setTo(0.5);
+
+    text.font = 'Art of Fighting 2';
+    // text.font = 'Arial';
+    text.fontSize = 40;
+    // text.fontWeight = 'bold italic';
+
+    //	x0, y0 - x1, y1
+	var grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height);
+
+	grd.addColorStop(0, '#8ED6FF');   
+	grd.addColorStop(1, '#004CB3');
+
+    // text.fill = '#ff0044';
+    // text.lineSpacing = 16;
+    text.fill = grd;
+    text.align = 'center';
+    text.stroke = '#ff00ff';
+    text.strokeThickness = 2;
+
+    text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5);
+
+    game.input.onDown.add(change, this);
+
+}
+
+function change() {
+
+	text.tint = Math.random() * 0xFFFFFF;
+
+}
+
+function update() {
+
+
+}
+
+function render() {
+
+	// game.debug.renderText(sprite.position.y, 32, 32);
+
+}

src/core/World.js

@@ -64,7 +64,7 @@ Phaser.World.prototype.boot = function () {
 
 /**
 * This is called automatically after the plugins preUpdate and before the State.update.
-* Most objects have preUpdate methods and it's where initial movement, drawing and calculations are done.
+* Most objects have preUpdate methods and it's where initial movement and positioning is done.
 * 
 * @method Phaser.World#preUpdate
 */