engine.
import { Game } from "./game.js";
import { Renderer } from "./renderer.js"
import * as Input from "./input.js";
import { Settings } from "./settings.js";
export class Engine
{
public cvs: HTMLCanvasElement;
public gfx: CanvasRenderingContext2D;
public frameCounter: HTMLDivElement;
public renderer: Renderer;
public game: Game;
public time: number;
private lastTime: number = 0.0;
private frames: number = 0;
public static fps: number = 0;
constructor()
{
// Block drag event
let body = document.querySelector("body") as HTMLBodyElement;
body.addEventListener("contextmenu", e => e.stopPropagation(), false);
body.ondragstart = () => { return false };
body.onselectstart = () => { return false };
// Disable spacebar scrolling
window.addEventListener('keydown', e =>
{
if (e.key == " " && e.target == document.body)
e.preventDefault();
});
this.cvs = document.querySelector("#canvas") as HTMLCanvasElement;
this.cvs.setAttribute("width", Settings.width.toString());
this.cvs.setAttribute("height", Settings.height.toString());
this.gfx = this.cvs.getContext("2d") as CanvasRenderingContext2D;
this.frameCounter = document.querySelector(".frame_counter") as HTMLDivElement;
this.renderer = new Renderer(this.gfx);
this.game = new Game(this.renderer);
this.time = 0;
Input.init(this);
}
start(): void
{
window.requestAnimationFrame(this.run.bind(this));
}
run(t: number): void // Gameloop
{
let elapsedTime = t - this.time;
// Time feedback for focus losing
if (elapsedTime > 500.0)
this.lastTime += elapsedTime;
let delta = elapsedTime / 1000.0;
this.time += elapsedTime;
if (this.time - this.lastTime >= 1000.0)
{
Engine.fps = this.frames;
this.frameCounter.innerHTML = this.frames + "fps";
this.lastTime += 1000.0;
this.frames = 0;
}
this.frames++;
if (!Settings.paused)
{
this.update(delta);
this.render();
}
else
{
this.gfx.font = "48px system-ui";
this.gfx.fillText("PAUSE", 4, 40);
}
window.requestAnimationFrame(this.run.bind(this));
}
update(delta: number): void
{
this.game.update(delta);
Input.update();
}
render(): void
{
this.gfx.clearRect(0, 0, Settings.width, Settings.height);
this.game.render(this.renderer);
}
}game
import { Vector2 } from "./math.js";
import * as Input from "./input.js";
import * as Util from "./util.js";
import { Renderer } from "./renderer.js";
import { Camera } from "./camera.js";
import { RigidBody, Type } from "./rigidbody.js";
import { World } from "./world.js";
import { Box } from "./box.js";
import { Circle } from "./circle.js";
import { GenerationShape, MouseMode, Settings, updateSetting } from "./settings.js";
import { demos } from "./demo.js";
import { GrabJoint } from "./grab.js";
import { Polygon } from "./polygon.js";
import { AABB, createAABB, fix } from "./aabb.js";
export let gWorld: World;
export class Game
{
private renderer: Renderer;
public camera: Camera;
private world: World;
public cursorPos: Vector2 = new Vector2(0, 0);
public deltaTime: number = 0.0;
public time: number = 0.0;
public frame: number = 0;
private cameraPosStart!: Vector2;
private cursorStart!: Vector2;
private dragging = false;
private cameraMove = false;
private grabbing = false;
private bindPosition!: Vector2;
private target!: RigidBody;
private grabJoint!: GrabJoint;
private currentDemo = 0;
public callback = () => { };
constructor(renderer: Renderer)
{
this.renderer = renderer;
this.camera = new Camera();
this.camera.position = new Vector2(0, Settings.clipHeight / 2.0);
let projectionTransform = Util.orth(-Settings.clipWidth / 2.0, Settings.clipWidth / 2.0, -Settings.clipHeight / 2.0, Settings.clipHeight / 2.0);
let viewportTransform = Util.viewport(Settings.width, Settings.height);
this.renderer.init(viewportTransform, projectionTransform, this.camera.cameraTransform);
this.world = new World();
gWorld = this.world;
const restartBtn = document.querySelector("#restart") as HTMLButtonElement;
restartBtn.addEventListener("click", () =>
{
this.initDemo();
});
const demoSelect = document.querySelector("#demo_select") as HTMLSelectElement;
demos.forEach((demo) =>
{
let option = document.createElement("option");
option.innerHTML = Reflect.get(demo, "SimulationName");
demoSelect.appendChild(option);
});
demoSelect.addEventListener("input", () =>
{
this.currentDemo = demoSelect.selectedIndex;
this.initDemo();
});
demoSelect.selectedIndex = this.currentDemo;
this.initDemo();
}
initDemo(): void
{
this.frame = 0;
this.time = 0.0;
if (Settings.resetCamera)
{
this.camera.position = new Vector2(0, Settings.clipHeight / 2.0);
this.camera.scale = new Vector2(1, 1);
}
this.world.reset();
this.callback = () => { };
demos[this.currentDemo](this, this.world);
}
update(delta: number): void
{
this.deltaTime = delta;
this.frame++;
this.time += delta;
this.handleInput(delta);
this.callback();
this.world.update(delta);
}
private handleInput(delta: number)
{
const mx = Input.isKeyDown("ArrowLeft") ? -1 : Input.isKeyDown("ArrowRight") ? 1 : 0;
const my = Input.isKeyDown("ArrowDown") ? -1 : Input.isKeyDown("ArrowUp") ? 1 : 0;
this.camera.translate(new Vector2(mx, my).mul(delta * 10 * this.camera.scale.x));
let tmpCursorPos = this.renderer.pick(Input.mousePosition);
this.cursorPos.x = tmpCursorPos.x;
this.cursorPos.y = tmpCursorPos.y;
if (!this.dragging && Input.isMousePressed(Input.Button.Middle))
{
this.cursorStart = this.cursorPos.copy();
this.dragging = true;
}
if (this.dragging && Input.isMouseReleased(Input.Button.Middle))
{
this.dragging = false;
let aabb = new AABB(this.cursorStart.copy(), this.cursorPos.copy());
fix(aabb);
let bodies = this.world.queryRegion(aabb);
for (let i = 0; i < bodies.length; i++)
{
let b = bodies[i];
this.world.unregister(b.id);
}
}
if (Input.isScrolling())
{
this.camera.scale.x += Input.mouseScroll.y * 0.1;
this.camera.scale.y += Input.mouseScroll.y * 0.1;
if (this.camera.scale.x < 0.1)
{
this.camera.scale.x = 0.1;
this.camera.scale.y = 0.1;
}
}
if (!this.cameraMove && Input.isMousePressed(Input.Button.Right))
{
this.cameraMove = true;
this.cursorStart = Input.mousePosition.copy();
this.cameraPosStart = this.camera.position.copy();
}
else if (Input.isMouseReleased(Input.Button.Right))
{
this.cameraMove = false;
}
if (this.cameraMove)
{
let dist = Input.mousePosition.sub(this.cursorStart);
dist.x *= -(Settings.clipWidth / Settings.width) * this.camera.scale.x;
dist.y *= -(Settings.clipHeight / Settings.height) * this.camera.scale.y;
this.camera.position = this.cameraPosStart.add(dist);
}
if (this.grabbing && !this.cameraMove)
{
if (Input.isMouseReleased(Input.Button.Left))
{
if (Settings.mode == MouseMode.Force)
{
this.world.forceIntegration = true;
let bindInGlobal = this.target.localToGlobal.mulVector2(this.bindPosition, 1);
let force = this.cursorPos.sub(bindInGlobal).mul(this.target.mass).mul(Settings.frequency * (0.8 + Settings.mouseStrength / 3.0));
let torque = bindInGlobal.sub(this.target.localToGlobal.mulVector2(new Vector2(0, 0), 1)).cross(force);
this.target.force.x += force.x;
this.target.force.y += force.y;
this.target.torque += torque;
this.target.awake();
}
else if (Settings.mode == MouseMode.Grab)
{
this.world.forceIntegration = false;
this.world.unregister(this.grabJoint.id, true);
}
this.grabbing = false;
}
}
if (Input.isMousePressed(Input.Button.Left))
{
let skipGeneration = false;
let bodies = this.world.queryPoint(this.cursorPos);
for (let i = 0; i < bodies.length; i++)
{
let b = bodies[i];
if (b.type != Type.Static)
{
this.grabbing = true;
if (Settings.grabCenter)
this.bindPosition = new Vector2(0, 0);
else
this.bindPosition = b.globalToLocal.mulVector2(this.cursorPos, 1);
this.target = b;
skipGeneration = true;
break;
}
}
if (skipGeneration && Settings.mode == MouseMode.Grab)
{
let bind = Settings.grabCenter ? this.target.position : this.cursorPos.copy();
this.grabJoint = new GrabJoint(this.target, bind, this.cursorPos, Settings.mouseStrength, undefined);
this.world.register(this.grabJoint);
}
if (!skipGeneration && !this.cameraMove)
{
let nb!: RigidBody;
let nbs = Settings.newBodySettings;
switch (nbs.shape)
{
case GenerationShape.Box:
{
nb = new Box(nbs.size, nbs.size, Type.Dynamic, nbs.density);
break;
}
case GenerationShape.Circle:
{
nb = new Circle(nbs.size / 2.0, Type.Dynamic, nbs.density);
break;
}
case GenerationShape.Regular:
{
nb = Util.createRegularPolygon(nbs.size / 2.0, nbs.numVertices, undefined, nbs.density);
break;
}
case GenerationShape.Random:
{
nb = Util.createRandomConvexBody(Math.random() * nbs.size / 3 + nbs.size / 2, undefined, nbs.density);
break;
}
}
nb.position = this.cursorPos;
nb.friction = nbs.friction;
nb.restitution = nbs.restitution;
this.world.register(nb);
}
}
if (Input.isMousePressed(Input.Button.Right))
{
let bodies = this.world.queryPoint(this.cursorPos);
if (bodies.length != 0)
{
this.world.unregister(bodies[0].id);
}
}
if (Input.isKeyPressed("r")) this.initDemo();
if (Input.isKeyPressed("m")) updateSetting("m");
if (Input.isKeyPressed("p")) updateSetting("p");
if (Input.isKeyPressed("g")) { this.world.surprise(); updateSetting("g"); }
if (Input.isKeyPressed("b")) updateSetting("b");
if (Input.isKeyPressed("i")) updateSetting("i");
if (Input.isKeyPressed("f")) updateSetting("f");
if (Input.isKeyPressed("v")) updateSetting("v");
}
render(r: Renderer): void
{
r.setCameraTransform(this.camera.cameraTransform);
// Body, Bounding box, Center of Mass rendering
for (let i = 0; i < this.world.bodies.length; i++)
{
let b = this.world.bodies[i];
let outlineWidth = 1.0;
if (Settings.colorizeBody || Settings.colorizeIsland || (Settings.colorizeActiveBody && !b.sleeping))
{
let id = Settings.colorizeIsland ? b.islandID : b.id;
if (!(Settings.colorizeBody || Settings.colorizeIsland))
id = b.islandID;
let hStride = 17;
let sStride = 5;
let lStride = 3;
let period = Math.trunc(360 / hStride);
let cycle = Math.trunc(id / period);
// let dir = (cycle & 1) == 1 ? -1 : 1;
let h = (id - 1) * hStride;
let s = 100 - (cycle * sStride) % 21;
let l = 75 - (cycle * lStride) % 17;
if (!(Settings.colorizeBody || Settings.colorizeIsland))
l = Util.clamp(l + 10, 0, 100);
let color = b.type == Type.Static ? "#f0f0f0" : `hsl(${h}, ${s}%, ${l}%)`;
r.drawBody(b, Settings.indicateCoM, outlineWidth, true, true, "#000000", color);
}
else
{
r.drawBody(b, Settings.indicateCoM, outlineWidth);
}
if (Settings.showBoundingBox)
{
let aabb = createAABB(b);
r.drawAABB(aabb);
}
if (Settings.showContactLink)
{
for (let m = 0; m < b.manifoldIDs.length; m++)
{
let id = b.manifoldIDs[m];
let manifold = this.world.manifoldMap.get(id)!;
if (manifold.bodyA.type == Type.Static || manifold.bodyB.type == Type.Static)
continue;
if (manifold.bodyA.id == b.id)
r.drawLineV(manifold.bodyB.position, manifold.bodyA.position, 1.0);
}
}
}
// Rendering for mouse forcing
if (this.grabbing && (Settings.mode == MouseMode.Force))
{
let bindInGlobal = this.target.localToGlobal.mulVector2(this.bindPosition, 1);
r.drawCircleV(bindInGlobal, 0.03);
r.drawVectorP(bindInGlobal, this.cursorPos);
}
// Rendering contact manifold
if (Settings.indicateCP)
{
for (let i = 0; i < this.world.manifolds.length; i++)
{
let m = this.world.manifolds[i];
let j = 0;
let mid = new Vector2();
for (; j < m.numContacts; j++)
{
mid = mid.add(m.contactPoints[j].point);
r.drawCircleV(m.contactPoints[j].point, 0.04);
}
mid = mid.div(j);
r.drawVectorP(mid, mid.add(m.contactNormal.mul(0.2)), 0.015)
}
}
// Joint rendering
for (let i = 0; i < this.world.joints.length; i++)
{
let j = this.world.joints[i];
r.drawJoint(j);
}
// Log rigid body information
let line = 0;
if (Settings.showProfile)
{
r.log("Bodies: " + String(this.world.numBodies), line++);
r.log("Joints: " + String(this.world.numJoints), line++);
r.log("Contacts: " + String(this.world.manifolds.length), line++);
r.log("Islands: " + String(this.world.numIslands), line++);
r.log("Sleeping dynamic bodies: " + String(this.world.sleepingBodies), line++);
r.log("Sleeping islands: " + String(this.world.sleepingIslands), line++);
line++;
}
if (Settings.showInfo)
{
let found = false;
let bodies = this.world.queryPoint(this.cursorPos);
if (bodies.length != 0)
{
this.target = bodies[0];
found = true;
}
if (found)
{
r.log("Type: " + String(Type[this.target.type]), line++);
r.log("Mass: " + String(this.target.mass) + "kg", line++);
r.log("Moment of inertia: " + String((this.target.inertia).toFixed(4)) + "kg⋅m²", line++);
if (this.target instanceof Polygon)
{
if (this.target instanceof Box)
{
r.log("Density: " + String((this.target as Box).density.toFixed(4)) + "kg/m²", line++);
r.log("Area: " + String((this.target as Box).area.toFixed(4)) + "m²", line++);
}
else
{
r.log("Density: " + String((this.target as Polygon).density.toFixed(4)) + "kg/m²", line++);
r.log("Area: " + String((this.target as Polygon).area.toFixed(4)) + "m²", line++);
}
} else if (this.target instanceof Circle)
{
r.log("Density: " + String((this.target as Circle).density.toFixed(4)) + "kg/m²", line++);
r.log("Area: " + String((this.target as Circle).area.toFixed(4)) + "m²", line++);
}
r.log("Friction: " + String(this.target.friction), line++);
r.log("Restitution: " + String(this.target.restitution), line++);
r.log("Position: [" + String(this.target.position.x.toFixed(4)) + ", " + String(this.target.position.y.toFixed(4)) + "]", line++);
r.log("Rotation: " + String(this.target.rotation.toFixed(4)) + "rad", line++);
r.log("Linear velocity: [" + String((this.target.linearVelocity.x / 100).toFixed(4)) + ", " + String((this.target.linearVelocity.y / 100).toFixed(4)) + "]m/s", line++);
r.log("Angular velocity: " + String(this.target.angularVelocity.toFixed(4)) + "rad/s", line++);
r.log("Surface velocity: " + String(this.target.surfaceSpeed.toFixed(4)) + "m/s", line++);
r.log("Contacts: " + this.target.manifoldIDs.length, line++);
r.log("Joints: " + this.target.jointIDs.length, line++);
r.log("Island: " + this.target.islandID, line++);
r.log("Sleeping: " + this.target.sleeping, line++);
}
}
if (Settings.visualizeAABBTree)
{
this.world.tree.traverse(node =>
{
r.drawAABB(node!.aabb, 1.0, !node.isLeaf ? "#00000055" : "#000000");
})
}
if (this.dragging && Input.isMouseDown(Input.Button.Middle))
{
let aabb = new AABB(this.cursorStart.copy(), this.cursorPos.copy());
fix(aabb);
r.drawAABB(aabb);
}
}
}
Comments