Line moving

[Zaidar]

Hi, I'd like to know how can I draw a line moving from a point on the canvas to my moving  my moving pointer.

 

I've already tried with graphics, but it doesn't seems to clear the canvas, which make not a line but a big shape with all the line.

 

What is the solution for it ?

If I use a sprite, it will look scaled and not really nice, and with the Line renderer, I've seen Rich saying it shouldn't be used in production.

 

Thx in advance !

[Pedro Alpera]

Something like this?  http://examples.phaser.io/_site/view_full.html?d=geometry&f=line.js&t=line

[Zaidar]

Yes, like this, but the problem is that this is for debug purpose only, otherwise that's exactly what I'm looking for.

[Pedro Alpera]

I have found this post with some solutions: 

 

http://www.html5gamedevs.com/topic/5112-continuously-updated-line-between-2-sprite-centres/?hl=line

[codevinsky]

Here... try this:

http://codepen.io/codevinsky/pen/dAjDp/?editors=001

[Zaidar]

Thank you very much !

 

I didn't know I could create a bitmap from the line.

 

For those interested in my code for afterward reference (thx to @codevinsky) : 

     create: function(){      this.line = game.add.bitmapData(320, 480);      this.lineSprite = game.add.sprite(0, 0, this.line);    },    update: function(){        this.line.clear();        this.line.ctx.beginPath();        this.line.ctx.moveTo(origine.x, origine.y);        this.line.ctx.lineTo(this.input.activePointer.x , this.input.activePointer.y);        this.line.ctx.lineWidth = "5";        this.line.ctx.strokeStyle = origine.color;        this.line.ctx.stroke();        this.line.ctx.closePath();        this.line.render();        this.line.refreshBuffer();      }    }

[codevinsky]

Glad I could help!

[Anny]

Hey! Im trying to implement this with phaser but I get an error saying that ctx is not defined ): do you have any ideas on how to fix this?

[codevinsky]

Can you show your code?

[Anny]

It's the same that Zaidar put without this line this.lineSprite = game.add.sprite(0, 0, this.line);

 

It's the same if I put that line though

[codevinsky]

So, your code looks -exactly- like this?

create: function(){  this.line = game.add.bitmapData(320, 480);},update: function(){  this.line.clear();  this.line.ctx.beginPath();  this.line.ctx.moveTo(origine.x, origine.y);  this.line.ctx.lineTo(this.input.activePointer.x , this.input.activePointer.y);  this.line.ctx.lineWidth = "5";  this.line.ctx.strokeStyle = origine.color;  this.line.ctx.stroke();  this.line.ctx.closePath();  this.line.render();  this.line.refreshBuffer();}

[Anny]

This is the complete code

 

// Initialize Phaser
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game_div');

// Creates a new 'main' state that will contain the game
var main_state = {

    // Function called first to load all the assets
    preload: function() {

        // Load the  sprite
        this.game.load.image('background', 'images/debug-grid-1920x1920.png');  
},

create: function() {
        this.background = this.game.add.sprite(0,0, 'background');
        this.line = game.add.bitmapData(320, 480);
},

update: function() {
        this.line.clear();
        this.line.ctx.beginPath();
        this.line.ctx.moveTo(origine.x, origine.y);
        this.line.ctx.lineTo(this.input.activePointer.x , this.input.activePointer.y);
        this.line.ctx.lineWidth = "5";
        this.line.ctx.strokeStyle = origine.color;
        this.line.ctx.stroke();
        this.line.ctx.closePath();
        this.line.render();
        this.line.refreshBuffer();
       
    },
}
// Add and start the 'main' state to start the game
game.state.add('main', main_state);  
game.state.start('main');

[codevinsky]

I've copied your code to a codepen, replaced any reference to 'origine' with static variables, and added a sprite that uses the bitmapData (this.line) and it works just fine:

// Initialize Phaservar game = new Phaser.Game(800, 600, Phaser.AUTO, 'game_div');// Creates a new 'main' state that will contain the gamevar main_state = {    // Function called first to load all the assets    preload: function() {        // Load the  sprite        //this.game.load.image('background', 'images/debug-grid-1920x1920.png');  },create: function() {        //this.background = this.game.add.sprite(0,0, 'background');        this.line = game.add.bitmapData(320, 480);        this.sprite = game.add.sprite(0,0,this.line);},update: function() {        this.line.clear();        this.line.ctx.beginPath();        this.line.ctx.moveTo(10, 10);        this.line.ctx.lineTo(this.input.activePointer.x , this.input.activePointer.y);        this.line.ctx.lineWidth = "5";        this.line.ctx.strokeStyle = 'white';        this.line.ctx.stroke();        this.line.ctx.closePath();        this.line.render();        this.line.refreshBuffer();           },}// Add and start the 'main' state to start the gamegame.state.add('main', main_state);  game.state.start('main');

[Anny]

It doesn't work if I put it on the public folder of dropbox (I read somewhere it was a good way to skip the server thingy) https://dl.dropboxusercontent.com/u/73761993/index.html

 

I used your code

[codevinsky]

Ahh...

 

You're using 1.1.5.

 

change 'ctx' to 'context'; 

[Anny]

Thank you so much!