Jump to content

Drawing line in Phaser Auto Mode


halkeye
 Share

Recommended Posts

Hi

 

I'm pretty new to phaser. So far its been pretty impressive. I've been playing around with drawing lines. I am trying to draw a line as the mouse moves (while clicked). In Phaser.CANVAS mode, the following code works perfectly. In Phaser.AUTO (So I assume webgl) on click and drag, it'll draw the first point and never again. I don't see any errors in the console so kinda at a loss.

 

Any help would be appreciated.

var SimpleGame = (function () {    function SimpleGame() {        //this.game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {            preload: this.preload,            create: this.create,            update: this.update        });    }    SimpleGame.prototype.preload = function () {    };    SimpleGame.prototype.create = function () {        this.mouse_trail = this.game.add.graphics(0, 0); //init rect        this.mouse_trail.lineStyle(4, 0xFF0000, 1);        this.mouse_trail.moveTo(0, 0);    };    SimpleGame.prototype.update = function () {        if (this.game.input.mousePointer.isDown) {            this.mouse_trail.lineTo(this.game.input.x, this.game.input.y); // x, y        }    };    return SimpleGame;})();window.onload = function () {    var game = new SimpleGame();};
Link to comment
Share on other sites

Try this:

window.onload = function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update});    var bmd;    function preload() {       }    function create() {        bmd = game.add.bitmapData(800,600);        sprite = game.add.sprite(0, 0, bmd);         bmd.ctx.beginPath();        bmd.ctx.strokeStyle = "white";       }    function update() {    if (game.input.mousePointer.isDown) {        bmd.ctx.lineTo(game.input.x, game.input.y);        bmd.ctx.lineWidth = 2;        bmd.ctx.stroke();        bmd.dirty = true;    }    }};
Link to comment
Share on other sites

Awesome that works great. I had read up on the bitmap data stuff a bit, but didn't realize I could/should use it for the entire game screen.

 

Added behavior to clear the trail when mouse is no longer held down.

this.mouse_trail.ctx.closePath();this.mouse_trail.ctx.clearRect(0, 0, this.game.width, this.game.height);this.mouse_trail.ctx.beginPath();this.mouse_trail.ctx.stroke();this.mouse_trail.dirty = true;

How portable is using ctx? 

Link to comment
Share on other sites

  • 3 years later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...