Camera transitions

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

UNITY ASSETS STORE ($15)   Demo
 

How to start.

The first thing to do is create an empty GameObject and add the ‘CameraTransition‘ component. Make sure there is only one component of that type.

 

CameraTransition00

 

 

 

All classes are inside the namespace ‘CameraTransitions’, so you have first to include the namespace:

using CameraTransitions;

Then, get a reference to this component:

CameraTransition cameraTransition = GameObject.FindObjectOfType<CameraTransition>();
if (cameraTransition == null)
  Debug.LogWarning(@"CameraTransition not found.");

 

From now on ‘cameraTransition‘ will be a valid reference to a ‘CameraTransition‘ component in the scene. We will also use two valids references for cameras: ‘cameraA‘ and ‘cameraB‘. To make an transition from ‘cameraA‘ to ‘cameraB‘ we only have to do:

 

cameraTransition.DoTransition(CameraTransitionEffects.FadeToColor, cameraA, cameraB, 1.0f);

 

That would create a transition ‘Fade to color‘ from ‘cameraA‘ to ‘cameraB‘ of a second long. The parameters of ‘CameraTransition.DoTransition‘ function are:

 

cameraTransition.DoTransition(CameraTransitionEffects transition, Camera from, Camera to,
                              float time, params object[] parameters)

The variable ‘parameters‘ is optional and we will use to customize the effects. In each effect (see below) we will tell you what are these parameters and put an example. You can also check the source code that is well documented.

 

Another way simpler (and with less code) is using ‘CameraTransitionsAssistant‘. You can define a transition effect from the Editor (as many as you want) and activate them anytime. Just create a GameObject with the ‘CameraAssistantTransitions‘ component.

 

CameraTransitionsAssistantInspector

  1. Transition effect.
  2. Transition effect parameters (varies according to the effect).
  3. Transition time in seconds.
  4. Source camera.
  5. Target camera.
  6. Easing type. By default the progress is linear (‘Linear’ mode), but you can select a different mode here. I recommend you this website to find more information about the different equations of easing.
  7. Where you want to easing?
  8. A valid reference of ‘CameraTransition‘.
  9. In the editor (play mode) you can press this button to make the transition.
  10. This web with the latest documentation.

 

If, for example, ‘cameraTransitionAssistant‘ is a valid reference to the component, you only need to do this to activate the transition:

cameraTransitionAssistant.ExecuteTransition();

 

Check scene in ‘Demo/DemoAssistant‘ for more information about ‘CameraTransitionsAssistant‘.

 

Few considerations to keep in mind:

  • In the transition process, both cameras are active. This means that you will be rendering what both cameras see. Choose places where the scene is not too complex. See ‘Advanced settings’.
  • At the end of the transition, the source camera will turn off (his GameObject).
  • No AudioListener is modified.
  • No new scenes are loaded.
  • Not support virtual reality (we are working on it).

 

Advanced settings.

This section requires some programming skills. You can find some extra options in the ‘Advanced Settings‘ section of ‘CameraTransition‘.

 

cameratransitionsinspector

 

  1. Do you want to manually control the progress of the transition? Change it to ‘Manual‘ and you can modify using ‘cameraTransition.Progress‘. Note that when you start the transition (with ‘cameraTransition.DoTransition(…)‘) it will be 0 and the transition not end until it reaches 1.
  2. 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).
  3. The destination camera is updated during the entire transition (better quality) or only the first frame (faster).
  4. You can change the size of RenderTexture. Smaller sizes are faster, but the quality will be worse.
  5. The precision of the render texture’s depth buffer in bits.
  6. How to select the HDR mode.
  7. Inverts the Y axis of the RenderTexture.
  8. Resets all values.
  9. Online documentation.

 

Cross Zoom.

twitter2

 

Zoom and a radial blur. This effect is expensive for mobile platforms. The parameters to customize are:

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

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.CrossZoom, cameraA, cameraB, 1.0f,
                              new object[] { 0.4f, 40.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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Cube, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Doom, cameraA, cameraB, 1.0f,
                              new object[] { 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.

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.FadeToColor, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.FadeToGrayscale, cameraA, cameraB, 1.0f,
                              new object[] { 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.

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Flash, cameraA, cameraB, 1.0f,
                              new object[] { 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).

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Flip, cameraA, cameraB, 1.0f,
                              new object[] { CameraTransitionFlip.Modes.Horizontal });

 

 

Fold.

Fold

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

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

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Fold, cameraA, cameraB, 1.0f,
                              new object[] { CameraTransitionFold.Modes.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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Gate, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Glitch, cameraA, cameraB, 1.0f,
                              new object[] { 1.0f });

 

 

Linear blur.

LinearBlur

Transition with a linear blur effect. This effect is expensive for mobile platforms. The parameters to customize are:

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

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.LinearBlur, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Mosaic, cameraA, cameraB, 1.0f,
                              new object[] { 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 – 90].
  2. Radius (float, default 0.1): Page radius [0 – 1].
  3. Shadows (bool, default true): Page shadows [true – false].

 

This effect is expensive for mobile platforms.

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.PageCurl, cameraA, cameraB, 1.0f,
                              new object[] { 60.0f, 0.4f, true });

 

If you want to customize some effects, select ‘Page Curl Advanced‘. The parameters are:

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

 

 

Pixelate.

Pixelate

Retro pixelated effect. The parameters to customize are:

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

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Pixelate, cameraA, cameraB, 1.0f,
                              new object[] { 75.0f });

 

 

Radial.

Radial

Nice radial curtain effect. The parameters to customize are:

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

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Radial, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:


cameraTransition.DoTransition(CameraTransitionEffects.RandomGrid, cameraA, cameraB, 1.0f,
                              new object[] { 20, 5, 0.25f });

 

 

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?

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.SmoothCircle, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.SmoothLine, cameraA, cameraB, 1.0f,
                              new object[] { 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].

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Swap, cameraA, cameraB, 1.0f,
                              new object[] { 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.

 

Example:

cameraTransition.DoTransition(CameraTransitionEffects.Valentine, cameraA, cameraB, 1.0f,
                              new object[] { 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].

Example:

cameraTransition.DoTransition(CameraTransitionEffects.WarpWave, cameraA, cameraB, 1.0f,
                              new object[] { CameraTransitionWarpWave.Modes.Vertical, 1.0f });

 

 

Frequently Asked Questions.

  • CAN I USE THE FREE VERSION (PERSONAL EDITION) OF UNITY3D?
    Yes, since the version 5 of Unity, this package works both free and pro version.
  • WHAT VERSION OF UNITY SHOULD I NEED?
    You need the version 5 or higher.
  • DOES IT NEED ANY SPECIAL HARDWARE?
    Camera Transitions‘ needs a GPU that supports Shader Model 3.0 or higher. At desktop PCs, any card compatible with DirectX 9.0c are supported (ATI Radeon HD2000 or higher, Nvidia GeForce 8 (8xxx) Series or higher or Intel GM965 or higher). In generall, any device with a decent GPU after the 2009 should work.
  • WORKS WITH HDR? AND WITH DIRECTX 11? DEFERRED LIGHTING? LINEAR LIGHTING?
    Yes x 4.
  • INCLUDES SOURCE CODE?
    Yes, all source code is included (shaders and demo).

You Might Also Like

8 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.

    Leave a Reply