Skip to content

Commit 6bc5896

Browse files
ShirajukiShirajuki
committed
feat: add excaliburjs
1 parent 6888d8f commit 6bc5896

File tree

9 files changed

+149
-17
lines changed

9 files changed

+149
-17
lines changed

‎README.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,18 @@ This is a sprite-based performance test that compares a set of Javascript-based
1111
- Compare drawing of graphics/shapes and sprites through the type query
1212
- Different libraries used to render the scene are chosen only if they have been maintained in the previous month of this benchmark. The following libraries compared and sorted by popularity (stars) are:
1313

14-
| Name | Stars | Last Commit | Description | Game engine |
15-
| ----------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
16-
| [three.js](https://github.com/mrdoob/three.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/mrdoob/three.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/mrdoob/three.js) | JavaScript 3D library. | no |
17-
| [PixiJS](https://github.com/pixijs/pixi.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/pixijs/pixi.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/pixijs/pixi.js) | The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. | no |
18-
| [Phaser](https://github.com/photonstorm/phaser) | ![GitHub Repo stars](https://img.shields.io/github/stars/photonstorm/phaser) | ![GitHub last commit](https://img.shields.io/github/last-commit/photonstorm/phaser) | Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. | yes |
19-
| [Babylon.js](https://github.com/BabylonJS/Babylon.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/BabylonJS/Babylon.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/BabylonJS/Babylon.js) | Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. | yes |
20-
| [Two.js](https://github.com/jonobr1/two.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/jonobr1/two.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/jonobr1/two.js) | A renderer agnostic two-dimensional drawing api for the web. | no |
21-
| [Hilo](https://github.com/hiloteam/Hilo) | ![GitHub Repo stars](https://img.shields.io/github/stars/hiloteam/Hilo) | ![GitHub last commit](https://img.shields.io/github/last-commit/hiloteam/Hilo) | A Cross-end HTML5 Game development solution developed by Alibaba Group | yes |
22-
| [MelonJS](https://github.com/melonjs/melonjs) | ![GitHub Repo stars](https://img.shields.io/github/stars/melonjs/melonjs) | ![GitHub last commit](https://img.shields.io/github/last-commit/melonjs/melonjs) | A fresh & lightweight javascript game engine. | yes |
23-
| [Kaboom](https://github.com/replit/kaboom) | ![GitHub Repo stars](https://img.shields.io/github/stars/replit/kaboom) | ![GitHub last commit](https://img.shields.io/github/last-commit/replit/kaboom) | 💥 JavaScript game library. | yes |
24-
| [Kontra](https://github.com/straker/kontra) | ![GitHub Repo stars](https://img.shields.io/github/stars/straker/kontra) | ![GitHub last commit](https://img.shields.io/github/last-commit/straker/kontra) | A lightweight JavaScript gaming micro-library, optimized for js13kGames. | yes |
14+
| Name | Stars | Last Commit | Description | Game engine |
15+
| ----------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
16+
| [three.js](https://github.com/mrdoob/three.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/mrdoob/three.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/mrdoob/three.js) | JavaScript 3D library. | no |
17+
| [PixiJS](https://github.com/pixijs/pixi.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/pixijs/pixi.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/pixijs/pixi.js) | The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. | no |
18+
| [Phaser](https://github.com/photonstorm/phaser) | ![GitHub Repo stars](https://img.shields.io/github/stars/photonstorm/phaser) | ![GitHub last commit](https://img.shields.io/github/last-commit/photonstorm/phaser) | Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. | yes |
19+
| [Babylon.js](https://github.com/BabylonJS/Babylon.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/BabylonJS/Babylon.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/BabylonJS/Babylon.js) | Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. | yes |
20+
| [Two.js](https://github.com/jonobr1/two.js) | ![GitHub Repo stars](https://img.shields.io/github/stars/jonobr1/two.js) | ![GitHub last commit](https://img.shields.io/github/last-commit/jonobr1/two.js) | A renderer agnostic two-dimensional drawing api for the web. | no |
21+
| [Hilo](https://github.com/hiloteam/Hilo) | ![GitHub Repo stars](https://img.shields.io/github/stars/hiloteam/Hilo) | ![GitHub last commit](https://img.shields.io/github/last-commit/hiloteam/Hilo) | A Cross-end HTML5 Game development solution developed by Alibaba Group | yes |
22+
| [MelonJS](https://github.com/melonjs/melonjs) | ![GitHub Repo stars](https://img.shields.io/github/stars/melonjs/melonjs) | ![GitHub last commit](https://img.shields.io/github/last-commit/melonjs/melonjs) | A fresh & lightweight javascript game engine. | yes |
23+
| [Kaboom](https://github.com/replit/kaboom) | ![GitHub Repo stars](https://img.shields.io/github/stars/replit/kaboom) | ![GitHub last commit](https://img.shields.io/github/last-commit/replit/kaboom) | 💥 JavaScript game library. | yes |
24+
| [Kontra](https://github.com/straker/kontra) | ![GitHub Repo stars](https://img.shields.io/github/stars/straker/kontra) | ![GitHub last commit](https://img.shields.io/github/last-commit/straker/kontra) | A lightweight JavaScript gaming micro-library, optimized for js13kGames. | yes |
25+
| [Excalibur](https://github.com/excaliburjs/Excalibur) | ![GitHub Repo stars](https://img.shields.io/github/stars/excaliburjs/Excalibur) | ![GitHub last commit](https://img.shields.io/github/last-commit/excaliburjs/Excalibur) | 🎮 Your friendly TypeScript 2D game engine for the web 🗡️ | yes |
2526

2627
## Canvas and WebGL
2728

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"dependencies": {
1717
"babylonjs": "^5.42.0",
18+
"excalibur": "^0.30.3",
1819
"fpsmeter": "^0.3.1",
1920
"hilojs": "^2.0.2",
2021
"kaboom": "^2000.2.10",

‎src/excalibur.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
{{#> head }} Excalibur — JS Game Rendering Benchmark {{/head}}
4+
<body>
5+
{{> header }}
6+
<main>
7+
{{> container }}
8+
<canvas id="canvas" class="canvas"></canvas>
9+
</main>
10+
{{> footer }}
11+
<script type="module" src="/scripts/excalibur.js"></script>
12+
</body>
13+
</html>

‎src/partials/footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<footer>
22
<div class="name-container">
3-
<a class="name" href="https://shirajuki.js.org">Shirajuki</a
3+
<a class="name" href="https://jonny.ngoluong.no">Jonny</a
44
><span>© 2025</span>
55
</div>
66
<div>

‎src/partials/header.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<header>
22
<nav>
3+
<a href="./excalibur.html">Excalibur</a>
34
<a href="./hilo.html">Hilo</a>
45
<a href="./kontra.html">Kontra</a>
56
<a href="./kaboom.html">Kaboom</a>

‎src/public/style.css

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ a:hover {
3030
color: #934ddd;
3131
}
3232

33+
html {
34+
zoom: 0.9;
35+
}
36+
3337
body {
3438
margin: 0;
3539
min-width: 320px;
@@ -38,8 +42,8 @@ body {
3842
}
3943

4044
header {
41-
padding: 1rem 2rem 0 2rem;
42-
height: 90px;
45+
padding: 2rem;
46+
min-height: 90px;
4347
font-size: 26px;
4448
}
4549

@@ -53,18 +57,18 @@ main {
5357
padding: 0 2rem;
5458
max-width: 100vw;
5559
overflow-x: hidden;
56-
min-height: calc(100vh - 90px - 90px);
5760
}
5861

5962
footer {
63+
position: fixed;
6064
display: flex;
6165
flex-direction: column;
6266
justify-content: flex-end;
6367
gap: 0.25rem;
6468
bottom: 0;
6569
width: 100%;
6670
height: 90px;
67-
padding: 1rem 2rem;
71+
padding: 2rem;
6872
}
6973

7074
footer .name {

‎src/scripts/excalibur.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import * as ex from 'excalibur';
2+
import Engine from './engine.js';
3+
4+
export class Scene extends ex.Scene {
5+
onActivate(ctx) {
6+
const engine = ctx.engine;
7+
this.engine = ctx.data.engine;
8+
9+
this.clear();
10+
11+
// Particle creation
12+
const particles = new Array(this.engine.count);
13+
const rnd = [1, -1];
14+
const spriteImage = new ex.ImageSource('sprite.png');
15+
spriteImage.load();
16+
for (let i = 0; i < this.engine.count; i++) {
17+
const size = 10 + Math.random() * 80;
18+
const x = Math.random() * this.engine.width;
19+
const y = Math.random() * (this.engine.height - size);
20+
const [dx, dy] = [
21+
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
22+
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
23+
];
24+
25+
const particle = new ex.Actor({
26+
x: x,
27+
y: y,
28+
radius: size,
29+
});
30+
31+
if (this.engine.type === 'sprite') {
32+
const sprite = ex.Sprite.from(spriteImage);
33+
particle.graphics.use(sprite);
34+
} else {
35+
const circle = new ex.Circle({
36+
x: x,
37+
y: y,
38+
radius: size,
39+
color:
40+
this.engine.type === 'stroke'
41+
? ex.Color.Transparent
42+
: ex.Color.fromRGB(255, 255, 255),
43+
strokeColor:
44+
this.engine.type === 'stroke'
45+
? ex.Color.fromRGB(255, 255, 255)
46+
: ex.Color.fromRGB(0, 0, 0),
47+
strokeWidth: this.engine.type === 'stroke' ? 1 : undefined,
48+
});
49+
particle.graphics.use(circle);
50+
}
51+
this.add(particle);
52+
53+
particles[i] = { x, y, size: size, dx, dy, el: particle };
54+
55+
particle.on("postupdate", () => {
56+
const r = particles[i];
57+
r.x -= r.dx;
58+
r.y -= r.dy;
59+
if (r.x + r.size < 0) r.dx *= -1;
60+
else if (r.y + r.size < 0) r.dy *= -1;
61+
if (r.x > engine.screen.drawWidth) r.dx *= -1;
62+
else if (r.y > engine.screen.drawHeight) r.dy *= -1;
63+
r.el.pos.x = r.x;
64+
r.el.pos.y = r.y;
65+
});
66+
}
67+
}
68+
onPostUpdate() {
69+
this.engine.fpsmeter.tick();
70+
}
71+
}
72+
73+
class ExcaliburEngine extends Engine {
74+
init() {
75+
super.init();
76+
77+
window.cancelAnimationFrame(this.request);
78+
if (this.game) {
79+
this.game.dispose();
80+
this.canvas = document.createElement("canvas");
81+
this.canvas.id = "canvas";
82+
this.canvas.className = "canvas";
83+
this.canvas.width = this.width;
84+
this.canvas.height = this.height;
85+
document.querySelector("main").appendChild(this.canvas);
86+
}
87+
88+
const game = new ex.Engine({
89+
width: this.width,
90+
height: this.height,
91+
canvasElement: this.canvas,
92+
backgroundColor: ex.Color.fromRGB(26, 26, 26),
93+
scenes: { scene: Scene }
94+
});
95+
this.game = game;
96+
}
97+
render() {
98+
this.game.start().then(() => {
99+
this.game.goToScene('scene', { sceneActivationData: { engine: this } });
100+
});
101+
}
102+
}
103+
104+
document.addEventListener('DOMContentLoaded', () => {
105+
const engine = new ExcaliburEngine();
106+
engine.render();
107+
});

‎src/scripts/kaplay.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import kaboom from 'kaboom';
1+
import kaplay from 'kaplay';
22
import Engine from './engine.js';
33

44
class KaplayEngine extends Engine {

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -517,6 +517,11 @@ eventemitter3@^5.0.0:
517517
resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.0.tgz"
518518
integrity sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg==
519519

520+
excalibur@^0.30.3:
521+
version "0.30.3"
522+
resolved "https://registry.yarnpkg.com/excalibur/-/excalibur-0.30.3.tgz#e005ae22f85b64bddf6bb788b406e42d3a8a0946"
523+
integrity sha512-RUP3qQ6tFe9BJxvqh6p/I0B9rKMu+KGlHZruJyVOohiYUtCP0LsRgkVHxezvWtWsvCElVBL4PeCooE4KPlIldA==
524+
520525
fpsmeter@^0.3.1:
521526
version "0.3.1"
522527
resolved "https://registry.npmjs.org/fpsmeter/-/fpsmeter-0.3.1.tgz"

0 commit comments

Comments
 (0)