melonJS
    Preparing search index...

    Class Application

    The Application class is the main entry point for creating a melonJS game. It initializes the renderer, creates the game world and viewport, registers DOM event listeners (resize, orientation, scroll), and starts the game loop.

    The Application instance provides access to the core game systems:

    • renderer — the active Canvas or WebGL renderer
    • world — the root container for all game objects
    • viewport — the default camera / viewport

    The app instance is automatically passed to Stage#onResetEvent and Stage#onDestroyEvent, and is accessible from any renderable via parentApp.

    // create a new melonJS Application
    const app = new Application(800, 600, {
        parent: "screen",
        scaleMethod: "flex-width",
        renderer: 2, // AUTO
    });

    // add objects to the world
    app.world.addChild(new Sprite(0, 0, { image: "player" }));

    // access the viewport
    app.viewport.follow(player, app.viewport.AXIS.BOTH);
    Index

    Constructors

    constructor

    Properties

    accumulator accumulatorMax accumulatorUpdateDelta frameCounter frameRate isAlwaysDirty isDirty isInitialized lastUpdate lastUpdateStart mergeGroup parentElement pauseOnBlur renderer resumeOnFocus settings stepSize stopOnBlur updateAverageDelta updateDelta viewport world

    Accessors

    canvas sortOn

    Methods

    destroy draw freeze getParentElement init onLevelLoaded pause repaint reset resize resume update updateFrameRate

    Constructors

    • Create and initialize a new melonJS Application. This is the recommended way to start a melonJS game.

      Parameters

      • width: number

        The width of the canvas viewport

      • height: number

        The height of the canvas viewport

      • options: Partial<ApplicationSettings> & { legacy?: boolean } = {}

        The optional parameters for the application and default renderer

      Returns Application

      Will throw an exception if it fails to instantiate a renderer

      const app = new Application(1024, 768, {
          parent: "game-container",
          scale: "auto",
          scaleMethod: "fit",
          renderer: 2, // AUTO
      });

    Properties

    accumulator: number
    accumulatorMax: number
    accumulatorUpdateDelta: number
    frameCounter: number
    frameRate: number
    isAlwaysDirty: boolean
    isDirty: boolean
    isInitialized: boolean

    true when this app instance has been initialized

    false
    lastUpdate: number

    Last time the game update loop was executed.
    Use this value to implement frame prediction in drawing events, for creating smooth motion while running game update logic at a lower fps.

    lastUpdateStart: number | null
    mergeGroup: boolean

    when true, all objects will be added under the root world container.
    When false, a me.Container object will be created for each corresponding groups

    true
    parentElement: HTMLElement

    the parent HTML element holding the main canvas of this application

    pauseOnBlur: boolean

    Specify whether to pause this app when losing focus

    true

    // keep the default game instance running even when losing focus
     app.pauseOnBlur = false;
    renderer: Renderer

    a reference to the active Canvas or WebGL renderer

    resumeOnFocus: boolean

    Specify whether to unpause this app when gaining back focus

    true
    settings: ResolvedApplicationSettings

    the given settings used when creating this application

    stepSize: number
    stopOnBlur: boolean

    Specify whether to stop this app when losing focus

    false
    updateAverageDelta: number
    updateDelta: number
    viewport: Camera2d

    the active stage "default" camera

    world: World

    a reference to the game world,
    a world is a virtual environment containing all the game objects

    Accessors

    • get canvas(): HTMLCanvasElement

      The HTML canvas element associated with this application's renderer.

      Returns HTMLCanvasElement

      // access the canvas DOM element
      const canvas = app.canvas;

    Methods

    • Destroy this application instance and release all associated resources. Removes the canvas from the DOM, destroys the world, and unregisters all event listeners.

      Parameters

      • removeCanvas: boolean = true

        if true, the canvas element is removed from the DOM (default: true)

      Returns void

      // clean up when done
      app.destroy();

    • Freeze the current stage for a fixed duration, then automatically resume. Useful for hit-stop / hit-pause effects on impact.

      Convenience proxy for state.freeze; see that method's documentation for the full behaviour matrix (extend-not-stack semantics, interaction with manual state.pause() / state.resume(), automatic cancellation on window blur, etc.).

      Parameters

      • duration: number

        duration of the freeze in milliseconds

      • Optionalmusic: boolean = false

        also pause the current music track during the freeze

      Returns Promise<void>

      a Promise that resolves once the freeze ends (or is cancelled)

      // simple hit-stop on impact
      app.freeze(80);

      // chain VFX after the freeze
      await app.freeze(120);
      spawnImpactParticles();

    • init the game instance (create a physic world, update starting time, etc..)

      Parameters

      • width: number

        The width of the canvas viewport

      • height: number

        The height of the canvas viewport

      • Optionaloptions: Partial<ApplicationSettings>

        The optional parameters for the application and default renderer

      Returns void

    • Fired when a level is fully loaded and all renderable instantiated.
      Additionally the level id will also be passed to the called function.

      Returns void

      // call myFunction () everytime a level is loaded
      app.onLevelLoaded = this.myFunction.bind(this);

    • Pause the current stage. Convenience proxy for state.pause.

      Parameters

      • Optionalmusic: boolean = false

        also pause the current music track

      Returns void

      app.pause();        // pause game updates, keep music playing
      app.pause(true);    // pause game updates and music

    • Trigger a manual resize of the application canvas to fit the parent element. This is automatically called on window resize/orientation change, but can be called manually if the parent element size changes programmatically.

      Returns void

      // force a resize after changing the parent element dimensions
      app.resize();

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods