Skip to content

Commit 6888d8f

Browse files
ShirajukiShirajuki
committed
feat: add kaplay and code cleanup
1 parent be6dd84 commit 6888d8f

File tree

11 files changed

+133
-37
lines changed

11 files changed

+133
-37
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"fpsmeter": "^0.3.1",
1919
"hilojs": "^2.0.2",
2020
"kaboom": "^2000.2.10",
21+
"kaplay": "^3001.0.12",
2122
"kontra": "^8.0.0",
2223
"melonjs": "^14.5.0",
2324
"phaser": "^3.55.2",

‎src/kaplay.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 }} Kaboom v3000 — 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/kaboom.js"></script>
12+
</body>
13+
</html>

‎src/partials/header.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<a href="./hilo.html">Hilo</a>
44
<a href="./kontra.html">Kontra</a>
55
<a href="./kaboom.html">Kaboom</a>
6+
<a href="./kaplay.html">Kaplay</a>
67
<a href="./melon.html">melonJS</a>
78
<a href="./two.html">Two.js</a>
89
<a href="./babylon.html">Babylon.js</a>

‎src/public/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ main>div {
132132
}
133133

134134
.container a.active {
135-
border-color: #fff;
136-
border-bottom-color: #fff;
135+
border-color: #fff !important;
136+
border-bottom-color: #fff !important;
137137
}
138138

139139
.count-container a:last-of-type {

‎src/scripts/babylon.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -73,17 +73,17 @@ class BabylonEngine extends Engine {
7373
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
7474
];
7575

76-
let circle;
76+
let particle;
7777
let filled;
7878
if (this.type === 'sprite') {
79-
circle = new BABYLON.Sprite('sprite', spriteManager);
80-
circle.width = 64;
81-
circle.height = 64;
82-
circle.angle = Math.PI;
83-
circle.invertU = true;
84-
circle.position.x = -x;
85-
circle.position.z = -y;
86-
circle.position.y = -i;
79+
particle = new BABYLON.Sprite('sprite', spriteManager);
80+
particle.width = 64;
81+
particle.height = 64;
82+
particle.angle = Math.PI;
83+
particle.invertU = true;
84+
particle.position.x = -x;
85+
particle.position.z = -y;
86+
particle.position.y = -i;
8787
} else {
8888
// Create circles by drawing lines in a 360 degree radius
8989
let points = [];
@@ -98,15 +98,15 @@ class BabylonEngine extends Engine {
9898
}
9999
circles[size] = points;
100100
}
101-
circle = BABYLON.MeshBuilder.CreateLines(
101+
particle = BABYLON.MeshBuilder.CreateLines(
102102
'circle',
103103
{ points: points, updatable: false },
104104
this.scene
105105
);
106-
circle.color = new BABYLON.Color3.White();
107-
circle.position.x = -x;
108-
circle.position.z = -y;
109-
circle.position.y = -i - 1;
106+
particle.color = new BABYLON.Color3.White();
107+
particle.position.x = -x;
108+
particle.position.z = -y;
109+
particle.position.y = -i - 1;
110110
if (this.type === 'fill') {
111111
const mat = new BABYLON.StandardMaterial('mat1', this.scene);
112112
mat.alpha = 1;
@@ -126,11 +126,11 @@ class BabylonEngine extends Engine {
126126
filled.position.x = -x;
127127
filled.position.z = -y;
128128
filled.position.y = -i;
129-
circle.color = new BABYLON.Color3.Black();
129+
particle.color = new BABYLON.Color3.Black();
130130
}
131131
}
132132

133-
particles[i] = { x, y, size: size, dx, dy, el: [circle, filled] };
133+
particles[i] = { x, y, size: size, dx, dy, el: [particle, filled] };
134134
}
135135
this.particles = particles;
136136
}

‎src/scripts/engine.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ class Engine {
4949
for (const link of this.countLinks) {
5050
link.classList.toggle('active', false);
5151
}
52-
const link = [...this.countLinks].filter((l) => l.innerText === count)[0];
52+
const link = [...this.countLinks].filter((l) => Number.parseInt(l.innerText) === count)[0];
5353
if (link) {
5454
link.classList.toggle('active', true);
5555
this.count = count;

‎src/scripts/hilo.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,35 +70,35 @@ class HiloEngine extends Engine {
7070
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
7171
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
7272
];
73-
let circle;
73+
let particle;
7474
if (this.type === 'sprite') {
75-
circle = new Hilo.Bitmap({
75+
particle = new Hilo.Bitmap({
7676
image: 'sprite.png',
7777
}).addTo(this.graphicScene);
7878
} else {
79-
circle = new Hilo.Graphics({
79+
particle = new Hilo.Graphics({
8080
width: size * 2,
8181
height: size * 2,
8282
x: x,
8383
y: y,
8484
});
8585
if (this.type === 'stroke')
86-
circle
86+
particle
8787
.lineStyle(1, '#ffffff')
8888
.drawCircle(1, 1, size - 1)
8989
.closePath()
9090
.endFill()
9191
.addTo(this.graphicScene);
9292
else if (this.type === 'fill')
93-
circle
93+
particle
9494
.beginFill('#fff')
9595
.lineStyle(1, '#000000')
9696
.drawCircle(1, 1, size - 1)
9797
.closePath()
9898
.endFill()
9999
.addTo(this.graphicScene);
100100
}
101-
particles[i] = { x, y, size: size, dx, dy, el: circle };
101+
particles[i] = { x, y, size: size, dx, dy, el: particle };
102102
}
103103
this.particles = particles;
104104
}

‎src/scripts/kaboom.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ class KaboomEngine extends Engine {
3030
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
3131
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
3232
];
33-
let circle;
33+
let particle;
3434
if (this.type === 'sprite') {
35-
circle = k.add([k.sprite('sprite'), k.pos(x, y)]);
35+
particle = k.add([k.sprite('sprite'), k.pos(x, y)]);
3636
} else {
37-
circle = k.add([
37+
particle = k.add([
3838
k.pos(x, y),
3939
k.circle(size),
4040
k.opacity(this.type === 'stroke' ? 0 : 1),
@@ -45,7 +45,7 @@ class KaboomEngine extends Engine {
4545
]);
4646
}
4747

48-
particles[i] = { x, y, size: size, dx, dy, el: circle };
48+
particles[i] = { x, y, size: size, dx, dy, el: particle };
4949
}
5050
this.particles = particles;
5151
}

‎src/scripts/kaplay.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import kaboom from 'kaboom';
2+
import Engine from './engine.js';
3+
4+
class KaplayEngine extends Engine {
5+
init() {
6+
super.init();
7+
8+
const k = kaplay({
9+
background: [26, 26, 26],
10+
global: false,
11+
canvas: this.canvas,
12+
width: this.width,
13+
height: this.height,
14+
});
15+
k.loadSprite('sprite', 'sprite.png');
16+
this.k = k;
17+
18+
// Clear the canvas
19+
this.canvas.innerHTML = '';
20+
window.cancelAnimationFrame(this.request);
21+
22+
// Particle creation
23+
const particles = new Array(this.count);
24+
const rnd = [1, -1];
25+
for (let i = 0; i < this.count; i++) {
26+
const size = 10 + Math.random() * 80;
27+
const x = Math.random() * this.width;
28+
const y = Math.random() * (this.height - size);
29+
const [dx, dy] = [
30+
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
31+
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
32+
];
33+
let particle;
34+
if (this.type === 'sprite') {
35+
particle = k.add([k.sprite('sprite'), k.pos(x, y)]);
36+
} else {
37+
particle = k.add([
38+
k.pos(x, y),
39+
k.circle(size),
40+
k.opacity(this.type === 'stroke' ? 0 : 1),
41+
k.outline(
42+
1,
43+
this.type === 'stroke' ? k.rgb(255, 255, 255) : k.rgb(0, 0, 0)
44+
),
45+
]);
46+
}
47+
48+
particles[i] = { x, y, size: size, dx, dy, el: particle };
49+
}
50+
this.particles = particles;
51+
}
52+
render() {
53+
const k = this.k;
54+
k.onUpdate(() => {
55+
// Particle animation
56+
const particles = this.particles;
57+
for (let i = 0; i < this.count; i++) {
58+
const r = particles[i];
59+
r.x -= r.dx;
60+
r.y -= r.dy;
61+
if (r.x + r.size < 0) r.dx *= -1;
62+
else if (r.y + r.size < 0) r.dy *= -1;
63+
if (r.x > this.width) r.dx *= -1;
64+
else if (r.y > this.height) r.dy *= -1;
65+
r.el.pos.x = r.x;
66+
r.el.pos.y = r.y;
67+
}
68+
this.fpsmeter.tick();
69+
});
70+
}
71+
}
72+
73+
document.addEventListener('DOMContentLoaded', () => {
74+
const engine = new KaplayEngine();
75+
engine.render();
76+
});

‎src/scripts/two.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@ class TwoEngine extends Engine {
3333
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
3434
3 * Math.random() * rnd[Math.floor(Math.random() * 2)],
3535
];
36-
let circle;
36+
let particle;
3737
if (this.type === 'sprite') {
38-
circle = new Two.Sprite('sprite.png', x, y, 1, 1);
39-
this.two.add(circle);
38+
particle = new Two.Sprite('sprite.png', x, y, 1, 1);
39+
this.two.add(particle);
4040
} else {
41-
circle = this.two.makeCircle(0, 0, size);
42-
if (this.type === 'stroke') circle.noFill().stroke = '#ffffff';
43-
else if (this.type === 'fill') circle.stroke = '#000000';
41+
particle = this.two.makeCircle(0, 0, size);
42+
if (this.type === 'stroke') particle.noFill().stroke = '#ffffff';
43+
else if (this.type === 'fill') particle.stroke = '#000000';
4444
}
45-
circle.position.set(0, 0);
46-
particles[i] = { x, y, size: size, dx, dy, el: circle };
45+
particle.position.set(0, 0);
46+
particles[i] = { x, y, size: size, dx, dy, el: particle };
4747
}
4848
this.particles = particles;
4949
}

0 commit comments

Comments
 (0)