Alpha on ImageLayer does not work in Html version (webkit / safari / chrome)

[GoogleCodeExporter]

What steps will reproduce the problem?
1.  // !!! create an Image (could also be an asset)

  CanvasImage bgImage = graphics().createImage(100,100);
         Canvas canvas = bgImage.canvas();
         canvas.setFillColor(0xff0000ff);
         canvas.fillRect(0, 0, canvas.width(), canvas.height());

2.   // !!! create the ImageLayer 
    ImageLayer imageLayer=graphics().createImageLayer(bgImage);
    masterLayer.add(imageLayer); 

3.    // !!! issue : setting alpha on layer has no effect in Html (webkit, aka 
Safari)
    // !!! Note: it does work with Firefox

    imageLayer.setAlpha(0.5f);

What is the expected output? What do you see instead?

The added layer should be transparent. It is in Firefox.

What version of the product are you using? On what operating system?

Playn 1.5.1
Gwt 2.5
OsX Lion

Original issue reported on code.google.com by robert.h...@gmail.com on 20 Feb 2013 at 12:56

[GoogleCodeExporter]

This works fine for me on Safari, Firefox and Chrome with both the canvas and 
webgl renderers.

I think you must be doing something weird in your code. Certainly other people 
would have complained already if alpha wasn't working for image layers, that's 
an extremely commonly used feature.

Original comment by m...@samskivert.com on 21 Feb 2013 at 7:17

• Changed state: Invalid

[GoogleCodeExporter]

So the 'weird' part is its relation to scaling and 1x1 dimensional images...

The following is code reproduces this artifact in a clean test project:
(Again: affects Html version on webkit (at least under OsX). 

  @Override
  public void init() {

   // !!! mvn archetype
   // mvn archetype:generate -DarchetypeGroupId=com.googlecode.playn -DarchetypeArtifactId=playn-archetype -DarchetypeVersion=1.5.1

   // create and add background image layer (could be anything, but use color for clarity)
   Image bgImage = assets().getImage("images/bg.png");
   ImageLayer bgLayer = graphics().createImageLayer(bgImage);
   graphics().rootLayer().add(bgLayer);

   // !!! IMPORTANT: add scaled layer
   GroupLayer scaledLayer=graphics().createGroupLayer();
   // nicely visible
   scaledLayer.setScale(graphics().width()/2,graphics().height()/2);
   // !!! NOTE the following line would also cause the issue (look out for left/top corner pixel)
   //scaledLayer.setScale(1);
   graphics().rootLayer().add(scaledLayer);

   // !!! Create a 1by1px image (MUST be 1x1 px!)
   CanvasImage image1by1px = graphics().createImage(1, 1);
   // !!! NOTE: issue occurs also with real 1x1px images, but NOT by simply taking a 1x1 subimage of a larger image
   // - causes issue: Image bgImage = assets().getImage("images/1by1px.png");
   // - does not cause issue: Image bgImage = assets().getImage("images/10by10px.png").subImage(0,0,1,1);

   Canvas canvas = image1by1px.canvas();
   canvas.setFillColor(0xffff0000);
   canvas.fillRect(0, 0, canvas.width(), canvas.height());
   ImageLayer imageLayer=graphics().createImageLayer(image1by1px);
   // !!! should be fully transparent but gets rendered as black
   imageLayer.setAlpha(0f);
   scaledLayer.add(imageLayer);
  } 

Original comment by robert.h...@gmail.com on 22 Feb 2013 at 9:12

[GoogleCodeExporter]

I think you have some sort of graphics driver issue or something. This works 
fine for me on all browsers on which I test it, using both the WebGL and Canvas 
renderers, on both Mac OS and Linux.

I've put a test program up here:

http://samskivert.com/playn/issue229/

I see a blank square, a 25% alpha square, a 50% alpha square and a 100% alpha 
square. If you don't see that also, then the issue is with your computer.

Original comment by m...@samskivert.com on 22 Feb 2013 at 9:03

[GoogleCodeExporter]

And the end of this I can probably trash my computer ;-) Now, in an attempt to 
save my computer's honor:

Your test (http://samskivert.com/playn/issue229/) indeed works on my Safari as 
expected. However it does not work in the OmniWeb browser. 

But I DID remember that I saw the effect on Safari too. So I went back to my 
original test case using a real 1x1 image (it's attached to this comment).

Now the following code reproduces the issue reliably on my computer with 
OmniWeb and Safari AND (hurray) on my iPhone's Safari too:

   // !!! Get a 1by1px image
   Image image1by1px = assets().getImage("images/dimmer.png");
   ImageLayer imageLayer=graphics().createImageLayer(image1by1px);
   // !!! should be fully transparent but gets rendered as black
   imageLayer.setAlpha(0f);
   // !!! it has to be added to a scaled layer
   scaledLayer.add(imageLayer);

(What happened is that I simplified my test case so it wouldn't need a real 
image and only tested that with OmniWeb.)

Original comment by robert.h...@gmail.com on 22 Feb 2013 at 10:24

Attachments:

• dimmer.png

[GoogleCodeExporter]

Fascinating. I can now see the bug on Safari. It only happens with the canvas 
renderer, not the WebGL renderer. Odd that it does not also happen with Chrome 
using the canvas or WebGL renderers. This is certainly some sort of Safari bug, 
as PlayN is not doing anything other than setting the alpha level on a canvas 
and drawing an image.

It's quite strange that it happens only for images loaded over the network 
rather than images created internally (which are themselves canvases). That 
just underscores the point that it's a weird browser bug.

Original comment by m...@samskivert.com on 22 Feb 2013 at 11:33