# 01. Overview

In this chapter, we will going through an overview of engine tutorial.

This section of the guide assumes you have already finished previous sections.

# Scripted Video

Engine tutorial can best be thought of as a scripted video, where players have the freedom to use navigation UI to quickly navigate to different segments of the video.

Typically, each note type has four segments: intro, fall, frozen, and hit:

• Intro segment shows the note in enlarged graphics.
• Fall segment shows the note falling to the judgment line.
• Frozen segment shows the game frozen in time, and instructional text as well as icons teaches players how to hit the note.
• Hit segment shows the note being hit.

# Components and Segments

Engine tutorial code is organized into components and segments in Sonolus.js project templates. Components simply render, while segments control which components are active.

For example, a stage component may render the stage and is always active, while a note display component renders note in different scenarios. A note fall segment may set note display component to render note's falling animation. Together components and segments create a cohesive scripted video player can watch through.

Project templates also come with code that manages components, segments, and player navigation, so we only need to implement components and segments relevant to our engines.

# Starting Dev Server

Similar to before, run in project directory to start a dev server for tutorial:

npm run dev:tutorial