|
| 1 | +--- |
| 2 | +sidebar_position: 1 |
| 3 | +description: Learn with the Loading Scene Examples Sample. |
| 4 | +--- |
| 5 | + |
| 6 | +# Loading Scene Examples |
| 7 | + |
| 8 | +This sample showcases different loading scenes and how to use **Scene Transitions** with the package. |
| 9 | + |
| 10 | +## Installation |
| 11 | + |
| 12 | +Import the sample through the **Package Manager**. |
| 13 | + |
| 14 | +1. Open `Window/Package Manager`. |
| 15 | +2. Select `Advanced Scene Manager` from the `In Project` list. |
| 16 | +3. In the right panel, select the **Samples** tab. |
| 17 | +4. Click on the `Import` button on the `Loading Scene Examples` item. |
| 18 | + |
| 19 | +The sample assets will be installed to `Samples/Advanced Scene Manager/<version>/Loading Scene Examples`. |
| 20 | + |
| 21 | +## Scriptable Render Pipeline Compatibility |
| 22 | + |
| 23 | +When importing the sample into a project with an active **Scriptable Render Pipeline**, a dialog will appear asking if you want to automatically upgrade the sample materials. |
| 24 | +This will upgrade the sample materials for both **URP** or **HDRP**. |
| 25 | + |
| 26 | +## Adding scenes to Build Settings |
| 27 | + |
| 28 | +After importing the sample, a dialog will appear asking to automatically add the sample scenes to the **Build Settings**. |
| 29 | +This is required to be able to perform **Scene Transitions** with the sample scenes. |
| 30 | +If you ignore this prompt, you'll need to manually add the scenes to the **Build Settings** if you want to play the sample. |
| 31 | + |
| 32 | +You can easily remove the scenes added to the **Build Settings** via the menu item at `Tools/Advanced Scene Manager/Remove 'Loading Scene Examples' from Build Settings`. |
| 33 | + |
| 34 | +## Playing the Sample |
| 35 | + |
| 36 | +The sample contains **two** game scenes and **three** loading scenes: |
| 37 | + |
| 38 | +- **SceneA** |
| 39 | +- **SceneB** |
| 40 | +- **Loading_Fade** |
| 41 | +- **Loading_Animated** |
| 42 | +- **Loading_Custom** |
| 43 | + |
| 44 | +You can start by opening either **SceneA** or **SceneB** and entering playmode. |
| 45 | + |
| 46 | +Once into playmode, you'll notice **four** buttons on the top-left. |
| 47 | +Each one of these buttons will trigger a scene transition to the other game scene with a different loading scene: |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | +- **Fade Transition**: _fade in/out_ effect, progress bar and progress label feedbacks. |
| 52 | +- **Animated Transition**: animated in/out effect. |
| 53 | +- **Custom Transition**: custom image fill progress component and progress label feedbacks. |
| 54 | +- **Direct Transition**: no Loading Scene. |
| 55 | + |
| 56 | +Try out the transitions to see the effects in realtime. |
| 57 | + |
| 58 | +## Understanding the Loading Scenes |
| 59 | + |
| 60 | +All loading scenes have the `LoadingBehavior` component and control the loading progress via the `LoadingBehavior.Progress` events and methods. |
| 61 | + |
| 62 | +To perform **Scene Transitions** in the game scenes, the sample uses a simple component to trigger the transitions on button click: |
| 63 | + |
| 64 | +```cs |
| 65 | +public class SceneTransitionTrigger : MonoBehaviour |
| 66 | +{ |
| 67 | + [SerializeField] |
| 68 | + string _targetScene; |
| 69 | + |
| 70 | + public void TransitionWithLoading(string loadingScene) |
| 71 | + { |
| 72 | + AdvancedSceneManager.TransitionAsync(_targetScene, loadingScene); |
| 73 | + } |
| 74 | + |
| 75 | + public void Transition() |
| 76 | + { |
| 77 | + AdvancedSceneManager.TransitionAsync(_targetScene); |
| 78 | + } |
| 79 | +} |
| 80 | +``` |
| 81 | + |
| 82 | +### Fade Transition |
| 83 | + |
| 84 | +The `Loading_Fade` scene implements the [Creating Loading Screens](../getting-started/loading-screens.md) guide. |
| 85 | +It features a `LoadingFader` component and both `LoadingFeedbackText` and `LoadingFeedbackSlider` components to display progress. |
| 86 | + |
| 87 | +### Animated Transition |
| 88 | + |
| 89 | +The `Loading_Animated` scene implements a custom animation with an `Animator` component and a custom script. |
| 90 | +The script subscribes to the `LoadingProgress.LoadingCompleted` event of the `LoadingBehavior.Progress` and plays animations in the `Animator`. |
| 91 | + |
| 92 | +```cs |
| 93 | +public class AnimatedTrigger : MonoBehaviour |
| 94 | +{ |
| 95 | + static readonly int _isOpenHash = Animator.StringToHash("IsOpen"); |
| 96 | + |
| 97 | + [SerializeField] |
| 98 | + LoadingBehavior _loadingBehavior; |
| 99 | + |
| 100 | + LoadingProgress _loadingProgress; |
| 101 | + Animator _animator; |
| 102 | + |
| 103 | + void Awake() |
| 104 | + { |
| 105 | + _animator = GetComponent<Animator>(); |
| 106 | + |
| 107 | + _loadingProgress = _loadingBehavior.Progress; |
| 108 | + _loadingProgress.LoadingCompleted += PlayOutAnimation; |
| 109 | + |
| 110 | + PlayInAnimation(); |
| 111 | + } |
| 112 | + |
| 113 | + public void InTransitionTrigger() |
| 114 | + { |
| 115 | + _loadingProgress.StartTransition(); |
| 116 | + } |
| 117 | + |
| 118 | + public void OutTransitionTrigger() |
| 119 | + { |
| 120 | + _loadingProgress.EndTransition(); |
| 121 | + } |
| 122 | + |
| 123 | + void PlayInAnimation() |
| 124 | + { |
| 125 | + _animator.SetBool(_isOpenHash, false); |
| 126 | + } |
| 127 | + |
| 128 | + void PlayOutAnimation() |
| 129 | + { |
| 130 | + _animator.SetBool(_isOpenHash, true); |
| 131 | + } |
| 132 | +} |
| 133 | +``` |
| 134 | + |
| 135 | +Both `InTransitionTrigger` and `OutTransitionTrigger` methods are called through **Animation Events**. |
| 136 | + |
| 137 | +:::info |
| 138 | +The **"In"** animation is played after the loading scene has loaded, and before the target scenes started loading. |
| 139 | +The **"Out"** animation is played after the target scenes have been loaded, but before unloading the loading scene. |
| 140 | +::: |
| 141 | + |
| 142 | +### Custom Transition |
| 143 | + |
| 144 | +The `Loading_Custom` scene showcases how to implement your own progress feedback component. |
| 145 | + |
| 146 | +```cs |
| 147 | +public class LoadingFeedbackImageFill : MonoBehaviour |
| 148 | +{ |
| 149 | + [SerializeField] |
| 150 | + LoadingBehavior _loadingBehavior; |
| 151 | + |
| 152 | + Image _image; |
| 153 | + |
| 154 | + void Awake() |
| 155 | + { |
| 156 | + _image = GetComponent<Image>(); |
| 157 | + _image.fillAmount = 0; |
| 158 | + } |
| 159 | + |
| 160 | + void Start() |
| 161 | + { |
| 162 | + _loadingBehavior.Progress.Progressed += UpdateSlider; |
| 163 | + } |
| 164 | + |
| 165 | + void UpdateSlider(float progress) => _image.fillAmount = progress; |
| 166 | +} |
| 167 | +``` |
| 168 | + |
| 169 | +It subscribes to the `LoadingProgress.Progressed` event to be notified of progress changes, and uses the float value to update the image's fill amount. |
| 170 | + |
| 171 | +## Wrap-up |
| 172 | + |
| 173 | +With this sample, you were able to try out multiple ways of customizing the existing package components to perform **Scene Transitions** with different loading transitions and progress feedbacks. |
| 174 | +Use the sample scenes as a starting point to create your own loading experiences ✨. |
0 commit comments