Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
How to create a circle transition with transparency - Gideros Forum

How to create a circle transition with transparency

keminekemine Member
edited January 2017 in General questions
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.
zip
zip
Test.zip
40K

Comments

  • hgy29hgy29 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
    })
Sign In or Register to comment.