background color showing through alpha for renderer.Quad4

Post reply
1 favourites
  • 7 posts
From the Asset Store
Alpha Leaderboard
$25.20 USD
Is a system for building scorecards and achievements online for use in games Using this system, you can create a scorebo
surena's avatar
surena

  • Hello all, Ashley

    I've been at this for many hours and I can't figure out why it is doing this.

    In the original plugin SDK, within Draw(renderer), I have: 

    renderer.SetNoPremultiplyAlphaBlend();

    followed by multiple: 

    renderer.Quad4(q,finalUv)

    This was working on a much older version of C3.

    When I do this with overlapping Quad4s, the background color shows through semi-transparent parts of the quads.

    it should look like this (the red square is fully opaque):

    but instead it looks like this (I made the lower layer green to make the issue more obvious):

    here's another example (none of the green lines should be there. And they appear everywhere there are semi-transparent areas and borders):

    I tried setting 

    renderer.SetAlphaBlend().

    I tried: 

    const wi = this.GetWorldInfo();
renderer.SetBlendMode(wi.GetBlendMode());

    which both result in a different visual issue even when normal blending mode is set. It looks hyper-saturated. Like two semi-transparent items are having their brightness multiplied:

    I also tried:

    • with and without a layer beneath
    • with and without force own texture set for the layer being drawn to
    • using Quad3D2 instead of Quad4
    • using source images of different bitdepths
    • several webGL workarounds I found on the web for similar issues

    but it always has this same result.

    Any ideas?

  • I'd guess you've set the wrong color/alpha values either in the texture data or in the renderer current color. For example if you try to render non-premultiplied alpha in premultiplied mode, or vice versa, you'll get incorrect rendering results. It's hard to say any more than that from just reading this post.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Ashley, for the sake of brevity, let's say I have 

    var texture = this.GetObjectClass().GetAnimations()[0].GetFrames()[0].GetImageInfo().GetTexture();

renderer.SetTexture(texture);
renderer.SetOpacity(1);
renderer.SetColorRgba(1,1,1,1);

    and then a Quad4

    Is there something I could be doing here to change the texture to or from non-premultiplied alpha or premultiplied mode?

  • No, it's too late - Construct loads all textures with premultiplied alpha, so to correctly render them, you must use premultiplied alpha rendering mode.

  • Ashley

    I altered your drawing plugin example to make a bare bones test. I made it use the this._info.SetHasAnimations(true) instead of this._info.SetHasImage(true) and it just grabs the image from the first frame of the first animation. I also changed the renderer script to draw a series of partially overlapping images with varying opacity.

    This is all it does in render: 

    renderer.SetAlphaBlend();
const imageInfo = this._objectClass.GetAnimations()[0].GetFrames()[0].GetImageInfo();
const texture = imageInfo.GetTexture();

if (!texture)
	return;	

const wi = this.GetWorldInfo();
const quad = wi.GetBoundingQuad();
const rcTex = imageInfo.GetTexRect();

renderer.SetTexture(texture);
for (var i = 0; i < 5; i++)
{
	renderer.SetOpacity(1.0-(i/4.0));
	renderer.Quad3(quad, rcTex);
	quad.offset(-50, 0); 
	renderer.Quad3(quad, rcTex);
	quad.offset(-50, 0); 			
}

    Here are the files if you want to test for yourself:

    download test plugin

    download test project

    If I use renderer.SetAlphaBlend() or don't set the blend mode at all, it looks like this:

    You can see it seems to multiply the color value making it brighter and brighter as the opacity gets lower and lower. (Opacity decreases as it goes from right to left)

    I know you said it would require preMultiplied alpha, but just for completeness sake, if I use renderer.SetNoPremultiplyAlphaBlend(), it looks like this:

    If you look to the edges of the head you can see that partially transparent colors have the background color bleed through.

    If I just manually paste separate instances with different opacities in the editor rather than draw them in the Draw function, we get what we would expect:

    Is this a bug in the SDK? Or is there something I can do to make the plugins draw how we see it in that last image?

  • I can't open the links - they say 403 forbidden. But your sample code uses premultiplied alpha incorrectly. If you want to draw with an opacity of 50%, then you need to set the color RGBA components to (0.5, 0.5, 0.5, 0.5) - because the RGB components need to be multiplied by the opacity when using premultiplied alpha. SetOpacity() only changes the alpha component, so will leave the RGB components of the current color unpremultiplied.

  • Ashley - that was it. Thank you.

Post reply
  • 7 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)