Jump to content

Create lots of rectangles using BitmapData


nounoursheureux
 Share

Recommended Posts

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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