npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

excalibur-router

v0.0.10

Published

A scene router for Excaliburjs

Downloads

14

Readme

Excalibur Router

A scene router for Excalibur.

Features

  • Transitions
  • Dynamic scene loading
  • Loading scenes

Usage

npm install excalibur-router
// router.ts
import { Router } from 'excalibur-router'

class Level1 extends ex.Scene {}
class Level2 extends ex.Scene {}

const router = new Router({
  routes: {
    level1: Level1,
    level2: Level2,
  },
})
// game.ts
import * as ex from 'excalibur'
import { router } from './router'

const engine = new ex.Engine({
  width: 800,
  height: 600,
})

router.start(engine).then(() => {
  router.goto('level1')
})

Loaders

Router repurposes Loaders to act as scenes. Resources can be queued with router.addResource(resources) and they will be loaded automatically during the next scene navigation.

When loading, the router temporarily navigates to the loading scene and continues to the target once loading has completed. There is a default loading scene, but you can provide your own:

class LoadingScene extends ex.Scene {
  // if true, navigation will not resume until this scene emits a 'complete' event
  // it is false by default
  defer = false

  onLoadStart() {}

  onLoad(progress: number) {}

  onLoadComplete() {
    // if this.defer is true:
    this.emit('complete', undefined)
  }
}

const router = new Router({
  routes: {...},
  loader: LoadingScene,
})

You can have multiple loaders as well:

const router = new Router({
  routes: {...},
  loader: {
    boot: BootLoadingScene,
    // default will be used if no loader is provided in router.goto()
    default: LoadingScene
  },
})

router.goto('level1', {
  loader: 'boot'
})

Lazy Loading

Scene routes may be defined using dynamic imports which will cause them to be loaded lazily. If these scenes contain any router.addResource() calls (or import files that do), they will be loaded as well.

Note: you must be using a bundler that supports dynamic imports, such as Vite or Webpack

const router = new Router({
  routes: {
    level1: () => import('./level1'), // contains a default export of Scene
  },
})

Transitions

Transitions are actors with lifecycle hooks for the transitioning of scenes. They typically will play the outro, be carried into the next scene, play their intro, and then be killed.

import { Transition, TransitionArgs } from 'excalibur-router'

export class FadeTransition extends Transition {
  el: ScreenElement

  constructor(args: TransitionArgs = {}) {
    super({
      duration: 300,
      z: Infinity,
      ...args,
    })
  }

  onInitialize(engine: Engine): void {
    this.el = new ScreenElement({
      x: 0,
      y: 0,
      z: this.z,
      width: engine.canvasWidth,
      height: engine.canvasHeight,
      color: Color.Black,
    })

    this.el.graphics.opacity = this.isOutro ? 0 : 1
    this.addChild(this.el)
  }

  onIntroStart() {
    this.el.graphics.opacity = 1
  }

  onOutroStart() {
    this.el.graphics.opacity = 0
  }

  onIntro(progress: number) {
    this.el.graphics.opacity = 1 - progress
  }

  onOutro(progress: number) {
    this.el.graphics.opacity = progress
  }
}

They can be used in router.goto

router.goto('level1', {
  transition: new FadeTransition(),
})

There are some default transition effects provided:

  • FadeTransition
  • CrossFadeTransition

Transitions with Loading Scenes

Depending on the transition effect, you may want the transition to carry into a loading scene. Transitions can take persistOnLoading argument to do this, causing the effect to stay in its completed "outro" state for the entirety of the loading scene.

Note This does not apply for the initial loading scene

router.goto('level1', {
  transition: new FadeTransition({
    persistOnLoading: true,
  }),
})

You can also provide a number value instead, which will persist the transition for that amount of time in ms before "introing" into the loading scene. This is useful for something like a Fade effect, where you might want to stay faded unless the loading is taking a long time.

router.goto('level1', {
  transition: new FadeTransition({
    // if loading takes longer than 200ms, fade back in to show loading scene
    persistOnLoading: 200,
  }),
})

Blocking Input during Transition

You likely will want to block user input during a transition, as the Scene remains running as usual while the transition is happening. You can check if the transition is in progress by checking router.isTransitioning or scene.isTransitioning.

onPreUpdate(engine) {
  if (this.scene.isTransitioning) {
    return
  }

  // ...
}

Events

Router emits the following events:

| Event Name | Description | | ----------------- | ------------------------------------------------------------------------------ | | navigationstart | navigation has started (before outro transition & loading scene) | | navigation | the scene has been navigated to (after loading scene, before intro transition) | | navigationend | navigation has completed (after loading scene & intro transition) |

They each contain target scene and goto() arguments.

Examples

See the examples for detailed usage.