World Switching Transition
In this tutorial you will see how we were able to create materials that we used to simulate a transition effect between our two worlds similar to what is shown in the video above and picture below. In our game, the player swaps between two different points in time, so we aimed to create an effect that would give the player some great aesthetic feedback for that mechanic.
We are writing this technical guide to aim at a difficulty level that should be considered intermediate, so not every set will be fully in the process, but we will show you how to create the transition materials and how we decided to use them in our game.
Thanks to the entire Epic community for their support, because without such a talented and helpful community, learning how to master UDK would be much more difficult! Special thanks to Sarah Taylor and Danpaz3D in particular for sharing their knowledge on transition effects. Let’s get started!
Creating the Materials
In our game we have two very different worlds to showcase two different points in time, so we wanted to set up a cool transition effect that looked like our game world was changing in real time. Creating this material transition effect was just one of the ways were we able to accomplish this goal.
First, let’s start with making the material. You’ll need to make sure you have two textures that you want to switch between. You will also need a texture that you will want to use as your transition effect. We simply used a texture that is often used to make masks for materials, which is simply a clouds render effect that was made in Photoshop.
Make a new material and make sure that your blend mode is set to opaque and your lighting is set to phong, which should be by default. You will want to create three Texture Sample nodes and plug your textures into them. As a side note, you will want to make sure to properly comment your material nodes as it makes it much easier for others working with you to follow your work and understand it properly. I noticed that I actually labeled my starting and ending textures wrong in the picture below where they actually need to be reversed. After you have your textures applied, you will want to create a Constant node and then convert that into a Scalar Parameter by right clicking and choosing that option. This node works the magic with this material and is the most important node in the material; I will explain why later. Make sure to name the Scalar Parameter down in the properties section under Parameter Name. We named ours “Transition”, which we will be using later on to set up the material in game. All four nodes are now ready to plugged into an If node.
Plug your Scalar Parameter track, which should be set to “0” by default, to the slot labeled “A” on the If node. You will then plug the red channel of the texture you want to use as the transition effect into the slot labeled “B”. Finish the material by plugging RBG channel of the texture that you want to show first into the slot labeled “A<B” and your ending texture into the two slots labeled “A>B” and “A=B”. You will then plug your If node into the diffuse channel and save your material in both the material editor and in the content browser.
You are probably wondering what you just did, so I’ll explain. Our Scalar Parameter node is essentially controlling what texture is showing based on the value, so if the value is 0 then the starting texture will show and if the value is 1 then the ending texture will show. The values in between 0 and 1 decide how much of the transition texture will show in conjunction with our starting and ending textures. The If node simply does the math for us, so we can sit back and enjoy a lovely goblet of Mountain Dew.
That is all that goes into making the material. That was easy, right? Now how do we get the material to work in the game? That is rather easy as well. You have a few choices with one of the choices being much easier to implement than the others.
The way that we did it was by setting up a material track in Matinee. The track will simply change the value of the Scalar Parameter over time from 0 to 1. You can hook the Matinee track up to any kind of input such as Level Loaded or Key/Button Pressed, so that when the Matinee is triggered by something it will play the track and transition the material for you in real time.
First, you will want to create the Matinee track in Kismet by right clicking and choosing “New Matinee”. Then you will want to double click to open the Matinee editor and create a new empty group. We labeled our empty group “Transition” because of a naming convention we set up, which I will explain later. You will want to create a “New Float Material Param Track” in the empty group.
You will notice that down at the bottom are properties for the track, which are shown in the picture above. These properties must be set correctly or your material transition will not work. First, you will want to click the green plus icon to create a new Target Material. Make sure your material you made is highlighted in the content browser and click the green arrow icon to plug that into the Target Material field. Remember when I said that the Scalar Parameter node was the most important node in the material? The Param Name is the key to getting this material to work properly. You will enter the name of the Scalar Parameter we created earlier in this field, so make sure that they match one another or else your material transition will not work. The gigantic orange arrow in the picture below shows where you will enter the name of your Scalar Parameter node into the Matinee track.
Now that you have the track and the properties set up correctly, you will simply create two key frames that can stretch across however much time you want. We set ours to play throughout a duration of 1 second, so our materials will basically transition into one another across the time span of 1 second. Set the first value of the key frame to 0 and the second key frame value to 1 then close Matinee. You can now apply your material to a static mesh in the world and test it out in game. It’s beautiful isn’t it? There are so many things that you can do with this sort of effect, but I wanted to show you how we did it and give you the foundation to start building from to make something bigger and better! I hope this tutorial helped you in some way, shape, or form, and if you have questions then feel free to post them on our team website where you can contact us directly!