Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
How to make this sliding effect? - Gideros Forum

How to make this sliding effect?

Hi guys!

Do you know how to make such sliding effect? (white lines slide from left to right, very popular effect in casual games)

I guess it can be done with masking somehow?
Many thanks! <3

(I've attached zip with layers in png)
> Newcomers roadmap: from where to start learning Gideros
"What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
“The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
zip
zip
VIP_slider_pics.zip
13K

Comments

  • I don't know what the effect should be but I have tried something, hope this help?
    local bg = Bitmap.new(Texture.new("gfx/vip/background.png"))
    local ticket = Bitmap.new(Texture.new("gfx/vip/ticket.png"))
    local text = Bitmap.new(Texture.new("gfx/vip/text.png"))
    local fx1 = Bitmap.new(Texture.new("gfx/vip/fx1.png"))
    local fx2 = Bitmap.new(Texture.new("gfx/vip/fx2.png"))
     
    stage:addChild(bg)
    stage:addChild(ticket)
    stage:addChild(text)
    stage:addChild(fx1)
    stage:addChild(fx2)
     
    local dir = 1
     
    stage:addEventListener(Event.ENTER_FRAME, function()
    	if fx1:getX() > 128 then
    		dir = -1
    	elseif fx1:getX() < 0 then
    		dir = 1
    	end
    	fx1:setX(fx1:getX() + dir)
    	fx2:setX(fx2:getX() + dir)
    end)
  • Yes, but shouldn't white lines be masked somehow?
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • a video of the effect would help.
  • keszeghkeszegh Member
    Accepted Answer
    set some appropriate blend mode to the lines and add them as children to the pic. and then render the pic+lines to a rendertarget. add this result to stage.
  • hgy29hgy29 Maintainer
    Accepted Answer
    My additions to @MoKaLux code are below. Is it what you expected ?
    local bg = Bitmap.new(Texture.new("gfx/vip/background.png"))
    local ticket = Bitmap.new(Texture.new("gfx/vip/ticket.png"))
    local text = Bitmap.new(Texture.new("gfx/vip/text.png"))
    local fx1 = Bitmap.new(Texture.new("gfx/vip/fx1.png"))
    local fx2 = Bitmap.new(Texture.new("gfx/vip/fx2.png"))
     
    stage:addChild(bg)
    stage:addChild(ticket) ticket:setPosition(80,20) 
    ticket:addChild(fx1) fx1:setX(-100)
    fx1:addChild(fx2) fx2:setX(-100)
    ticket:addChild(text) 
     
    -- Use auto layout on ticket to center text automatically
    ticket:setLayoutParameters{ rowWeights={1}, columnWeights={1} }
    text:setLayoutConstraints{}
     
    --Use stencil for masking glow:
    --1) Clear stencil and set it to '1' for every pixel drawn on 'ticket'
    ticket:setStencilOperation{ stencilClear=true, 	stenciMask=1, stencilWriteMask=1, 
    	stencilRef=1, stencilFunc=Sprite.STENCIL_ALWAYS, 
    	depthPass=Sprite.STENCIL_REPLACE}
    --2) Only draw fx1/fx2 if stencil isn't 0
    fx1:setStencilOperation{ stencilClear=false, stencilMask=1, stencilRef=0, stencilFunc=Sprite.STENCIL_NOTEQUAL}
     
    local dir = 1
     
    stage:addEventListener(Event.ENTER_FRAME, function()
    	if fx1:getX() > 450 then
    		dir = -1
    	elseif fx1:getX() < -100 then
    		dir = 1
    	end
    	fx1:setX(fx1:getX() + dir*5)
    end)

    Likes: MoKaLux

    +1 -1 (+1 / -0 ) Share on Facebook
  • MoKaLuxMoKaLux Member
    edited September 16 Accepted Answer
    @hgy29 I added your code to document the wiki for setStencilOperation and setLayoutParameters. Thanks.
    +1 -1 (+2 / -0 ) Share on Facebook
  • hgy29hgy29 Maintainer
    See how I force myself to write comments in the code :)

    Likes: MoKaLux, antix

    +1 -1 (+2 / -0 ) Share on Facebook
  • THANK YOU GUYS! THIS IS ABSOLUTELY WHAT I EXPECTED!! YOU'RE AWESOME! o:)

    Likes: MoKaLux

    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
    +1 -1 (+1 / -0 ) Share on Facebook
  • these example codes in the wiki are nice but without the appropriate image files it's hard to see what it should do. isn't there an option to attach example code in zip to the appropriate page?
  • also i have to admit i did not get closer to understand this stencil mumbo-jumbo but i like it a lot.

    Likes: Apollo14

    +1 -1 (+1 / -0 ) Share on Facebook
  • Apollo14Apollo14 Member
    edited September 16
    keszegh said:

    also i have to admit i did not get closer to understand this stencil mumbo-jumbo but i like it a lot.

    I also have absolutely no idea how this stencil stuff works :s
    I read it again and again, it's like chinese alphabet to me.
    @hgy29 was stencil integrated as a code library from somewhere? Do they have some basic documentation? Thx!
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • hgy29hgy29 Maintainer
    @Apollo14, stencil is not a lib but a GPU standard capability. Basically this is another buffer alongside the render target or the frame buffer, on which you can instruct the GPU to do things or act upon its content.

    A bit of litterature:
    - https://open.gl/depthstencils
    - https://learnopengl.com/Advanced-OpenGL/Stencil-testing

    Likes: Apollo14

    +1 -1 (+1 / -0 ) Share on Facebook
  • :o
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
Sign In or Register to comment.