Changing a sprites bitmap

Question

As of right now, I am trying to create a tiling effect for a game I am creating. I am using a tilesheet and I am loading the tiles to the sprite like so...

this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(30, 0,tWidth ,tHeight );

var tileImage is the bitMapData. 30 is the Number of pixels to move retangle. then tWidth and tHeight is how big the rectangle is. which is 30x30

This is what I do to change the bitmap when I role over the tile

this.graphics.clear();
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(60, 0,tWidth ,tHeight );

I clear the sprite canvas. I then rewrite to another position on tileImage.

My problem is....

It removes the old tile completely but the new tile positions farther to the right then where the old bitmap appeared.

My tile sheet is only 90px wide by 30px height. On top of that, it appears my new tile is drawn behind the old tile. Is there any better way to perfect this.

again, all i want is for the bitmap to change colors

Answer 1

You could try to load the whole tilesheet in your sprite, and then redefine the scrollRect property each time you need to.

this.scrollRect = new Rectangle( 30, 0, tWidth ,tHeight );

Note that you can't just edit scrollRect.x, .y, .width or .height ; you have to redefine a new Rectangle each time.

Using scrollRect will probably be much faster that redrawing part of the bitmap.

You can read this excellent article from Grant Skinner for more informations about scrollRect.