Skip to content

Commit 3277f95

Browse files
Xerren09Xerren09
committed
Cleanup
1 parent bf1f1fc commit 3277f95

20 files changed

+436
-354
lines changed

‎__api.ts

-41
This file was deleted.

‎demo.ts

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {
2+
EntityEngine,
3+
Entity,
4+
AnimatedSprite,
5+
Sprite,
6+
RectCollider,
7+
CircleCollider,
8+
SpriteSheet,
9+
spriteSheetLoader
10+
} from "./index.js"
11+
12+
const engine = new EntityEngine("gameArea");
13+
14+
let player: Entity;
15+
let block: Entity;
16+
let circle: Entity;
17+
let mousePosition = { x: 150, y: 150 };
18+
19+
const spriteSheet = new SpriteSheet("spritesheet.png", { width: 25, height: 25 });
20+
21+
engine.addEventListener("awake", () => {
22+
console.log("awake event");
23+
//
24+
const demoSprite = new Sprite(["#FF00FF"], { width: 25, height: 25 });
25+
const demoSpliceSprite = new Sprite([1, 2, 3, 4, 5], spriteSheet.tileSize, spriteSheet);
26+
//
27+
block = new Entity("block");
28+
block.Size = { width: 150, height: 25 };
29+
block.Sprite = new AnimatedSprite(500, [1, 2, 3, 4, 5], spriteSheet.tileSize, spriteSheet);
30+
block.Position = { x: 300, y: 300 };
31+
block.Collider = new RectCollider(block.Size);
32+
block.Tags.push("block");
33+
engine.Entities.Register(block);
34+
//
35+
circle = new Entity("circle");
36+
circle.Size = { width: 100, height: 100 };
37+
circle.Sprite = demoSpliceSprite;
38+
circle.Position = { x: 100, y: 100 };
39+
circle.Collider = new CircleCollider(50);
40+
circle.Tags.push("circle");
41+
circle.Rotation = 45;
42+
engine.Entities.Register(circle);
43+
//
44+
player = new Entity("player");
45+
player.Size = { width: 100, height: 25 };
46+
player.Sprite = demoSpliceSprite; //new AnimatedSprite(500, [1, 2, 3, 4, 5], spriteSheet); //new Sprite("testSpriteNormal", [1], "testSheet");
47+
player.Position = { x: 100, y: 100 };
48+
player.Collider = new RectCollider(player.Size);//new CircleCollider(player, 50);
49+
engine.Entities.Register(player);
50+
//
51+
});
52+
53+
let timer = performance.now();
54+
55+
engine.addEventListener("update", (time) => {
56+
//console.log("update event");
57+
//
58+
timer = performance.now();
59+
const step = (50 * time.delta);
60+
player.Position = mousePosition;
61+
//player.MoveTowards(mousePosition, step);
62+
const rot = (15 * time.delta);
63+
player.Rotation += rot;
64+
player.Size.height += (10 * time.delta);
65+
//console.log(player.Collider.isOversecting(block));
66+
if (circle.IsIntersecting(player)) {
67+
console.log(`Collision with ${circle.ID}`);
68+
}
69+
if (player.IsIntersecting(block)) {
70+
console.log(`Collision with ${block.ID}`);
71+
}
72+
console.log(time.lastRenderTime);
73+
});
74+
75+
engine.Renderer.options.drawColliders = true;
76+
engine.Renderer.options.drawEntityBounds = true;
77+
engine.Renderer.canvas.addEventListener("mousemove", function (e) {
78+
var cRect = engine.Renderer.canvas.getBoundingClientRect();
79+
var canvasX = Math.round(e.clientX - cRect.left);
80+
var canvasY = Math.round(e.clientY - cRect.top);
81+
mousePosition = { x: canvasX, y: canvasY };
82+
});
83+
84+
spriteSheetLoader(spriteSheet).then(() => {
85+
engine.start();
86+
});

‎index.ts

+57-84
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,57 @@
1-
import Entity from "./lib/Entities/Entity.js";
2-
import AnimatedSprite from "./lib/Sprites/AnimatedSprite.js";
3-
import SpriteSheet from "./lib/Sprites/SpriteSheet.js";
4-
import { RectCollider } from "./lib/Entities/Collision/Colliders/Rectangle.js";
5-
import Sprite from "./lib/Sprites/Sprite.js";
6-
import { CircleCollider } from "./lib/Entities/Collision/Colliders/Circle.js";
7-
import EntityEngine from "./lib/Engine/Core.js";
8-
import { spriteSheetLoader } from "./lib/Sprites/SpriteSheets.js";
9-
10-
const engine = new EntityEngine("gameArea");
11-
12-
let player: Entity;
13-
let block: Entity;
14-
let circle: Entity;
15-
let mousePosition = { x: 150, y: 150 };
16-
17-
const spriteSheet = new SpriteSheet("spritesheet.png", { width: 25, height: 25 });
18-
19-
engine.addEventListener("awake", () => {
20-
console.log("awake event");
21-
//
22-
const demoSprite = new Sprite(["#FF00FF"], { width: 25, height: 25 });
23-
const demoSpliceSprite = new Sprite([1, 2, 3, 4, 5], { width: 25, height: 25 }, spriteSheet);
24-
//
25-
block = new Entity("block");
26-
block.Size = { width: 150, height: 25 };
27-
block.Sprite = demoSpliceSprite;
28-
block.Position = { x: 300, y: 300 };
29-
block.Collider = new RectCollider(block.Size);
30-
block.Tags.push("block");
31-
engine.Entities.Register(block);
32-
//
33-
circle = new Entity("circle");
34-
circle.Size = { width: 100, height: 100 };
35-
circle.Sprite = demoSpliceSprite;
36-
circle.Position = { x: 100, y: 100 };
37-
circle.Collider = new CircleCollider(50);
38-
circle.Tags.push("circle");
39-
circle.Rotation = 45;
40-
engine.Entities.Register(circle);
41-
//
42-
player = new Entity("player");
43-
player.Size = { width: 100, height: 25 };
44-
player.Sprite = demoSpliceSprite; //new AnimatedSprite(500, [1, 2, 3, 4, 5], spriteSheet); //new Sprite("testSpriteNormal", [1], "testSheet");
45-
player.Position = { x: 100, y: 100 };
46-
player.Collider = new RectCollider(player.Size);//new CircleCollider(player, 50);
47-
engine.Entities.Register(player);
48-
//
49-
});
50-
51-
let timer = performance.now();
52-
53-
engine.addEventListener("update", (time) => {
54-
//console.log("update event");
55-
//
56-
timer = performance.now();
57-
const step = (50 * time.delta);
58-
player.Position = mousePosition;
59-
//player.MoveTowards(mousePosition, step);
60-
const rot = (15 * time.delta);
61-
player.Rotation += rot;
62-
player.Size.height += (10 * time.delta);
63-
//console.log(player.Collider.isOversecting(block));
64-
if (circle.IsIntersecting(player)) {
65-
console.log(`Collision with ${circle.ID}`);
66-
}
67-
if (player.IsIntersecting(block)) {
68-
console.log(`Collision with ${block.ID}`);
69-
}
70-
console.log(time.lastRenderTime);
71-
});
72-
73-
engine.Renderer.options.drawColliders = true;
74-
engine.Renderer.options.drawEntityBounds = true;
75-
engine.Renderer.canvas.addEventListener("mousemove", function (e) {
76-
var cRect = engine.Renderer.canvas.getBoundingClientRect();
77-
var canvasX = Math.round(e.clientX - cRect.left);
78-
var canvasY = Math.round(e.clientY - cRect.top);
79-
mousePosition = { x: canvasX, y: canvasY };
80-
});
81-
82-
spriteSheetLoader(spriteSheet).then(() => {
83-
engine.start();
84-
});
1+
//-----------------------------
2+
// Engine exports
3+
//-----------------------------
4+
export {
5+
default as EntityEngine,
6+
ENGINE_EVENTS
7+
} from "./lib/Engine/Core.js";
8+
//-----------------------------
9+
// Entities
10+
//-----------------------------
11+
export { default as Entity } from "./lib/Entities/Entity.js";
12+
//-----------------------------
13+
// Math
14+
//-----------------------------
15+
export { Vector2D } from "./lib/Math/Vector2D.js"
16+
//-----------------------------
17+
// Colliders
18+
//-----------------------------
19+
export { RectCollider } from "./lib/Entities/Collision/Colliders/Rectangle.js"
20+
export { CircleCollider } from "./lib/Entities/Collision/Colliders/Circle.js"
21+
export { Collider } from "./lib/Entities/Collision/Colliders/Collider.js"
22+
//-----------------------------
23+
// Graphics
24+
//-----------------------------
25+
export {
26+
default as SpriteSheet
27+
} from "./lib/Sprites/SpriteSheet.js"
28+
export {
29+
spriteSheetLoader
30+
} from "./lib/Sprites/SpriteSheets.js"
31+
export {
32+
default as Sprite,
33+
DEBUG_SPRITE,
34+
DEBUG_COLOR
35+
} from "./lib/Sprites/Sprite.js"
36+
export {
37+
default as AnimatedSprite,
38+
DEBUG_ANIMATED_SPRITE
39+
} from "./lib/Sprites/AnimatedSprite.js"
40+
export {
41+
CanvasRenderer,
42+
RendererOptions
43+
} from "./lib/Graphics/CanvasRenderer.js"
44+
export {
45+
drawRect,
46+
drawCircle
47+
} from "./lib/Graphics/Renderer.js"
48+
//-----------------------------
49+
// Type exports
50+
//-----------------------------
51+
export {
52+
vector2D,
53+
rect2D,
54+
rectSize,
55+
circle2D,
56+
HexColor,
57+
} from "./lib/Types/Types.js"

‎lib/Engine/Core.ts

+42-6
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,20 @@ import { CanvasRenderer } from "../Graphics/CanvasRenderer.js";
44
import Render from "../Graphics/Renderer.js";
55
import { EngineTime, EngineTiming } from "./Timing.js";
66

7-
enum ENGINE_EVENTS {
7+
/**
8+
* The list of engine events.
9+
*/
10+
export enum ENGINE_EVENTS {
811
/**
9-
*
12+
* Called when the engine is started cold. This can either be on initial start, or after a full reset.
1013
*/
1114
awake = "awake",
1215
/**
13-
*
16+
* Called once per frame. Each registered event listener will be called in-order before rendering the frame.
1417
*/
1518
update = "update",
1619
/**
17-
*
20+
* Called after a frame has been rendered. Used to render custom graphics on top of the frame.
1821
*/
1922
customRender = "customRender"
2023
}
@@ -23,6 +26,35 @@ interface EngineEventBuckets {
2326
[key: string]: Array<(...args: any[]) => void>;
2427
}
2528

29+
/**
30+
* An instance of the engine. This is where it all begins.
31+
*
32+
* Once attached to a canvas, the engine instance be started by calling {@link EntityEngine.start()}.
33+
*
34+
* The execution loop (event "update") and other engine events can be accessed by registering an event handler via {@link EntityEngine.addEventListener()}.
35+
* Listeners will be called in-order, between each frame render. A special event is `customRender`, which is called *after* frame render,
36+
* to allow custom elements to be rendered on top of the fresh frame.
37+
*
38+
* An initial setup would look something like this:
39+
*
40+
* ```js
41+
* const engine = new EntityEngine("gameArea");
42+
*
43+
* const spriteSheet = new SpriteSheet("spritesheet.png", { width: 25, height: 25 });
44+
*
45+
* engine.addEventListener("awake", () => {
46+
* // Perform initialisations
47+
* };
48+
*
49+
* engine.addEventListener("update", () => {
50+
* // Execute gameplay code
51+
* };
52+
*
53+
* spriteSheetLoader(spriteSheet).then(() => {
54+
* engine.start();
55+
* });
56+
* ```
57+
*/
2658
export default class EntityEngine {
2759
/**
2860
* Flag to check if the engine was initialised (cold-start).
@@ -60,7 +92,7 @@ export default class EntityEngine {
6092
private _delta: EngineTime = new EngineTime(this._timings);
6193

6294
/**
63-
*
95+
* Wrapper for the attached HTML Canvas' draw API.
6496
*/
6597
public Renderer: CanvasRenderer;
6698
/**
@@ -70,6 +102,10 @@ export default class EntityEngine {
70102
*/
71103
public readonly Entities: EntityManager;
72104

105+
/**
106+
*
107+
* @param canvasId The ID of the HTML Canvas that will be used to render the game.
108+
*/
73109
constructor(canvasId?: string) {
74110
this.Entities = new EntityManager();
75111
if (canvasId) {
@@ -176,7 +212,7 @@ export default class EntityEngine {
176212
}
177213

178214
/**
179-
* Attach the engine instance to an HTML Canvas to draw the frame onto.
215+
* Attaches the engine instance to an HTML Canvas that will be used to render the game.
180216
* @param canvasID
181217
*/
182218
public attachToCanvas(canvasID: string) {

‎lib/Engine/Timing.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class EngineTime {
6969
* Checks if the last frame's execution time fits the {@link frameTimeAllocation}.
7070
* If the result is often false, lower the target framerate for a smoother experience.
7171
*/
72-
public get isFrameTimeAllocationEnough() {
72+
public get isFrameTimeAllocationEnough() : boolean {
7373
return (this._provider.lastFrameTime < this.frameTimeAllocation);
7474
}
7575

0 commit comments

Comments
 (0)