mirror bitmapdata

[lonelydatum]

What is the easiest way to take an existing bitmapdata and mirror that onto another bitmap data?

 

var bmdOriginal;

var bmdMirror;

 

 

[lewster32]

If by mirror you mean repeat, then just using BitmapData.draw will let you draw the contents of one to another. If you want to actually flip the image, probably the quickest way to do it is to just set the scale.x or scale.y of the Image/Sprite object the BitmapData is attached to to -1, using anchor.set(0.5) to have it behave predictably when doing so.

 

If you need the pixels themselves to be flipped, then you can use canvas transforms by accessing the bmdMirror.ctx property, which is a canvas 2D context, and the technique outlined in this tutorial: http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas100.html

[lonelydatum]

Thanks again @lewster32. I didn't know that I could access the context through the bmd.ctx.

 

I'll try your suggestion and follow up with my results.

[lonelydatum]

In case anyone wants the code this is what worked for me.

 

var img = game.cache.getImage( ID );

var bmdReverse = game.make.bitmapData(img.width, img.height);

      bmdReverse.context.scale(-1, 1);

      bmdReverse.context.translate(-img.width, 0);

      bmdReverse.draw(ID, 0, 0);