Create lots of rectangles using BitmapData

[nounoursheureux]

Hi

I am trying to create a paintable area using BitmapData. Here is the code:

function create(){    pointer = game.add.sprite(game.input.activePointer.position.x,game.input.activePointer.position.y,'aim');    pointer.anchor.setTo(0.5,0.5);    bmd = game.make.bitmapData(game.width,game.height);}function update(){    pointer.position.setTo(game.input.activePointer.position.x,game.input.activePointer.position.y);    pointer.bringToTop();    if(game.input.activePointer.isDown)    {        bmd.ctx.fillStyle = 'red';        bmd.ctx.fillRect(pointer.position.x - 10 / 2,pointer.position.y - 10 / 2,10,10);        bmd.addToWorld(0,0);    }}

This works, but after some time it is not fluid, and I feel like I am not doing it the right way.

Do you know a better way to paint over a surface ?

Or am I doing something wrong ?

Thanks a lot

[rich]

The biggest issue with the code above is the 'bmd.addToWorld' line. That will create a new Sprite, add it to the display list and set the bmd to be its texture. Which you're doing every single time the mouse is down in a core update loop You only need do it once, in create.

 

Have a look at this for a better structure for a painting style app: http://examples.phaser.io/_site/view_full.html?d=bitmapdata&f=draw+blended+sprite.js&t=draw%20blended%20sprite

[nounoursheureux]

Thanks

This works very well, but I'd like to know if it is possible to do this just using canvas methods ?

[rich]

That is using just canvas methods. A BitmapData is basically just a blank Canvas, with a few helper functions.

[nounoursheureux]

Ok, thanks