Camera transitions

Camera Transitions‘ is a large collection of smooth, real-time, cross-fade transition effects between cameras in the scene.

DEMO  UNITY ITCH.IO

How to start.

The first thing you should do is create an instance of ‘TransitionManager‘, the object in charge of handling transitions. Create an empty GameObject and add the ‘TransitionManager‘ component.

.

There should only be one ‘TransitionManager‘ at a time. You can create it in each scene that you use, or better yet, create it only in the first scene you load and mark ‘Don’t destroy on load‘ in ‘Advanced settings‘ (see below).

All code are inside the namespace ‘CameraTransitionsAsset‘, so you have first to include the namespace:

using CameraTransitionsAsset;

.

Then you will be able to access ‘TransitionManager‘ through its singlenton ‘TransitionManager.Instance‘.

Now, if ‘cameraA‘ and ‘cameraB‘ are two cameras in your scene, you can make your first transition like this:

TransitionFadeToGrayscale.Start(cameraA, cameraB, 1.0f);

.

This will execute a gray fade between ‘cameraA‘ and ‘cameraB‘ that will last a second.

In the folder ‘Ibuprogames/CameraTransitions/Runtime/Transitions‘ you have all the transitions available. All have a static ‘Start‘ method to execute their transition. Check the comments in the code to know the different parameters.

Some points to consider:

  1. Transitions are always between cameras of loaded scenes. ‘Camera Transitions‘ does not load new scenes.
  2. At the end of the transition the GameObject of the initial camera will be deactivated, so it is better that it only contains the components related to the camera.
  3. The origin and destination cameras must be different.

.

Transitions

Next you can find a list of all available transitions and how to execute them. Don’t forget to check the final section on the ‘Advanced settings’.

.

Cross Zoom

twitter2

Zoom and a radial blur. The parameters to customize are:

  1. Strength (float, default 0.4): The strength of effect [0 – 1].
  2. Quality (float, default 20): Quality effect. [0 – 40].

.

TransitionCrossZoom.Start(cameraA, cameraB, 1.0f, 0.4f, 20.0f);

.

.

Cube

Cube

Modern and elegant, Steve Jobs choice. The parameters to customize are:

  1. Perspective (float, default 0.7): Acuteness of the perspective angle [0 – 1].
  2. Zoom (float, default 0.3): How it moves away [0 – 100].
  3. Reflection (float, default 0.4): The strength of the reflection [0 – 1].
  4. Elevantion (float, default 3.0): How it rises from the floor [0 – 100].

.

TransitionCube.Start(cameraA, cameraB, 1.0f, 0.5f, 0.4f, 0.3f, 2.0f);

.

.

Doom

Doom
Doom is back! And also his transition effect. The parameters to customize are:

  1. Bar width (int, default 10): The bar width [ 0 – …].
  2. Amplitude (float, default 2.0): Height difference between bars [ 0.0 – 25.0].
  3. Noise (float, default 0.1): Height noise [0.0 – 1.0].
  4. Frequency (float, default 1.0): Wave frequency [0.0 – 100.0].

.

TransitionDoom.Start(cameraA, cameraB, 1.0f, 25, 2.0f, 0.25f, 2.0f);

.

.

 Fade to color

FadeToColor

The good ol’ fade using a color. The parameters to customize are:

  1. Strength (float, default 0.3): If 0 color has little influence on the effect, if 1, the color color influences and lasts more [0 – 1].
  2. Color (Color, default Color.black): The color.

.

TransitionFadeToColor.Start(cameraA, cameraB, 1.0f, 0.5f, Color.white);

.

.

Fade to grayscale

FadeToGrayscale

The same effect as previous but with a mix in black and white. Highly hipster. The parameters to customize are:

  1. Strength (float, default 0.3): If 0, the image directly turn grayscale, if 1, the grayscale transition phase is very important [0 – 1].

.

TransitionFadeToGrayscale.Start(cameraA, cameraB, 1.0f, 0.5f);

.

.

Flash

Flash

A transition with a flash and burned colors. The parameters to customize are:

  1. Strength (float, default 0.3): The importance of the flash in effect [0 – 1].
  2. Intensity (float, default 3.0): The intensity of the flash [0 – 5].
  3. Zoom (float, default 0.5): If 0, there is no zoom effect, if 1 the zoom effect is intense [0 – 1].
  4. Velocity (float, default 3.0): The speed of the effect [0.1 – 10].
  5. Color (Color, default (1.0, 0.8, 0.3)): The flash color.

.

TransitionFlash.Start(cameraA, cameraB, 1.0f, 0.4f, 4.0f, 0.6f, 4.0f, Color.red);

.

.

Flip

Flip

Merciless compressed cameras. The parameters to customize are:

  1. Mode (Horizontal / Vertical, default Vertical).

.

TransitionFlip.Start(cameraA, cameraB, 1.0f, TransitionAxis.Horizontal);

.

.

Fold

Fold

Like you fold the previous camera. The parameters to customize are:

  1. Mode (Horizontal / Vertical, default Vertical).

.

TransitionFold.Start(cameraA, cameraB, 1.0f, TransitionAxis.Horizontal);

.

.

Gate

Gate

Knocking on game’s door ;). The parameters to customize are:

  1. Perspective (float, default 0.4): Perspective [0.0 – 1.0].
  2. Depth (float, default 3.0): Transition depth [0.0 – 100.0].
  3. Reflection (float, default 0.4): Reflection [0.0 – 1.0].

.

TransitionGate.Start(cameraA, cameraB, 1.0f, 0.3f, 5.0f, 0.3f);

.

.

Glitch

Glitch

Displacements of the RGB channels, it happens when they change something in Matrix. The parameters to customize are:

  1. Strength (float, default 0.4): The strength of displacements [0 – 10].

.

TransitionGlitch.Start(cameraA, cameraB, 1.0f, 1.0f);

.

.

Gradient

This transition is based on the use of gradients. A gradient is nothing more than a grayscale texture. The transition will go from black to white.

For example if we use a gradient like this:

The resulting transition will be:

The parameters to customize are:

  1. Gradient (Texture): The gradient texture.
  2. Border size (float, default 0).
  3. Border color (Color).

.

TransitionGradient.Start(cameraA, cameraB, 1.0f, gradient, 0.1f, Color.cyan);

.

We also include a ‘Gradient Bank‘, an asset in which you can add references to the gradients you want to use and so you won’t have to add them to the Resources folder. To create one one you just have to right click on the ‘Project‘ window and then on the menu ‘Create > Ibuprogames > Camera Transitions > Gradient Bank‘.

In the folder ‘Ibuprogames/CameraTransitions/Gradients/Textures‘ you can find more than 400 gradient textures. You can delete this folder if you are not going to use it. All are referenced in ‘Ibuprogames/CameraTransitions/Gradiends/GradientBank.asset‘.

If, for example, you want to execute a transition with a random gradient within a ‘Gradient Bank‘, you can do the following:

.

TransitionGradient.Start(cameraA, cameraB, 1.0f, gradientBank.textures[Random.Range(0, gradientBank.textures.Count)]);

.

.

Linear blur

LinearBlur

Transition with a linear blur effect. The parameters to customize are:

  1. Intensity (float, default 0.1): Blur intensity [0 – 1].
  2. Passes (int, default 8): Blur quality [1 – 8].

.

TransitionLinearBlur.Start(cameraA, cameraB, 1.0f, 0.5f, 6);

.

.

Mosaic

Mosaic

Random mosaic effect. The parameters to customize are:

  1. Steps (Vector2, default (1, 1)): Cell to jump to [-10 – 10]. Avoid jump to the same cell (0 – 0).
  2. Rotate (bool, default false): Random rotate cells? [true – false].

.

TransitionMosaic.Start(cameraA, cameraB, 1.0f, new Vector2(2.0, 3.0), true);

.

.

Page curl

PageCurl

Page turn effect. The parameters to customize are:

  1. Angle (float, default 45): Turn angle [0 – 180].
  2. Radius (float, default 0.1): Page radius [0 – 1].
  3. Front shadow (bool, default true): Page front shadows [true – false].
  4. Back transparency (float, default 0.25): Back page transparency [0 – 1].
  5. Back shadow (bool, default true): Back shadow [true – false].
  6. Inner shadow (bool, default true): Inner shadow [true – false].

.

TransitionPageCurl.Start(cameraA, cameraB, 1.0f, 60.0f, 0.4f, true, 0.25f, true, true);

.

.

Pixelate

Pixelate

Retro pixelated effect. The parameters to customize are:

  1. Size (float, default 50.0): Size of the pixels [0 – …].

.

TransitionPixelate.Start(cameraA, cameraB, 1.0f, 75.0f);

.

.

Radial

Radial

Nice radial curtain effect. The parameters to customize are:

  1. Clockwise (bool, default true): Clockwise?

.

TransitionRadial.Start(cameraA, cameraB, 1.0f, false);

.

.

Random grid

RandomGrid

Chop the screen with random rectangles. The parameters to customize are:

  1. Rows (int, default 10): Rows [0 – …].
  2. Columns (int, default 10): Columns [0 – …].
  3. Smoothness (float, default 0.5): Smoothness of the transition between rectangles [0 – 1].

.

TransitionRandomGrid.Start(cameraA, cameraB, 1.0f, 20, 5, 0.25f);

.

Schwifty

It’s time to get schwifty. The parameters to customize are:

  1. Intensity (float, default 0.3): Wave intensity [0 – 1].
  2. Amplitude (float, default 10): Wave amplitude [0 – …].

TransitionSchwifty.Start(cameraA, cameraB, 1.0f, 0.4f, 12);

.

Simple

Because sometimes less is more. This transition is a simple fade, so simple that it has no extra parameters.

.

TransitionSimple(cameraA, cameraB, 1.0f);

.

.

Smooth circle

SmoothCircle

Very cartoon effect. The parameters to customize are:

  1. Smoothness (float, default 0.3): If 0 the edge of the circle is not smooth, if 1 is very smooth. [0 – 1].
  2. Invert (bool, default false): Opening or closing?

.

TransitionSmoothCircle.Start(cameraA, cameraB, 1.0f, 0.1f, true);

.

.

Smooth line

SmoothLine

A nice cinematic effect. The parameters to customize are:

  1. Angle (float, default 45.0): Line angle [0 – 360].
  2. Smoothness (float, default 0.5): If 0 color has little influence on the effect, if 1, the color color influences and lasts more. [0 – 1].

.

TransitionSmoothLine.Start(cameraA, cameraB, 1.0f, 90.0f, 0.1f);

.

.

Swap

Swap

Elegant transition between cameras.. The parameters to customize are:

  1. Perspective (float, default 0.2): Perspective [0.0 – 1.0].
  2. Depth (float, default 3.0): Transition depth [0.0 – 100.0].
  3. Reflection (float, default 0.4): Reflection [0.0 – 1.0].

.

TransitionSwap.Start(cameraA, cameraB, 1.0f, 0.3f, 5.0f, 0.3f);

.

.

Valentine

Valentine

Nothing says more ‘I love you‘ than a heart across the screen. The parameters to customize are:

  1. Border width (float, default 25): The width of the border [0 – 100].
  2. Color (Color, default Color.red): The color.

.

TransitionValentine.Start(cameraA, cameraB, 1.0f, 50.0f, Color.black);

.

.

Warp Wave

WarpWave

Gravitational waves across your scene. The parameters to customize are:

  1. Mode (Horizontal / Vertical, default Vertical).
  2. Curvature (float, default 0.5): Curvature of the wave [0.0 – 5.0].

.

TransitionWarpWave.Start(cameraA, cameraB, 1.0f, TransitionAxis.Vertical, 1.0f);

.

.

Wipe

The new camera pushes the old one. The parameters to customize are:

  1. Mode (Horizontal / Vertical, default Horizontal).

.

TransitionWipe.Start(cameraA, cameraB, 1.0f, TransitionAxis.Vertical);

.

.

Advanced settings

You can find some extra options in the ‘Advanced Settings‘ section of ‘TransitionManager‘:

.

Progress (1)

Do you want to manually control the progress of the transition? Change it to ‘Manual‘ and you can modify using ‘Progress‘ property of your transition.

Note that when you start the transition (with ‘Start(…)‘) it will be 0 and the transition not end until it reaches 1.

.

Used scaled time (2)

If it’s true, use Unity scaled time. If false, it’s not affected by Time.timeScale.

In this case, you can apply your time scale using ‘CustomTimeScale‘ of ‘TransitionManager‘.

.

Handle AudioListeners (3)

Usually all cameras have their own AudioListener. During transitions, there are two cameras activated, which means you will have two active AudioListeners.

With this option ‘TransitionManager’ will be responsible for activating and deactivating the corresponding one.

.

Dont destroy on Load (4)

If you want to make transitions, there must be one, and only one, ‘TransitionManager‘.

If you check this option, ‘TransitionManager‘ will not be destroyed when you download the current scene and load another.

.

RenderTexture Mode (5)

If your target camera (Camera B) already uses a RenderTexture, you can change the mode to ‘Manual’ and that will be used (no new ones will be created).

.

RenderTexture Update (6)

The destination camera is updated during the entire transition (better quality) or only the first frame (faster).

.

RenderTexture Size (7)

You can change the size of RenderTexture. Smaller sizes are faster, but the quality will be worse.

.

Events

When you transition from one camera to another, you might want things to happen in your game when the transition begins and when it ends.

For example, you may want to deactivate the GUI at start-up and reactivate it when finished.

To do this you just have to use the ‘StartEvent‘, ‘ProgressEvent‘ and ‘EndEvent‘ events of ‘TransitionManager‘.

.

.All the code are well commented, I recommend reading the code if you want more information. You can also check the demo project found in the ‘Ibuprogames/CameraTransitions/Demo‘ folder (you can delete this folder if you want).

Any questions or suggestions you have, we will be happy to answer you in our mail:

You Might Also Like

21 Comments

  • Reply Max November 14, 2016 at 8:57 am

    Please make support for virtual reality. I already bought it on Unity Asset Store. I only realized this does not support VR when I come to this website. You did not mention about it in Unity Asset Store. 🙁 plz help

    • Reply Martin Bustos November 14, 2016 at 9:14 am

      Hi Max, right now we can not support VR (look where it says ‘Few considerations to keep in mind‘). We hope to be able to support VR in the next version of Unity (5.5).

  • Reply Ste January 25, 2017 at 6:20 pm

    Hi! Is there an ETA on VR support? I am using Unity 5.5 and the transition I want to use (Flash) almost works as desired…only that the render of the ‘to’ camera looks full width, rather than half…if that makes sense! Essentially each eyes view looks squashed left to right. The transition finishes and the view snaps to what it should be.

    • Reply Martin Bustos January 26, 2017 at 9:50 am

      Hi Ste, the next version of Unity, 5.6, will come with native support for VR. As soon as it is available we will work to support VR (in all our assets).

  • Reply Robert July 9, 2017 at 10:45 pm

    I found the camera depth could be wrong so before a transition I had to set the depth on the cameras. It would be nice if the script could handle that by setting the depth of the target camera below the source camera prior to the fade and then restore its original depth after the fade.

    • Reply Martin Bustos July 10, 2017 at 11:14 am

      Hi Robert, I’ll try solve that bug. Can you send an email to ‘hello (at) ibuprogames (dot) com’ to stay in touch?

      Thanks!

  • Reply Xavi September 10, 2017 at 1:11 pm

    Hi Martin, I’m wondering if you provide the ability to change the Valentine camera transition effect so that we can use our own custom shapes instead of the heart?

    • Reply Martin Bustos September 10, 2017 at 2:02 pm

      Hi Xavi, that effect in particular uses a formula to draw the heart. If the shape you want can be expressed as a mathematical function, you could replace the ‘Heart()’ function (line 40 of the TransitionValentine.shader file).

      We can help you if you tell us more in our mail ‘hello (at) ibuprogames (dot) com’.

      Regards.

  • Reply Martin Funday January 3, 2018 at 10:44 am

    Hello!
    We are using the wonderful Camera Transitions plugin in one of our games, and we have a feature request.

    We have switched our main game mode to use a multi-camera setup (1 camera for environment and 1 for diorama-style skyboxes). This has then broken the transition we use from our menu to our main game mode, as there only seems to be support for going from 1 camera to 1 camera. From what we can tell, it should be possible to extend cameratransition.cs to populate the rendertexture with the contents from an array of cameras instead of 1 camera. However, we arent keen on modding a plugin that might then get updated and overwritten. Also, as the author you could most likely implement this change a lot faster. Could you possibly take a look and see if this is doable? If not, we’ll probably take a deeper look ourselves.

    Thanks!

    • Reply Martin Bustos January 3, 2018 at 11:59 am

      Hi Martin, thanks for using our asset!

      As you say, transitions are always from one camera to another. Doing it from one to multiple cameras can be an interesting feature.

      Could you send to our mail a small test scene?

      Thanks.

      • Reply Martin Funday January 4, 2018 at 8:33 am

        Hi

        Ive sent a mail with a Unity package attached that should show our use-case pretty well. Let me know if it doesnt 🙂

        • Reply Martin Bustos January 4, 2018 at 7:53 pm

          I have it, I answer you by mail 😉

  • Reply su March 7, 2018 at 6:04 am

    developer. Thank you for making a good plugin.
    But when is VR mode applied? This does not apply to Ouclus.
    How long do you have to wait? I will be waiting for your email.
    Thank you again.

    su@4thevision.com

    • Reply Martin Bustos March 7, 2018 at 9:33 am

      Hi, thanks for your interest in our asset. We are currently updating all our assets with new features (if possible, support for VR).

      Please send an email to hello (at) ibuprogames (dot) com.

      Thanks.

  • Reply Matumit Sombunjaroen April 26, 2018 at 5:50 pm

    Just brought this today. It worked like a charm.

    I have a request here.
    https://www.youtube.com/watch?v=Rtw3hkc32P0 1:31

    If I am going to use your Scripts as base,
    Would it be possible to create something like this?

  • Reply Hsin-Chien May 9, 2018 at 2:10 pm

    is Vive VR supported now? Thanks!

    • Reply Martin Bustos May 9, 2018 at 3:07 pm

      Hi Hsin.Chien, we are currently updating all our assets to support VR (if possible) and add new features.

      Please send us an email to ‘hello (at) ibuprogames (dot) com’ if you need more information.

  • Reply Joe May 30, 2018 at 3:43 am

    Is it possible to transition to the same camera? My game is only one camera and I just need to transition between levels.

    • Reply Martin Bustos August 24, 2018 at 10:13 pm

      Hello Joe, our asset is designed to make transitions between two cameras. However, you can get that effect if you duplicate that camera.

  • Reply Jamie January 7, 2019 at 4:28 pm

    Hi,
    Is there a way to call a random transition?
    Thanks

    • Reply Martin Bustos July 23, 2019 at 11:12 pm

      Hi Jamie, you have an example in the script that I use for the demo (CameraTransitions / Demo / Scripts / DemoTransitions.cs), on line 393 (within the SwitchCamera function).

      Regards.

    Leave a Reply