nunziox Posted May 15, 2014 Share Posted May 15, 2014 I have the same problem that there is in this example: http://examples.phaser.io/_site/view_full.html?d=display&f=bitmapdata+draw.js&t=bitmapdata%20draw When I move the mouse very quickly, not all the pixels are plotted! How can i resolve this problem? Link to comment Share on other sites More sharing options...
charlie_says Posted May 15, 2014 Share Posted May 15, 2014 This should work for you:// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });function preload() { //game.load.image('ball', 'assets/sprites/shinyball.png');}var bmd;var start, end, inter;function create() { bmd = game.add.bitmapData(800, 600); bmd.context.fillStyle = 'rgba(255, 0, 0, 0.3)'; // Add the bmd as a texture to an Image object. // If we don't do this nothing will render on screen. game.add.sprite(0, 0, bmd); start = new Phaser.Point(); end = new Phaser.Point() inter = new Phaser.Point(); }function update() { if (game.input.activePointer.isDown) { end.x = game.input.activePointer.position.x; end.y = game.input.activePointer.position.y; if (start.x != 0 && start.y !=0 ) { var dist = end.distance(start, true) var steps = 30; // var step = dist / steps; for (var i = 0; i < steps; i++) { Phaser.Point.interpolate(start, end, i/steps, inter) bmd.context.fillRect(inter.x, inter.y, 20, 20); } } else { } bmd.context.fillRect(game.input.activePointer.position.x, game.input.activePointer.position.y, 20, 20); start.x =end.x; start.y =end.y; // Because we're changing the context manually, we need to tell Phaser the texture is dirty. // You only need to do this in WebGL mode. In Canvas it's not needed. bmd.dirty = true; }} jpdev 1 Link to comment Share on other sites More sharing options...
GNUton Posted May 16, 2014 Share Posted May 16, 2014 You will always get sparse points, depending on the input device resolution you use and how quick is the HW/SW you use to draw your lines. My suggested solution would be:Option 1 - Draw a line between two consecutive points. In this case, the thickness of the brush could help a lot to smooth the line Option 2 - Curve fitting??? Interpolate a curve which pass by N consecutive points to achieve a smooth curve.http://paulbourke.net/miscellaneous/interpolation/ Link to comment Share on other sites More sharing options...
charlie_says Posted May 16, 2014 Share Posted May 16, 2014 If you try the above, you can change the lines tovar steps = 30;var step = dist / steps;for (var i = 0; i < step; i++){ Phaser.Point.interpolate(start, end, i/step, inter)...which allows you to fill the gaps (admittedly only with straight lines.) Link to comment Share on other sites More sharing options...
Recommended Posts