Merge branch feature/scenes into main (#76)

* Implement scenes

Add Scenes framework
- Implement Scene class
- Implement Elements
- Implement SceneRenderer
- Implement ElementRenderer
- Implement SceneManager
- Add SceneRenderer to RenderPipeline
- Add ElementRenderer to RenderPipeline
- Other adaptations

* Scene framework changes

- Remove LevelScene
- Add InGame Scene

* More Scene stuff

- Implement CheckBox Element
- Implement InGame base scene.

src/ts/engine/enginesetup.ts

@@ -2,13 +2,14 @@ import AssetLoader from "./assets/assetloader.js";
 import AssetManager from "./assets/assetmanager";
 import EntityManager from "./entitiy/entitymanager";
 import LevelManager from "./level/levelmanager.js";
+import SceneManager from "./scene/scenemanager.js";
 
 class EngineSetup {
   public loadAssets(
     assetLoader: AssetLoader,
     assetManager: AssetManager,
     entityManager: EntityManager,
-    _levelManager: LevelManager
+    levelManager: LevelManager
   ): void {
     console.warn(
       "loadAssets was not defined in EngineSetup provided class. This is probably not what you want."
@@ -19,7 +20,7 @@ class EngineSetup {
     assetLoader: AssetLoader,
     assetManager: AssetManager,
     entityManager: EntityManager,
-    _levelManager: LevelManager
+    levelManager: LevelManager
   ): void {
     console.warn(
       "registerSpriteSheets was not defined in EngineSetup provided class. This is probably not what you want."
@@ -30,23 +31,29 @@ class EngineSetup {
     assetLoader: AssetLoader,
     assetManager: AssetManager,
     entityManager: EntityManager,
-    _levelManager: LevelManager
+    levelManager: LevelManager
   ): void {
     console.warn(
       "registerTextures was not defined in EngineSetup provided class. This is probably not what you want."
     );
   }
 
   registerLevels(
-    _assetLoader: AssetLoader,
-    _assetManager: AssetManager,
-    _entityManager: EntityManager,
-    _levelManager: LevelManager
+    assetLoader: AssetLoader,
+    assetManager: AssetManager,
+    entityManager: EntityManager,
+    levelManager: LevelManager
   ) {
     console.warn(
       "registerLevels was not defined in EngineSetup provided class. This is probably not what you want."
     );
   }
+
+  registerScenes(sceneManager: SceneManager) {
+    console.warn(
+      "registerScenes was not defined in EngineSetup provided class. This is probably not what you want."
+    );
+  }
 }
 
 export default EngineSetup;

src/ts/engine/entitiy/boundingbox.ts

@@ -97,7 +97,6 @@ class BoundingBox {
     let inverseBaseMatrix = baseMatrix.inverse;
     if (!inverseBaseMatrix) {
       return ret; //Mathematically, this should never happen as long as no entity has a BoundingBox of height or width 0
-      return ret; //Mathematically, this should never happen as long as no entity has a BoundingBox of height or width 0
     }
     for (let location of locations) {
       let lambda: Vector2D = inverseBaseMatrix!.multiplyVector(

src/ts/engine/entitiy/icomplexentity.ts

@@ -1,5 +1,5 @@
-import Vector2D from "../math/vector2d";
-import Entity from "./entity";
+import Vector2D from "../math/vector2d.js";
+import Entity from "./entity.js";
 
 interface IComplexEntity extends Entity {
   get parts(): [Vector2D, Entity][];

src/ts/engine/event/events/mouseclickevent/mouseclickevent.ts

@@ -1,16 +1,14 @@
 import Vector2D from "../../../math/vector2d.js";
-import EngineEvent from "../../engineevent.js";
+import CancellableEngineEvent from "../../cancellableengineeevent.js";
 import MouseClickEventData from "./mouseclickeventdata.js";
 
-class MouseClickEvent extends EngineEvent<MouseClickEventData> {
+class MouseClickEvent extends CancellableEngineEvent<MouseClickEventData> {
   constructor(
-    locationRelative: Vector2D,
+    mouseRelative: Vector2D,
     mouseAbsolute: Vector2D,
     mouseButton: number
   ) {
-    super(
-      new MouseClickEventData(locationRelative, mouseAbsolute, mouseButton)
-    );
+    super(new MouseClickEventData(mouseRelative, mouseAbsolute, mouseButton));
   }
 }
 

src/ts/engine/game.ts

@@ -6,11 +6,13 @@ import EntityManager from "./entitiy/entitymanager.js";
 import InputHandler from "./input/inputhandler.js";
 import LevelManager from "./level/levelmanager.js";
 import Compositor from "./renderer/compositor.js";
+import SceneManager from "./scene/scenemanager.js";
 
 class Game {
   private _assetLoader: AssetLoader;
   private _assetManager: AssetManager;
   private _inputHandler: InputHandler;
+  private _sceneManager: SceneManager;
   private _entityManager: EntityManager;
   private _levelManager: LevelManager;
   private _compositor: Compositor;
@@ -41,9 +43,15 @@ class Game {
     this._assetLoader = new AssetLoader();
     this._assetManager = new AssetManager();
     this._inputHandler = new InputHandler(htmlCanvasElement);
+    this._sceneManager = new SceneManager(this._inputHandler);
     this._entityManager = new EntityManager();
     this._levelManager = new LevelManager(this._entityManager);
-    this._compositor = new Compositor(htmlCanvasElement, this._entityManager);
+    this._compositor = new Compositor(
+      htmlCanvasElement,
+      this._sceneManager,
+      this._levelManager,
+      this._entityManager
+    );
 
     this._running = false;
     this._lastTick = Date.now();
@@ -58,6 +66,7 @@ class Game {
     Services.register(this._assetLoader);
     Services.register(this._assetManager);
     Services.register(this._inputHandler);
+    Services.register(this._sceneManager);
     Services.register(this._entityManager);
     Services.register(this._levelManager);
     Services.register(this._compositor);
@@ -87,6 +96,8 @@ class Game {
       this._entityManager,
       this._levelManager
     );
+
+    engineSetup.registerScenes(this._sceneManager);
   }
 
   public startUpdateLoop(): void {
@@ -100,8 +111,9 @@ class Game {
         tickDelta = this._tickDeltaTolerance;
       }
 
-      this._levelManager.update(tickDelta);
+      this._sceneManager.update(tickDelta);
       this._entityManager.update(tickDelta);
+      this._levelManager.update(tickDelta);
 
       if (!this._running) {
         clearInterval(updateLoopId);

src/ts/engine/level/level.ts

@@ -1,4 +1,3 @@
-import AssetManager from "../assets/assetmanager.js";
 import Entity from "../entitiy/entity.js";
 
 interface Level {

src/ts/engine/level/levelmanager.ts

@@ -20,7 +20,7 @@ class LevelManager {
     return this._levels.has(name);
   }
 
-  public registerLevel(name: string, level: Level): void {
+  public register(name: string, level: Level): void {
     if (this._levels.has(name)) {
       console.warn(
         `Level with name ${name} already exists! Overwriting with new value.`
@@ -29,20 +29,24 @@ class LevelManager {
     this._levels.set(name, level);
   }
 
-  public startLevel(name: string): void {
-    let level: Level | undefined = this._levels.get(name);
-    if (!level) {
-      throw new Error(`Level with name ${name} does not exist!`);
-    }
-
+  public unload(): void {
     if (this._currentLevel !== null) {
       this._currentLevel.unload();
+      this._currentLevel = null;
     }
     this._entityManager.clear();
+  }
 
+  public start(name: string): void {
+    let level: Level | undefined = this._levels.get(name);
+    if (!level) {
+      throw new Error(`Level with name ${name} does not exist!`);
+    }
+    this.unload();
+
+    this._currentLevel = level;
     this._entityManager.registerAll(level.getEntities());
     level.load();
-    this._currentLevel = level;
   }
 
   public update(tickDelta: number): void {

src/ts/engine/math/rectangle.ts

@@ -0,0 +1,59 @@
+import Vector2D from "./vector2d.js";
+
+class Rectangle {
+  private _location: Vector2D;
+  private _width: number;
+  private _height: number;
+
+  get location(): Vector2D {
+    return this._location;
+  }
+
+  get width(): number {
+    return this._width;
+  }
+
+  get height(): number {
+    return this._height;
+  }
+
+  get centerRelative(): Vector2D {
+    return new Vector2D(this.width / 2, this.height / 2);
+  }
+
+  get centerAbsolute(): Vector2D {
+    return this.location.add(this.centerRelative);
+  }
+
+  get corners(): Vector2D[] {
+    let topLeft = this.location;
+    let topRight = new Vector2D(this.location.x + this.width, this.location.y);
+    let bottomLeft = new Vector2D(
+      this.location.x,
+      this.location.y + this.height
+    );
+    let bottomRight = new Vector2D(
+      this.location.x + this.width,
+      this.location.y + this.height
+    );
+
+    return [topLeft, topRight, bottomLeft, bottomRight];
+  }
+
+  constructor(x: number, y: number, width: number, height: number) {
+    this._location = new Vector2D(x, y);
+    this._width = width;
+    this._height = height;
+  }
+
+  public isInside(point: Vector2D): boolean {
+    return (
+      point.x >= this.location.x &&
+      point.x <= this.location.x + this.width &&
+      point.y >= this.location.y &&
+      point.y <= this.location.y + this.height
+    );
+  }
+}
+
+export default Rectangle;

src/ts/engine/renderer/compositor.ts

@@ -1,6 +1,10 @@
 import EntityManager from "../entitiy/entitymanager.js";
+import LevelManager from "../level/levelmanager.js";
+import SceneManager from "../scene/scenemanager.js";
 import DebugRenderer from "./renderers/debugrenderer.js";
+import ElementRenderer from "./renderers/elementrenderer.js";
 import EntityRenderer from "./renderers/entityrenderer.js";
+import SceneRenderer from "./renderers/scenerenderer.js";
 import RenderPipeline from "./renderpipeline.js";
 import RenderPipelineBuilder from "./renderpipelinebuilder.js";
 
@@ -10,6 +14,8 @@ class Compositor {
   private _canvasHeight!: number;
   private _glContext!: CanvasRenderingContext2D;
   private _renderPipeline!: RenderPipeline;
+  private _sceneManager: SceneManager;
+  private _levelManager: LevelManager;
   private _entityManager: EntityManager;
 
   get canvasWidth(): number {
@@ -32,12 +38,17 @@ class Compositor {
 
   constructor(
     htmlCanvasElement: HTMLCanvasElement,
+    sceneManager: SceneManager,
+    levelManager: LevelManager,
     entityManager: EntityManager
   ) {
     this._htmlCanvasElement = htmlCanvasElement;
     this.refreshSize();
     this.initializeGlContext();
     this.initializeRenderPipeline();
+
+    this._sceneManager = sceneManager;
+    this._levelManager = levelManager;
     this._entityManager = entityManager;
   }
 
@@ -52,7 +63,9 @@ class Compositor {
 
   private initializeRenderPipeline(): void {
     this._renderPipeline = new RenderPipelineBuilder(this._glContext)
+      .useRenderer(new SceneRenderer())
       .useRenderer(new EntityRenderer())
+      .useRenderer(new ElementRenderer())
       .useRenderer(new DebugRenderer())
       .build();
   }
@@ -62,17 +75,29 @@ class Compositor {
     this._canvasHeight = this._htmlCanvasElement.height;
   }
 
-  private clearCanvas(): void {
-    this._glContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-  }
-
   render(delta: number): void {
     this.refreshSize();
-    this.clearCanvas();
 
-    this._entityManager.entities.forEach((entity) => {
-      this._renderPipeline.render(entity, delta);
-    });
+    this._glContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+
+    let currentScene = this._sceneManager.currentScene;
+    let currentLevel = this._levelManager.currentLevel;
+
+    if (currentScene) {
+      this._renderPipeline.render(currentScene, delta);
+    }
+
+    if (currentLevel) {
+      for (let entity of this._entityManager.entities) {
+        this._renderPipeline.render(entity, delta);
+      }
+    }
+
+    if (currentScene) {
+      for (let element of currentScene.elements) {
+        this._renderPipeline.render(element, delta);
+      }
+    }
 
     this._renderPipeline.render("debug", delta);
   }

src/ts/engine/renderer/renderers/debugrenderer.ts

@@ -44,8 +44,10 @@ class DebugRenderer extends Renderer {
     glContext.fillStyle = "rgba(0, 0, 0, 0.5)";
     glContext.fillRect(600, 500, 200, 100);
 
-    glContext.fillStyle = "white";
+    glContext.textAlign = "left";
+    glContext.textBaseline = "alphabetic";
     glContext.font = "15px Arial";
+    glContext.fillStyle = "white";
     glContext.fillText(`FPS: ${this._game!.fps}`, 600, 512);
     glContext.fillText(`TPS: ${this._game!.tps}`, 600, 525);
     glContext.fillText(
@@ -81,6 +83,8 @@ class DebugRenderer extends Renderer {
     glContext.rotate((entity.rotation * Math.PI) / 180);
     glContext.translate(-centerOfMass.x, -centerOfMass.y);
 
+    glContext.lineWidth = 1;
+
     let center = entity.boundingBox.centerAbsolute;
     glContext.fillStyle = "yellow";
     glContext.beginPath();