Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
How to create a circle transition with transparency — Gideros Forum
  • Home
    • ›

    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.
    +1 -1Share on Facebook

    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
})
      +1 -1Share on Facebook
    Sign In or Register to comment.