Text.addColor would incorrectly color the text stroke if set (thanks @llevkin phaserjs#1893

Text.addStrokeColor works in the same way as `Text.addColor` but allows you to define a color stop for the stroke color instead of the fill color.

Author: photonstorm

README.md

@@ -327,6 +327,7 @@ Version 2.4 - "Katar" - in dev
 * BitmapData.move(x, y) allows you to shift the contents of the BitmapData horizontally and vertically by the given amounts. The image wraps-around the edges of the BitmapData.
 * BitmapData.moveH(distance) allows you to horizontally shift the BitmapData with wrap-around the edges.
 * BitmapData.moveV(distance) allows you to vertically shift the BitmapData with wrap-around the edges.
+* Text.addStrokeColor works in the same way as `Text.addColor` but allows you to define a color stop for the stroke color instead of the fill color.
 
 ### Updates
 
@@ -420,6 +421,7 @@ Version 2.4 - "Katar" - in dev
 * P2.Body.createGroupCallback incorrectly referenced the `_groupCallbackContext` when deleting it (thanks @Langerz82 #1886)
 * When reusing a Tween created with an array of properties the values would get exponentially added to the TweenData internal array each time the tween was re-run (thanks @SBCGames #1747)
 * Reading the dimensions of a Text object would reset its resolution property (thanks @joelika #1717)
+* Text.addColor would incorrectly color the text stroke if set (thanks @llevkin #1893)
 
 ### Deprecated
 

src/gameobjects/Text.js

@@ -85,6 +85,11 @@ Phaser.Text = function (game, x, y, text, style) {
     */
     this.colors = [];
 
+    /**
+    * @property {array} strokeColors - An array of the stroke color values as specified by {@link Phaser.Text#addStrokeColor addStrokeColor}.
+    */
+    this.strokeColors = [];
+
     /**
     * Should the linePositionX and Y values be automatically rounded before rendering the Text?
     * You may wish to enable this if you want to remove the effect of sub-pixel aliasing from text.
@@ -467,7 +472,7 @@ Phaser.Text.prototype.updateText = function () {
             linePositionY = Math.round(linePositionY);
         }
 
-        if (this.colors.length > 0)
+        if (this.colors.length > 0 || this.strokeColors.length > 0)
         {
             this.updateLine(lines[i], linePositionX, linePositionY);
         }
@@ -598,31 +603,35 @@ Phaser.Text.prototype.updateShadow = function (state) {
 };
 
 /**
-* Updates a line of text.
+* Updates a line of text, applying fill and stroke per-character colors if applicable.
 *
 * @method Phaser.Text#updateLine
 * @private
 */
 Phaser.Text.prototype.updateLine = function (line, x, y) {
 
-    for (var i = 0; i < line.length; i++)
+    for (i = 0; i < line.length; i++)
     {
         var letter = line[i];
 
-        if (this.colors[this._charCount])
-        {
-            this.context.fillStyle = this.colors[this._charCount];
-            this.context.strokeStyle = this.colors[this._charCount];
-        }
-
         if (this.style.stroke && this.style.strokeThickness)
         {
+            if (this.strokeColors[this._charCount])
+            {
+                this.context.strokeStyle = this.strokeColors[this._charCount];
+            }
+
             this.updateShadow(this.style.shadowStroke);
             this.context.strokeText(letter, x, y);
         }
 
         if (this.style.fill)
         {
+            if (this.colors[this._charCount])
+            {
+                this.context.fillStyle = this.colors[this._charCount];
+            }
+
             this.updateShadow(this.style.shadowFill);
             this.context.fillText(letter, x, y);
         }
@@ -635,14 +644,15 @@ Phaser.Text.prototype.updateLine = function (line, x, y) {
 };
 
 /**
-* Clears any previously set color stops.
+* Clears any text fill or stroke colors that were set by `addColor` or `addStrokeColor`.
 *
 * @method Phaser.Text#clearColors
 * @return {Phaser.Text} This Text instance.
 */
 Phaser.Text.prototype.clearColors = function () {
 
     this.colors = [];
+    this.strokeColors = [];
     this.dirty = true;
 
     return this;
@@ -657,6 +667,8 @@ Phaser.Text.prototype.clearColors = function () {
 * Once set the color remains in use until either another color or the end of the string is encountered.
 * For example if the Text was `Photon Storm` and you did `Text.addColor('#ffff00', 6)` it would color in the word `Storm` in yellow.
 *
+* If you wish to change the stroke color see addStrokeColor instead.
+*
 * @method Phaser.Text#addColor
 * @param {string} color - A canvas fillstyle that will be used on the text eg `red`, `#00FF00`, `rgba()`.
 * @param {number} position - The index of the character in the string to start applying this color value from.
@@ -671,6 +683,32 @@ Phaser.Text.prototype.addColor = function (color, position) {
 
 };
 
+/**
+* Set specific stroke colors for certain characters within the Text.
+*
+* It works by taking a color value, which is a typical HTML string such as `#ff0000` or `rgb(255,0,0)` and a position.
+* The position value is the index of the character in the Text string to start applying this color to.
+* Once set the color remains in use until either another color or the end of the string is encountered.
+* For example if the Text was `Photon Storm` and you did `Text.addColor('#ffff00', 6)` it would color in the word `Storm` in yellow.
+*
+* This has no effect if stroke is disabled or has a thickness of 0.
+*
+* If you wish to change the text fill color see addColor instead.
+*
+* @method Phaser.Text#addStrokeColor
+* @param {string} color - A canvas fillstyle that will be used on the text stroke eg `red`, `#00FF00`, `rgba()`.
+* @param {number} position - The index of the character in the string to start applying this color value from.
+* @return {Phaser.Text} This Text instance.
+*/
+Phaser.Text.prototype.addStrokeColor = function (color, position) {
+
+    this.strokeColors[position] = color;
+    this.dirty = true;
+
+    return this;
+
+};
+
 /**
 * Greedy wrapping algorithm that will wrap words as the line grows longer than its horizontal bounds.
 *

typescript/phaser.d.ts

@@ -4415,6 +4415,7 @@ declare module Phaser {
         shadowOffsetY: number;
         shadowStroke: boolean;
         stroke: string;
+        strokeColors: string[];
         strokeThickness: number;
         scale: Phaser.Point;
         tabs: number|number[];
@@ -4427,6 +4428,7 @@ declare module Phaser {
         z: number;
 
         addColor(color: string, position: number): Phaser.Text;
+        addStrokeColor(color: string, position: number): Phaser.Text;
         clearColors(): Phaser.Text;
         componentsToFont(components: any): string;
         destroy(destroyChildren?: boolean): void;