Configures the renderer and sets the camera into position. Call this method before setting up the stage through Engine#configureStage.

Initializing a new engine.

engine.init( 1270, 768, window.devicePixelRatio, window )

Constructs the stage where one or more players will dance. In a nutshell, the stage sets up the environment needed to play a specific tune associated with its Stepmania step definition file (i.e., mp3+SSC). This method must be called before adding new players to the stage through Engine#addPlayer.

Configuring a new stage. Details of the StageConfig object are omitted.

let stageConfig = new StageConfig( ... ) ;
engine.configureStage(stageConfig) ;

Adds a new player to the dance stage. This method must be called after configuring the stage through Engine#configureStage. There is no upper limit for the number of players that can join, but for some number the camera position must be updated to show the whole stage. Players could play locally by using traditional input methods (e.g., Keyboard, Touch) or remotely (via logging FrameLogs).

Adding a new player to the stage. Details of the PlayerConfig object are omitted.

let p1Config = new PlayerConfig( ... ) ;
let p1Id = engine.addPlayer(p1Config) ;

Appends the renderer's DOM element to a container with id containerId present in your HTML document. You need to call this function so that the engine has a canvas to draw on.

Granted we have defined in a HTML document the following container <div id="container"></div>, we add the engine to the DOM

engine.addToDOM('container') ;

Updates the player's stage playerId offset. This function can be used to sync off-beat steps on-the-fly when the engine is running.

Updating the offset by 0.01 seconds for player with id p1Id := 0.

engine.updateOffset(p1Id, 0.01) ;

Updates the stage's audio playback rate (i.e., increases or decreases the audio & step speed). This function might be called while the engine is running. This function won't have any effect if there are remote players logged in the engine.

Speeding up the playback rate to 110% (1.1x)

// changes the playback speed to 110%
engine.tunePlayBackSpeed(1.1) ;

// Essentially stops the playback
engine.tunePlayBackSpeed(0.0) ;

Logs a key down event from the browser into the engine. Keyboard events must be logged if any player is using KeyInputConfig (i.e. keyboard) as input method.

Configuring the browser to log the key strokes into the engine

window.onkeydown = engine.keyDown ;

Logs a key up event from the browser into the engine. Keyboard events must be logged if any player is using KeyInputConfig (i.e. keyboard) as input method.

Configuring the browser to log the key strokes into the engine

window.onkeyup = engine.keyUp ;

Logs a touch down event from the browser into the engine. Touch events must be logged if any player is using TouchInputConfig (i.e. Touch capable device) as input method.

Configuring the browser to log touch down events into the engine

document.addEventListener( 'touchstart', (event) => {
    // disable default actions
    event.preventDefault();
    event.stopPropagation();

    engine.touchDown(event) ;
}, false );

Logs a touch up event from the browser into the engine. Touch events must be logged if any player is using TouchInputConfig (i.e. Touch capable device) as input method.

Configuring the browser to log touch down events into the engine

document.addEventListener( 'touchend', (event) => {
    // disable default actions
    event.preventDefault();
    event.stopPropagation();

    engine.touchUp(event) ;
}, false );

Repositions the camera. Use this method to configure how the stage is displayed.

Moving the camera backwards to fully show players' stages when both are playing pump-double styles

engine.setCameraPosition(0,-3.4,12) ;

Query the style of a specific level from the configured stage.

Query if one player is playing pump-double to reposition the camera

let p1StageType = engine.queryStageType(P1chartLevel) ;
if (p1StageType === 'pump-double') {
    engine.setCameraPosition(0,-3.4,12) ;
}

Sets the engine into a valid state and prepares it to start the song playback. Call this function once the stage and all players have been configured. This method will trigger the function StageConfig#onReadyToStart once the initialization is completed.

Starting the engine

engine.start() ;

Schedules when the engine should start playing the song and starts the rendering main loop. You may only call this function once StageConfig#onReadyToStart callback is called.

We let the engine start playing back after 2 seconds once the engine has loaded up

let onReadyToStart = () => {
     let dateToStart = new Date() ;
     // delay of 2 secs
     dateToStart.setMilliseconds(dateToStart.getMilliseconds() + 2000.0) ;
     engine.startPlayBack(dateToStart, () => { return new Date() ; }
}

Stops the engine and cleans up the renderer. This action is not reversible. After calling this method, the object must not be used again. This method is called automatically once the song has reached its end.

Update size of drawable canvas. You might call this function when the engine is running.

Resize drawable canvas to 500x500 px

engine.resize(500, 500)

It logs frameLogs into the engine. FrameLogs are JSON messages that are passed between engines when remote players are configured. They enable the engine to know what is the current status of a remote player.

To learn more about how to use frame logs for communicating a pair of engines, have a look at the repo at https://github.com/piulin/piured

engine.logFrame(JSON) ;

Sets the callback function onFrameLog. This function is called once the engine has a frame to be logged from any local player. Ideally, the content of the JSON is sent through the network somehow and logged into a target engine.

To learn more about how to use frame logs for communicating a pair of engines, have a look at the repo at https://github.com/piulin/piured

engine.onFrameLog = (frameLog) {
    //send it to the remote engine somehow
    mm.sendFrameLog(frameLog) ;
}

Sets the callback function onStageCleared. This function is called once the engine is stopped (either by calling Engine#stop or by reaching the end of the song). It can be used to report the player's performance.

We report the player's performance when the stage is cleared

engine.onStageCleared = (performance) => {
    console.log(performance) ;
    window.close() ;
}