Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Opacity on lines borked

See original GitHub issue

Expected Behavior

Should be able to add opacity to a line

Current Behavior

Where the line overlaps in a curve streaks appear in it.

Possible workaround

Draw the line solid, render to a texture and then apply opacity (can be seen by applying circle.cacheAsBitmap = true to the attached pixiplayground). This suffers a loss of fidelity in the curve though.

Steps to Reproduce

Create an ellipse or curve and put a line on it

Environment

pixi.js version: 5.2.1
Browser & Version: Chrome 80
OS & Version: Mac OS Mojave
Running Example: https://pixiplayground.com/#/edit/A22hhBZYvo9FlcJOaUAHa

Issue Analytics

State:
Created 3 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

bigtimebuddycommented, Apr 15, 2020

@ivanpopelyshev introduced multisampling in dev (will be in 5.3.0). You will be able to do something like this which is rendering your graphics to a RenderTexture.

https://jsfiddle.net/bigtimebuddy/6tzyv91j/

Disclaimer: Ignore the issue with ellipse stroke in the middle, we have a fix for that in the queue.

1reaction

ShukantPalcommented, Apr 15, 2020

@georeith Come over to our slack workspace so you can ping me when you need: https://join.slack.com/t/pixijs/shared_invite/zt-dcem1map-uVuVGC7pZ0trF8SrcA2p9g, 😃