Studio
Studio Mode is a tool for creating and playing back custom camera animations on maps. Create and share fun tours or artful presentations of your favourite levels.
If you already have a good handle on basic operations and just want a rundown of the interface or answers to common questions, jump down to the Quick Reference or Advanced Use Cases section. Otherwise, feel free to start with the tutorial below and we'll step through how to rough out, refine, and share your animations.
Studio Mode can be found under the clapboard icon in the sidebar.
To start creating an animation, move the camera to the desired starting position and press Enter. This will place the animation's first keyframe and reveal the editing UI.
Continue moving the camera, and press Enter at each desired position and orientation. A keyframe will be placed on the timeline each time, placed at the position of the playhead. The playhead will automatically advance on the timeline by 3 seconds after the keyframe is added, expanding the timeline as necessary if the end is reached. As keyframes are placed, a preview line shows the current path taken by the animation.
The preview line has four components - the main line, in magenta, shows the camera's position over time. Along the path, blue and green line segments are used to indicate the camera's perspective.
The blue segment points in the direction the camera is facing, and the green line segment indicates the current "up" direction - it can be used to determine if the camera is rolling/spinning about the Z-axis at a given point in time.
And lastly, cyan markers indicate the location of keyframes within the animation. These markers will turn red when the corresponding keyframe is selected.
To preview the animation in motion, move the playhead to the beginning of the timeline and click the play button.
If you would prefer to always show a preview of the current animation based on the playhead's current position, enable the Live Preview option under the gear (⚙) tab in the left-hand dock:
Keep in mind that with this option enabled, moving the playhead or making any change to the animation (including Undo/Redo operations) will result in the camera being moved to display the new preview at the playhead's current position.
To adjust the timing and speed of the animation or re-arrange keyframes, click and drag keyframes along the timeline to place them at the desired times:
When a keyframe is selected, the Keyframe Settings in the right-hand dock will be displayed. In this panel, the raw values for the keyframe can be modified, as well as the method of interpolation used when animating to and from the keyframe.
| Values | Interpolation |
|---|---|
 |
 |
All numeric inputs can be modified by clicking and dragging on them, or by manually entering numbers. For a detailed explanation of all of the inputs in this panel, see the UI Guide below.
Multiple keyframes can be selected by holding Ctrl and clicking on each desired keyframe, or by clicking and dragging to create a selection box. When multiple keyframes are selected, it is not possible to edit individual values, but the Interpolation settings for all selected keyframes can be modified simultaneously using the Inteprolation tab, and keyframes can be moved as a group to keep their timing consistent.
Additional keyframes can be inserted at any point on the timeline. The playhead will not automatically advance after placing a keyframe if the new keyframe is placed before the current end of the animation.
To make an animation that loops endlessly, click the blue Loop button in the upper-right of the timeline. This will add a special blue keyframe 5 seconds after the current end of the animation.
This keyframe corresponds to the starting position; editing its values will also modify the values of the starting position. The interpolation speed and method can be modified just as with any other keyframe, with the exception that keyframes cannot be moved or placed after the End Loop keyframe (for obvious reasons!).
To enable keyframe snapping, click the magnet button next to the loop button. When this setting is enabled, the playhead will snap to nearby keyframes as it is moved along the timeline. Likewise, keyframes will snap to the playhead when they are moved nearby. This setting is useful for precise positioning of keyframes at specific time values, or when aligning keyframes on different tracks.
Snapping functionality can be enabled temporarily by holding Shift while moving the playhead or keyframes.
To re-place a keyframe, select it by placing the playhead at its position (Snapping is a useful tool for this), move the camera to the newly-desired position, and press Enter. Its values will be replaced with the current camera values.
When you are satisfied with your animation, all that's left is to share it with others! Operations for managing, saving, loading, and presenting animations can be found in the folder (📁) tab in the left-hand dock:
The Export button will convert your animation to JSON, and prompt you to save it as a local text file. By sharing this file with others, they can load the animation using the Import button, and play it back natively in their browser. The Export/Import function is also useful for backing up animations or working on multiple animations at once.
Another option is to use screen-recording software such as OBS Studio to create a rendered video of the animation. Set up OBS to capture the browser window (I recommend making your browser window full-screen, usually with F11), start recording, and click the clapboard button at the bottom of the folder tab. A 2-second countdown animation will play (useful for moving your mouse cursor off-screen to ensure it doesn't end up in the capture), and your animation will play back with the UI completely hidden. After the animation is complete, the UI will un-hide itself. For looping animations, the animation will play until Escape is pressed.
The interpolation of bank rotation values is currently not quite as intuitive as with other values. Although the camera can be rotated about the Z-axis with the U/O keys, when capturing a keyframe, it often isn't possible to make a clear interpretation of the rotation that was made by the user. For example, starting from a bank rotation of 0, and holding down the U key until the camera has rotated 340 degrees clockwise will register as a 20-degree counter-clockwise rotation, since this is the "shortest path" to achieve the same outcome.
Thus, in order to guarantee the desired rotation degree and direction, each bank rotation keyframe value should differ from the previous value by no more than 179 degrees. Alternatively, you can manually set the desired rotation by selecting a keyframe and changing the bank rotation value.
In many cases, it can be much easier to achieve a desired effect by interpolating on certain camera values independently, while keeping others constant. This can be achieved by changing the Timeline Mode. Under the gear (⚙) tab in the left-hand dock, a drop-down menu allows you to choose from three options:
Consolidated: All camera values are kept on a single track.
Position/LookAt/Bank: The camera's position, its orientation, and its bank rotation are each on separate tracks.
Full: The individual X/Y/Z values for position, the individual X/Y/Z values for orientation, and the bank rotation of the camera are all on separate tracks.
When an expanded timeline mode is selected, it is also possible to disable/lock individual tracks using the checkboxes next to the track names on the timeline.
When new keyframes are placed, any locked tracks will be excluded.
The ability to lock certain values or changes along certain axes makes it much easier to create certain animation techniques, such as orbits, where we keep the camera focused on a single point as it moves around.
As an example, let's create an orbit around this iconic video game landmark:
We currently have a LookAt keyframe pointing at the mountain.
We'll manually modify the values of the keyframe to place it in the centre of the mountain, checking the position from multiple perspectives:
(Big surprise, Spiral Mountain is located at [0,0,0]!)
Now, we lock the LookAt track to keep the current LookAt position constant, and place position keyframes around the mountain:
And last, we unlock the LookAt track and place another keyframe above the starting point, so that the perspective moves up along with the position:
And... voila!
We can create a smoother orbit by adding more position keyframes, and the Full timeline mode allows us to interpolate the Position Y and LookAt Y together, to create one consistent shift in pitch rotation of the camera as we move up the mountain. Feel free to try it out for yourself!
The editor will not allow switching to a timeline mode that results in a loss of data. In order to switch to a more consolidated mode (e.g. from Full to Pos/LookAt/Bank, or Pos/LookAt/Bank to Consolidated), all of the following must be true:
- All tracks that would be flattened by the operation have the same number of keyframes.
- All keyframes on tracks to be flattened must be vertically-aligned; that is, every keyframe on a track to be flattened must have a corresponding keyframe on the other tracks it will be merged with, placed at the exact same time on the timeline.
- For example, when changing from Full to Pos/LookAt/Bank, a keyframe on the Position X track must have corresponding keyframes on the Position Y and Position Z tracks, at the exact same point on the timeline, since those three tracks are merged in the desired mode.
- All aligned keyframes to be flattened must use the same interpolation In/Out methods and have the exact same Ease In/Ease Out Amounts.
If consolidating the timeline is desired, the Snapping option is exceedingly useful for this, as some keyframes may visually appear to be aligned but are in actuality, off by a pixel or two. Use the J/K keyframe-stepping hotkeys to verify that each set of keyframes is vertically-aligned, and drag any misaligned keyframes in a group onto the playhead.
Once all of the above conditions are met, it should be possible to consolidate the timeline.
| Hotkey | Function |
|---|---|
Enter |
Place keyframe (Unless a numeric input is focused) |
Ctrl+s
|
Save |
Ctrl+z
|
Undo |
Ctrl+Shift+z
|
Redo |
j/k
|
Previous/Next Keyframe (Unless the main canvas is focused) |
,/.
|
Frame-Step backward/forward |
Space |
Play/Pause Animation (Unless the main canvas is focused) |
Escape |
Cancel animation playback |
Ctrl+Scroll wheel
|
Zoom in/out on timeline |
Ctrl |
(When dragging value inputs) Reduce rate of change to 1/10th. For making small value adjustments. |
Shift |
(When dragging value inputs) Increase rate of change to 10x. For making large value adjustments. |
Shift |
(When moving the playhead or keyframes) Enable snapping. (See Snapping, above.) |
| UI | Description |
|---|---|
|
|
Undo/Redo - Undoes/Redoes the last action. Save - Saves the animation for the current map to the browser's local storage. New - Clears the current animation and resets Studio to its default state. Load - If a saved animation for the current map exists, loads it from the browser's local storage. This action overwrites the current animation, but can be undone with the Undo button or Ctrl+z. Import - Loads an animation from a JSON file. Export - Exports the current animation to a JSON file. Help - Opens this page. Clapboard - Recording mode. If your browser supports WebCodecs, then it will play the animation immediately from the beginning, and upon completion, download a full recording of the animation. If not, then a timer will appear, and then play from the beginning, hiding all UI elements so that it can be captured with an external recording tool. |
 |
Timeline Mode - Changes the displayed keyframe tracks to allow for more granular control over camera position values. - Consolidated - All values on one track. - Position/LookAt/Bank - One track each for position, orientation, and bank rotation. - Full - Separate tracks for X/Y/Z position, X/Y/Z point of camera orientation, and a separate track for bank rotation. Show Animation Preview Line - Shows/Hides the animation preview line. Live Preview - When checked, moving the playhead or making a modification to the animation will update the current view to show a preview of the animation based on the playhead's current position. Auto-Save - Saves the current animation to the local browser storage every time the animation is modified. |
|
Each value shown is a value held by the selected keyframe(s) and can be modified manually. If the Lock Perspective button is selected, changes to an X/Y/Z position value will automatically update the corresponding X/Y/Z LookAt value by the same amount. This effectively keeps the orientation of the camera the same when modifying the position specified by a keyframe. |
|
This tab is used to modify the interpolation settings for the selected keyframe(s). Ease - Uses the default easing function, producing a smooth motion curve to and through the keyframe. Linear - Interpolates to or from the keyframe in linear time. Tends to look stiff but is desired in certain circumstances where easing and acceleration between keyframes is not desirable. Hold - Holds on a keyframe's value until the next keyframe is reached. Useful for jump-cuts. Ease In/Out Amount - When Ease is used as the interpolation method, this slider will scale the strength of the easing performed on the curve. Useful for rotation on a single axis or when two position keyframes are very far apart on the map, producing an exaggerated easing curve shape. |
 |
Current Playhead Position - The current position (in seconds) of the playhead on the timeline. Timeline Length - The current length (in seconds) of the timeline. Loop Animation - When enabled, configures the current animation to loop endlessly. A set of special keyframes will be added to the timeline that correspond to the starting position. The timing and style of interpolation back to the starting position can be configured by modifying these keyframes. Snapping - When enabled, the playhead will snap to nearby keyframes. In addition, when moving keyframes on the timeline, they will snap to the playhead, and in multi-track modes, they will also snap to the position of keyframes on other tracks. This functionality can be invoked temporarily by holding the Shift key while movingthe playhead or keyframes. |