From e15bebd269a424b9720c748f23fd121a417c16c5 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 9 Feb 2014 22:48:35 +0000 Subject: [PATCH] Text.lineSpacing allows you to control the spacing between each line that is rendered. Text.inputEnabled allows you to enable all input events over Text objects: dragging, clicking, etc - anything that works on a Sprite works on Text now too. --- README.md | 1 + examples/wip/text.js | 43 ++++++++++++++++++++++++++---------- src/gameobjects/Sprite.js | 2 +- src/gameobjects/Text.js | 46 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index ce08fcb7..7fa1b195 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,7 @@ New features: * 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. +* Text.inputEnabled allows you to enable all input events over Text objects: dragging, clicking, etc - anything that works on a Sprite works on Text now too. New Examples: diff --git a/examples/wip/text.js b/examples/wip/text.js index c5597b35..2047a7cf 100644 --- a/examples/wip/text.js +++ b/examples/wip/text.js @@ -12,7 +12,7 @@ var text; function create() { - game.stage.backgroundColor = '#c48844'; + game.stage.backgroundColor = '#2d2d2d'; text = game.add.text(game.world.centerX, game.world.centerY, "- phaser -\nwith a sprinkle of\npixi dust"); @@ -20,25 +20,44 @@ function create() { text.font = 'Art of Fighting 2'; // text.font = 'Arial'; - text.fontSize = 40; + text.fontSize = 30; // text.fontWeight = 'bold italic'; // x0, y0 - x1, y1 - var grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height); + // var grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height); + // grd.addColorStop(0, '#8ED6FF'); + // grd.addColorStop(1, '#004CB3'); + // text.fill = grd; - grd.addColorStop(0, '#8ED6FF'); - grd.addColorStop(1, '#004CB3'); - - // text.fill = '#ff0044'; - // text.lineSpacing = 16; - text.fill = grd; + text.fill = '#ff0044'; + text.lineSpacing = 16; text.align = 'center'; - text.stroke = '#ff00ff'; + text.stroke = '#000000'; text.strokeThickness = 2; - text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5); + // text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5); + // text.wordWrap = true; + // test.wordWrapWidth = 50; - game.input.onDown.add(change, this); + // game.input.onDown.add(change, this); + + text.inputEnabled = true; + text.input.enableDrag(); + + text.events.onInputOver.add(over, this); + text.events.onInputOut.add(out, this); + +} + +function out() { + + text.fill = '#ff0044'; + +} + +function over() { + + text.fill = '#ff00ff'; } diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 9c35196d..e99e207a 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -784,7 +784,7 @@ Object.defineProperty(Phaser.Sprite.prototype, "renderOrderID", { }); /** -* By default an Image won't process any input events at all. By setting inputEnabled to true the Phaser.InputHandler is +* By default a Sprite won't process any input events at all. By setting inputEnabled to true the Phaser.InputHandler is * activated for this object and it will then start to process click/touch events and more. * * @name Phaser.Sprite#inputEnabled diff --git a/src/gameobjects/Text.js b/src/gameobjects/Text.js index 41b7724f..219137ba 100644 --- a/src/gameobjects/Text.js +++ b/src/gameobjects/Text.js @@ -86,6 +86,16 @@ Phaser.Text = function (game, x, y, text, style) { */ this._lineSpacing = 0; + /** + * @property {Phaser.Events} events - The Events you can subscribe to that are dispatched when certain things happen on this Sprite or its components. + */ + this.events = new Phaser.Events(this); + + /** + * @property {Phaser.InputHandler|null} input - The Input Handler for this object. Needs to be enabled with image.inputEnabled = true before you can use it. + */ + this.input = null; + PIXI.Text.call(this, text, style); this.position.set(x, y); @@ -689,3 +699,39 @@ Object.defineProperty(Phaser.Text.prototype, 'shadowBlur', { } }); + +/** +* By default a Text object won't process any input events at all. By setting inputEnabled to true the Phaser.InputHandler is +* activated for this object and it will then start to process click/touch events and more. +* +* @name Phaser.Text#inputEnabled +* @property {boolean} inputEnabled - Set to true to allow this object to receive input events. +*/ +Object.defineProperty(Phaser.Text.prototype, "inputEnabled", { + + get: function () { + + return (this.input && this.input.enabled); + + }, + + set: function (value) { + + if (value) + { + if (this.input === null) + { + this.input = new Phaser.InputHandler(this); + this.input.start(); + } + } + else + { + if (this.input && this.input.enabled) + { + this.input.stop(); + } + } + } + +});