Zaidar

Line moving

Recommended Posts

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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');

Share this post


Link to post
Share on other sites

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');

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...

  • Recently Browsing   0 members

    No registered users viewing this page.