diff --git a/src/core/const.js b/src/core/const.js index 3f9d5de..0581c7e 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -315,6 +315,20 @@ DEFAULT:0 }, + /** + * Constants that define the type of gradient on text. + * + * @static + * @constant + * @property {object} TEXT_GRADIENT + * @property {number} TEXT_GRADIENT.LINEAR_VERTICAL=0 + * @property {number} TEXT_GRADIENT.LINEAR_HORIZONTAL=1 + */ + TEXT_GRADIENT: { + LINEAR_VERTICAL: 0, + LINEAR_HORIZONTAL: 1 + }, + // TODO: maybe change to SPRITE.BATCH_SIZE: 2000 // TODO: maybe add PARTICLE.BATCH_SIZE: 15000 SPRITE_BATCH_SIZE: 4096, //nice balance between mobile and desktop machines diff --git a/src/core/const.js b/src/core/const.js index 3f9d5de..0581c7e 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -315,6 +315,20 @@ DEFAULT:0 }, + /** + * Constants that define the type of gradient on text. + * + * @static + * @constant + * @property {object} TEXT_GRADIENT + * @property {number} TEXT_GRADIENT.LINEAR_VERTICAL=0 + * @property {number} TEXT_GRADIENT.LINEAR_HORIZONTAL=1 + */ + TEXT_GRADIENT: { + LINEAR_VERTICAL: 0, + LINEAR_HORIZONTAL: 1 + }, + // TODO: maybe change to SPRITE.BATCH_SIZE: 2000 // TODO: maybe add PARTICLE.BATCH_SIZE: 15000 SPRITE_BATCH_SIZE: 4096, //nice balance between mobile and desktop machines diff --git a/src/core/text/Text.js b/src/core/text/Text.js index b9d6e0b..a319986 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -313,7 +313,7 @@ } //set canvas text styles - this.context.fillStyle = style.fill; + this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line for (i = 0; i < lines.length; i++) @@ -650,7 +650,69 @@ }; /** - * Destroys this text + * Generates the fill style. Can automatically generate a gradient based on the fill style being an array + * @return string|Number|CanvasGradient + * @private + */ +Text.prototype._generateFillStyle = function (style, lines) +{ + if (!Array.isArray(style.fill)) + { + return style.fill; + } + else + { + // the gradient will be evenly spaced out according to how large the array is. + // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 + var i; + var gradient; + var totalIterations; + var currentIteration; + var stop; + + if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) + { + // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas + gradient = this.context.createLinearGradient(this.canvas.width / 2, 0, this.canvas.width / 2, this.canvas.height); + + // we need to repeat the gradient so that each invididual line of text has the same vertical gradient effect + // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 + totalIterations = ( style.fill.length + 1 ) * lines.length; + currentIteration = 0; + for (i = 0; i < lines.length; i++) + { + currentIteration += 1; + for (var j = 0; j < style.fill.length; j++) + { + stop = (currentIteration / totalIterations); + gradient.addColorStop(stop, style.fill[j]); + currentIteration++; + } + } + } + else + { + // start the gradient at the center left of the canvas, and end at the center right of the canvas + gradient = this.context.createLinearGradient(0, this.canvas.height / 2, this.canvas.width, this.canvas.height / 2); + + // can just evenly space out the gradients in this case, as multiple lines makes no difference to an even left to right gradient + totalIterations = style.fill.length + 1; + currentIteration = 1; + + for (i = 0; i < style.fill.length; i++) + { + stop = currentIteration / totalIterations; + gradient.addColorStop(stop, style.fill[i]); + currentIteration++; + } + } + + return gradient; + } +}; + +/** + * Destroys this text object. * * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy diff --git a/src/core/const.js b/src/core/const.js index 3f9d5de..0581c7e 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -315,6 +315,20 @@ DEFAULT:0 }, + /** + * Constants that define the type of gradient on text. + * + * @static + * @constant + * @property {object} TEXT_GRADIENT + * @property {number} TEXT_GRADIENT.LINEAR_VERTICAL=0 + * @property {number} TEXT_GRADIENT.LINEAR_HORIZONTAL=1 + */ + TEXT_GRADIENT: { + LINEAR_VERTICAL: 0, + LINEAR_HORIZONTAL: 1 + }, + // TODO: maybe change to SPRITE.BATCH_SIZE: 2000 // TODO: maybe add PARTICLE.BATCH_SIZE: 15000 SPRITE_BATCH_SIZE: 4096, //nice balance between mobile and desktop machines diff --git a/src/core/text/Text.js b/src/core/text/Text.js index b9d6e0b..a319986 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -313,7 +313,7 @@ } //set canvas text styles - this.context.fillStyle = style.fill; + this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line for (i = 0; i < lines.length; i++) @@ -650,7 +650,69 @@ }; /** - * Destroys this text + * Generates the fill style. Can automatically generate a gradient based on the fill style being an array + * @return string|Number|CanvasGradient + * @private + */ +Text.prototype._generateFillStyle = function (style, lines) +{ + if (!Array.isArray(style.fill)) + { + return style.fill; + } + else + { + // the gradient will be evenly spaced out according to how large the array is. + // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 + var i; + var gradient; + var totalIterations; + var currentIteration; + var stop; + + if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) + { + // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas + gradient = this.context.createLinearGradient(this.canvas.width / 2, 0, this.canvas.width / 2, this.canvas.height); + + // we need to repeat the gradient so that each invididual line of text has the same vertical gradient effect + // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 + totalIterations = ( style.fill.length + 1 ) * lines.length; + currentIteration = 0; + for (i = 0; i < lines.length; i++) + { + currentIteration += 1; + for (var j = 0; j < style.fill.length; j++) + { + stop = (currentIteration / totalIterations); + gradient.addColorStop(stop, style.fill[j]); + currentIteration++; + } + } + } + else + { + // start the gradient at the center left of the canvas, and end at the center right of the canvas + gradient = this.context.createLinearGradient(0, this.canvas.height / 2, this.canvas.width, this.canvas.height / 2); + + // can just evenly space out the gradients in this case, as multiple lines makes no difference to an even left to right gradient + totalIterations = style.fill.length + 1; + currentIteration = 1; + + for (i = 0; i < style.fill.length; i++) + { + stop = currentIteration / totalIterations; + gradient.addColorStop(stop, style.fill[i]); + currentIteration++; + } + } + + return gradient; + } +}; + +/** + * Destroys this text object. * * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 0c4cbbf..51242b8 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -17,8 +17,9 @@ * @param [style.dropShadowBlur=0] {number} Set a shadow blur radius * @param [style.dropShadowColor='#000000'] {string} A fill style to be used on the dropshadow e.g 'red', '#00FF00' * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow - * @param [style.fill='black'] {string|number|CanvasGradient|CanvasPattern} A canvas fillstyle that will be used on the - * text e.g 'red', '#00FF00'. @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * @param [style.fill='black'] {string|string[]|number|number[]|CanvasGradient|CanvasPattern} A canvas fillstyle that will be used on the + * text e.g 'red', '#00FF00'. Can be an array to create a gradient eg ['#000000','#FFFFFF'] @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} + * @param [style.fillGradientType=PIXI.TEXT_GRADIENT.LINEAR_VERTICAL] {number} If fills styles are supplied, this can change the type/direction of the gradient. See {@link PIXI.TEXT_GRADIENT} for possible values * @param [style.fontFamily='Arial'] {string} The font family * @param [style.fontSize=26] {number|string} The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') * @param [style.fontStyle='normal'] {string} The font style ('normal', 'italic' or 'oblique') @@ -58,6 +59,7 @@ dropShadowColor: '#000000', dropShadowDistance: 5, fill: 'black', + fillGradientType: CONST.TEXT_GRADIENT.LINEAR_VERTICAL, fontFamily: 'Arial', fontSize: 26, fontStyle: 'normal', @@ -226,6 +228,20 @@ } }, + fillGradientType: { + get: function () + { + return this._fillGradientType; + }, set: function (fillGradientType) + { + if (this._fillGradientType !== fillGradientType) + { + this._fillGradientType = fillGradientType; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + fontFamily: { get: function () { @@ -463,8 +479,17 @@ if (typeof color === 'number') { return utils.hex2string(color); - } else - { - return color; } + else if (Array.isArray(color)) + { + for (var i = 0; i < color.length; ++i) + { + if (typeof color[i] === 'number') + { + color[i] = utils.hex2string(color[i]) + } + } + } + + return color; }