How to make this sliding effect?

Apollo14 · September 2019

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!

(I've attached zip with layers in png)

MoKaLux · September 2019

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)

Apollo14 · September 2019

Yes, but shouldn't white lines be masked somehow?

MoKaLux · September 2019

a video of the effect would help.

keszegh · September 2019

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.

hgy29 · September 2019

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)

MoKaLux · September 2019

@hgy29 I added your code to document the wiki for setStencilOperation and setLayoutParameters. Thanks.

hgy29 · September 2019

See how I force myself to write comments in the code

Apollo14 · September 2019

THANK YOU GUYS! THIS IS ABSOLUTELY WHAT I EXPECTED!! YOU'RE AWESOME!

keszegh · September 2019

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?

keszegh · September 2019

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

Apollo14 · September 2019

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

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!

keszegh · September 2019

this can shed 'some' light on the topic:
https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glStencilFunc.xhtml

hgy29 · September 2019

@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

Apollo14 · September 2019

Howdy, Stranger!

Categories

In this Discussion

Top Posters

How to make this sliding effect?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

How to make this sliding effect?

Comments