Help with Phaser.Line

[zzelbrujo]

Hello, I'm a completely rookie  trying to render a simple line, so I have this:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update, render: render });

var line;

function create() {

    game.stage.backgroundColor = '#011052';

    line = new Phaser.Line(0, 100, 800, 100);

}

But it's not working, I mean I can not see the line.

Please advice.

 

 

[Trissolo]

Your code is ok, and the line is created.

 

But a Phaser.Line contains only "geometric info" (basically, it's an object containing two points).

To see your line you can use the render function:

var line;

function create() {

    game.stage.backgroundColor = '#011052';

    line = new Phaser.Line(0, 100, 800, 100);

}

function render() {
game.debug.geom(line, '#FF0');
}

 

Or you can use a Phaser.Graphics instance (no render function needed):

var line, graphicsLine;

function create() {

    game.stage.backgroundColor = '#011052';

    // create the line
    line = new Phaser.Line(0, 100, 800, 100);

    // create and show the graphics    
    graphicsLine = game.add.graphics(0, 0);
    graphicsLine.clear();
    graphicsLine.lineStyle(1, 0xddff00, 1);
    graphicsLine.moveTo(line.start.x, line.start.y);
    graphicsLine.lineTo(line.end.x, line.end.y);
    graphicsLine.endFill();

}

 

...but I'm almost sure that Phaser.Graphics is rendered each frame, so it's very expensive (well... it is ok if your line is animated).

For static line is better a simple Phaser.Image using a texture obtained from the graphics:

var line, graphicsLine;

function create() {

    game.stage.backgroundColor = '#011052';

    // create the line
    line = new Phaser.Line(0, 100, 800, 100);
    

    // create the graphics
    graphicsLine = game.make.graphics(0, 0);
    graphicsLine.lineStyle(1, 0xddff00, 1);
    graphicsLine.moveTo(line.start.x, line.start.y);
    graphicsLine.lineTo(line.end.x, line.end.y);
    graphicsLine.endFill();


    // create the image...
    var myLine = game.add.image(line.start.x, line.start.y, graphicsLine.generateTexture());

    // ...and now destroy the graphic instance (you already have the texture)
    graphicsLine.destroy();
}