halkeye Posted April 30, 2014 Share Posted April 30, 2014 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 More sharing options...
Pedro Alpera Posted April 30, 2014 Share Posted April 30, 2014 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 More sharing options...
halkeye Posted May 1, 2014 Author Share Posted May 1, 2014 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 More sharing options...
Pedro Alpera Posted May 1, 2014 Share Posted May 1, 2014 What do you mean by "portable"? Link to comment Share on other sites More sharing options...
halkeye Posted May 1, 2014 Author Share Posted May 1, 2014 I guess I mean does Phaser wrap ctx/CanvasRenderingContext2D if the browser doesn't have it? Link to comment Share on other sites More sharing options...
Pedro Alpera Posted May 1, 2014 Share Posted May 1, 2014 I suppose it should work in all modern browsers. Link to comment Share on other sites More sharing options...
tonypong Posted August 8, 2017 Share Posted August 8, 2017 thank you so muchhhh Link to comment Share on other sites More sharing options...
Recommended Posts