Graphics strokeRect and fillRect

Phaser 3
1

With this code

let g = scene.add.graphics();
g.defaultStrokeColor = 0x000000;
g.defaultFillAlpha = 0.3;
g.defaultFillColor = 0xFFFFFF;
g.fillRect(0, 0, 32, 20);
g.strokeRect(0, 0, 32, 20);

I expected to get get a black rectangle outline with alpha of 1 above a white filled rectangle with alpha of 0.3.

But what I get instead is a filled black rectangle with alpha of 1. Why is this so? How can I achieve the result I expected?

2

I don’t see anything drawn from that code. :slight_smile:

I think you have to set the defaults like

let g = scene.add.graphics({ lineStyle: { width: 1, color: 0x000000 } });

etc.

3

Actually I generate a texture from that code and apply that to an image.

let g = scene.add.graphics().lineStyle(1, 0x000000);
g.defaultFillAlpha = 0.3;
g.defaultFillColor = 0xFFFFFF;
//g.fillRect(0, 0, 32, 20);
g.strokeRect(0, 0, 32, 20);

This code does draw a black rectangle outline, just as I would expect.

(The lineStyle values are the default values as far as I understand it, setting them explicitly shouldn’t make a difference.)

However, as soon as I uncomment g.fillRect(...), the whole thing becomes solid black. Does that somehow make sense? The color is explicitly set to white and alpha to 0.3. So why is it going black?

I can’t help but think that there is something wrong with fillRect.

4

Interestingly, if I reverse the colors, thus drawing the rectangle outline white and the fill rect black, the white rectangle is drawn above the black filled rectangle. The alpha value is still ignored though.

5

You mustn’t set defaultFillAlpha etc. directly. Nothing will happen. You have to pass the defaults in graphics():

let g = this.add.graphics({
    fillStyle: { color: 0xffffff, alpha: 0.3 },
    lineStyle: { color: 0x000000 }
});
g.fillRect(0, 0, 32, 20);
g.strokeRect(0, 0, 32, 20);

Or don’t use the defaults:

let g = this.add.graphics();
g.fillStyle(0xffffff, 0.3).fillRect(0, 0, 32, 20);
g.lineStyle(1, 0x000000).strokeRect(0, 0, 32, 20);

Both these code samples draw correctly for me.

6

Thank you. I can confirm this draws correctly.

The defaultXXX properties are read-only then and not ment to be set?

7

They are read-only, yes.