Scene Transition with Shaders

  • 65 favourites


4,760 visits, 8,159 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

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.


  • Order by
Want to leave a comment? Login or Register an account!