Hello! In this tutorial, you will learn how to use the new Multi-Scenes, Trigger Area event, and the Scene Transition action + imported animated characters with Game Controls.

Demo: https://app.spline.design/file/81899589-466c-4933-83dc-742888e20897
Girl with Hoddie 3d Model: https://jmp.sh/KLgqykhh

0:00 Intro
0:50 Making multiple scenes
2:18 Trigger Areas
3:48 Editing scenes
4:44 The grid view
5:24 Making a scene transition
8:27 Complex scenes
10:24 Animated characters or objects
12:46 How to animate your characters
14:51 Importing new animations
15:18 Triggering animations from events
16:15 Creating design alternatives

Hello everyone, this is Alejandro and in this tutorial we will see how we can use a new multi-scene feature to create multiple scenes within the same file.

This is a very exciting feature that enables you to create multiverse type of experiences or experiences with multiple levels, but it can also be used to organize your scenes or to prototype ideas or brainstorm about different variations of your scenes.

Additionally, we will see how we can use the new animation import feature to import models with animations that we can use in combination with the game controls or just by itself by using the new animation action and build something like this experience that you can see here in which a character is moving or running or walking and so on.

So to get started I want to use 1 of the library scenes that you can access from the library section on Spline, so I'm just going to select this 1 here that is called Kids Playground Physics.

Alright, so if you go here now in the left side of your interface, there is this new section.

And if you click on the little label here, you can expand the section and see which is your current scene, which is also called a scene.

And if you press on the plus icon that's where you can create a new scene.

You can see immediately it just creates a new scene and I can rotate here, I can also just go and create objects, I can have a different type of camera as well.

And then I can go back to the other scene and you see that it's never changed because every scene is independent from each other.

Also, we organized a little bit information on the right sidebar.

So for example, you can see here, what is the play camera?

The play camera will be the camera that is being used when you go to the play mode here.

And then you see the lighting simulation, like physics and post-processing effects, and the fog and ambient shadows.

And everything that is a global setting is not something that is going to affect only to this scene, but it's also something that's going to affect all of the scenes.

So now it's easier to know what is going to be affecting a particular scene versus what is going to be affecting all of the scenes.

All right, so if you go to the Play Mode right now, you see that this is experience in which you can play, and there is even sound.

What I want is that when I touch this object here, I want to transition to the newest scene that I just created in here.

So the way I can do that is I can create a new event for this object.

And I want to introduce also to a new feature that is called the trigger area.

And the way the trigger area works is that when another object collides or intersects with this area, it's going to trigger an action.

So I want to trigger specifically the new action that is called Scene Transition.

And it already selects the scene too, because I am already in the first scene so and then I can also select a transition by default there is no transition but I just want to fade in and the duration is going to be just 1 second.

I also want to adjust a little bit the size to be something like this.

Alright so now if I go to the play mode and then I move my sphere and I touch there, you can see I chose transition to this scene and I can rotate around in this new scene.

So that's how the scene transitions work, It's a new action that you can trigger from any event.

For example, if I switch here to choose a mouse down event and I go to play mode, and then I just press on this object, it's also going to transition to the new scene.

So you can trigger a scene transition from any event, essentially.

All right, so now that we know the basics of how the multi-scenes work, I just want to show you a couple of other new things that you can do.

If you right click on a scene in the App Liner, you can actually see a couple of options for duplicating, renaming, or deleting the scene.

If you right-click in the scene that does not contain the little house icon, it will show you an option to set this as the main scene.

This is because this little icon here means that this is going to be the main scene and the main scene is the 1 that is going to be active by default on your exports on your public URLs.

You will not see the main scene play when you're going to the play mode necessarily because if you go for example to the scene 2 and then you go to the play mode you're just going to see the scene 2.

But once you export the order of appearance will be that the main scene will take priority over the other scenes.

And the other thing that you can do is to go to the grid mode by pressing on the grid icon here and then you will see the current scenes that you have, you can also create a new scene from here for example now I have the scene tree and then if I double click I will have a new scene in here and then again I can create just new objects and do whatever I want in this other scene.

Maybe I want like a floor or something here as well.

And then I can go back to the grid mode and keep creating.

You can also duplicate the scenes and rename from here as well and you can go to the play mode by pressing on the play icon like this.

Now if you don't want to build your newest scene from scratch you can duplicate it right?

So right click on the scene, duplicate, and then now you have a new scene that is an exact copy of the previous scene.

And you don't see any change right now because everything is the same, but if I rotate my camera to this point of view and then I switch back to the first scene, you will see that it's going to be changing, right?

So perhaps on this newest scene I don't want like any of this section here so I'm just going to select all of this and delete that and maybe I want to delete all of that as well and all of that and maybe for this 1 here instead of using these colors in here maybe I just want to use other colors maybe instead of yellow I want to choose another color here blue perhaps this could be white now from this scene I want to again just choose a trigger area like we have before and just want to make sure that we have the right size in here and now instead of going to the scene number 2 I want to go to the scene number 4 which is the latest 1 and then from the scene number 4 I want to make sure that this object is going to use another trigger area but then you can see that I'm basically here repeating myself right and Kind of like doing the same work for the same object 1 way of optimizing your workflow here is that instead of duplicating your object, which is not very efficient You can use components.

So what I'm going to do is I'm going to convert this object here, which is currently inside this group maybe I can just put it upside just to be simpler I want to rename it portal and I also want to just convert it into a component by doing this so now this is a component and this component contains this event and it already has all of the values that I want.

So I'm just going to copy this by pressing command C, and then I'm going to go here.

I'm going to delete the current 1 that I have, and then I'm going to paste this instance of the component that I have before and just to be more clear about the difference I'm just going to change the color of these by choosing another asset blue as well.

I want the event in here and you can see here it now is using the trigger area and it has all of the values that I had before but I want to target a different scene and I just want to target the first scene so when I get in here I'm going to switch back to the first scene let's rename that 1 first by the way And this 1 is going to be 2, perhaps it's going to be 3, this is going to be 4.

So now if I go to the play mode in the first scene, you will see that if I collide with this new object, I transition to this newest scene, and everything starts from scratch, and then if I go back here then I go to the first scene.

So I can go in that loop forever and ever if I want to.

All right so now that you know the basics of how the multi-scene system works and how you can create scene transitions, I want to show you this more elaborate example of how you can use the multi-scene system to build something like a game experience in which each scene contains a new level.

So if I go to the play mode here and I press the letters WASD I can move my character, I can rotate around and then I can press escape to jump and I can continue moving my character like this I can also hold shift and then I can run but then I can fall as well so you can see that I can run if I press or hold shift and then do everything else yeah so in this scene I have a portal and this portal brings me to a level selector.

So similar to what we did before in the previous file, here I'm using the concept of portals as well to transition between the scenes.

And so if I enter into this other portal in here, then I'm going to transition to this other scene.

And I also have a portal here to just go back.

You can see that I can continue here and hold and jump.

So if I close here and I go back and I see here my scenes in the grid, you will see that my second scene is in a different color.

My third scene is in a different color as well.

So multi-scenes, when you're building something like a little game, this way of representing your scenes is very helpful if you want to maintain a coherent color style, for example.

So it's easier to see which level you are and how they look and how all they relate to each other from a visual point of view.

1 new feature that we are also introducing recently is the idea that you can have animated characters.

So if you click on this little girl here and you go to the inner object which is this 1, you will see a new panel here which is called animation and you can play the animations and see how they change.

So this is jumping, this is running, this is walking.

You can import 1 of your files, either an FBX file or a GLTF or GLB file containing animations.

And now Spline is going to show the animations for that file.

You can also import multiple animations after you import your fills file and Spline is going to just recognize the new animations and it's going to import that into your current object.

So the way this works is that in the game controls for this object, which is also a component just like we will be with the sphere before, the game control has behaviors, right?

And if you want to learn more about game controls, you can see our previous tutorial about game controls.

So essentially, the game controls has some predefined behaviors for idle, moving, jumping, or running.

And running is a new 1 that we're adding.

So what we do is that because now we have a new action that is called animation you can create a new animation action and you can target the animation of the object right in this case the idle for the idle for moving we're using walking we're also creating a sound for the walking steps using 1 of the library sounds on spline and then for jumping is the same and then running right so actually in jumping we're also doing something which is that we're only using a segment of the animation because we don't need the full animation, only a segment only, so it looks better.

And then you can see here in the desktop controls and now we have a couple of more items, 1 is for shift and control so you can target running as a modifier for example.

So again if I go to a play mode I can jump, I can move, I can run by holding shift, and then I can rotate my camera.

If you're wondering how you can add animations to your 3D models, it can be actually very simple if you're using a tool like Midsamo.

Midsamo is an app from Adobe that is free to use and enables you to use your characters by uploading them here by pressing this button, then you can just drop and drop your 3D model and it's going to take some time processing the character and once it's ready it will open this thing that is called the auto rigger and then you press on next and then here you just go easily through the setup which is just selecting the chin, the wrist, the elbows, knee and groin.

So once the setup is ready, you can press on Nets.

And then it's going to take, again, a little while on adding this outer rigging or this bone structure to your model.

So, yep, you can see that already it's adding some default preview animation.

So I'm just going to press Next, and then I going to press Next again.

So now I can just pick any of the animations in here and I can add those animations into my model.

So I'm going to just look for run and I have a few ones in here.

So maybe I can press maybe this 1 it's called fast run and then I want to make sure I press in place because I want the object to maintain its position so once I'm ready with the animation that I like I can just press on download and then I can download my object as an FBX binary file And then you can import that back into spline and you will get something like what we see here, right?

With the running animation and then you can use that with your game controls to create an experience like what we see here.

When you import your animated models into Spline, you will see that the animation will appear in the animation panel.

You can also add more animations to your object by clicking on the plus icon and selecting the other animation, for example maybe I can select here running so now I have in this object the running and walking animation and if you click on them it will be showing you a preview of the animation.

You can also see that there is by default an start event and this start event is using a new action that is called the animation action and the animation action already automatically selects the walking animation because it was the first 1.

So now if I go to the play mode you will see that I have the walking animation.

I can also create a new event and trigger different animations.

So for example I can create a new event in here, maybe this will be a mouse down.

And then I'm going to click on the animation action.

So in this case I want the animation to be running so what is going to happen is that now when I click on this object it's going to switch to the running animation so let's see if that works.

Go to the play mode, now click on the object and now it's running.

So you can change your animation using different events to trigger the switch between an animation to another animation.

You can also use multi-scenes to create variations of your scene.

So in this scene I want to see for example how this scene looks with a different lighting and with a different material.

Perhaps maybe something more darker instead of this minimalistic white style.

So let's see for example I want to duplicate this scene and in this newest scene I want to start by changing the background color, perhaps it will be a lot more darker, something like this.

And then I want to change the materials for this object.

Maybe the background could be blue as well.

You can see that easily now I have a completely new design.

So now if I switch to my main scene I can see the difference between these 2 scenes.

And you can keep adding variations and keep trying ideas until you reach your main destination with your design.

So for example on this file we are using different scenes to create variations of the same design with different wording and different colors and style.

So this is a good way to brainstorm for your designs and think about how your design can look different without affecting the main idea or just iterating over the initial idea.

Alright, I hope you liked this tutorial and you can start creating your multi-scene files now on Spline to create your multiverses or game-like experiences with levels or maybe just to organize your scene and brainstorm ideas with your team Alright, see you in the next 1.


Speaker 0: Hello everyone, this is Alejandro and in this tutorial we will see how we can use a new multi-scene feature to create multiple scenes within the same file. This is a very exciting feature that enables you to create multiverse type of experiences or experiences with multiple levels, but it can also be used to organize your scenes or to prototype ideas or brainstorm about different variations of your scenes. Additionally, we will see how we can use the new animation import feature to import models with animations that we can use in combination with the game controls or just by itself by using the new animation action and build something like this experience that you can see here in which a character is moving or running or walking and so on. Alright, let's begin. So to get started I want to use 1 of the library scenes that you can access from the library section on Spline, so I'm just going to select this 1 here that is called Kids Playground Physics.

Alright, so if you go here now in the left side of your interface, there is this new section. And if you click on the little label here, you can expand the section and see which is your current scene, which is also called a scene. And if you press on the plus icon that's where you can create a new scene. You can see immediately it just creates a new scene and I can rotate here, I can also just go and create objects, I can have a different type of camera as well. And then I can go back to the other scene and you see that it's never changed because every scene is independent from each other.

Also, we organized a little bit information on the right sidebar. So for example, you can see here, what is the play camera? The play camera will be the camera that is being used when you go to the play mode here. And then you see the lighting simulation, like physics and post-processing effects, and the fog and ambient shadows. And everything that is a global setting is not something that is going to affect only to this scene, but it's also something that's going to affect all of the scenes.

So now it's easier to know what is going to be affecting a particular scene versus what is going to be affecting all of the scenes. All right, so if you go to the Play Mode right now, you see that this is experience in which you can play, and there is even sound. What I want is that when I touch this object here, I want to transition to the newest scene that I just created in here. So the way I can do that is I can create a new event for this object. And I want to introduce also to a new feature that is called the trigger area.

And the way the trigger area works is that when another object collides or intersects with this area, it's going to trigger an action. So I want to trigger specifically the new action that is called Scene Transition. And it already selects the scene too, because I am already in the first scene so and then I can also select a transition by default there is no transition but I just want to fade in and the duration is going to be just 1 second. I also want to adjust a little bit the size to be something like this. Alright so now if I go to the play mode and then I move my sphere and I touch there, you can see I chose transition to this scene and I can rotate around in this new scene.

So that's how the scene transitions work, It's a new action that you can trigger from any event. For example, if I switch here to choose a mouse down event and I go to play mode, and then I just press on this object, it's also going to transition to the new scene. So you can trigger a scene transition from any event, essentially. All right, so now that we know the basics of how the multi-scenes work, I just want to show you a couple of other new things that you can do. If you right click on a scene in the App Liner, you can actually see a couple of options for duplicating, renaming, or deleting the scene.

If you right-click in the scene that does not contain the little house icon, it will show you an option to set this as the main scene. This is because this little icon here means that this is going to be the main scene and the main scene is the 1 that is going to be active by default on your exports on your public URLs. You will not see the main scene play when you're going to the play mode necessarily because if you go for example to the scene 2 and then you go to the play mode you're just going to see the scene 2. But once you export the order of appearance will be that the main scene will take priority over the other scenes. And the other thing that you can do is to go to the grid mode by pressing on the grid icon here and then you will see the current scenes that you have, you can also create a new scene from here for example now I have the scene tree and then if I double click I will have a new scene in here and then again I can create just new objects and do whatever I want in this other scene.

Maybe I want like a floor or something here as well. And then I can go back to the grid mode and keep creating. You can also duplicate the scenes and rename from here as well and you can go to the play mode by pressing on the play icon like this. Now if you don't want to build your newest scene from scratch you can duplicate it right? So right click on the scene, duplicate, and then now you have a new scene that is an exact copy of the previous scene.

And you don't see any change right now because everything is the same, but if I rotate my camera to this point of view and then I switch back to the first scene, you will see that it's going to be changing, right? So perhaps on this newest scene I don't want like any of this section here so I'm just going to select all of this and delete that and maybe I want to delete all of that as well and all of that and maybe for this 1 here instead of using these colors in here maybe I just want to use other colors maybe instead of yellow I want to choose another color here blue perhaps this could be white now from this scene I want to again just choose a trigger area like we have before and just want to make sure that we have the right size in here and now instead of going to the scene number 2 I want to go to the scene number 4 which is the latest 1 and then from the scene number 4 I want to make sure that this object is going to use another trigger area but then you can see that I'm basically here repeating myself right and Kind of like doing the same work for the same object 1 way of optimizing your workflow here is that instead of duplicating your object, which is not very efficient You can use components.

So what I'm going to do is I'm going to convert this object here, which is currently inside this group maybe I can just put it upside just to be simpler I want to rename it portal and I also want to just convert it into a component by doing this so now this is a component and this component contains this event and it already has all of the values that I want. So I'm just going to copy this by pressing command C, and then I'm going to go here. I'm going to delete the current 1 that I have, and then I'm going to paste this instance of the component that I have before and just to be more clear about the difference I'm just going to change the color of these by choosing another asset blue as well. I want the event in here and you can see here it now is using the trigger area and it has all of the values that I had before but I want to target a different scene and I just want to target the first scene so when I get in here I'm going to switch back to the first scene let's rename that 1 first by the way And this 1 is going to be 2, perhaps it's going to be 3, this is going to be 4.

So now if I go to the play mode in the first scene, you will see that if I collide with this new object, I transition to this newest scene, and everything starts from scratch, and then if I go back here then I go to the first scene. So I can go in that loop forever and ever if I want to. All right so now that you know the basics of how the multi-scene system works and how you can create scene transitions, I want to show you this more elaborate example of how you can use the multi-scene system to build something like a game experience in which each scene contains a new level. So if I go to the play mode here and I press the letters WASD I can move my character, I can rotate around and then I can press escape to jump and I can continue moving my character like this I can also hold shift and then I can run but then I can fall as well so you can see that I can run if I press or hold shift and then do everything else yeah so in this scene I have a portal and this portal brings me to a level selector.

So similar to what we did before in the previous file, here I'm using the concept of portals as well to transition between the scenes. And so if I enter into this other portal in here, then I'm going to transition to this other scene. And I also have a portal here to just go back. You can see that I can continue here and hold and jump. Ah!

Ah! So if I close here and I go back and I see here my scenes in the grid, you will see that my second scene is in a different color. My third scene is in a different color as well. So multi-scenes, when you're building something like a little game, this way of representing your scenes is very helpful if you want to maintain a coherent color style, for example. So it's easier to see which level you are and how they look and how all they relate to each other from a visual point of view.

1 new feature that we are also introducing recently is the idea that you can have animated characters. So if you click on this little girl here and you go to the inner object which is this 1, you will see a new panel here which is called animation and you can play the animations and see how they change. So this is jumping, this is running, this is walking. You can import 1 of your files, either an FBX file or a GLTF or GLB file containing animations. And now Spline is going to show the animations for that file.

You can also import multiple animations after you import your fills file and Spline is going to just recognize the new animations and it's going to import that into your current object. So the way this works is that in the game controls for this object, which is also a component just like we will be with the sphere before, the game control has behaviors, right? And if you want to learn more about game controls, you can see our previous tutorial about game controls. So essentially, the game controls has some predefined behaviors for idle, moving, jumping, or running. And running is a new 1 that we're adding.

So what we do is that because now we have a new action that is called animation you can create a new animation action and you can target the animation of the object right in this case the idle for the idle for moving we're using walking we're also creating a sound for the walking steps using 1 of the library sounds on spline and then for jumping is the same and then running right so actually in jumping we're also doing something which is that we're only using a segment of the animation because we don't need the full animation, only a segment only, so it looks better. And then you can see here in the desktop controls and now we have a couple of more items, 1 is for shift and control so you can target running as a modifier for example. So again if I go to a play mode I can jump, I can move, I can run by holding shift, and then I can rotate my camera. If you're wondering how you can add animations to your 3D models, it can be actually very simple if you're using a tool like Midsamo. Midsamo is an app from Adobe that is free to use and enables you to use your characters by uploading them here by pressing this button, then you can just drop and drop your 3D model and it's going to take some time processing the character and once it's ready it will open this thing that is called the auto rigger and then you press on next and then here you just go easily through the setup which is just selecting the chin, the wrist, the elbows, knee and groin.

So once the setup is ready, you can press on Nets. And then it's going to take, again, a little while on adding this outer rigging or this bone structure to your model. OK, looks like it's almost ready. So, yep, you can see that already it's adding some default preview animation. So I'm just going to press Next, and then I going to press Next again.

And it's now adding the model in here. So now I can just pick any of the animations in here and I can add those animations into my model. So I'm going to just look for run and I have a few ones in here. So maybe I can press maybe this 1 it's called fast run and then I want to make sure I press in place because I want the object to maintain its position so once I'm ready with the animation that I like I can just press on download and then I can download my object as an FBX binary file And then you can import that back into spline and you will get something like what we see here, right? With the running animation and then you can use that with your game controls to create an experience like what we see here.

When you import your animated models into Spline, you will see that the animation will appear in the animation panel. You can also add more animations to your object by clicking on the plus icon and selecting the other animation, for example maybe I can select here running so now I have in this object the running and walking animation and if you click on them it will be showing you a preview of the animation. You can also see that there is by default an start event and this start event is using a new action that is called the animation action and the animation action already automatically selects the walking animation because it was the first 1. So now if I go to the play mode you will see that I have the walking animation. I can also create a new event and trigger different animations.

So for example I can create a new event in here, maybe this will be a mouse down. And then I'm going to click on the animation action. So in this case I want the animation to be running so what is going to happen is that now when I click on this object it's going to switch to the running animation so let's see if that works. Go to the play mode, now click on the object and now it's running. So you can change your animation using different events to trigger the switch between an animation to another animation.

You can also use multi-scenes to create variations of your scene. So in this scene I want to see for example how this scene looks with a different lighting and with a different material. Perhaps maybe something more darker instead of this minimalistic white style. So let's see for example I want to duplicate this scene and in this newest scene I want to start by changing the background color, perhaps it will be a lot more darker, something like this. And then I want to change the materials for this object.

For this object. Maybe the background could be blue as well. Alright, that's not that bad. You can see that easily now I have a completely new design. So now if I switch to my main scene I can see the difference between these 2 scenes.

And you can keep adding variations and keep trying ideas until you reach your main destination with your design. So for example on this file we are using different scenes to create variations of the same design with different wording and different colors and style. So this is a good way to brainstorm for your designs and think about how your design can look different without affecting the main idea or just iterating over the initial idea. Alright, I hope you liked this tutorial and you can start creating your multi-scene files now on Spline to create your multiverses or game-like experiences with levels or maybe just to organize your scene and brainstorm ideas with your team Alright, see you in the next 1. Bye bye!

See all Spline transcripts on Youtube

How to create 3d multi-scenes and import animations with Spline