processPixelRGB not working in Safari

[charlie_says]

Not much to add from the title - you can check the fiddle here:

http://jsfiddle.net/GcMgx/2/

 

I think this may be related to another issue I had, with one of the colour objects not working in Safari (i'll look up the thread).

[charlie_says]

Possibly related to this:

http://www.html5gamedevs.com/topic/6908-getpixel-not-returning-some-colours/

[mariogarranz]

I confirm it's also happening to me, works fine on other browsers.

[wombatbuddy]

On my iPad in Safari and Chrome "processPixelRGB" and "replaceRGB" methods don't work too.

But if you need to replace the color of the pixels, you can use something like this:

 

// BitmapData object in which we want replace color of pixels

var my_bitmapdata;

 

// RGBA of the color you want to replace

var r = 255;

var g = 255;

var b = 255;

var a = 255;

 

// RGBA of new color

var new_r, new_g, new_b, new_a;

 

var imgdata = my_bitmapdata.ctx.getImageData(0, 0, width, height);

var imgdatalen = imgdata.data.length;

 

// Iterate over every pixel in the bitmapdata

for (var i=0; i< imgdatalen/4; i++) {  

                

    if ( (imgdata.data[4*i] === r) && (imgdata.data[4*i+1] === g) && (imgdata.data[4*i+2] === b ) {

 

         imgdata.data[4*i] = new_r;    // RED (0-255)

         imgdata.data[4*i+1] = new_g;    // GREEN (0-255)

         imgdata.data[4*i+2] = new_b;    // BLUE (0-255)

         imgdata.data[4*i+3] = new_a;  // APLHA (0-255)

     }

}

 

my_bitmapdata.ctx.putImageData(imgdata, 0, 0);

 

In my case it is works properly.

[charlie_says]

thanks wombatbuddy - I reworked what you'd put above and plugged it into my game, it now works fine...

I wonder what the issue is with Safari which makes the inbuilt methods fail...

 

(edit, I was going to mark this as solved, but actually, whilst your workaround works, it's not a solution.)

[pellicus]

the processPixelRGB uses the setPixel32() to write and the getPixel() to read.

the getPixel() works on safari because uses the this.data instead of the this.pixels.

 

I think that modifying the BitmapData::setPixel32  with something like this: 

 

 

setPixel32: function (x, y, red, green, blue, alpha, immediate) {

 

        if (typeof immediate === 'undefined') { immediate = true; }

 

        if (x >= 0 && x <= this.width && y >= 0 && y <= this.height)

        {

            if (Phaser.Device.LITTLE_ENDIAN)

            {

                this.pixels[y * this.width + x] = (alpha << 24) | (blue << 16) | (green << 8) | red;

            }

            else

            {

                this.pixels[y * this.width + x] = (red << 24) | (green << 16) | (blue << 8) | alpha;

            }

            

        if(this.data!=null)

        {

             var index = ~~(x + (y * this.width));

            index*=4;

          this.data[index] = red;

         this.data[++index] = green;

          this.data[++index] = blue;

            this.data[++index] = alpha;

 

        }

 

            if (immediate)

            {

                this.context.putImageData(this.imageData, 0, 0);

                this.dirty = true;

            }

        }

 

        return this;

 

    },

 

 

should work.

basically on safari (osx and ios)  the this.pixels (the 32bit packed format) does not work and we have to use the this.data (separated compos).

[rich]

Just to say this was fixed in Phaser 2.1.2. The issue was the override of the UInt32Array was incorrectly being activated in Safari, when it should have been ignored.