Transition Between Locations on the Globe
In this tutorial, you will learn to smoothly fly between two locations on the Cesium for Unreal globe using Unreal Engine Blueprints.
A transition between Sydney and Melbourne, Australia.
You’ll learn how to:
- Work with cartographic coordinates in Unreal Engine
- Create viewpoints between your locations
- Create a Blueprint to smoothly transition between the locations
Blueprints is the visual scripting system inside of Unreal Engine based on the concept of a node-based interface. Although it helps to have some knowledge of coding, Blueprints make it easier for non-programmers to add logic to their application.
- Know how to set up a basic Cesium for Unreal application. Check out our Cesium for Unreal Quickstart guide for instructions on starting with the Cesium for Unreal plugin.
Step 1. Create an Unreal level
Start with the 01_CesiumWorld level in the Cesium for Unreal Samples.
Select the CesiumGeoreference actor in the World Outliner and in the Details panel, look for the Origin Longitude, Origin Latitude, and Origin Height parameters. Set them to the values of the source location. For example, to start in Sydney, Australia, we can type in the following coordinates: Origin Longitude = 151.206696, Origin Latitude = -33.871799, Origin Height = 3000.0.
Enable Keep World Origin Near Camera under the origin parameters, which will ensure we maintain the correct orientation throughout the flight.
Step 2. Add the FloatingPawn actor
When the camera is in flight between locations over the Cesium globe, the camera should follow a curved path parallel to the Earth’s surface, rather than a linear point-to-point trajectory. A FloatingPawn can be used to achieve this behavior.
Add the FloatingPawn into the scene. If you are having trouble finding it, follow the instructions here. To focus on the pawn, double-click its label in the World Outliner. The pawn should look something like this:
Since it has a camera attached to it, A preview of the scene through the camera in the bottom right corner of the editor. Adjust the initial position and rotation of the FloatingPawn using the translation and rotation gizmos in Unreal Engine.
In the Details panel, search for “possess”. Select the dropdown next to Auto Possess Player and select Player 0.
Now in Play mode, you will be able to control the FloatingPawn with the mouse and WASD keys.
A Player is the entity that you will control in Play mode. You can move around the scene and perform other tasks using the Player. You can also switch between different Players if there are multiple ones in the scene.
Step 3. Set up the transition in Blueprint
In this step, you are going to create a Blueprint function that allows us to press a button on our keyboard and fly between two locations on the globe.
Open the Level Blueprint by going to Blueprints -> Open Level Blueprint at the top panel of the Unreal Engine editor.
From the World Outliner, select the FloatingPawn actor. Drag-and-drop the FloatingPawn into the Event Graph in the Level Blueprint. Drag a connection from the FloatingPawn node and look for the Inaccurate Fly to Location Longitude Latitude Height function. This function is the core of the tutorial, which allows us to input a destination.
If you are interested in how the function works, you can hover the mouse over the function node to read the documentation. One of the parameters of the function is Can Interrupt By Moving, which is the last pin on the function node. If you would like to be able to move the pawn mid-flight with the standard WASD movement keys, you can tick the checkbox next to the parameter.
Blueprints currently do not support double precision. The function is called Inaccurate Fly to Location Longitude Latitude Height because it uses single precision instead of double precision in the inputs to compute the values in order to expose the function to Blueprint. There is also a function called FlyToLocationLongitudeLatitudeHeight in the
GlobeAwareDefaultPawn.h class you can use for double precision calculations in C++.
Right-click on an empty space in the Event Graph and add a Make Vector node. Enter the values for the longitude, latitude, and height of the destination into the X, Y, and Z variables respectively. In this tutorial, we will fly to Melbourne, Australia, with longitude = 144.9631, latitude = -37.8136, and height = 2000.
To trigger the transition, add a Keyboard Event and connect its output pin to the input pin of the Inaccurate Fly to Location Longitude Latitude Height node. The example below is using the F key.
Compile the newly added nodes with the Compile button at the top left corner of the editor.
To check whether you have set up everything correctly, head back to the main editor. Press Play at the top toolbar. The initial view should be the same view we see earlier through our Floating Pawn’s camera preview. Press the F key (or whichever key you chose to add) on the keyboard to see the flight in action.
The camera will transition between Sydney and Melbourne very quickly and in a relatively straight path. In the next step, you will set some variables to customize the speed and height of the FloatingPawn throughout the transition.
Step 4. Customize the transition
In this step, we will adjust some variables of the FloatingPawn actor to customize how the pawn transition to the destination. The first task is to add some Fly To Curves.
The Fly To Curves are UCurveFloat actors used in the Inaccurate Fly to Location Longitude Latitude Height function when computing the path that the pawn needs to take to get from the source to destination location.
In creating the Fly To Curves, we will reference to the following conditions:
- The pawn raises its altitude from the source location, zooms out, travels to the destination location, and zooms back in. This behavior is controlled by the Fly To Altitude Profile Curve. This curve must be kept in the 0 to 1 range on both axes.
- Depending on the vertical travel distance, the pawn needs to stay within a maximum altitude. For instance, if the pawn is jumping 12,000 km, then we set the maximum altitude at 3,000 km. For a 18 km jump, the maximum altitude is much smaller at 9.3 km. We achieve this behavior with the Fly To Maximum Altitude Curve.
- In order to vary speed over time, we use the Fly To Progress Curve. Here, x is the clock time and y is the location on the curve length.
Set up the fly to curves
Right-click anywhere in the Content Browser, select Miscellaneous —> Curve —> CurveFloat. Click Select and give it a name. Double-click on the newly created curve to navigate to the Curve Editor. You should see a flat line at y = 0:
Right-click on the curve and select Add Key to create new control points. Add three keys to the curve so that it looks like the following:
Select all three key points at the same time and from the top tool panel, select cubic interpolation and toggle weighted tangents for cubic interpolation modes:
Modify the shape of the curve by selecting the key points and moving their handles. You should end up with a curve going from -1 to 1 in the x-axis and 0 to 1 in the y-axis:
Set up the remaining curves, Fly to Maximum Altitude Curve and Fly to Progress Curve, following the procedure above. Here are the curve options and final result for the remaining curves:
Fly to Maximum Altitude Curve shape and curve options.
Fly to Progress Curve shape and curve options.
Once you are happy with the shape of the curves, assign them to the corresponding variable in the Details panel for the FloatingPawn actor we added earlier.
Navigate back to the main editor and press Play. Press the F key again to activate the flight. Notice how the pawn first quickly rises to a certain height, slowly fly to the destination, and quickly lower to the final position.
You can also change the speed of the transition by changing the Fly to Duration parameter under the Fly to Curve parameters in the Details panel. This value determines how long the transition takes and hence the higher the value, the slower the transition.
Step 5. Fly to geo-markers
It’s not always convenient to type in starting and ending WGS84 coordinates to specify a flight. In some cases, it is possible to avoid this by placing “geo-markers”. These markers can act as target locations that are directly placeable on the Cesium globe.
First, simply place a cube anywhere on the globe, this will be your target geo-marker. If wanted, right-click on the object and click Snap Object To View to align the target geo-marker exactly to the editor camera’s current location and orientation. By now you should be very comfortable with moving the editor camera around the world and placing objects. If you are trying this tutorial after the sublevels tutorial, make sure the cube is added to the Persistent Level.
In this example, the cube is set hovering above Boston.
Set the cube’s mobility to Movable.
Add a CesiumGeoreferenceComponent to the cube, this component will help provide and maintain global context for this cube. To read more about georeferencing in Cesium for Unreal, see here.
Now open up the Level Blueprint again. Add a new key event for “G” in the Event Graph.
As before, drag in the FloatingPawn. This time, drag off the FloatingPawn and search for the Inaccurate Fly to Location ECEF function. Connect the execution pin from the key event for “G” to the Inaccurate Fly To Location Ecef function.
Drag in the cube and the default CesiumGeoreference from the World Outliner into the Level Blueprint.
Drag off the CesiumGeoreference node and search for the Inaccurate Transform Ue to Ecef function. Drag off the cube and search for the GetActorLocation function. Connect the Unreal coordinates of the cube to the input of the Inaccurate Transform Ue to Ecef conversion function. Take the output of the conversion function and connect it to the Inaccurate Fly to Location ECEF.
Hit Play and press G to try it out. Adjust the ending orientation to your preference by changing the Yaw and Pitch properties in the Inaccurate Fly to Location ECEF function. To be able to cancel an in-progress flight by moving the pawn manually, check the Can Interrupt By Moving box.
The FloatingPawn flies from Denver to Boston.
Continue to the Build a Flight Tracker with Cesium for Unreal tutorial.