Drawing single pixels with alpha

[Garry3001]

Hi

I'm having trouble with setpixel32, which according to the docs here (http://phaser.io/docs/2.4.8/Phaser.BitmapData.html#setPixel) can have an alpha value as the 6th argument.  However when I try this it just plots over whatever is underneath with a fixed level instead of adding to it.

Here is a jsbin to demonstrate the issue (using Phaser 2.4.8):

http://jsbin.com/repewekopa/1/edit?html,js,output

You'll notice that the alpha works fine with drawing a sprite to the bitmap, but if you substitute "bmd.draw(star, x, y);" with "bmd.setPixel32(x, y, 255, 255, 255, 77);" you'll see that you can only draw a uniform grey colour instead of having it build up as intended.

Can anyone please tell me what I'm doing wrong, or if this is something that isn't possible with this method?

As an extension question, is there any other faster method of plotting pixels with alpha?

[ecv]

I think you got it wrong. The alpha property in sprites seems to create this alpha effect you're after (not sure why), but I think the setPixel32 function just works by setting whatever pixel in the bitmap to the specified values. So, if you're setting 0,0 to white with an alpha of 77, and then do it again, it won't add, but make it yet again an alpha of 77. Since I see there are no built-in pixel calculus functions, maybe you could use getPixel32 first to get the current colors and alpha there, and then add the alphas and colors yourself, then call setPixel32. Although this looks way too involved. I'm sure there must be an easier way. At first glance I can see there are several blending modes. I don't know if they'll work for this, but maybe try fiddling with setting the blendOverlay mode?

Hopefully an expert will chime in to clarify this for us.

 

[drhayes]

ecv is correct. It's helpful to think of pixel data as a big array. You're not telling Phaser to manipulate the existing value, you're overwriting it.

Images draw differently. Literally, there's different mechanisms for them vs. pixels. One thing you could try is make a one pixel image with the color you want and draw that?

[Garry3001]

Thanks for your help with this.  I found two methods of achieving this that seem to work well.  Hopefully this will be useful to others, and please feel free to post any tested improved alternatives.

A)    

graphics.lineStyle(0);
graphics.beginFill(colour, alpha);
graphics.drawRect(x, y, 1, 1);

B) 

game.load.image('spriteimage', pixelimageurl);
mysprite = game.make.sprite(0, 0, 'spriteimage');
mysprite.anchor.set(0.5);
mysprite.alpha = alpha;
bmd = game.add.bitmapData(game.width, game.height);
bmd.addToWorld();
bmd.smoothed = false;
bmd.draw(mysprite, x, y);