Manipulating bitmap RGB before adding to image

[Budda]

I'm attempting to process an image i've loaded in before it gets added to the game canvas. My onLoadComplete code does a bit of post processing on a new bitmap as follows:

        srcImg = this.cache.getImage('outline');        this.bmd = this.make.bitmapData(srcImg.width, srcImg.height);        this.bmd.copy('outline');        // Process each pixel of image todecide if its a black line or not        this.bmd.processPixelRGB(this.replaceRGBNG);        // Generate a texture for adding to canvas        this.bmd.generateTexture('outlines');        // Add image to system and scale to fit screen resolution        this.outlineimg = this.game.add.image(0, 0, 'outlines');

The code for the processPixelRGB callback is:

  replaceRGBNG: function(colObj) {    if (colObj.r > 100) {	    // Make a transparent colour	    return Phaser.Color.createColor(255, 255, 255, 0);    }    return false;  }

My problem appears to be manipulating the bitmap and showing the altered version at the this.game.add.image() stage. Currently the final displayed image is not showing any of the RGB modifications!

 

The processPixelRGB callback was working stand alone before i included it in to a more complete image loading process. I must have missed something obvious here but no errors are being generated - stumped at the moment. Only change i've done is to introduce the generateTexture() method to add a key to the cache for the add.image() rather than passing it a BitMap object.

 

Can anybody spot the missing step ?

[yahiko]

I encountered a similar issue: http://www.html5gamedevs.com/topic/16215-cannot-access-imagedatadata-from-a-bitmapdata/

 

Try to call bmd.up​date() after copy().

​

[Budda]

I encountered a similar issue: http://www.html5gamedevs.com/topic/16215-cannot-access-imagedatadata-from-a-bitmapdata/

 

Try to call bmd.up​date() after copy().

​

 

I wasn't sure what that would achieve but gave it a go - and no difference.

 

The copy() works - as when I call this.game.add.image(0, 0, 'outlines'); i see the original image displayed. It's just that the processPixelRGB() changes are not showing up in the texture 'outlines'.

[Budda]

Hmm, http://www.html5gamedevs.com/topic/7903-processpixelrgb-not-working-in-safari/ sounded like my problem (i'm using OSX Safari here) but i'm also using Phaser v2.4.2 

[Budda]

It seems that the RGB colour object always returns r=0 g=0 b=0 no matter what pixel is being processed in the callback.

So I put the this.bmd.update(); back in as suggested and now the RGB is coming back correct.

 

However Safari still didn't work.

So I tried in Chrome and it worked fine!

 

Went back to Safari and now it works there. Go figure....

[yahiko]

Maybe Safari's cache needed to be refreshed