soylomass

Most performant way to make a gradient alpha mask

Recommended Posts

So I'm building this map editor: https://mapmaker.deeeep.io/map/mrbirdyflee_cartography

As you see, the separation between sky objects is too rough, I'd like to soften it. Each sky is a graphic object with textureFill and drawPolygon (because they are polygons)

Screenshot_53.png.fa43648bf67963554c7d6dfc624edb99.png

 

So what I did is create an aditional graphic per side, draw an extension of the sky on each. After that I use a 1x300 texture of a white to black gradient, create a sprite with it, enlarge it and apply it as a mask to each graphic:

Screenshot_54.png.e62eb6abbd86fdf9a657915d7b5fe81f.png

 

The problem is, when many of these objects are present on screen, the performance goes down, presumably because of the mask.

 

Does anyone know of a better way to do this?

Thanks!

Share this post


Link to post
Share on other sites

I also experimented with drawing the graphics at the side line by line (or polygon by polygon, actually) from alpha 1 to 0, but I found out that to look good it should have next to one line per pixel and it would require a lot of lines, I don't think it'll be performant either.

PS: Instead of sprite mask, in the first case, I tried with graphic mask, but it didn't respect it's content, it either showed all or nothing (no intermediate alpha values)

Share this post


Link to post
Share on other sites

pixi-heaven had spriteMask for v4, but this particular feature wasn't ported yet.

You can try make a batch renderer plugin with shader that multiplies resulting color by alpha of your gradient: https://www.pixiplayground.com/#/edit/5iyQ5DmCftTiCOi2VxJ0i  that thing will be batched, if you specify "pluginName='myPlugin'" for all your sky objects.

Share this post


Link to post
Share on other sites
1 hour ago, soylomass said:

I feel writing shaders is far away from my possibilities, at least for now😂 Will investigate anyway. Thanks!

Feel you there bro I wouldn't touch shaders. I thought about this one a lot and what about maybe... A pixel art dither as a texture, repeated to the height of the screen, dithering from one color to transparency.

You could maybe even build the dither on an off screen canvas.

Share this post


Link to post
Share on other sites
2 hours ago, Jammy said:

Feel you there bro I wouldn't touch shaders. I thought about this one a lot and what about maybe... A pixel art dither as a texture, repeated to the height of the screen, dithering from one color to transparency.

You could maybe even build the dither on an off screen canvas.

The problem is that the skies are gradients, not solid colors, so the borders should not only be a gradient from top color to bottom color, but have an horizontal alpha gradient from 1 to 0.

Share this post


Link to post
Share on other sites
11 minutes ago, soylomass said:

The problem is that the skies are gradients, not solid colors, so the borders should not only be a gradient from top color to bottom color, but have an horizontal alpha gradient from 1 to 0.

Yea I see the issue...

You could do it like a 9-grid (i.e. 3-grid), e.g. the sky is a 1px width gradient rendered from a photoshop png the height of the sky (stretched to the desired width), and on each end of the sky you attach your gradient-ed dither from photoshop or such.

That way you could even do away with the pixel dither all together and just have joining skys with whatever gradient u want... but ofcourse im not sure on the impact of a stretched 1px texture, not tried it in pixi.

Share this post


Link to post
Share on other sites
54 minutes ago, Jammy said:

Yea I see the issue...

You could do it like a 9-grid (i.e. 3-grid), e.g. the sky is a 1px width gradient rendered from a photoshop png the height of the sky (stretched to the desired width), and on each end of the sky you attach your gradient-ed dither from photoshop or such.

That way you could even do away with the pixel dither all together and just have joining skys with whatever gradient u want... but ofcourse im not sure on the impact of a stretched 1px texture, not tried it in pixi.

The sky is made from a 1px width gradient, pixi works fine with that. But the gradients are made in real time as the users can change the colors of the skies, so everything has to be dynamic. 

Share this post


Link to post
Share on other sites
10 minutes ago, soylomass said:

The sky is made from a 1px width gradient, pixi works fine with that. But the gradients are made in real time as the users can change the colors of the skies, so everything has to be dynamic. 

I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.

Share this post


Link to post
Share on other sites
28 minutes ago, Jammy said:

I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.

Yes, maybe I could create a small square version (for example 100x100) of the sky gradient, apply the gradient transparency on it somehow and then create a texture out of it and use it in both sides enlarged/skewed, this way I would be using only a small additional texture per sky. (though maybe 100x100 will look bad when enlarged)

I will try this later.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.