Transitions – Screen and Camera


This page covers information specific to screen and camera transitions. Screen and camera transitions apply effects to portions of the display (often the whole display) and are a great way of smoothing the transition between scenes or different locations within your game.

Please also see the general transition overview for an introduction to many of the shared features and functionality that all transitions share.

This screen capture shows some screen transitions in action including fade and wipe.

ScreenTransitions

Which to Use

Screen and camera transitions offer similar functionality, however have slightly different ways of working and usage scenarios. We have found that in the majority of cases screen transitions are of most use as they also affect the UI. The differences are listed below for your consideration.

Camera transitions

  • Work as an ‘Image Effect’ and so have to be attached to the same GameObject as the target camera upon which they should operate.
  • Camera transitions will not affect UI elements.
  • Can work on the main camera or secondary cameras to affect either the whole display or just a portion of it.
  • Can be used to transition between different cameras within the same scene.

Screen transitions

  • Can create a temporary UI Overlay Canvas and so affect the whole display including UI.
  • Can work on an individual RawImage and so target only that item.
  • Can cross transition between scenes.
  • Can automatically load new scenes when transitioning out

Screen / Camera Fade

The basic configuration is as described in the general transition overview with several new common and specific options for screen and camera fading.

You can provide a Texture that will be used for fading to / from and you can also specify a Color. It you specify only a color then the fade will happen to / from that color. If you specify both a color and a texture then the color will be used to tint the texture (so white will show the texture ‘as is’, black will show as all black, other colors will tint).

Screen Fade Specific

In some instances you might be cross fading to this scene from another and so the Skip on Cross Transition option allows to skip running the fade in if it detects that a separate cross transition is already in progress.

The out configuration allows you to specify a Scene Change Mode that dictates if / how a new scene should be loaded. None will cause no scene change action to be taken when, Cross Transition will cause a cross transition to the specified scene, whilst End will cause the specified scene to be loaded when the transition out has completed. The Scene To Load property lets you specify the target scene to load.

Scripting

Usage of Screen Fade is as discussed in the general transition overview. An additional TransitionStep extension method ScreenFade is provided for chaining of screen fades.

To cross fade between cameras you should call the CameraFade component’s CrossTransition() method passing in a target camera to which position you want to move.

Camera Fade Specific

Camera transitions need to be on the same GameObject as the target camera. Cross fading is available but has to be triggered through code as shown below.

 

Scripting

Usage of Camera Fade is as discussed in the general transition overview. To cross fade between cameras you should call the CameraFade component’s CrossTransition() method passing in a target camera to which position you want to move.

Screen / Camera Wipe

The basic configuration is as described in the general transition overview with the exception that the camera transitions need to be on the same GameObject as the target camera as mentioned above. Both Screen Wipe and Camera Wipe also provide additional configuration options as shown below.

You can provide a Texture that will be used for wiping to / from and you can also specify a Color. It you specify only a color then the wipe will happen to / from that color. If you specify both a color and a texture then the color will be used to tint the texture (so white will show the texture ‘as is’, black will show as all black, other colors will tint).

For wipe, you should select a Mask Texture which is a grey scale image that defines how the transition will work, where the different grey threshold levels represent the transparency over time. Over the course of a transition ‘in’, the threshold level changes from white to black where the background image is shown only for those mask texture values lighter then the current threshold. You can find a set of wipe textures under \FlipWebApps\BeautifulTransitions\Textures. Just select one of these in the Mask Texture field or easily create your wipe in any art program by creating a grey scale alpha texture as discussed below.

The Invert Mask property inverts the mask so it works in the opposite direction.

Softness lets you control how the edges between the background and the wipe texture / color are blended as shown below

Wipe Smoothing

Provided screen wipes include: BarsLeftToRight, BarsTopToBottom, Box, Circle, Clouds1, Clouds2, Crystalise1, FibersHorizontal, FibersVertical, Mosaic1, Mosaic2, Mosaic3, Noise1, Noise2, RadialAntiClockwise, RadialClockwise, Twirl1, Twirl2, Twirl3, Twirl4, WipeHorizontalToMiddle, WipeLeftToRight, WipeTopToBottom, WipeVerticalToMiddle. You can also easily create your own wipes as discussed further below.

Screen Wipe Specific

In some instances you might be cross fading to this scene from another and so the Skip on Cross Transition option allows to skip running the fade in if it detects that a separate cross transition is already in progress.

The out configuration allows you to specify a Scene Change Mode that dictates if / how a new scene should be loaded. None will cause no scene change action to be taken when, Cross Transition will cause a cross transition to the specified scene, whilst End will cause the specified scene to be loaded when the transition out has completed. The Scene To Load property lets you specify the target scene to load.

 

The out configuration also allows for automatic changing to a different scene. The Scene Change Mode property lets you specify whether this should occur at the start of the transitions, the end, or as a cross transition. The Scene To Load property lets you specify the target scene to load.

Scripting

Usage of Screen Wipe is as discussed in the general transition overview. An additional TransitionStep extension method ScreenWipe is provided for chaining of screen wipes.

Camera Wipe Specific

Camera transitions need to be on the same GameObject as the target camera. Cross fading is available but has to be triggered through code as shown below.

 Scripting

Usage of Camera Wipe is as discussed in the general transition overview. To cross wipe between cameras you should call the CameraWipe component’s CrossTransition() method passing in a target camera to which position you want to move.

Create Your Own Wipes

It is easy to create your own wipes. Just plan how you want the transition between the Wipe Texture / Color and the scene image to be. And then use different grey level intensities to reflect that. In the below image we want the general transition wipe to happen top to botton, with the ‘TEXT’ section to be transitioned in the other direction. The background will also be displayed quicker as that gradient only goes from white to medium grey whereas the TEXT goes from white to black.

CustomMask

With your mask created, add it to your Unity project. Set the imported files Texture Type to Texture, and Alpha from GrayScale to True. You can then select and use your custom mask texture in either of the wipe components.

Demos

Screen and Camera Transitions – Demo of the different screen and camera transitions.
Cross Camera Transitions Demo – How to cross transition between different cameras within a scene.
Scene Swap – Demo using screen transitions to swap between scenes including cross transitions.

Additional Help

Please view the included demo’s under the \FlipWebApps\BeautifulTransitions\_Demo folder for examples and source code for implementing common scenarios.

If you need help or support then please visit our support forum, or let us know if you have any suggestions, feature requests or comments.