• The Trigger Zone object is breached by the player’s hand, which triggers code in the DoorButton.ts script.
• This trigger sends a LocalEvent to the DoorCutScene.ts script, which executes the cutscene in the world:
  • The PlayerCamera position is quickly transitioned to the first reference object in front of the button. See screenshot.
  • The PlayerCamera is transitioned smoothly forward to the second reference object, effecting a dolly camera movement.
  • When the second reference object is reached:
    • The PlayerCamera stops.
    • The door animates to open.
    • The NPC robot steps forward and gives a thumbs up.
    • The door closes quickly.
  • PlayerCamera point of view resets to the previous mode and position, which is back with the player standing in front of the green button.

1. onPlayerEnterTrigger causes a LocalEvent to be emitted to the entity specified in the this.props.doorCutScene, referring to the reference object to which the DoorCutScene.ts is attached. This event triggers the camera dolly and cutscene animation.
2. After the animation is completed and the PlayerCamera has returned to the player’s perspective, DoorCutScene.ts sends an event back to this script, which re-enables the magic green button for replay.

   start() {
    this.connectCodeBlockEvent(this.entity, hz.CodeBlockEvents.OnPlayerEnterTrigger, (player: hz.Player) => {
      if (this.props.doorCutscene !== undefined && this.props.doorCutscene !== null) {
        this.sendLocalEvent(this.props.doorCutscene, CutsceneEvents.OnStartCutscene, {player, doorButton: this.entity});
        this.entity.as(hz.TriggerGizmo).enabled.set(false);
      } else {
        console.warn("DoorButton pressed, but no doorCutscene was set in the props.")
      };
    });
    this.connectNetworkEvent(this.entity, CutsceneEvents.OnCutsceneComplete, () => {
      this.entity.as(hz.TriggerGizmo).enabled.set(true);
    });
  };

  start() {
    this.connectLocalEvent(this.entity, CutsceneEvents.OnStartCutscene, ({player, doorButton}) => {
        this.doorButton = doorButton;
        // Play the camera animations. You can add / edit / remove for your own camera animations here.
        this.playCameraAnimation(player);
        // Play environmental animations. You can add / edit / remove for your own environmental animations here.
        this.playEnvironmentalAnimation();
        this.connectNetworkEvent(player, PlayerCameraEvents.OnCameraResetPressed, () => {
          this.quitCameraAnimationForPlayer(player);
        });
    });
  };

• The camera animation (dolly) is played.
• The cut scene with the door and robot is played.
• If the reset button is pressed, the animations and camera position are reset.

Note: Each of the steps of the sequence (camera or environmental animation) is wrapped in a timeout, which ensures that the specific action has a defined duration.

  static propsDefinition = {
    door: {type: hz.PropTypes.Entity},
    cameraStart: {type: hz.PropTypes.Entity},
    cameraEnd: {type: hz.PropTypes.Entity},
    moveDuration: {type: hz.PropTypes.Number, default: 5},
    robot: {type: hz.PropTypes.Entity},
  };

Tip: Review and modify this function to create camera animations of your own. Make sure that you create the empty reference objects to define the beginning and ending of the camera movement. With a bit of work, you can chain together multiple sequences of camera animation.

moveDuration: {type: hz.PropTypes.Number, default: 5},
cameraStart: {type: hz.PropTypes.Entity},
cameraEnd: {type: hz.PropTypes.Entity},

static readonly MoveToStartDuration: number = 0.4;
private static readonly MoveToStartEasing: Easing = Easing.Linear;
private static readonly DollyEasing: Easing = Easing.EaseOut;

Tip: To create a pan effect, set the rotation of the starting object and the ending object to point in the same direction.

1. Door open
2. Robot emotes (thumbs up!)
3. Door closes

door: {type: hz.PropTypes.Entity},
moveDuration: {type: hz.PropTypes.Number, default: 5},
robot: {type: hz.PropTypes.Entity},

Tip: You can modify the robot animation to use different emotes. Change the value of the parameter for setAnimationParameterTrigger() to experiment. For more information on available emotes, see NPC Scripts.

Tip: You can build even more complex sequences in this location, inserting different NPCs at this location. For more information, see NPCs.

• Sequencing of fixed camera positions can create cinematic-style camera movements.
• Sequencing of object and NPC animations are used to create the cinematics.
• Returning the camera at the end re-engages the player in the action.