bp74 / StageXL

A fast and universal 2D rendering engine for HTML5 and Dart.
http://www.stagexl.org
Other
880 stars 82 forks source link

Mask + filters breaking change from 1.1.0 to 1.3.0 #297

Closed mayorbyrne closed 6 years ago

mayorbyrne commented 6 years ago

There are drastic differences in behavior between 1.1.0 and 1.3.0+1 given the following code:

  Sprite someClass = new Sprite();

  Shape bg = new Shape()
    ..graphics.rect(0, 0, 500, 500)
    ..graphics.fillColor(Color.Green)
    ..x = 50
    ..y = 50
    ..addTo(someClass);

  _wrapper = new Sprite()
    ..x = 50
    ..y = 50
    ..addTo(someClass);

  Mask wrapperMask = new Mask.rectangle(50, 50, 500, 500);
  wrapperMask.relativeToParent = true;
  _wrapper.mask = wrapperMask;

  int posY = 10;
  for (int i = 0; i < 20; i++)
  {
    new TextField("HELLO WORLD $i", new TextFormat("Arial", 24, Color.Black)
      ..align = TextFormatAlign.CENTER)
      ..width = 500
      ..height = 50
      ..y = posY
      ..border = true
      ..addTo(_wrapper);

    posY += 50;
  }

  someClass.filters.add(new DropShadowFilter());
  someClass.addTo(stage);

capture

Adding the filter to the background shape seems to work and fix the issue in 1.3.0+1. Please let me know if this is the preferred way of applying filters, or if this is a bug that needs to be fixed within StageXL.

EDIT: sorry for editing this so much, I realized I was using a slightly different version when I originally wrote that there was a scrolling issue. This is NOT the case. The above description and picture should now be accurate.

bp74 commented 6 years ago

will have a look at it this weekend

bp74 commented 6 years ago

I've committed a fix for this isse - c356dbb1034287b98e402611682caeaacfcf3fa2 Could you please check if this fixes your issue too? Thanks!

mayorbyrne commented 6 years ago

@bp74 that commit appears to fix the issue! Thanks for that!

bp74 commented 6 years ago

Great! The reason was an optimization for rectangular masks. A rectangular mask that is aligned to the stage can be replaced with a more efficient WebGL scissor. Unfortunately there was a bug with this optimization if it was used in combination with a filter. In the past the mask was rendered in a different way and the bug with "relativeToParent" didn't show up, even if it was always there. I will release a new version of StageXL to Pub later today.