Know another language? Translate this tutorial!

Scene Transition with Shaders

Favourite 71 favourites
Tutorial written by KiyoshiOriginally published on 25th, September 2012 - 9 revisions

While Ashley doesn't implement automatic scene transition effects, i'm gonna teach how to do it manually on this tuto.

Result Capx

1. Preparation

Have at least two layouts. On first layout, in properties panel go Add/Edit Effects and add Brightness effect. Yes this is a Layout effect, not a Layer effect, though it could be. HSL and others can be used too, provided that you can manipulate the colors so that the layout fades to black and back again to normal brightness/luminosity. Assuming that Brightness effect was picked, set it's 'brightness' value to 0(zero).

2. Events

For better organization add those global variables. (Right mouse button, Global Variable). 'transitionState' determines if state is currently fading in or out. The scene fades in when it starts and fades out when it ends. 'luminosity' controls current shader brightness parameter. Think of it as if someone is pointing a flashlight to the scene and gradually turns the light on or off. The rest should be self-explanatory. Note that the global variables operate in every scene since they're global. There's no conflict since you can't have to layouts processing at the same time. Change the scene change trigger (in this case is any mouse click) as you wish depending on your game case.

Do the same steps 1 and 2 (Remove global assignment lines on event sheets , leave them only on layout 1) for all other layouts. Just change the action Go to Layout X at end of sheet to desired destination scene.

That's it.

Questions, errors, enhancements are welcome.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


Duke 3,365 rep

Buddy, Thanx a lot! I was exactly in need of this! Great job!

Saturday, September 29, 2012 at 1:56:36 AM
Kiyoshi 13.5k rep

Glad it was useful !

Saturday, September 29, 2012 at 5:38:12 PM
jogosgratispro 23.4k rep

Very nice idea for a ideal result

Monday, October 01, 2012 at 12:31:24 AM
kenli 7,858 rep

Wow nice effect :)

Monday, October 01, 2012 at 2:46:43 PM
Kiyoshi 13.5k rep

Yeah and the same principle can be used with several other transition types. I might experiment more on this.

Monday, October 01, 2012 at 5:37:13 PM
RacerXXL 4,985 rep

Nice effect!

Sunday, October 07, 2012 at 5:05:50 PM
jacquesletesson 2,475 rep

Thanks for sharing, really useful.

Thursday, February 07, 2013 at 11:30:01 PM
Semo 2,628 rep

Thanks! Really useful!

Thursday, February 28, 2013 at 3:55:37 PM
iGamersBox 4,607 rep

That was great, i was looking for this for a long time! now gonna implement it on my game and experiment with some more effects.

Monday, March 18, 2013 at 7:56:24 AM
MichaelG7355 2,943 rep

Just a quick question - I noticed that the tutorial displays a border around the image when it is run. I was wondering how you did that?

Monday, May 27, 2013 at 7:39:48 PM
jeeba 1,265 rep

Wow amazing i was looking for this, just a quick question, this is like a for loop, but there's like an instrinsic time here, how can you control this?

Tuesday, September 10, 2013 at 10:48:03 PM
shukra 1,131 rep

Link is not work

Saturday, June 28, 2014 at 4:29:27 PM
luisgmolina 8,352 rep

Great, very nice work!

Monday, June 30, 2014 at 3:45:47 PM
OhhBaby 1,776 rep

Link dead!

Thursday, May 19, 2016 at 11:38:46 PM
pcprice76 591 rep

I'm really surprised when people uses dropbox links that have limited time... bah

Sunday, October 29, 2017 at 6:39:29 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.