How do I create a line using this.add.line()?

Phaser 3
1

I know we can use Phaser.Geom.Line() class and this.add.graphics. But how I can do it using only this.add.line() ? I have tried it, but there’s no visible line.

const line = this.add.line(0, 0 100, 100, 200, 200); // not showing
2

Hi @andraantariksa,
This function has 2 more parameters: strokeColor and strokeAlpha.

// shows a red line
this.add.line(0,0,100,100,200,200,0xff0000);

Here the docs:
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#line__anchor

Regards.

1 Like
3

Thanks! I have notice the docs but I didn’t expect that leaving the strokeColor empty will gives me black color (I have a black background, so I didn’t notice it), I think they should mention it in the docs.

4

how can i do the same outside the create function. When i do it, i get a error like this : script.js:173 Uncaught TypeError: Cannot read properties of undefined (reading ‘line’)

5

Hellow.
I have the same problem when try add line outside create function? Why?
…
var game = new Phaser.Game(config);

let r2;

function create ()
{
drawLines ();
}

function drawLines ()
{
r2 = this.add.line(0,0,100,100,200,200,0xff0000);
}

I got this error :
Uncaught TypeError: Cannot read properties of undefined (reading ‘line’)