Sign in to follow this  
zzelbrujo

Help with Phaser.Line

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites

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();
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.