Screen fade between scenes

Help & Support
1

Hi, I want to do a very simple screen (CSS) fade between scenes. Fade to white/black or some image and then fade out once the new scene has loaded. I saw an example here (https://playcanvas.com/project/779957/overview/asset-helper ) but its highly convoluted and involves lots of other moving parts (scene manager, scene transition components etc) and I cant get my head around it.

Could anyone guide me on the steps I need to take for this as I’m a bit stuck. I know it needs to be CSS but other than that I have no clue on where to start.
Thanks

2

Hi @Grimmy,

The part that does the CSS fade out and in is all in https://playcanvas.com/editor/code/779957?tabs=45050306

I basically copied the HTML/CSS parts from the template loading screen provided by PlayCanvas. I just added the fade in and out parts.

If you want to use this script attach it to an entity that persists between scene changes, and then fire these events from your scene changing code.

        app.fire('sceneTransition:start', fadeInTime, fadeOutTime);
        app.fire('sceneTransition:progress', numberOfLoadedAssets, totalNumberOfAssets);
        app.fire('sceneTransition:sceneReady');
2 Likes
3

Many thanks. That helped me figure it out. Cheers

1 Like