# Last Issues With DrawText() Function: Fill Color, Outline Color, & Rotation Not Working?

**URL:** <https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165>\
**Category:** Phaser 3\
**Created:** [April 16, 2023, 8:45pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165 "2023-04-16T20:45:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 16, 2023, 8:45pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/1 "2023-04-16T20:45:00Z")

</div>

Hi,

Almost done with the DrawText() function.  
Having issues with text fill color, text outline color, and text rotation.

Please look at DrawText call below:  
[https://bitbucket.org/jesseleepalser/phaser-engine/src/15fe11a631a83272b16e1a562d1d5be109b686a1/coreLogic.js#lines-130](https://bitbucket.org/jesseleepalser/phaser-engine/src/15fe11a631a83272b16e1a562d1d5be109b686a1/coreLogic.js#lines-130)

Please look over DrawText source code below:  
[https://bitbucket.org/jesseleepalser/phaser-engine/src/15fe11a631a83272b16e1a562d1d5be109b686a1/coreVisuals.js#lines-161](https://bitbucket.org/jesseleepalser/phaser-engine/src/15fe11a631a83272b16e1a562d1d5be109b686a1/coreVisuals.js#lines-161)

Thanks!

Jesse

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 16, 2023, 11:04pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/2 "2023-04-16T23:04:27Z")

</div>

`DrawText()` seems to be doing too much, and its return value is confusing. I would guess the indexes are getting mixed up, but you need to use the debugger or some console logging to find it.

Do you need to index text objects numerically? It seems you could just create

```
scoreText = this.add.text(…);

```

like the others. And in `collectStar()`, all you really need is

```
scoreText.text = score;

```

Also, Text colors are all CSS colors (strings), e.g. `'red'`, `'rgb(255,0,0)'`, `'rgba(255,0,0,0.5)'`.

---

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 16, 2023, 11:43pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/3 "2023-04-16T23:43:52Z")

</div>

Ok, let me hit it with a hammer now…

---

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 17, 2023, 12:04am UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/4 "2023-04-17T00:04:04Z")

</div>

Hi,

I tried below just now, does not seem to change to color though?

Jesse

```javascript
var redFill = 255;
var greenFill = 0;
var blueFill = 0;
var fillColor = new Phaser.Display.Color('rgb(redFill, greenFill, blueFill)'); // Is this correct? Does not seem to do anything in browser?
Texts[textIndex].color = fillColor.color;

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 17, 2023, 3:54am UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/5 "2023-04-17T03:54:29Z")

</div>

```
textGameObject.setFill('rgb(255,0,0)');

```

or

```js
var fillColor = new Phaser.Display.Color(redFill, greenFill, blueFill);

text.setFill(fillColor.rgba);

```

---

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 17, 2023, 1:50pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/6 "2023-04-17T13:50:01Z")

</div>

Hi,

Still not working…

I setup the text array below:  
[https://bitbucket.org/jesseleepalser/phaser-engine/src/3227f35d4caa367540ab2519b9fd4e9c73e5415b/coreLogic.js#lines-91](https://bitbucket.org/jesseleepalser/phaser-engine/src/3227f35d4caa367540ab2519b9fd4e9c73e5415b/coreLogic.js#lines-91)

I call the DrawText() function below:  
[https://bitbucket.org/jesseleepalser/phaser-engine/src/3227f35d4caa367540ab2519b9fd4e9c73e5415b/coreLogic.js#lines-97](https://bitbucket.org/jesseleepalser/phaser-engine/src/3227f35d4caa367540ab2519b9fd4e9c73e5415b/coreLogic.js#lines-97)

The updated DrawText() function is below:  
[https://bitbucket.org/jesseleepalser/phaser-engine/src/3227f35d4caa367540ab2519b9fd4e9c73e5415b/coreVisuals.js#lines-164](https://bitbucket.org/jesseleepalser/phaser-engine/src/3227f35d4caa367540ab2519b9fd4e9c73e5415b/coreVisuals.js#lines-164)

Both the text fill color and outline color are always black?

Jesse

---

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 17, 2023, 1:58pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/7 "2023-04-17T13:58:13Z")

</div>

Here you can see the current demo:

> **[Phaser\_Engine by JesseLeePalser](https://jesseleepalser.itch.io/phaser-engine)**
>
> Play in your browser

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 17, 2023, 3:39pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/8 "2023-04-17T15:39:11Z")

</div>

```
Texts[textIndex].setFill(`rgb(${redFill}, ${greenFill}, ${blueFill})`);

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 17, 2023, 3:45pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/9 "2023-04-17T15:45:36Z")

</div>

It’s adding 1000 text objects to `Texts`. But it looks like you only need `fpsText` and `scoreText`.

---

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 17, 2023, 4:15pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/10 "2023-04-17T16:15:08Z")

</div>

Hi,

Thank you, that worked!  
I use an array of texts like a circle, when exhausted it starts again at the beginning.  
Should be ok now, thanks for your help and support…

Jesse

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 17, 2023, 4:33pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/11 "2023-04-17T16:33:43Z")

</div>

But you don’t need to use 1000 text objects. You only need 3 or so.

---

<div class="post-metadata">

**Author:** ![JesseLee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jesselee/32/7525_2.png) [@JesseLee](https://phaser.discourse.group/u/JesseLee)\
**Post date:** [April 17, 2023, 4:37pm UTC](https://phaser.discourse.group/t/last-issues-with-drawtext-function-fill-color-outline-color-rotation-not-working/13165/12 "2023-04-17T16:37:22Z")

</div>

I lowered the texts to 500 for now.  
Very early in development, I will adjust later on.  
(there will be a staff scroll screen with many texts)

Thanks!

Jesse