Quick Links: Gideros Home | Download Gideros | Developer Guide
How to create a circle transition with transparency
  • kemine +1 -1
    Member
    I have an image and a mask.

    I'm blending using a render target to achieve this effect:

    > i.imgur.com/0FcbnKC.gif

    But now when I use an image that is transparent on the edges, I cannot get the same effect.

    > i.imgur.com/hlteD0Y.gif

    How can I make it so the white parts don't show? (So I only see the character getting clipped by the mask)

    Thanks!

    ps. I've attached a test project used to make the two demos.
    Test.zip
    40K
  • hgy29hgy29 +1 -1
    Maintainer
    Hi @kermine,

    Your code doesn't work as you would expect because Gideros discards fully transparent pixels early in the rendering pipeline, so they don't get blended at all and screen isn't updated for those pixels.

    You can overcome this by redefining the shader program associated with your 'image', so that transparent pixels are no longer discarded.

    See my code below:
    local BasicTextureVShader=
    [[
    attribute vec4 POSITION0;
    attribute vec2 TEXCOORD0;
     
    uniform mat4 g_MVPMatrix;
     
    varying mediump vec2 texCoord;
     
    void main()
    {
    gl_Position = g_MVPMatrix * POSITION0;
    texCoord = TEXCOORD0;
    }
    ]]
     
    local BasicTextureFShader=[[
    uniform lowp sampler2D gTexture;
    varying mediump vec2 texCoord;
     
    #ifdef GLES2
    precision mediump float;
    #endif
     
    void main()
    {
    gl_FragColor = texture2D(gTexture, texCoord);
    }
    ]]
     
    local BasicTextureShaderAttrs=
    {
    {name="POSITION0",type=Shader.DFLOAT,mult=3,slot=0,offset=0},
    {name="vColor",type=Shader.DUBYTE,mult=0,slot=1,offset=0},
    {name="TEXCOORD0",type=Shader.DFLOAT,mult=2,slot=2,offset=0}
    }
     
    local BasicTextureShaderConstants={
    {name="g_MVPMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP, vertex=true},
    {name="gTexture",type=Shader.CTEXTURE,mult=1,vertex=false},
    }
     
     
    local BasicTextureShader= Shader.new(
    BasicTextureVShader,BasicTextureFShader,
    Shader.FLAG_FROM_CODE,BasicTextureShaderConstants,BasicTextureShaderAttrs)
     
     
     
    application:setBackgroundColor(0xFF00FF)
     
    local rt = RenderTarget.new(318, 417)
    local wrapper = Sprite.new()
    local image = Bitmap.new(Texture.new("image.png"))
    --local image = Bitmap.new(Texture.new("box.png"))
     
    local mask = Bitmap.new(Texture.new("mask.png"))
     
    mask:setAnchorPosition(300, 281)
    mask:setPosition(200, 200)
    mask:setScale(1.5)
     
    image:setBlendMode(Sprite.MULTIPLY)
    image:setShader(BasicTextureShader)
     
    wrapper:addChild(mask)
    wrapper:addChild(image)
     
     
     
     
    wrapper:addEventListener(Event.ENTER_FRAME, function()
    rt:clear(0, 0)
    rt:draw(wrapper)
    end)
     
    local bmp = Bitmap.new(rt)
    bmp:setPosition(500, 500)
     
    stage:addChild(bmp)
    --stage:addChild(wrapper)
     
    GTween.new(mask, 5, {
    scaleX = 0,
    scaleY = 0
    }, {
    ease = easing.linear
    })

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID

In this Discussion

Top Posters