[Request] Transition shader for layouts/layers

Share your Construct 2 effect files

Post » Sat Feb 11, 2017 4:53 pm

Is possible do a shader that applied on a layout/layer do a fade-out from black or X color and disappear? Using squares, circles, bars, diagonal, curtain... some tipical transitions we have in video editors but in a shader.

About presets here a lot of ideas:
https://videohive.net/search?utf8=%E2%9 ... transition

Love this glitch transitions:
https://videohive.net/item/glitch-trans ... ?s_rank=19

Instead of do 1x1 maybe there is some way to create a "Transition shader editor" ? In the same way i did the Shader Effect Editor?: effect-shader-effect-amp-editor-released-create-your-shader_t150076 .

That shader editor was build from a simple fire shader that i converted adding and parsing all the values in the .fx to the .xml. So, there is a template and a stand alone version to create your own shaders with a big variety.

Now i not have much time if not i will give a try but something like that for transitions will be so cool. If not as i said at least the basic ones will be great.

@gigatron what you think? :roll:
B
23
S
10
G
3
Posts: 538
Reputation: 4,426

Post » Sat Feb 11, 2017 8:38 pm

Yes it's possible ... don't know for shader editor but you can draw circle square fade or what you want with shaders for
screen transition ...
I can publish a demo soon for this request ;
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
57
S
20
G
29
Posts: 804
Reputation: 21,969

Post » Mon Feb 13, 2017 6:31 pm

@Gigatron Oh Great! :D

Also i'm looking for this one:
Image

I did it as animation in pixels for a lowres game. Will be great something like this on you can set the direction like Up/Down/Left/Right, set how many black bars you want and speed.

So, how a shader editor for transitions will be very tricky, for a presets one maybe something with parameters like this:

Type: List with: Square, Circle, Bars...

(General values that works on all types)
Speed: Based in miliseconds i guess .
Position X: Using 0-1. So 0.5 on both X/Y will do the shape starting from the center. With 0-both diagonal,etc....
Position Y: Using 0-1.
Direction: List with Up/Down/Left/Right
Fade: List with In/Out

- Then config values that only works for one of the types
[Square] BlaBla bla...
[Square] BlaBla bla...
[Circle] BlaBla bla...
[Circle] BlaBla bla...
[Bars] List with Horizontal/Vertical
etc....

What you think?
B
23
S
10
G
3
Posts: 538
Reputation: 4,426

Post » Mon Feb 13, 2017 8:38 pm

Long time ago i started multi transition fx, but no one here are interested about it and i dropped this fx. But
i found this on my SSD disk; You can test this ;

http://gigatron3k.free.fr/html5/C2/FX/mtransition.rar

Bouncer contain curtain fx ... viewtopic.php?f=184&t=171684&p=1032075&hilit=transition#p1032075
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
57
S
20
G
29
Posts: 804
Reputation: 21,969

Post » Tue Feb 14, 2017 9:12 am

@gigatron That effect curtain is not what i'm looking for, but the transition .FX looks cool!! :o .

I don't know if you can work on this again to improve, maybe start a thread showing this and see how people is interested and if worth it.

In case you are able to work on this again, here are more ideas:


About Transition 0:
The squares with a big size looks ok, but if i try to use them at small size like 1x, 2x,etc.. you can see the pattern :S
Image

Now they appear with some kind of seed. Will be great some option to appear ordered in horizontal/vertical/diagonal to the opposite.

About Transition 1:
The circle effect is good but is a ellipse , i guess is because i'm using a 16:9 and the effect stretch to the window size instead of keep a 1x1 circle ratio.

Also will be great have this type of transition for squre/rectangle/rhomb/bar(horizontal\vertical).

General:
When the effect is finished, if i restart the layout not start again. Maybe this is more a problem of my project config but i can't get it, any idea?.
B
23
S
10
G
3
Posts: 538
Reputation: 4,426

Post » Tue Feb 14, 2017 10:04 am

@matriax
the aspect ratio is now corrected . appliyed to layout;
yes it use random seed function ... but let me add some shape transition...

I think i have all the source of transition fx i found around the web...i can
continue this work...
http://gigatron3k.free.fr/html5/C2/FX/mtransition.rar
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
57
S
20
G
29
Posts: 804
Reputation: 21,969

Post » Tue Feb 14, 2017 11:45 am

@Gigatron Thanks! Now the circle on Transition 2 works correctly.

On transition 1 with block size at 0.25 or 0.1 get interesting results with some kind of Star/Rhomb that can fit perfect in the game too. Also with a 64 block size i have some kind of ordered dithering that looks awesome :O
B
23
S
10
G
3
Posts: 538
Reputation: 4,426

Post » Wed Feb 15, 2017 7:46 pm

@Gigatron one problem i found is that when i add the transition effect to the layout, this one disappears and i can't edit the objects in the layout :S .

How can i fix that?
B
23
S
10
G
3
Posts: 538
Reputation: 4,426

Post » Wed Feb 15, 2017 9:25 pm

@matriax
The C2 editor run the shader, this is the reason of this case.
You must simply preview fx off on the editor (projet);
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
57
S
20
G
29
Posts: 804
Reputation: 21,969

Post » Thu Feb 16, 2017 1:54 pm

Ops forgot that! Thanks.

What about the other transitions forms and shapes? More interested in bars horizontal/vertical like the animation i posted or like the ones appears in the video links. From the most basic to whatever cool can we get :P
B
23
S
10
G
3
Posts: 538
Reputation: 4,426

Next

Return to Effects

Who is online

Users browsing this forum: No registered users and 0 guests