https://github.com/basementuniverse/scene-manager

A component for managing a stack of scenes in a game
https://github.com/basementuniverse/scene-manager

Last synced: 23 days ago
JSON representation

A component for managing a stack of scenes in a game

• Host: GitHub
• URL: https://github.com/basementuniverse/scene-manager
• Owner: basementuniverse
• License: mit
• Created: 2022-12-28T17:17:49.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-03T03:56:31.000Z (4 months ago)
• Last Synced: 2024-12-13T03:59:35.547Z (26 days ago)
• Language: TypeScript
• Size: 235 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Game Component: Scene Manager

A component for managing a stack of scenes in a game.

## Installation

```bash

npm install @basementuniverse/scene-manager

```

## How to use

Initialise the scene manager before use:

```ts

import SceneManager from '@basementuniverse/scene-manager';

SceneManager.initialise();

```

Update and draw the scene manager:

```ts

class Game {

  // ...

  public update(dt: number) {

    SceneManager.update(dt);

  }

  public draw(context: CanvasRenderingContext2D) {

    SceneManager.draw(context);

  }

}

```

Create and start a scene:

```ts

SceneManager.push(new MyScene());

```

End/remove a scene:

```ts

const scene = SceneManager.pop();

```

Clear scenes:

```ts

SceneManager.clear();

```

Only the top-most scene will be updated.

Scenes will be drawn bottom-to-top, but with some scenes culled depending on transparency.

## Implementing a scene

Define a class that inherits from `Scene`:

```ts

import SceneManager, { Scene } from '@basementuniverse/scene-manager';

export class MyScene extends Scene {

  public constructor() {

    super({ transitionTime: 2.5 });

  }

  public initialise() {

    // Called when the scene is pushed onto the SceneManager

  }

  public update(dt: number) {

    // Called on every SceneManager.update() while this is the top-most scene

    console.log(this.transitionAmount); // between 0...1

    // Start another scene when a key is pressed

    if (InputManager.keyPressed('Enter')) {

      SceneManager.push(new MyOtherScene());

    }

    // Finish this scene when a key is pressed

    if (InputManager.keyPressed('Escape')) {

      SceneManager.pop();

    }

  }

  public draw(context: CanvasRenderingContext2D) {

    // Called on every SceneManager.draw() while this scene is visible

    // (depends on scenes above this one in the stack)

  }

}

```

## Scene options

```ts

const options = { ... };

const myScene = new Scene(options);

```

| Option | Type | Default | Description |

| --- | --- | --- | --- |

| `transitionTime` | `number` | `2` | The number of seconds it takes to transition in/out |

| `transparent` | `boolean` | `true` | If true, this scene will show other scenes below it in the stack |

| `onTransitionedIn` | `() => void` | `undefined` | Called when the scene has fully transitioned in |

| `onTransitionedOut` | `() => void` | `undefined` | Called when the scene has fully transitioned out |