10 posts tagged with "release"

It's finally happening! Excalibur.js has been a labor of love for thirteen years! And we are finally here at v1!

sh
npm install [email protected]
Copy

sh
npm install [email protected]
Copy

What does v1 mean?​

Not much, it's basically been v1 for a while. Excalibur has been relatively stable with low bug reports, all our internal goals have been met, AND people are making commercial games on Steam and Itch.io.

Starting with v1, we'll be following semantic versioning as best we can and breaks are considered bugs and will be patched or feature flagged. As a result v1 does have some breaks (but it's mostly just api names) that have been batched up for a while, but we have codemods to make this painless.

On Steam​

Speaking of Steam... here are some Excalibur games you should check out. If your Steam (or other platform) game runs on Excalibur and is not here, tell me!

• Now THAT'S a Big Dragon! by Cotovelo Games, released August 2026. An idle game where you recruit an ever-growing army of heroes, stack upgrades, and watch the numbers go up as they chip away at a colossal dragon.
• A Nibble Tale by Maxouhell Studios, in Early Access since August 2026. A pixel-art top-down action roguelite: the rats stole your little brother's snack, and Pinpin the rabbit is going to get it back.
• Estelle Igni: To Light Fires in the Night Sky by Claire Scott, coming soon, wishlist it now. A JRPG of eternal night, blending techniques from thirteen classes to uncover the rifts consuming the stars.

On Itch and the Web​

• SteamSpin
• PixelWar
• World Gen and Baby Bots
• Some Deity Simulator and SeaDV
• Asteroids
• Ten of You
• Tanium Game Jam 2025

New to Excalibur?​

Excalibur is the friendly 2D TypeScript game engine for the web, no dependencies, free and open source BSD-2 forever.

Support for popular tools:

• Tiled
• LDtk
• SpriteFusion
• Aseprite
• JSFXR

Sweet New Features in v1​

• Performance Improvements
• 2D Lighting
• Pause System
• Material/Postprocessor Shader Pipelines
• Serialization API
• Sound Manager API
• Sound Mixing API
  • Layering/Spatial audio
• Excalibur CLI Tool

We've put together a fireworks demo to commemorate the occasion!

Tap, click, or keypress to add more fireworks:

In 2024 a lot happened for Excalibur! We had 3 big releases v0.28.x, v0.29.x, and v0.30.x! Join the newsletter to make sure you don't miss a thing!

2 new core conributers: Matt Jennings & Justin Young

Thriving discord with lots of cool games being built 😍

RECORD number of outside code contributions to Excalibur! Everyone that's commented, made an issue, discussion, or commited to a repo!

We are at 1.9k stars on github and growing, give us a star!

AND We have GitHub Sponsors & Patreons! Many thanks!

• 2 x Anonymous
• Ribsom
• PlanetCraft
• AdamE
• Latanya
• Feremabraz
• MRJP-Consulting

Highlights​

Development Build & EcmaScript Modules​

We now ship a excalibur.development.js, which provides additional debug information about issues that you would probably not want to ship to a production game. This provides a better development experience for our devs helping them find bugs faster.

Additionally we ship both an UMD and ESM bundle in Excalibur for modern bunders, the ESM build drastically reduces bundle sizes for folks.

Quick Start​

A big boost to productivity is the new Excalibur CLI for quickly scaffolding games in your favorite bundler technology or even vanilla JavaScript! This tool pulls all our open source template repos from github.

sh
npx create-excalibur@latest
Copy

sh
npx create-excalibur@latest
Copy

This tool was built by contributor Manu Hernandez, big thanks to him for donating his time and building this great tool!

Accomplishments & Cool Stuff​

You might notice a pattern here but Justin (aka Mookie) has been an MVP this year

Goal Oriented Action Planning by Justin Young

Wave Function Collapse by Justin Young

Dev.to Web Game Challenge Winner Justin Young

Demo Reel Games people are making in Excalibur

Performance​

We've really turned the screws on performance in excalibur with v0.30.x being roughly 2-3 times faster than v0.29.x, both in the physics and the graphics! A lot of this was achieved through new data structures, and removing allocations from the hot loop using arena style object pools.

Check out the Excalibur Bunnymark for raw draw performance!

In the physics realm we switched to a new spatial data structure "SparseHashGrid" that seems to yield better performance than our "DynamicAABBTree" previously, especially for large numbers of colliders. Autsider666 really helped dig into this collision performance endeavor, check out his Idle Survivors. We can support many 100s of collisions at once!

Debugging​

We have new debug drawing API you can use anywhere in your game to debug.

typescript
ex.Debug.drawRay(ray: Ray, options?: { distance?: number, color?: Color })
ex.Debug.drawBounds(boundingBox: BoundingBox, options?: { color?: Color })
ex.Debug.drawCircle(center: Vector, radius: number, options?: ...)
ex.Debug.drawPolygon(points: Vector[], options?: { color?: Color })
ex.Debug.drawText(text: string, pos: Vector)
ex.Debug.drawLine(start: Vector, end: Vector, options?: LineGraphicsOptions)
ex.Debug.drawLines(points: Vector[], options?: LineGraphicsOptions)
ex.Debug.drawPoint(point: Vector, options?: PointGraphicsOptions)
Copy

typescript
ex.Debug.drawRay(ray: Ray, options?: { distance?: number, color?: Color })
ex.Debug.drawBounds(boundingBox: BoundingBox, options?: { color?: Color })
ex.Debug.drawCircle(center: Vector, radius: number, options?: ...)
ex.Debug.drawPolygon(points: Vector[], options?: { color?: Color })
ex.Debug.drawText(text: string, pos: Vector)
ex.Debug.drawLine(start: Vector, end: Vector, options?: LineGraphicsOptions)
ex.Debug.drawLines(points: Vector[], options?: LineGraphicsOptions)
ex.Debug.drawPoint(point: Vector, options?: PointGraphicsOptions)
Copy

typescript
onPreUpdate(engine: ex.Engine, elapsedMs: number): void {
    this.vel = ex.Vector.Zero;
    this.graphics.use('down-idle');
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowRight)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowLeft)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowUp)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowDown)) { ... }
    ex.Debug.drawRay(
      new ex.Ray(this.pos, this.vel),
      { distance: 100, color: ex.Color.Red }
    );
}
Copy

typescript
onPreUpdate(engine: ex.Engine, elapsedMs: number): void {
    this.vel = ex.Vector.Zero;
    this.graphics.use('down-idle');
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowRight)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowLeft)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowUp)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowDown)) { ... }
    ex.Debug.drawRay(
      new ex.Ray(this.pos, this.vel),
      { distance: 100, color: ex.Color.Red }
    );
}
Copy

We now have a chrome & firefox extension to help debug your games in the browser. (This is a great place to contribute to open source! We have a LONG wish list for the plugin)

Big thanks to Adam Due Hansen for adding recent fixes that allow debug settings to be saved across browser refresh!

ECS (Entity Component System)​

Simplified Custom System implementations

• Systems are passed an ECS world as a default constructor
• Systems can use any number of queries

typescript
import * as ex from 'excalibur';
export class MySystem extends ex.System {
  static priority = ex.SystemPriority.Average;
  public readonly systemType = ex.SystemType.Draw;
  query: Query<typeof ex.TransformComponent | typeof ex.GraphicsComponent>;
  constructor(public world: ex.World) {
    super();
    this.query = this.world.query([ex.TransformComponent, ex.GraphicsComponent]);
  }
  public update(elapsed: number): void {
    // TODO implement system using query(s)
  }
}
Copy

typescript
import * as ex from 'excalibur';
export class MySystem extends ex.System {
  static priority = ex.SystemPriority.Average;
  public readonly systemType = ex.SystemType.Draw;
  query: Query<typeof ex.TransformComponent | typeof ex.GraphicsComponent>;
  constructor(public world: ex.World) {
    super();
    this.query = this.world.query([ex.TransformComponent, ex.GraphicsComponent]);
  }
  public update(elapsed: number): void {
    // TODO implement system using query(s)
  }
}
Copy

New Tag Queries

• New simplified way to query entities ex.World.query([MyComponentA, MyComponentB])
• New way to query for tags on entities ex.World.queryTags(['A', 'B'])

Coroutines​

These are a powerful tool for doing computation over time, and one of the best examples of that is animation. Coroutines are create for complex behavior and animations over time. They read very linearly for doing complex sequences over time compared to another approach where you might set flags and track timing in a class.

You can do lots of cool things in the body of coroutines in excalibur:

typescript
ex.coroutine(function*() {
  ...
  yield 100; // wait 100ms
  yield; // wait to next frame
  yield Promsie.resolve(); // wait for promise
  yield* ex.coroutine(function* () { ..}); // wait for nested coroutine
});
Copy

typescript
ex.coroutine(function*() {
  ...
  yield 100; // wait 100ms
  yield; // wait to next frame
  yield Promsie.resolve(); // wait for promise
  yield* ex.coroutine(function* () { ..}); // wait for nested coroutine
});
Copy

A more concrete example is in Jelly Jumper, where we use coroutines to handle the complex squash/stretch of player's graphic

typescript
// apply a stretch animation when jumping
if (this.animation.is('jump') && this.oldVel.y >= 0 && this.vel.y < 0) {
  ex.coroutine(
    this.scene!.engine,
    function* (this: Player): ReturnType<ex.CoroutineGenerator> {
      const duration = 70
      const scaleTo = 1 + 1 * this.FX_SQUISH_AMOUNT
      const easing = ex.EasingFunctions.EaseOutCubic
      const force = this.vel.y
      let elapsed = 0
      // stretch player graphic while jumping
      while (this.vel.y < force * 0.25) {
        elapsed += yield 1
        if (elapsed < duration) {
          this.squishGraphic(
            easing(Math.min(elapsed, duration), 1, scaleTo, duration)
          )
        }
      }
      elapsed = 0
      // un-stretch player graphic while jumping
      while (!this.touching.bottom.size) {
        elapsed += yield 1
        if (elapsed < duration) {
          this.squishGraphic(
            easing(Math.min(elapsed, duration), scaleTo, 1, duration * 2)
          )
        }
      }
      this.squishGraphic(1)
    }.bind(this)
  )
}
Copy

typescript
// apply a stretch animation when jumping
if (this.animation.is('jump') && this.oldVel.y >= 0 && this.vel.y < 0) {
  ex.coroutine(
    this.scene!.engine,
    function* (this: Player): ReturnType<ex.CoroutineGenerator> {
      const duration = 70
      const scaleTo = 1 + 1 * this.FX_SQUISH_AMOUNT
      const easing = ex.EasingFunctions.EaseOutCubic
      const force = this.vel.y
      let elapsed = 0
      // stretch player graphic while jumping
      while (this.vel.y < force * 0.25) {
        elapsed += yield 1
        if (elapsed < duration) {
          this.squishGraphic(
            easing(Math.min(elapsed, duration), 1, scaleTo, duration)
          )
        }
      }
      elapsed = 0
      // un-stretch player graphic while jumping
      while (!this.touching.bottom.size) {
        elapsed += yield 1
        if (elapsed < duration) {
          this.squishGraphic(
            easing(Math.min(elapsed, duration), scaleTo, 1, duration * 2)
          )
        }
      }
      this.squishGraphic(1)
    }.bind(this)
  )
}
Copy

Graphics​

Pixel Art​

First class pixel art art support with custom shaders/settings for the nicest looking pixel art you've ever seen. This removes common shimmering/banding artifacts that are visible when using pixel art with nearest neighbor filtering.

typescript
const engine = new ex.Engine({
  pixelArt: true,
  ...
});
Copy

typescript
const engine = new ex.Engine({
  pixelArt: true,
  ...
});
Copy

Check out pixelArt: true! Smooth as butter AA but still preserving the pixel art!

Compared with before when using antialiasing: false, you may need to go fullscreen but obvious banding and fat pixels are visible. This is a common visual issue when working with pixel art

The magic is doing subtle subpixel antialiasing along the pixel seams to avoid artifacts by adjusting the UVs and letting bilinear filtering do the hard work for us.

c
// Inigo Quilez pixel art filter 
// https://jorenjoestar.github.io/post/pixel_art_filtering/
vec2 uv_iq(in vec2 uv, in vec2 texture_size) {
  vec2 pixel = uv * texture_size;
  vec2 seam=floor(pixel+.5);
  vec2 dudv=fwidth(pixel);
  pixel=seam+clamp((pixel-seam)/dudv,-.5,.5);
  return pixel/texture_size;
}
Copy

c
// Inigo Quilez pixel art filter 
// https://jorenjoestar.github.io/post/pixel_art_filtering/
vec2 uv_iq(in vec2 uv, in vec2 texture_size) {
  vec2 pixel = uv * texture_size;
  vec2 seam=floor(pixel+.5);
  vec2 dudv=fwidth(pixel);
  pixel=seam+clamp((pixel-seam)/dudv,-.5,.5);
  return pixel/texture_size;
}
Copy

SVGs as Graphics​

Did you know you can use SVG's now as graphics in excalibur?! You can!

You can inline an SVG string if you're really strong in SVG markup, or you want to generate SVG's on the fly!

typescript
const svgImage = ex.ImageSource.fromSvgString(svg`
  <svg version="1.1"
       id="svg2"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       sodipodi:docname="resize-full.svg" inkscape:version="0.48.4 r9939"
       xmlns="http://www.w3.org/2000/svg" 
       width="800px" height="800px"
       viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
  <path id="path18934" fill="#000000ff" inkscape:connector-curvature="0"  d="M670.312,0l177.246,177.295L606.348,418.506l175.146,175.146
      l241.211-241.211L1200,529.688V0H670.312z M418.506,606.348L177.295,847.559L0,670.312V1200h529.688l-177.246-177.295
      l241.211-241.211L418.506,606.348z"/>
  </svg>
`);
Copy

typescript
const svgImage = ex.ImageSource.fromSvgString(svg`
  <svg version="1.1"
       id="svg2"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       sodipodi:docname="resize-full.svg" inkscape:version="0.48.4 r9939"
       xmlns="http://www.w3.org/2000/svg" 
       width="800px" height="800px"
       viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
  <path id="path18934" fill="#000000ff" inkscape:connector-curvature="0"  d="M670.312,0l177.246,177.295L606.348,418.506l175.146,175.146
      l241.211-241.211L1200,529.688V0H670.312z M418.506,606.348L177.295,847.559L0,670.312V1200h529.688l-177.246-177.295
      l241.211-241.211L418.506,606.348z"/>
  </svg>
`);
Copy

Additionally you can load svgs from files

typescript
const svgExternal = new ex.ImageSource('path/to/my.svg');
Copy

typescript
const svgExternal = new ex.ImageSource('path/to/my.svg');
Copy

Nine Slice Sprites​

Excalibur now supports Nine Slice Sprites! Thanks Justin!

Check out the demo app to play around with this feature!

Useful for creating bits of UI, or for tiling areas with a boarder!

typescript
const nineSlice = new ex.NineSlice({
  width: 300,
  height: 100,
  source: inputImageSource,
  sourceConfig: {
    width: 64,
    height: 64,
    topMargin: 5,
    leftMargin: 7,
    bottomMargin: 5,
    rightMargin: 7
  },
  destinationConfig: {
    drawCenter: true,
    horizontalStretch: ex.NineSliceStretch.Stretch,
    verticalStretch: ex.NineSliceStretch.Stretch
  }
});
actor.graphics.add(nineSlice);
Copy

typescript
const nineSlice = new ex.NineSlice({
  width: 300,
  height: 100,
  source: inputImageSource,
  sourceConfig: {
    width: 64,
    height: 64,
    topMargin: 5,
    leftMargin: 7,
    bottomMargin: 5,
    rightMargin: 7
  },
  destinationConfig: {
    drawCenter: true,
    horizontalStretch: ex.NineSliceStretch.Stretch,
    verticalStretch: ex.NineSliceStretch.Stretch
  }
});
actor.graphics.add(nineSlice);
Copy

Tiling Sprites & Animations​

We now have convenient and performant tiling support for sprites and animations! You can specify you wrapping mode in x/y. If one of the dimensions exceeds the intrinsic width/height of the original image it can be Clamped (which stretches the last pixel), Repeat (which repeats the pixels from left to right), or RepeatMirror (which repeats the pixels from the last edge like a mirror).

typescript
const tiledGroundSprite = new ex.TiledSprite({
  image: groundImage,
  width: game.screen.width,
  height: 200,
  wrapping: {
    x: ex.ImageWrapping.Repeat,
    y: ex.ImageWrapping.Clamp
  }
});
Copy

typescript
const tiledGroundSprite = new ex.TiledSprite({
  image: groundImage,
  width: game.screen.width,
  height: 200,
  wrapping: {
    x: ex.ImageWrapping.Repeat,
    y: ex.ImageWrapping.Clamp
  }
});
Copy

This can also be done with animations!

typescript
const tilingAnimation = new ex.TiledAnimation({
  animation: cardAnimation,
  sourceView: {x: 20, y: 20},
  width: 200,
  height: 200,
  wrapping: ex.ImageWrapping.Repeat
});
Copy

typescript
const tilingAnimation = new ex.TiledAnimation({
  animation: cardAnimation,
  sourceView: {x: 20, y: 20},
  width: 200,
  height: 200,
  wrapping: ex.ImageWrapping.Repeat
});
Copy

Bezier Curves​

typescript
player.actions.rotateTo({angleRadians: angle, duration: 1000, rotationType});
player.actions.moveTo({pos: ex.vec(100, 100), duration: 1000});
player.actions.scaleTo({scale: ex.vec(2, 2), duration: 1000});
player.actions.repeatForever(ctx => {
  ctx.curveTo({
    controlPoints: [cp1, cp2, dest],
    duration: 5000,
    mode: 'uniform'
  });
  ctx.curveTo({
    controlPoints: [cp2, cp1, start1],
    duration: 5000,
    mode: 'uniform'
  });
});
Copy

typescript
player.actions.rotateTo({angleRadians: angle, duration: 1000, rotationType});
player.actions.moveTo({pos: ex.vec(100, 100), duration: 1000});
player.actions.scaleTo({scale: ex.vec(2, 2), duration: 1000});
player.actions.repeatForever(ctx => {
  ctx.curveTo({
    controlPoints: [cp1, cp2, dest],
    duration: 5000,
    mode: 'uniform'
  });
  ctx.curveTo({
    controlPoints: [cp2, cp1, start1],
    duration: 5000,
    mode: 'uniform'
  });
});
Copy

HTML UI with Pixel Conversion​

Convert from Excalibur "world" pixles to CSS pixels, this is very useful when you want your game HTML to scale with the excalibur canvas and match up.

css
.ui-container {
  pointer-events: none;
  position: absolute;
  transform-origin: 0 0;
  transform: scale(
    calc(var(--ex-pixel-ratio)),
    calc(var(--ex-pixel-ratio)));
}
Copy

css
.ui-container {
  pointer-events: none;
  position: absolute;
  transform-origin: 0 0;
  transform: scale(
    calc(var(--ex-pixel-ratio)),
    calc(var(--ex-pixel-ratio)));
}
Copy

Here are some example repos of this being employed with HTML UI

• https://github.com/excaliburjs/sample-html/
• https://github.com/excaliburjs/sample-react/

GPU Particles​

You already saw the fireworks! With GPU particles you can run hundreds of thousands of particles no sweat using instanced rendering with transform feedback under the hood. This means that the entire particle simulation runs on the GPU for maximum speed.

typescript
export class Firework extends Actor {
    random: Random;
    trail: GpuParticleEmitter;
    explosion: GpuParticleEmitter;
    explosion2: GpuParticleEmitter;
    life: number;
    body: BodyComponent;
    originalPos: Vector;
    inProgress: boolean = false;
    constructor(pos: Vector, life: number, random: Random) {
        super({ name: "Firework" })
        this.random = random;
        this.originalPos = pos.clone();
        this.pos = pos;
        this.acc = vec(0, 800);
        this.body = new BodyComponent();
        this.life = life;
        this.trail = new GpuParticleEmitter({
            isEmitting: false,
            emitRate: 70,
            particle: {
                life: 1000,
                endColor: Color.White,
                beginColor: Color.White,
                minSpeed: 10,
                maxSpeed: 30,
                startSize: 3,
                endSize: 0,
                fade: true,
                acc: vec(0, 50),
            }
        });
        this.explosion = new GpuParticleEmitter({
            isEmitting: false,
            particle: {
                life: 2000,
                fade: true,
                startSize: 5,
                endSize: 2,
                minSpeed: 10,
                maxSpeed: 200,
                acc: vec(0, 100),
                beginColor: this.randomColor(),
                endColor: this.randomColor()
            }
        });
        this.explosion2 = new GpuParticleEmitter({
            isEmitting: false,
            particle: {
                life: 1000,
                fade: true,
                startSize: 5,
                endSize: 2,
                minSpeed: 10,
                maxSpeed: 200,
                acc: vec(0, 100),
                beginColor: this.randomColor(),
                endColor: this.randomColor()
            }
        });
        this.addChild(this.trail);
        this.addChild(this.explosion);
        this.addChild(this.explosion2);
    }
    private _colors = [
        Color.fromHex("#ff0000"),
        Color.fromHex("#0078ff"),
        Color.fromHex("#ffffff"),
        Color.fromHex("#d059c5"),
        Color.fromHex("#dff241"),
        Color.fromHex("#05ff1c"),
        Color.fromHex("#ffdf00"),
        Color.fromHex("#3e00f9"),
        Color.fromHex("#ff5fc0"),
        Color.fromHex("#ff3f3f"),
        Color.fromHex("#f66706"),
    ]
    private randomColor(): Color {
        return this.random.pickOne(this._colors);
    }
    launch() {
        if (this.inProgress) return;
        this.inProgress = true;
        this.pos = this.originalPos;
        coroutine(this.scene!.engine, (function*(this: Firework) {
            this.vel = vec(this.random.floating(-200, 200), this.random.floating(-800, -1000));
            this.trail.isEmitting = true;
            let hasExploded = false;
            let life = this.life;
            while (life > 0) {
                const elapsed = yield;
                life -= elapsed;
                if (this.vel.y >= 0 && !hasExploded) {
                    hasExploded = true;
                    this.trail.isEmitting = false;
                    this.explosion.emitParticles(500);
                    this.explosion2.emitParticles(500);
                }
            }
            this.trail.clearParticles();
            this.explosion.clearParticles();
            this.explosion2.clearParticles();
            this.inProgress = false;
        } as CoroutineGenerator).bind(this))
    }
}
Copy

typescript
export class Firework extends Actor {
    random: Random;
    trail: GpuParticleEmitter;
    explosion: GpuParticleEmitter;
    explosion2: GpuParticleEmitter;
    life: number;
    body: BodyComponent;
    originalPos: Vector;
    inProgress: boolean = false;
    constructor(pos: Vector, life: number, random: Random) {
        super({ name: "Firework" })
        this.random = random;
        this.originalPos = pos.clone();
        this.pos = pos;
        this.acc = vec(0, 800);
        this.body = new BodyComponent();
        this.life = life;
        this.trail = new GpuParticleEmitter({
            isEmitting: false,
            emitRate: 70,
            particle: {
                life: 1000,
                endColor: Color.White,
                beginColor: Color.White,
                minSpeed: 10,
                maxSpeed: 30,
                startSize: 3,
                endSize: 0,
                fade: true,
                acc: vec(0, 50),
            }
        });
        this.explosion = new GpuParticleEmitter({
            isEmitting: false,
            particle: {
                life: 2000,
                fade: true,
                startSize: 5,
                endSize: 2,
                minSpeed: 10,
                maxSpeed: 200,
                acc: vec(0, 100),
                beginColor: this.randomColor(),
                endColor: this.randomColor()
            }
        });
        this.explosion2 = new GpuParticleEmitter({
            isEmitting: false,
            particle: {
                life: 1000,
                fade: true,
                startSize: 5,
                endSize: 2,
                minSpeed: 10,
                maxSpeed: 200,
                acc: vec(0, 100),
                beginColor: this.randomColor(),
                endColor: this.randomColor()
            }
        });
        this.addChild(this.trail);
        this.addChild(this.explosion);
        this.addChild(this.explosion2);
    }
    private _colors = [
        Color.fromHex("#ff0000"),
        Color.fromHex("#0078ff"),
        Color.fromHex("#ffffff"),
        Color.fromHex("#d059c5"),
        Color.fromHex("#dff241"),
        Color.fromHex("#05ff1c"),
        Color.fromHex("#ffdf00"),
        Color.fromHex("#3e00f9"),
        Color.fromHex("#ff5fc0"),
        Color.fromHex("#ff3f3f"),
        Color.fromHex("#f66706"),
    ]
    private randomColor(): Color {
        return this.random.pickOne(this._colors);
    }
    launch() {
        if (this.inProgress) return;
        this.inProgress = true;
        this.pos = this.originalPos;
        coroutine(this.scene!.engine, (function*(this: Firework) {
            this.vel = vec(this.random.floating(-200, 200), this.random.floating(-800, -1000));
            this.trail.isEmitting = true;
            let hasExploded = false;
            let life = this.life;
            while (life > 0) {
                const elapsed = yield;
                life -= elapsed;
                if (this.vel.y >= 0 && !hasExploded) {
                    hasExploded = true;
                    this.trail.isEmitting = false;
                    this.explosion.emitParticles(500);
                    this.explosion2.emitParticles(500);
                }
            }
            this.trail.clearParticles();
            this.explosion.clearParticles();
            this.explosion2.clearParticles();
            this.inProgress = false;
        } as CoroutineGenerator).bind(this))
    }
}
Copy

Materials​

Use custom shader code to do neat effects in excalibur, like doing Star Marbles.

You can use the screen texture to do cool things like reflections in the water.

Scene Ergonomics​

You can now define scenes up front and get strong typing in addition to addScene(...)

typescript
const game = new ex.Engine({
  scenes: {
    scene1: {
      scene: scene1,
      transitions: {
        out: new ex.FadeInOut({duration: 1000, direction: 'out', color: ex.Color.Black}),
        in: new ex.FadeInOut({duration: 1000, direction: 'in'})
      }
    },
    scene2: {
      scene: scene2,
      loader: ex.DefaultLoader, // Constructor only option!
      transitions: {
        out: new ex.FadeInOut({duration: 1000, direction: 'out'}),
        in: new ex.FadeInOut({duration: 1000, direction: 'in', color: ex.Color.Black })
      }
    },
  scene3: ex.Scene // Constructor only option!
  } 
})
// Specify the boot loader & first scene transition from loader
game.start('scene1',
{
  inTransition: new ex.FadeInOut({duration: 500, direction: 'in', color: ex.Color.ExcaliburBlue})
  loader: boot,
});
Copy

typescript
const game = new ex.Engine({
  scenes: {
    scene1: {
      scene: scene1,
      transitions: {
        out: new ex.FadeInOut({duration: 1000, direction: 'out', color: ex.Color.Black}),
        in: new ex.FadeInOut({duration: 1000, direction: 'in'})
      }
    },
    scene2: {
      scene: scene2,
      loader: ex.DefaultLoader, // Constructor only option!
      transitions: {
        out: new ex.FadeInOut({duration: 1000, direction: 'out'}),
        in: new ex.FadeInOut({duration: 1000, direction: 'in', color: ex.Color.Black })
      }
    },
  scene3: ex.Scene // Constructor only option!
  } 
})
// Specify the boot loader & first scene transition from loader
game.start('scene1',
{
  inTransition: new ex.FadeInOut({duration: 500, direction: 'in', color: ex.Color.ExcaliburBlue})
  loader: boot,
});
Copy

Tile Map Plugins​

Tiled plugin was completely rewritten and is SO MUCH better, we support nearly every feature of Tiled now!

New LDtk Plugin check out the sample game using the plugin here

New Spritefusion Plugin check out the sample game using the plugin here

Aseprite Plugin​

Native .aseprite support iterate on your assets whild you build your game.

typescript
import { AsepriteResource } from "@excaliburjs/plugin-aseprite";
const game = new Engine({
    width: 600,
    height: 400,
    displayMode: DisplayMode.FitScreen
});
// Native
const asepriteSpriteSheet = new AsepriteResource('./beetle.aseprite');
// Or JSON export
// const asepriteSpriteSheet = new AsepriteResource('./beetle.json');
const loader = new Loader([asepriteSpriteSheet]);
game.start(loader).then(() => {
    const anim = asepriteSpriteSheet.getAnimation('Loop');
    const actor = new Actor({pos: vec(100, 100)});
    actor.graphics.use(anim);
    
    game.currentScene.add(actor);
});
Copy

typescript
import { AsepriteResource } from "@excaliburjs/plugin-aseprite";
const game = new Engine({
    width: 600,
    height: 400,
    displayMode: DisplayMode.FitScreen
});
// Native
const asepriteSpriteSheet = new AsepriteResource('./beetle.aseprite');
// Or JSON export
// const asepriteSpriteSheet = new AsepriteResource('./beetle.json');
const loader = new Loader([asepriteSpriteSheet]);
game.start(loader).then(() => {
    const anim = asepriteSpriteSheet.getAnimation('Loop');
    const actor = new Actor({pos: vec(100, 100)});
    actor.graphics.use(anim);
    
    game.currentScene.add(actor);
});
Copy

If you're curious about how this was built, we live streamed the process!

Path finding Plugin​

Justin put together an official path finding plugin that supports both Djikstra & A*!

You can see the plugin in action in this sample, click to move the little guy around.

JSFXR Plugin​

The JSFXR plugin is super useful for creating extra small sounds programmatically instead of downloading large wav/mp3 files!

shell
npm i @excaliburjs/plugin-jsfxr
Copy

shell
npm i @excaliburjs/plugin-jsfxr
Copy

This allows you to sepcify the config for the audio, which could be changed on the fly as well.

typescript
import { SoundConfig } from "@excaliburjs/plugin-jsfxr";
export const sounds: { [key: string]: SoundConfig } = {};
// Generate configs https://excaliburjs.com/sample-jsfxr/
sounds["pickup"] = {
  oldParams: true,
  wave_type: 1,
  p_env_attack: 0,
  p_env_sustain: 0.02376922019231107,
  p_env_punch: 0.552088780864157,
  p_env_decay: 0.44573175628456596,
  p_base_freq: 0.6823818961421457,
  p_freq_limit: 0,
  p_freq_ramp: 0,
  p_freq_dramp: 0,
  p_vib_strength: 0,
  p_vib_speed: 0,
  p_arp_mod: 0,
  p_arp_speed: 0,
  p_duty: 0,
  p_duty_ramp: 0,
  p_repeat_speed: 0,
  p_pha_offset: 0,
  p_pha_ramp: 0,
  p_lpf_freq: 1,
  p_lpf_ramp: 0,
  p_lpf_resonance: 0,
  p_hpf_freq: 0,
  p_hpf_ramp: 0,
  sound_vol: 0.25,
  sample_rate: 44100,
  sample_size: 16,
};
let sndPlugin = new JsfxrResource();
sndPlugin.init(); //initializes the JSFXR library
for (const sound in sounds) {
  sndPlugin.loadSoundConfig(sound, sounds[sound]);
}
// play
sndPlugin.playSound("pickup");
Copy

typescript
import { SoundConfig } from "@excaliburjs/plugin-jsfxr";
export const sounds: { [key: string]: SoundConfig } = {};
// Generate configs https://excaliburjs.com/sample-jsfxr/
sounds["pickup"] = {
  oldParams: true,
  wave_type: 1,
  p_env_attack: 0,
  p_env_sustain: 0.02376922019231107,
  p_env_punch: 0.552088780864157,
  p_env_decay: 0.44573175628456596,
  p_base_freq: 0.6823818961421457,
  p_freq_limit: 0,
  p_freq_ramp: 0,
  p_freq_dramp: 0,
  p_vib_strength: 0,
  p_vib_speed: 0,
  p_arp_mod: 0,
  p_arp_speed: 0,
  p_duty: 0,
  p_duty_ramp: 0,
  p_repeat_speed: 0,
  p_pha_offset: 0,
  p_pha_ramp: 0,
  p_lpf_freq: 1,
  p_lpf_ramp: 0,
  p_lpf_resonance: 0,
  p_hpf_freq: 0,
  p_hpf_ramp: 0,
  sound_vol: 0.25,
  sample_rate: 44100,
  sample_size: 16,
};
let sndPlugin = new JsfxrResource();
sndPlugin.init(); //initializes the JSFXR library
for (const sound in sounds) {
  sndPlugin.loadSoundConfig(sound, sounds[sound]);
}
// play
sndPlugin.playSound("pickup");
Copy

Example of how to integrate this into your game

New Tutorial​

We have a new tutorial! It's a new flappy bird clone called "Excalibird".

New High Fidelity Samples​

• Jelly Jumper by Matt Jennings and the source code
• Sum Monsters and the source code
• Tiny Tactics and the source code
• Excalibird and the source code

Caliburn Games​

The core contributors around Excalibur have started a business! We are modeling ourselves off of w4games, providing: educational content, support, project development, and console porting services. Excalibur.js and Excalibur Studio will always be open source.

Our plan for 2025 is to release 2 commercial games on various platforms AND offer Nintendo Switch Console publishing!!!

Visit caliburn.games today and start working with us.

Excaliburjs.TV​

We are planning on releasing a number of free and paid courses through Caliburn Games.

Sign up for more details when they become available https://excaliburjs.tv

Near Future​

Sound Manager​

We are planning on adding a "Sound Manager" to organize sounds into different "tracks" that can be mixed and muted independently. For example sound effects and background music.

Folks have implemented this in almost every game made, so we plan on adding a first party implementation to make this easy.

Collision and Physics​

We are planning a number of highly requested improvements to physics and collisions.

• Continuous Collision Improvements
  • Swept AABB TOI
  • ShapeCasting
• Surface Velocity on bodies (think conveyor belts)
• Arcade Friction

Lighting​

The future versions of Excalibur will have lighting features to really enhance your games. Big thanks to Justin for digging in and figuring out our approach here!

The plan is to add spot lights and point lights, under the hood this uses a technique called raymarching.

Excalibur Studio​

We are working on an open source visual editor for Excalibur, so that folks can drag and drop, design, code, configure games, and export to various platforms!

We'll be opening up the source code as soon as we have something that works for a vertical slice of game dev.

v1.0​

The majority of APIs are now stable and not much will change between now and the v1.0 announcement. Right now we are working on adding a couple more features, light refactoring, and cleaning up some edge case bugs.

We expect to be making a v1.0 announcement soon!

Today we are excited to announce the biggest and best version of Excalibur.js yet! We have a lot of accomplishments to talk about and a lot of thank you's to give!

Install the latest version today! Check out the full release notes

sh
npm install [email protected]
Copy

sh
npm install [email protected]
Copy

Project Health​

At a high level:

• Big thanks to our Sponsors and Patrons
• 1.8k Stars on Github! Give us a Star!
• 15k average monthly page views of excaliburjs.com
• Record number of OSS contributors to the project for this release
  • Code
  • Documentation
  • Issues & Discussions
  • Discord discussions
• Huge community growth in the discord
• 2 New Core Contributors
  • Matt Jennings
  • Justin Young
• Join the Excalibur.js Newsletter
• Subscribe to the Excalibur.js YouTube channel for upcoming videos

Also we did our first in person event @ 2D Con in Bloomington, Minnesota! We'll be at VGM Con this spring!

New "Excalibird" Tutorial​

With this release we've added a brand new tutorial inspired by Flappy Bird. This was built from the ground up to help you write excalibur games like we write them. This tutorial is geared at building a sustainable project structure that can grow as your game design does. Check out the full source code and play it now. Big thanks to discord user .rodgort for all the helpful feedback.

New Quick Start​

Did you know we have an Excalibur CLI to help you bootstrap games quickly? Check out our new quick start guide to get up to speed in record time with your new project in your preferred frontend tech (including vanilla.js).

sh
npx create-excalibur@latest
Copy

sh
npx create-excalibur@latest
Copy

We've updated all the Excalibur.js templates that power this CLI to the latest and greatest!

Did you know that community member Manu Hernandez built this? Send him a thanks on the Discord!

Quality of Life​

Browser Extension​

New Excalibur.js Dev Tools Extension is available in BOTH Firefox and Chrome

If you are looking to contribute, we have a big wish list of features for the extension

Development Excalibur Builds​

We are publishing new excalibur.development.js builds that have increased debug output to catch common issues while in development. For example if you forget to add an Actor to a scene (a common thing that I run into)!

typescript
const orphan = new ex.Actor({
    name: 'orphaned'
});
// OOOPS! I forgot to add orphan Actor to a Scene
Copy

typescript
const orphan = new ex.Actor({
    name: 'orphaned'
});
// OOOPS! I forgot to add orphan Actor to a Scene
Copy

When NODE_ENV=production these extra warnings are removed for you prod build!

This big quality of life feature was added by Matt Jennings!

Static Debug Draw API​

You can now use the ex.Debug.* API to do debug drawing without needing to know about a graphics context. These draws are only visible when the engine is in debug mode ex.Engine.isDebug.

This is great for check your points, rays, lines, etc. are where you expect them to be!

Another great feature idea from Matt Jennings.

typescript
onPreUpdate(engine: ex.Engine, elapsedMs: number): void {
    this.vel = ex.Vector.Zero;
    this.graphics.use('down-idle');
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowRight)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowLeft)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowUp)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowDown)) { ... }
    ex.Debug.drawRay(new ex.Ray(this.pos, this.vel), { distance: 100, color: ex.Color.Red });
}
Copy

typescript
onPreUpdate(engine: ex.Engine, elapsedMs: number): void {
    this.vel = ex.Vector.Zero;
    this.graphics.use('down-idle');
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowRight)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowLeft)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowUp)) { ... }
    if (engine.input.keyboard.isHeld(ex.Keys.ArrowDown)) { ... }
    ex.Debug.drawRay(new ex.Ray(this.pos, this.vel), { distance: 100, color: ex.Color.Red });
}
Copy

New Samples​

Tiny Tactics​

High fidelity example of a tactics game, with multiple levels, AI, and pathfinding!

https://github.com/excaliburjs/sample-tactics

Jelly Jumper​

High fidelity sample of a platforming game with jump physics inspired by Super Mario World!

https://github.com/excaliburjs/sample-jelly-jumper

Excalibird​

This is a sample clone of the popular mobile game flappy bird.

https://github.com/excaliburjs/sample-excalibird/

Path finding​

Sample using the pathfinding plugin with A* and Dijkstra!

https://github.com/excaliburjs/sample-pathfinding

UI With HTML/CSS/JS​

Example of how to build vanilla html/css/js UIs with Excalibur code. The main gist is to put an HTML layer above the canvas layer and use that for UI.

https://github.com/excaliburjs/sample-html

JSFXR​

This is a quick demo project that uses the Excalibur-JSFXR Plugin to Create, Store, and Play generated sound effects!

https://github.com/excaliburjs/sample-jsfxr

New Templates​

Check out our new Tauri v2 and Capacitor.js templates for building Mobile and Desktop games!

Tauri comes with a nifty Rust backend, so if that's your jam, this might be the thing to use to go to all the app stores.

Capacitor.js is the spiritual successor of Cordova and provides a number of cross platform plugins to build for iOS and Android apps at the same time.

Performance, Performance, Performance​

This release really had a strong focus on improving performance across the board in Excalibur. Community member Autsider was a BIG BIG help in this area.

• New Image Renderer that has 2x performance of draws
• New "Sparse Hash Grid" Collision Spatial Data Structure that improves collision performance
• Code optimizations to remove allocations in the hot loop where possible
  • Reduces javascript GC pauses
  • Improves general speed of the engine
• ECS optimizations the speed up Entity queries

We also have a new Excalibur Bunnymark that stresses the renderer, I can get to 100k at 30fps on my Surface Pro Laptop!

New Features​

This release is JAM PACKED full of new cool stuff, and a lot of it was directly designed by community discussions on the discord!

Check out the full release notes for all the changes

ImageSource from SVG and Canvas​

You can now source images from SVG literal strings, SVG files, and HTML Canvas elements! This increases the flexibility of images that you can use to make your games. Plus SVG and Canvas rock 🤘

typescript
const svgExternal = new ex.ImageSource('../images/arrows.svg');
const svg = (tags: TemplateStringsArray) => tags[0];
const svgImage = ex.ImageSource.fromSvgString(svg`
  <svg version="1.1"
       id="svg2"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       sodipodi:docname="resize-full.svg" inkscape:version="0.48.4 r9939"
       xmlns="http://www.w3.org/2000/svg" 
       width="800px" height="800px"
       viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
  <path id="path18934" fill="#000000ff" inkscape:connector-curvature="0"  d="M670.312,0l177.246,177.295L606.348,418.506l175.146,175.146
      l241.211-241.211L1200,529.688V0H670.312z M418.506,606.348L177.295,847.559L0,670.312V1200h529.688l-177.246-177.295
      l241.211-241.211L418.506,606.348z"/>
  </svg>
`);
const myCanvas = document.createElement('canvas')!;
myCanvas.width = 100;
myCanvas.height = 100;
const ctx = myCanvas.getContext('2d')!;
ctx.fillStyle = ex.Color.Black.toRGBA();
ctx.fillRect(20, 20, 50, 50);
const canvasImage = ex.ImageSource.fromHtmlCanvasElement(myCanvas);
Copy

typescript
const svgExternal = new ex.ImageSource('../images/arrows.svg');
const svg = (tags: TemplateStringsArray) => tags[0];
const svgImage = ex.ImageSource.fromSvgString(svg`
  <svg version="1.1"
       id="svg2"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       sodipodi:docname="resize-full.svg" inkscape:version="0.48.4 r9939"
       xmlns="http://www.w3.org/2000/svg" 
       width="800px" height="800px"
       viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
  <path id="path18934" fill="#000000ff" inkscape:connector-curvature="0"  d="M670.312,0l177.246,177.295L606.348,418.506l175.146,175.146
      l241.211-241.211L1200,529.688V0H670.312z M418.506,606.348L177.295,847.559L0,670.312V1200h529.688l-177.246-177.295
      l241.211-241.211L418.506,606.348z"/>
  </svg>
`);
const myCanvas = document.createElement('canvas')!;
myCanvas.width = 100;
myCanvas.height = 100;
const ctx = myCanvas.getContext('2d')!;
ctx.fillStyle = ex.Color.Black.toRGBA();
ctx.fillRect(20, 20, 50, 50);
const canvasImage = ex.ImageSource.fromHtmlCanvasElement(myCanvas);
Copy

GPU Particles​

GPU particles give you the power to emit very large amounts of particles for low overhead. They have the same API as CPU particles.

typescript
var particles = new ex.GpuParticleEmitter({
  pos: ex.vec(100, 0),
  z: 1,
  emitterType: ex.EmitterType.Circle,
  maxParticles: 100_000,
  particle: {
    acc: ex.vec(0, 200),
    minSpeed: 1,
    maxSpeed: 5,
    opacity: 0.7,
    life: 7000,
    maxSize: 5,
    minSize: 5,
    startSize: 15,
    endSize: 1,
    beginColor: ex.Color.White,
    endColor: ex.Color.Transparent
  },
  radius: 600,
  emitRate: 1000,
  isEmitting: true
});
Copy

typescript
var particles = new ex.GpuParticleEmitter({
  pos: ex.vec(100, 0),
  z: 1,
  emitterType: ex.EmitterType.Circle,
  maxParticles: 100_000,
  particle: {
    acc: ex.vec(0, 200),
    minSpeed: 1,
    maxSpeed: 5,
    opacity: 0.7,
    life: 7000,
    maxSize: 5,
    minSize: 5,
    startSize: 15,
    endSize: 1,
    beginColor: ex.Color.White,
    endColor: ex.Color.Transparent
  },
  radius: 600,
  emitRate: 1000,
  isEmitting: true
});
Copy

Slide Scene Transition​

New ex.Slide scene transition, which can slide a screen shot of the current screen: up, down, left, or right. Optionally you can add an ex.EasingFunction, by default ex.EasingFunctions.Linear. Think the Legend of Zelda dungeon room transition

typescript
game.goToScene('otherScene', {
  destinationIn: new ex.Slide({
    duration: 1000,
    easingFunction: ex.EasingFunctions.EaseInOutCubic,
    slideDirection: 'up'
  })
});
Copy

typescript
game.goToScene('otherScene', {
  destinationIn: new ex.Slide({
    duration: 1000,
    easingFunction: ex.EasingFunctions.EaseInOutCubic,
    slideDirection: 'up'
  })
});
Copy

Bezier Curves & Actor.actions.curveTo/curveBy Actions​

We have Bezier!!!! Long time requested and desired, we can now use bezier curves and the new curveTo and curveBy actions to move actors around.

typescript
const start1 = ex.vec(500, 500);
const dest = ex.vec(500, 100);
const cp1 = ex.vec(100, 300);
const cp2 = ex.vec(150, 800);
// Curve object for sampling points
const curve = new ex.BezierCurve({
  controlPoints: [start1, cp1, cp2, dest],
  quality: 10
});
var points: ex.Vector[] = [];
const drawCurve = () => {
  points.length = 0;
  for (let i = 0; i < 100; i++) {
    points.push(curve.getPoint(i / 100));
  }
};
drawCurve();
// Use the curve action to move along a curve
actor.actions.repeatForever((ctx) => {
  ctx.curveTo({
    controlPoints: [cp1, cp2, dest],
    duration: 5000,
    mode: 'uniform'
  });
  ctx.curveTo({
    controlPoints: [cp2, cp1, start1],
    duration: 5000,
    mode: 'uniform'
  });
});
Copy

typescript
const start1 = ex.vec(500, 500);
const dest = ex.vec(500, 100);
const cp1 = ex.vec(100, 300);
const cp2 = ex.vec(150, 800);
// Curve object for sampling points
const curve = new ex.BezierCurve({
  controlPoints: [start1, cp1, cp2, dest],
  quality: 10
});
var points: ex.Vector[] = [];
const drawCurve = () => {
  points.length = 0;
  for (let i = 0; i < 100; i++) {
    points.push(curve.getPoint(i / 100));
  }
};
drawCurve();
// Use the curve action to move along a curve
actor.actions.repeatForever((ctx) => {
  ctx.curveTo({
    controlPoints: [cp1, cp2, dest],
    duration: 5000,
    mode: 'uniform'
  });
  ctx.curveTo({
    controlPoints: [cp2, cp1, start1],
    duration: 5000,
    mode: 'uniform'
  });
});
Copy

Flash Action​

We now have a convenient flash action that can be used to flash a color on your actor's graphics. This is super useful for things that take damage, or if you need to indicate something to the player.

typescript
actor.actions.flash(ex.Color.White, 1000)
Copy

typescript
actor.actions.flash(ex.Color.White, 1000)
Copy

Nine-Slice Sprites​

The newex.NineSlice Graphic can be for creating arbitrarily resizable rectangular regions, useful for creating UI, backgrounds, and other resizable elements.

typescript
var nineSlice = new ex.NineSlice({
  width: 300,
  height: 100,
  source: inputTile,
  sourceConfig: {
    width: 64,
    height: 64,
    topMargin: 5,
    leftMargin: 7,
    bottomMargin: 5,
    rightMargin: 7
  },
  destinationConfig: {
    drawCenter: true,
    horizontalStretch: ex.NineSliceStretch.Stretch,
    verticalStretch: ex.NineSliceStretch.Stretch
  }
});
actor.graphics.add(nineSlice);
Copy

typescript
var nineSlice = new ex.NineSlice({
  width: 300,
  height: 100,
  source: inputTile,
  sourceConfig: {
    width: 64,
    height: 64,
    topMargin: 5,
    leftMargin: 7,
    bottomMargin: 5,
    rightMargin: 7
  },
  destinationConfig: {
    drawCenter: true,
    horizontalStretch: ex.NineSliceStretch.Stretch,
    verticalStretch: ex.NineSliceStretch.Stretch
  }
});
actor.graphics.add(nineSlice);
Copy

Check out the demo

Tiling Sprites & Animations​

Brand new convenience types ex.TiledSprite and ex.TiledAnimation for Tiling Sprites and Animations

typescript
const tiledGroundSprite = new ex.TiledSprite({
  image: groundImage,
  width: game.screen.width,
  height: 200,
  wrapping: {
    x: ex.ImageWrapping.Repeat,
    y: ex.ImageWrapping.Clamp
  }
});
const tilingAnimation = new ex.TiledAnimation({
  animation: cardAnimation,
  sourceView: {x: 20, y: 20},
  width: 200,
  height: 200,
  wrapping: ex.ImageWrapping.Repeat
});
Copy

typescript
const tiledGroundSprite = new ex.TiledSprite({
  image: groundImage,
  width: game.screen.width,
  height: 200,
  wrapping: {
    x: ex.ImageWrapping.Repeat,
    y: ex.ImageWrapping.Clamp
  }
});
const tilingAnimation = new ex.TiledAnimation({
  animation: cardAnimation,
  sourceView: {x: 20, y: 20},
  width: 200,
  height: 200,
  wrapping: ex.ImageWrapping.Repeat
});
Copy

Full GIF Image Spec Support​

We now support the majority of the gif spec and can parse gif files as resources!

typescript
var gif: ex.Gif = new ex.Gif('./loading-screen.gif');
var gif2: ex.Gif = new ex.Gif('./sword.gif');
var gif3: ex.Gif = new ex.Gif('./stoplight.gif');
var loader = new ex.Loader([gif, gif2, gif3]);
game.start(loader).then(() => {
  var stoplight = new ex.Actor({
    x: game.currentScene.camera.x + 120,
    y: game.currentScene.camera.y,
    width: gif3.width,
    height: gif3.height
  });
  stoplight.graphics.add(gif3.toAnimation());
  game.add(stoplight);
  var sword = new ex.Actor({
    x: game.currentScene.camera.x - 120,
    y: game.currentScene.camera.y,
    width: gif2.width,
    height: gif2.height
  });
  sword.graphics.add(gif2.toAnimation());
  game.add(sword);
  var loading = new ex.Actor({
    x: game.currentScene.camera.x,
    y: game.currentScene.camera.y,
    width: gif2.width,
    height: gif2.height
  });
  loading.graphics.add(gif.toAnimation());
  game.add(loading);
});
Copy

typescript
var gif: ex.Gif = new ex.Gif('./loading-screen.gif');
var gif2: ex.Gif = new ex.Gif('./sword.gif');
var gif3: ex.Gif = new ex.Gif('./stoplight.gif');
var loader = new ex.Loader([gif, gif2, gif3]);
game.start(loader).then(() => {
  var stoplight = new ex.Actor({
    x: game.currentScene.camera.x + 120,
    y: game.currentScene.camera.y,
    width: gif3.width,
    height: gif3.height
  });
  stoplight.graphics.add(gif3.toAnimation());
  game.add(stoplight);
  var sword = new ex.Actor({
    x: game.currentScene.camera.x - 120,
    y: game.currentScene.camera.y,
    width: gif2.width,
    height: gif2.height
  });
  sword.graphics.add(gif2.toAnimation());
  game.add(sword);
  var loading = new ex.Actor({
    x: game.currentScene.camera.x,
    y: game.currentScene.camera.y,
    width: gif2.width,
    height: gif2.height
  });
  loading.graphics.add(gif.toAnimation());
  game.add(loading);
});
Copy

GPU Garbage Collection​

Excalibur now watches for textures that have not been drawn in 60 seconds and unloads them from the GPU. This is essential for the bigger games with lots of different assets over time.

Coroutine Improvements​

• Nested coroutines
• Awaitable
• Custom schedules
• Stop/start/resume

Caliburn Games​

The Excalibur.js contributors are offering consulting services! You can hire us to do game dev, custom dev, or support! If you're interested check out our current list of products https://caliburn.games/products/

Caliburn Games' goal is to build friendly games in TypeScript and support the Excalibur.js community and open source project.

The Glorious Future​

We are really excited and optimistic about the future of Excalibur.js and we have a lot of cool plans for 2025. We are re-affirming our commitment to being an open source project, we will always be open source and will never change the license from BSD.

New Ventures​

1. Keep an eye out for Excalibur courses @ https://excaliburjs.tv, we are looking to publish a number of free and paid course options.

2. We are building an OPEN SOURCE "Excalibur Studio" visual editor, this is to further our mission to bring game development to as many people as possible. The editor will be a pay what you want model, where $0 is totally acceptable. We don't want income to be a boundary for people to get into making games.

3. Caliburn Games will be publishing games to various platforms so look out for them in 2025! Also reach out if you are interested in hiring us to help with your games!

Road Excalibur v1​

Our plan is to have a release candidate for v1 in early 2025, the core engine is reaching a point where we are really happy with it. Not much will change in the API from v0.30.0 to v1.0.0.

A lot of folks have asked about WebGPU, we are going to wait on a renderer implementation until the standardization of the API to stabilize and for WebGPU implementations to be on by default in browsers.

Next on the plan:

• More performance!
• Physics enhancements! Ropes! Inverse Kinematics!
• Headless Excalibur on the server
• Input mapping and A11y improvements
• 2D Lighting support

THANK YOU​

We've been working on Excalibur.js for over a decade and it's been a lot of fun

EXCALIBUR!!!

GIF of Cal courtesy of discord user hintoflime

After the winter break, the team has released [email protected] with a lot of improvements to the core engine and plugins! Check the roadmap for our current plans.

Check out the new version on npm!

> npm install [email protected]
Copy

> npm install [email protected]
Copy

"Winter holiday, when developers work on their side projects" - Anonymous Coworker

Dev tools​

> npm install @excaliburjs/dev-tools
Copy

> npm install @excaliburjs/dev-tools
Copy

We've built a new tool to help debug Excalibur games! This tool lets you see information about the Excalibur engine, scenes, actors, clocks, and more!

Debugging why things aren't working has historically been pretty difficult. This plugin will greatly assist in the game development cycle. Nearly everything is available and configurable.

It's pretty low effort to install into your game:

typescript
import { DevTool } from '@excaliburjs/dev-tools';
const game = new ex.Engine({...});
const devtool = new DevTool(game);
Copy

typescript
import { DevTool } from '@excaliburjs/dev-tools';
const game = new ex.Engine({...});
const devtool = new DevTool(game);
Copy

Tiled updates​

> npm install @excaliburjs/plugin-tiled
Copy

> npm install @excaliburjs/plugin-tiled
Copy

The Tiled plugin now implicitly adds a z-index to each layer (which can be overridden) which means things will look as you expect in Excalibur as they do in the Tiled editor.

Set the starting layer z (defaults to -1) and get gaming!

typescript
const map = new TiledMapResource('path/to/map.tmx', { firstLayerZIndex: -2 });
Copy

typescript
const map = new TiledMapResource('path/to/map.tmx', { firstLayerZIndex: -2 });
Copy

Renderer performance improvements​

The performance gains were achieved through some core renderer refactors and identifying places where expensive calculations could be cached!

This is huge, we stay above 30fps in the 4000 actor benchmark, and we have dramatic improvement in average fps in both cases!

This benchmark was performed in Chrome on a Surface Book 2 with the power plugged in.

• Processor: Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz, 2112 Mhz, 4 Core(s), 8 Logical Processor(s)
• Physical Memory: (RAM) 16.0 GB
• Graphics: NVIDIA GeForce GTX 1060

A number of improvements were made to the Excalibur graphics systems to get to this performance. The big factors to this improvement were:

1. Avoiding recalculation of graphics transforms and other expensive operations when they can be cached
2. Refactoring the renderer to be simpler and to use index buffers to share geometry vertices.
3. Rendering batches at the actual maximum for the batch renderer
4. Avoid recreating Matrix types, they are somewhat expensive to create then garbage collect

Post processing​

The postprocessor improvements allow custom WebGL shaders, which can produce some cool effects! (Minimally modified from this ShaderToy)

To produce the above effect, Excalibur has a new built in ScreenShader type for doing quick shaders meant for the whole screen.

typescript
class CrtPostProcessor implements ex.PostProcessor {
  private _shader: ex.ScreenShader;
  initialize(gl: WebGLRenderingContext): void {
    const crtEffectSource = document.getElementById("modified-crt-shader-source").innerText;
    this._shader = new ex.ScreenShader(crtEffectSource);
  }
  getLayout(): ex.VertexLayout {
    return this._shader.getLayout();
  }
  getShader(): ex.Shader {
    return this._shader.getShader();
  }
}
game.graphicsContext.addPostProcessor(new CrtPostProcessor());
Copy

typescript
class CrtPostProcessor implements ex.PostProcessor {
  private _shader: ex.ScreenShader;
  initialize(gl: WebGLRenderingContext): void {
    const crtEffectSource = document.getElementById("modified-crt-shader-source").innerText;
    this._shader = new ex.ScreenShader(crtEffectSource);
  }
  getLayout(): ex.VertexLayout {
    return this._shader.getLayout();
  }
  getShader(): ex.Shader {
    return this._shader.getShader();
  }
}
game.graphicsContext.addPostProcessor(new CrtPostProcessor());
Copy

Renderer improvements​

Renderer design​

When v0.25.0 was released, it was a "monolithic" renderer design, meaning everything Excalibur could possibly draw was built into a single renderer and shader program. This became onerous fairly quickly. And as the old adage goes: "you don't know how to build something until you've built it twice".

With v0.25.2, each type of drawing is split internally into separate renderer plugins. While this does come with some overhead when switching shader programs, it's worth it for the the simplicity, maintainability, and extensibility benefits.

Image filtering​

Excalibur now allows you the ability to control the WebGL image filtering mode both implicitly and explicitly. Really this means Excalibur will try to pick a smart default, but allows overrides

Explicitly when loading ex.ImageSource:

typescript
const myImage = new ex.ImageSource('path/to/image', false, ex.ImageFiltering.Pixel);
Copy

typescript
const myImage = new ex.ImageSource('path/to/image', false, ex.ImageFiltering.Pixel);
Copy

• ex.ImageFiltering.Blended - Blended is useful when you have high resolution artwork and would like it blended and smoothed

  

• ex.ImageFiltering.Pixel - Pixel is useful for pixel art when you do not want smoothing aka antialiasing applied to your graphics.

  

Implicitly if the ex.EngineOption antialiasing property is set:

• antialiasing: true, then the blend mode defaults to ex.ImageFiltering.Blended
• antialiasing: false, then the blend mode defaults to ex.ImageFiltering.Pixel

Custom renderer plugins​

Excalibur knows how to draw many types of graphics to the screen by default comes with those pre-installed into the ExcaliburGraphicsContext. However, you may have a unique requirement to provide custom WebGL commands into Excalibur, this can be done with a custom renderer plugin.

A custom renderer can be registered with Excalibur and draw in any draw routine! Read more in the docs about custom rendere plugins

typescript
const game = new ex.Engine({...});
export class MyCustomRenderer extends ex.RendererPlugin {
    public readonly type = 'myrenderer';
    ...
}
game.start().then(() => {
    // register
    game.graphicsContext.register(new MyCustomRenderer());
});
// call from a graphics callback or event
const actor = new ex.Actor({...});
actor.graphics.onPostDraw = (graphicsContext) => {
    graphicsContext.draw<MyCustomRenderer>('myrenderer', ...);
}
Copy

typescript
const game = new ex.Engine({...});
export class MyCustomRenderer extends ex.RendererPlugin {
    public readonly type = 'myrenderer';
    ...
}
game.start().then(() => {
    // register
    game.graphicsContext.register(new MyCustomRenderer());
});
// call from a graphics callback or event
const actor = new ex.Actor({...});
actor.graphics.onPostDraw = (graphicsContext) => {
    graphicsContext.draw<MyCustomRenderer>('myrenderer', ...);
}
Copy

Community​

We've had a lot of community engagement this iteration, especially through the issues and github discussions. Lots of good issues, and lots of cool things in the show and tell

Big thanks to everyone who helped with this release:

• @ivasilov
• @luttje
• @tsanyqudsi
• @lampewebdev
• @joshuadoan
• @berkayyildiz
• @simon-jaeger
• @YJDoc2
• @JumpLink

The future​

We are progressing at full speed toward the v1 vision, there is still a lot to do but the end is in sight. Here are a few things that I'm personally really excited for:

• Event system redo
• Particle system refactor
• Final deprecation of old drawing api
• New TileMap enhancements for hexagonal and isometric maps

This was a point release, but despite that a lot of exciting things were added! Looking forward to v0.26.0!

-Erik

After a year of work, a lot of great additions and improvements have made it into Excalibur, and we are making good progress towards our v1.0 release! Check the development roadmap for our current plans. It's hard to believe how different things are now since the first commit of Excalibur (back when it was called GameTS)!

Excalibur started as a tech demo in a presentation to show how powerful TypeScript can be. The engine has come so far since then, it's really amazing!

We are really excited to share this release with you! This release contains over 30 bug fixes and 50 new features! It's been a labor of love over the last year by many people, and we have some big features to share.

Check out the official release!

npm install [email protected]

Performance​

There is a combination of features (mentioned below) that resulted in big performance gains. Across the board, there's been a dramatic increase in what Excalibur can do in v0.25.0 vs v0.24.5.

In the gif below, we demonstrate the graphics performance specifically.

There is much better performance across the board with a higher baseline FPS in v0.25.0 for the same number of actors. You'll notice that FPS improves over time as more actors are offscreen in v0.25.0 compared to v0.24.5.

This benchmark was performed in the Chrome browser on a Surface Book 2 with the power plugged in.

• Processor: Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz, 2112 Mhz, 4 Core(s), 8 Logical Processor(s)
• Physical Memory: (RAM) 16.0 GB
• Graphics: NVIDIA GeForce GTX 1060

New plugin versioning strategy​

We are adopting a similar versioning strategy to Angular, during pre-1.0. All plugins compatible with the core library will share the same prefix through the minor version. For example, if core Excalibur is [email protected], then the plugins that support that version are formatted like @excaliburjs/[email protected].

DisplayMode updates​

Excalibur DisplayModes have been refactored and renamed to clarify their utility.

• FillContainer - Fill the game viewport to take up as much of the immediate parent as possible
• FillScreen - Fill the game viewport to take up as much of the screen as possible
• FitContainer - Fit the game maintaining aspect ratio into the immediate parent
• FitScreen - Fit the game maintaining aspect ration into the screen
• Fixed - Specify a static size for the game width/height

Refactor to Entity Component System (ECS) based architecture​

The core plumbing of Excalibur has been refactored to use an ECS style architecture. However, developers using Excalibur do not need to know or care about the this underlying change to ECS if they don't want to.

What does ECS mean for Excalibur? At a high level, ECS architecture breaks down into three things:

• Components contain data needed for various systems.
• Systems implement the "behavior" by looping over entities that match a list of components.
  • For example, the graphics system processes all entities with a TransformComponent and a GraphicsComponent
• Entities are the "holders" of components

Actor, Scene, and Engine remain as the familiar interface to build games; they're only implemented differently under-the-hood. The reason for the change was to break down ever-growing and complex logic that had accumulated in the Actor and Scene implementations into Components and Systems for maintainability. This change increases the flexibility of Excalibur, and allows you to add new novel behavior directly into the core loop with custom components ones if you desire.

Excalibur does not have the purest implementation of an ECS by design; our built-in components are more than just data. The built-in components do provide behavior, convenience features, and helper functions to maintain our core mission of keeping Excalibur easy to use. The Excalibur core team goal with ECS is flexibility and maintainability, not performance. If you wish, you can read more about our goals for ECS.

Here's A quick example of using the new ECS features:

typescript
class SearchComponent extends ex.Component<'search'> {
    public readonly type = 'search'
    constructor(public target: ex.Vector) {
        super();
    }
}
class SearchSystem extends ex.System<ex.TransformComponent | SearchComponent> {
    // Types need to be listed as a const literal
    public readonly types = ['ex.transform', 'search'] as const;
    // Lower numbers mean higher priority
    // 99 is low priority
    public priority = 99;
    // Run this system in the "update" phase
    public systemType = ex.SystemType.Update
    private _searchSpeed = 10 // pixels/sec
    public update(entities: ex.Entity[], delta: number) {
        for (let entity of entities) {
            const target = entity.get(SearchComponent)!.target;
            // ex.TransformComponent is a built in type
            const transform = entity.get(ex.TransformComponent) as ex.TransformComponent;
            const direction = target.sub(transform.pos);
            const motion = direction.normalize().scale(this._searchSpeed);
            // Moves these entities towards the target at 10 pixels per second
            transform.pos = transform.pos.add(motion.scale(delta / 1000))
        }
    }
}
// Actors come with batteries included built in features
const actor = new ex.Actor({
    pos: ex.vec(100, 100),
    width: 30,
    height: 30,
    color: ex.Color.Red
});
actor.addComponent(new SearchComponent(ex.vec(400, 400)));
// Create a scene with your new system
const scene = new ex.Scene();
scene.world.add(new SearchSystem());
scene.add(actor);
Copy

typescript
class SearchComponent extends ex.Component<'search'> {
    public readonly type = 'search'
    constructor(public target: ex.Vector) {
        super();
    }
}
class SearchSystem extends ex.System<ex.TransformComponent | SearchComponent> {
    // Types need to be listed as a const literal
    public readonly types = ['ex.transform', 'search'] as const;
    // Lower numbers mean higher priority
    // 99 is low priority
    public priority = 99;
    // Run this system in the "update" phase
    public systemType = ex.SystemType.Update
    private _searchSpeed = 10 // pixels/sec
    public update(entities: ex.Entity[], delta: number) {
        for (let entity of entities) {
            const target = entity.get(SearchComponent)!.target;
            // ex.TransformComponent is a built in type
            const transform = entity.get(ex.TransformComponent) as ex.TransformComponent;
            const direction = target.sub(transform.pos);
            const motion = direction.normalize().scale(this._searchSpeed);
            // Moves these entities towards the target at 10 pixels per second
            transform.pos = transform.pos.add(motion.scale(delta / 1000))
        }
    }
}
// Actors come with batteries included built in features
const actor = new ex.Actor({
    pos: ex.vec(100, 100),
    width: 30,
    height: 30,
    color: ex.Color.Red
});
actor.addComponent(new SearchComponent(ex.vec(400, 400)));
// Create a scene with your new system
const scene = new ex.Scene();
scene.world.add(new SearchSystem());
scene.add(actor);
Copy

Collision system improvements​

The collision system has been significantly overhauled to improve the quality of the simulation and the stability of collisions. The core simulation loop "solver" has been redone to use an iterative impulse constraint solver, which provides a robust method of computing resolution that has improved performance and stability.

Collision intersection logic has now also been refactored to report multiple contact points at once. Multiple contacts improves the stability of stacks of colliders over single contact collisions (which can result in oscillations of boxes back and forth).

Colliding bodies can now optionally go to sleep. This relieves some of the pressure on the collision solver and improves the stability of the simulation by not moving these objects if they don't need to move. Colliders can be started asleep before a player in a game might interact with them

New CompositeColliders now make it possible to combine Excalibur Collider primitives (PolygonCollider, CircleCollider, and EdgeCollider) to make any arbitrary collision geometry. These new composite colliders power the new TileMap cell collisions and also power the new ex.Shape.Capsule(width, height) collider.

The Capsule collider is a useful geometry tool for making games with ramps or slightly jagged floors you want a character to glide over without getting stuck. This collider also helps with any "ghost collisions" that you might run into under certain conditions in your game.

CollisionGroups allow more granular control over what collides above and beyond collision type. Collsion groups allow you to create named groups of colliders like "player", "npc", or "enemy". With these groups, you can specify that players and enemies collide, player and npcs don't collide, and that npcs and enemies don't collide without needing to implement that logic in a collision event handler.

typescript
// Create a group for each distinct category of "collidable" in your game
const playerGroup = ex.CollisionGroupManager.create('player');
const npcGroup = ex.CollisionGroupManager.create('npcGroup');
const floorGroup = ex.CollisionGroupManager.create('floorGroup');
const enemyGroup = ex.CollisionGroupManager.create('enemyGroup');
// Define your rules
const playersCanCollideWith = ex.CollisionGroup.collidesWith([
  playersGroup, // collide with other players
  floorGroup, // collide with the floor
  enemyGroup // collide with enemies
]);
const player = new ex.Actor({
  collisionGroup: playersCanCollideWith
});
Copy

typescript
// Create a group for each distinct category of "collidable" in your game
const playerGroup = ex.CollisionGroupManager.create('player');
const npcGroup = ex.CollisionGroupManager.create('npcGroup');
const floorGroup = ex.CollisionGroupManager.create('floorGroup');
const enemyGroup = ex.CollisionGroupManager.create('enemyGroup');
// Define your rules
const playersCanCollideWith = ex.CollisionGroup.collidesWith([
  playersGroup, // collide with other players
  floorGroup, // collide with the floor
  enemyGroup // collide with enemies
]);
const player = new ex.Actor({
  collisionGroup: playersCanCollideWith
});
Copy

New graphics system​

The new Excalibur graphics system has been rebuilt from the ground up with speed in mind. It is now built on a WebGL foundation with a built-in batch renderer. This means that Excalibur will batch up draw commands and submit the minimum amount of draw calls to the machine when the screen is updated. This dramatically improves the draw performance and also the number of things wec can display on screen (as noted in the benchmarks earlier).

For drawing hooks the ExcaliburGraphicsContext is replacing the browser CanvasRenderingContext2D. If you still need to do some custom drawing using the CanvasRenderingContext2D the new Canvas graphic can help you out.

typescript
const canvas = new ex.Canvas({
  cache: true, // If true draw once until flagged dirty again, otherwise draw every time
  draw: (ctx: CanvasRenderingContext2D) => {
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 200, 200);
  }
});
actor.graphics.use(canvas);
Copy

typescript
const canvas = new ex.Canvas({
  cache: true, // If true draw once until flagged dirty again, otherwise draw every time
  draw: (ctx: CanvasRenderingContext2D) => {
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 200, 200);
  }
});
actor.graphics.use(canvas);
Copy

TileMap and Tiled updates​

Tiled is easily one of the best tools out there for building and designing levels for your game. It has certainly been a valuable tool in our toolbox. We have doubled down on our efforts to provide a first class Tiled integration with Excalibur via the excaliburjs/plugin-tiled. This work also involved a few improvements to the TileMap to improve it's graphics API and collision performance.

Check out the Tiled Excalibur Plugin!

• Full support for the Tiled object model
• Full support for all Tiled file types
• Excalibur built ins
• Not yet supported
  • Tiled Group Layers
  • Custom Tile colliders
  • Isometric/Hexagonal maps
  • Parallax

Documentation​

A lot of time was spent reviewing and improving our documentation. Part of this work was ensuring that the snippets don't go stale over time by building them in GitHub Actions.

Please check out the new and shiny doc site with new code examples at excaliburjs.com!

Testing​

The Excalibur core repo now has WallabyJS enabled to improve the VS Code test development and debugging experience. Wallaby is a paid tool; because of that Excalibur will always also support the Karma based testing framework for official tests.

A useful update to excalibur-jasmine allows async matchers, which greatly simplifies checking image diffs in Jasmine unit tests.

typescript
it('should match images', async () => {
  let engine = new ex.Engine({width: 100, height: 100});
  await expectAsync(engine.canvas).toEqualImage('images/expectedcanvas.png', .99);
});
Copy

typescript
it('should match images', async () => {
  let engine = new ex.Engine({width: 100, height: 100});
  await expectAsync(engine.canvas).toEqualImage('images/expectedcanvas.png', .99);
});
Copy

A brand new integration test utility has been created called @excaliburjs/testing, which provides a quick way to drive Excalibur games with Puppeteer and do image-based snapshot testing.

typescript
// excalibur testing
test('An integration test', async (page) => {
    // Check for the excalibur loaded page
    await expectLoaded();
    // Compare game to expected an expected image
    await expectPage('Can check a page', './images/actual-page.png').toBe('./images/expected-page.png');
    // Use puppeteer page object to interact
    await page.evaluate(() => {
        var actor = ((window as any).actor);
        actor.pos.x = 400;
        actor.pos.y = 400;
    });
    // Compare game to a new expected image
    await expectPage('Can move an actor and check', './images/actual-page-2.png').toBe('./images/expected-page-2.png');
});
Copy

typescript
// excalibur testing
test('An integration test', async (page) => {
    // Check for the excalibur loaded page
    await expectLoaded();
    // Compare game to expected an expected image
    await expectPage('Can check a page', './images/actual-page.png').toBe('./images/expected-page.png');
    // Use puppeteer page object to interact
    await page.evaluate(() => {
        var actor = ((window as any).actor);
        actor.pos.x = 400;
        actor.pos.y = 400;
    });
    // Compare game to a new expected image
    await expectPage('Can move an actor and check', './images/actual-page-2.png').toBe('./images/expected-page-2.png');
});
Copy

Templates​

There are a lot of different ways to build web apps; we've created repo templates for some of the popular ones:

• Webpack v5
• Parcel v2
• Parcel v1
• Rollup

Samples​

• Brick Breaker
• Platformer
• Shoot'em Up

Community​

We've had tons of community contributions since the last release. Heartfelt thanks to everyone in the discussions, issues and pull requests!

Contributors:

• @jedeen
• @kamranayub
• @alanag13
• @DaVince
• @DrSensor
• @djcsdy
• @catrielmuller
• @AndrewCraswell
• @miqh
• @rledford
• @SirPedr
• @helloausrine
• @dpayne5
• @herobank110
• @didii
• @Charkui
• @muirch
• @rumansaleem
• @mogoh
• @kala2
• @MrBartusek
• @josh-greenlaw
• @LokiMidgard
• @romaintailhurat
• @EduardoHidalgo
• @jaredegan

Breaking changes​

There are some breaking changes in v0.25.0 from v0.24.5; see the changelog and release notes for more specifics, but they generally fall into the categories below. See the migration guide for guidance.

• New APIs replacements
  • Graphics API
  • Actor drawing functions moved to graphics component
• API renames for clarity
• Bug fixed necessitated change
• Extracted behavior to a plugin
  • Perlin noise is now offered as a plugin and is no longer included in the core library @excaliburjs/plugin-perlin
• Big plugin changes
  • The Tiled plugin is now published under @excaliburjs/plugin-tiled and will start with version v0.25.0

Looking towards "version 1"​

• Pointer events plumbing refactor; the current system is hard to follow and debug/enhance
• Particle system refactor
• Graphics enhancements to support advanced postprocessing/shaders
• ExcaliburGraphicsContext enhancements to grant more flexibility
• Event system redo
• Better Scene management and granular asset loading
• Expand and enhance TileMap
• Progressive WebAssembly enhancements in the physics simulation
• Potential new plugins on the horizon
  • Browser Debugger Utility
  • Aseprite
  • Pyxel Edit
• AI patterns and plugins like A* search
• API finalization

I want to thank everyone who helped make this version of Excalibur possible. A lot of effort went into it and I'm really proud of what we achieved.

- Erik