1 of 80

Building Excalibur.js

Open Source TypeScript Game Engine

Erik Onarheim // IGDATC July 2024

2 of 80

TypeScript first, 2D open source, batteries included, free game engine. We make the easy stuff easy and the hard stuff also easy.

Classic developer trap

We have tons of features to make the hard stuff easy

Graphics helpers
Sound
Particles
2 Collisions systems
Game Pad Support
Tiled Support
Actions API for scripting behavior

You can read more at excaliburjs.com

Building a game engine is one of those classic developer traps that will suck you in for long periods of time, like quines, compiler development or category theory

Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas. Our goal is to make it easier for you to create 2D HTML/JS games, whether you're new to game development or you're an experienced game developer. We take care of all of the boilerplate engine code, cross-platform targeting (using browserstack 😎), and more! Use as much or as little as you need!

Why JavaScript? It’s the lingua franca of the web!

3 of 80

Fellow Maintainers, Contributors, and Partners in Crime

Jae Edeen - https://www.edeen.dev/

Kamran Ayub - https://kamranicus.com/

Matt Jennings - https://mattjennin.gs/

Justin Young - https://mookie4242.itch.io/

Chad Elstad - https://www.smartmarbles.com/

Chris K - https://www.chrisk-7777.com/

Drew Conley - https://drewconley.dev/

Alan Grgic - @spellgrgicright

4 of 80

About Me

@ErikOnarheim

erikonarheim.com

excaliburjs.com

🏢 Full Stack Dev

🕹️ Game Dev

👶 New Dad

😻 Cat Lover

🏃‍♂️ Distance Runner

🚀 Math/Physics Nerd

5 of 80

Agenda

The History, Motivation, and Philosophy
How Does Excalibur Work?
Building Games
Features of Excalibur
Building the API and Design Decisions
How to build games
And the future!
Q&A

6 of 80

Why?

7 of 80

Releases

8 of 80

9 of 80

Excalibur Philosophy

❤️ Friendly Everywhere

🛠️ Low Effort to Use

🧠 Intuitive APIs

⚡ Performance Balanced with Usability

10 of 80

Features

📖 Lots of documentation at excaliburjs.com

🎥 API based on a theater metaphor of Scenes and Actors

📦 OOP TypeScript first API similar to Unity/Godot

🏃 SpriteSheet, Sprites, and Animations

💥 Built in collisions with Arcade or Realistic physics

🧩 2D and Isometric TileMaps

🎨 Custom shader support

🖼️ Auto draw batching

🎁 Entity Component System!

11 of 80

Plugins

🗺️ Tiled maps

🧩 LDtk levels

🎯 Sprite Fusion levels

🖌️ Aseprite image files

🎶 JSFXR audio

↗️ A* Pathfinding

12 of 80

Templates

Vanilla

Vite

Parcel

Webpack

Rollup

Capacitor.js

Electron

Tauri

13 of 80

Browser Extension

14 of 80

Samples

15 of 80

16 of 80

Sweepstacks: Most Popular Game

Top 100 on LDJam 31

Lessons learned

Not colorblind friendly
Memory leak crashed windows phones after hours of play
Dedicated QA is powerful

17 of 80

Sum Monsters:

2nd Most Popular

18 of 80

Let’s build a game!

“The dirty secret to building games (or software) is tricking you users into thinking it’s working”

- Erik Onarheim

19 of 80

Backup Video

20 of 80

Tiny Tactics

21 of 80

How does Excalibur work?

22 of 80

Architecture:

Engine Mainloop

🚂

23 of 80

Architecture:�Scene

24 of 80

Excalibur ECS

💎Purity is not the goal

🧠Users need not know it exists

⚡Purely to increase performance

💼Code Organization

25 of 80

ECS Design

World

Systems
Components
Entities
Queries

26 of 80

Architecture: Actor/Entity

27 of 80

Architecture: Actor/Entity

28 of 80

Graphics

Context Abstraction

WebGL2 based

Pixel Art Presets

MSAA

Renderer Plugins

Shaders

Post Processing

Automatically batched draw calls

29 of 80

Architecture:

Graphics

30 of 80

Graphics Context:

Mimics 2D Canvas API

31 of 80

Custom Shaders

Outline Shader

Fire Shader

32 of 80

Post

Processing

33 of 80

Sound

34 of 80

Collisions

Detection

Broadphase Spatial partitioning
Narrowphase SAT

Resolution Arcade & Realistic

Multi-contact
Impulse based physics
Iterative Constraint Satisfaction

35 of 80

Collision Resolution: Arcade

36 of 80

How does it work

37 of 80

38 of 80

39 of 80

Collision Resolution: Realistic

Impulse Based Constraint Solver

40 of 80

Particles

Currently CPU

GPU Particles Coming Soon

41 of 80

TileMaps &

Isometric Maps

42 of 80

Coroutines

43 of 80

JavaScript Optimizations

Measure, optimize, repeat

Efficient Data Structures “Do Less Work”

C-style loops

Avoid recursion

Reduce/remove allocation in hot loops

Object pooling

Caching

44 of 80

The FUTURE

45 of 80

The Future: Accessibility

Accessibility

Improved Color Blindness Support
High Contrast Postprocessing
HTML Based UI
ARIA Announcer
Control Input Mapping & OOTB UI

46 of 80

The Future: Headless

Multiplayer servers

Node/Bun/QuickJS capabilities

Faster tests

47 of 80

The Future: WebGPU

TSL Support Adapter

Promise of Greater Performance

48 of 80

The Future: Continuous Collision

Erin Catto, GDC 2013

49 of 80

The Future: Excalibur Studio

50 of 80

The Future: Consoles

Excalibur JS Runtime

Native bindings to SDKs and other APIs
wgpu.rs
Dawn

51 of 80

The Future: Publishing

Sum Monsters - Steam

Sweepstacks - Mobile

52 of 80

Shameless Plugs

Newsletter! - news.excaliburjs.com

Excaliburjs.tv - excaliburjs.tv

Blogs - excaliburjs.com/blog

YouTube - https://www.youtube.com/@ErikOnarheim

2D Con in August

53 of 80

Arcade Style Platformer

54 of 80

Arcade Style Platformer

55 of 80

Arcade Style Platformer

56 of 80

Arcade Style Platformer

57 of 80

Arcade Style Platformer

58 of 80

Arcade Style Platformer

59 of 80

Arcade Style Platformer

60 of 80

Arcade Style Platformer

61 of 80

Arcade Style Platformer

https://github.com/excaliburjs/sample-platformer/tree/presentation

62 of 80

Samples & Templates

63 of 80

Examples

64 of 80

Examples

65 of 80

Docs

66 of 80

Advice for building games

Don’t build a game engine 😅
Paper prototype
Identify the core play loop(s)
Find the fun
“Juice”
Practice with Game Jams

67 of 80

68 of 80

Sweepstacks: Most Popular Game

Top 100 on LDJam 31

Lessons learned

Not colorblind friendly
Memory leak crashed windows phones after hours of play
Dedicated QA is powerful

69 of 80

Running an Open-Source Project: More than Code

Running an open source project takes a time investment

Docs are never done, they are a garden that needs tending� - Docs are the single most important thing to get right if you want people to use your thing

JSDoc or Javadoc or Doxygen is not enough, you need samples/examples and thorough explanations
Tell me why you want to use a feature and when to use it
Tautological comments for a doThing() “does the thing” does not help anyone

Community

Building a community takes time and effort

Hacktoberfest is a great way to start attracting people

Is also a garden that needs tending, toxic individuals need to be pruned. Block, report, etc quickly
Code of conduct in place early
Create an anonymous “project” account/email that isn’t your personal that can deliver critical feedback

Contributions are never done

Accepting contributions is hard, turning down contributions is even harder
Have a contributing document for people, have a check list
Make sure you have clear guidelines around what you deem acceptable code in your contributing.md and issue/pr templates
Contributions are only as good as your issues, groom them with as much detail as possible or close them
Feedback needs to be kind, respectful, clear, and concise. Avoid midwesternism like “It would be nice if…” or “we could…” the intent doesn’t traverse language barriers well. “Please do x, y, z, thank you”

Everyone wants to be loved and respected

Automation is your friend

Automate all the things, helps with consistency, but also your sanity
Most OSS folks do stuff in their spare time, so there is no time to waste
At least 1 integration/e2e test, can be a snapshot “does the software boot”
Renovate bot to manage your dependencies and auto-merge in CI (contingent on your CI predicting working software)
Automate your release process, tools like github auto release notes

Cross browser testing

BrowserStack, Saucelabs have open source skus

The CODE

What is the API UX like, is it easy to do the wrong thing?
Think about your license
Keep a consistent coding style across time is challenging
Use tools like linters/formatters
Build an api style guide for people to reference

Avoid spending money (unless you should)

Get what you pay for is true here, so if something is going to be critical to your business probably should pay for it
A lot of products out there have Open source skus
Github
Github pages hosting (custom domains)
GitHub actions for CI/CD
Netlify static sites
BrowserStack/SauceLabs open source skus

Celebrate your successes

70 of 80

Documentation is the most important thing

71 of 80

Community is like a garden

72 of 80

Contributions are never over

Contributions are never done

Accepting contributions is hard, turning down contributions is even harder
Have a contributing document for people, have a check list (keep it brief)
Make sure you have clear guidelines around what you deem acceptable code in your contributing.md and issue/pr templates
Sometimes issues opened can be frustrating, but there can often be a nuget of truth in their (unless they are a bad actor then ignore them and block/report)
Contributions are only as good as your issues, groom them with as much detail as possible or close them
Feedback needs to be kind, respectful, clear, and concise. Avoid midwesternism like “It would be nice if…” or “we could…” the intent doesn’t traverse language barriers well. “Please do x, y, z, thank you”

Everyone wants to be loved and respected

73 of 80

Automate all the things

74 of 80

The Code™

75 of 80

Avoid spending money (unless you should)

76 of 80

Sustainable Open Source

77 of 80

Celebrate your successes!

78 of 80

What’s next for Excalibur?

The Roadmap

Accessibility Updates

More Plugins for popular tools (Aseprite, Tiled, Pyxel, etc)

Performance Improvements

Resource Management

Web Workers

WebGPU

WASM Optimization using AssemblyScript

79 of 80

More info

Contributing to OSS: https://www.pluralsight.com/courses/contributing-open-source-project-github

Blog: https://erikonarheim.com

YouTube: https://www.youtube.com/c/ErikOnarheim

Twitch: https://www.twitch.tv/eonarheim

Podcast: Script & Style with David Walsh and Todd Gardner

80 of 80

Q&A