Change graphics 2d library to a fully implemented library

example/pong/src/components.ts

@@ -1,7 +1,8 @@
-import type { NfgCircle } from "@nanoforge/graphics-2d";
-import type { NfgRectangle } from "@nanoforge/graphics-2d/src/components/shape/shapes/rectangle.shape";
+import type { Graphics } from "@nanoforge/graphics-2d";
 import type { InputEnum } from "@nanoforge/input";
 
+import { layer } from "./index";
+
 export class Velocity {
   name = "Velocity";
   x: number;
@@ -37,19 +38,21 @@ export class Hitbox {
 
 export class CircleComponent {
   name = "CircleComponent";
-  component: NfgCircle;
+  component: Graphics.Circle;
 
-  constructor(component: NfgCircle) {
+  constructor(component: Graphics.Circle) {
     this.component = component;
+    layer.add(this.component);
   }
 }
 
 export class RectangleComponent {
   name = "RectangleComponent";
-  component: NfgRectangle;
+  component: Graphics.Rect;
 
-  constructor(component: NfgRectangle) {
+  constructor(component: Graphics.Rect) {
     this.component = component;
+    layer.add(this.component);
   }
 }
 

example/pong/src/index.ts

@@ -2,9 +2,8 @@ import { AssetManagerLibrary } from "@nanoforge/asset-manager";
 import { type IRunOptions } from "@nanoforge/common";
 import { NanoforgeFactory } from "@nanoforge/core";
 import { ECSLibrary } from "@nanoforge/ecs";
-import { Graphics2DLibrary } from "@nanoforge/graphics-2d";
-import { InputLibrary } from "@nanoforge/input";
-import { InputEnum } from "@nanoforge/input";
+import { Graphics, Graphics2DLibrary } from "@nanoforge/graphics-2d";
+import { InputEnum, InputLibrary } from "@nanoforge/input";
 import { SoundLibrary } from "@nanoforge/sound";
 
 import {
@@ -16,7 +15,7 @@ import {
   RectangleComponent,
   Velocity,
 } from "./components";
-import { bounce, controlPlayer, drawCircle, drawRectangle, move, moveRectangle } from "./systems";
+import { bounce, controlPlayer, drawCircle, move, moveRectangle } from "./systems";
 
 export const ecsLibrary = new ECSLibrary();
 
@@ -26,6 +25,8 @@ export const inputs = new InputLibrary();
 export const sounds = new SoundLibrary();
 export const assetManager = new AssetManagerLibrary();
 
+export const layer = new Graphics.Layer();
+
 export const main = async (options: IRunOptions) => {
   app.useGraphics(graphics);
   app.useComponentSystem(ecsLibrary);
@@ -35,90 +36,51 @@ export const main = async (options: IRunOptions) => {
 
   await app.init(options);
 
+  graphics.stage.add(layer);
+  console.log(graphics.stage.width());
+
   sounds.load("test", "https://universal-soundbank.com/sounds/18782.mp3");
 
   const ball = ecsLibrary.spawnEntity();
-  ecsLibrary.addComponent(ball, new Velocity(0.04, 0));
-  ecsLibrary.addComponent(ball, new Position(0.5, 0));
-  ecsLibrary.addComponent(ball, new Bounce());
+  ecsLibrary.addComponent(ball, new Velocity(10, 0));
   ecsLibrary.addComponent(
     ball,
-    new CircleComponent(
-      await graphics.factory.createCircle({
-        radius: 0.1,
-        color: { r: 1, g: 0, b: 0, a: 1 },
-      }),
-    ),
-  );
-
-  const bg = ecsLibrary.spawnEntity();
-  ecsLibrary.addComponent(
-    bg,
-    new RectangleComponent(
-      await graphics.factory.createRectangle({
-        min: { x: -2, y: -1 },
-        max: { x: 2, y: 1 },
-        color: { r: 0, g: 0, b: 0, a: 0 },
-      }),
-    ),
-  );
-
-  const topWall = ecsLibrary.spawnEntity();
-  ecsLibrary.addComponent(
-    topWall,
-    new RectangleComponent(
-      await graphics.factory.createRectangle({
-        color: { r: 0, g: 0, b: 0, a: 1 },
-      }),
-    ),
+    new Position(graphics.stage.width() / 2, graphics.stage.height() / 2),
   );
-  ecsLibrary.addComponent(topWall, new Position(-1.8, 0.91));
-  ecsLibrary.addComponent(topWall, new Hitbox(3.6, 0.1));
-
-  const botWall = ecsLibrary.spawnEntity();
+  ecsLibrary.addComponent(ball, new Bounce());
   ecsLibrary.addComponent(
-    botWall,
-    new RectangleComponent(
-      await graphics.factory.createRectangle({
-        color: { r: 0, g: 0, b: 0, a: 1 },
+    ball,
+    new CircleComponent(
+      new Graphics.Circle({
+        radius: 70,
+        fill: "red",
       }),
     ),
   );
-  ecsLibrary.addComponent(botWall, new Position(-1.8, -1));
-  ecsLibrary.addComponent(botWall, new Hitbox(3.6, 0.1));
 
   const player1 = ecsLibrary.spawnEntity();
-  ecsLibrary.addComponent(player1, new Position(-1.8, -0.3));
-  ecsLibrary.addComponent(player1, new Velocity(0, 0.1));
-  ecsLibrary.addComponent(player1, new Hitbox(0.1, 0.5));
+  ecsLibrary.addComponent(player1, new Position(20, 100));
+  ecsLibrary.addComponent(player1, new Velocity(0, 5));
+  ecsLibrary.addComponent(player1, new Hitbox(50, 500));
   ecsLibrary.addComponent(player1, new Controller(InputEnum.KeyW, InputEnum.KeyS));
   ecsLibrary.addComponent(
     player1,
-    new RectangleComponent(
-      await graphics.factory.createRectangle({
-        color: { r: 0, g: 0, b: 1, a: 1 },
-      }),
-    ),
+    new RectangleComponent(new Graphics.Rect({ fill: "blue", width: 50, height: 500 })),
   );
 
   const player2 = ecsLibrary.spawnEntity();
-  ecsLibrary.addComponent(player2, new Position(1.7, -0.3));
-  ecsLibrary.addComponent(player2, new Velocity(0, 0.1));
-  ecsLibrary.addComponent(player2, new Hitbox(0.1, 0.5));
+  ecsLibrary.addComponent(player2, new Position(1850, 100));
+  ecsLibrary.addComponent(player2, new Velocity(0, 5));
+  ecsLibrary.addComponent(player2, new Hitbox(50, 500));
   ecsLibrary.addComponent(player2, new Controller(InputEnum.ArrowUp, InputEnum.ArrowDown));
   ecsLibrary.addComponent(
     player2,
-    new RectangleComponent(
-      await graphics.factory.createRectangle({
-        color: { r: 0, g: 0, b: 1, a: 1 },
-      }),
-    ),
+    new RectangleComponent(new Graphics.Rect({ fill: "blue", width: 50, height: 500 })),
   );
 
   ecsLibrary.addSystem(move);
   ecsLibrary.addSystem(controlPlayer);
   ecsLibrary.addSystem(moveRectangle);
-  ecsLibrary.addSystem(drawRectangle);
   ecsLibrary.addSystem(drawCircle);
   ecsLibrary.addSystem(bounce);
 

example/pong/src/systems.ts

@@ -8,7 +8,7 @@ import {
   RectangleComponent,
   Velocity,
 } from "./components";
-import { ecsLibrary, graphics, inputs, sounds } from "./index";
+import { ecsLibrary, inputs, sounds } from "./index";
 
 export function move() {
   const entities = ecsLibrary.getZipper([Bounce, Position, Velocity]);
@@ -23,12 +23,12 @@ export function bounce() {
   const entities = ecsLibrary.getZipper([Bounce, Position, Velocity]);
 
   entities.forEach((entity) => {
-    if (entity.Position.x >= 1.6 || entity.Position.x <= -1.6) {
+    if (entity.Position.x >= 1800 || entity.Position.x <= 100) {
       entity.Velocity.x = -entity.Velocity.x;
 
       sounds.play("test");
     }
-    if (entity.Position.y >= 1 || entity.Position.y <= -1) {
+    if (entity.Position.y >= 1000 || entity.Position.y <= 100) {
       entity.Velocity.y = -entity.Velocity.y;
 
       sounds.play("test");
@@ -41,14 +41,14 @@ export function controlPlayer() {
 
   entities.forEach((entity) => {
     if (inputs.isKeyPressed(entity.Controller.up) && !checkCollisions(entity)) {
-      entity.Position.y += entity.Velocity.y;
-    } else {
       entity.Position.y -= entity.Velocity.y;
+    } else {
+      entity.Position.y += entity.Velocity.y;
     }
     if (inputs.isKeyPressed(entity.Controller.down) && !checkCollisions(entity)) {
-      entity.Position.y -= entity.Velocity.y;
-    } else {
       entity.Position.y += entity.Velocity.y;
+    } else {
+      entity.Position.y -= entity.Velocity.y;
     }
   });
 }
@@ -59,27 +59,15 @@ export function drawCircle() {
   entities.forEach((entity) => {
     const pos = entity.Position;
     entity.CircleComponent.component.setPosition(pos);
-    graphics.getWindow().draw(entity.CircleComponent.component);
   });
 }
 
 export function moveRectangle() {
   const entities = ecsLibrary.getZipper([RectangleComponent, Position, Hitbox]);
 
+  console.log(entities);
   entities.forEach((entity) => {
     const pos = entity.Position;
-    entity.RectangleComponent.component.setMin({ x: pos.x, y: pos.y });
-    entity.RectangleComponent.component.setMax({
-      x: pos.x + entity.Hitbox.width,
-      y: pos.y + entity.Hitbox.height,
-    });
-  });
-}
-
-export function drawRectangle() {
-  const entities = ecsLibrary.getZipper([RectangleComponent]);
-
-  entities.forEach((entity) => {
-    graphics.getWindow().draw(entity.RectangleComponent.component);
+    (entity.RectangleComponent as RectangleComponent).component.setPosition(pos);
   });
 }

packages/asset-manager/jest.config.json

@@ -1,4 +1,5 @@
 {
+  "preset": "ts-jest",
   "moduleFileExtensions": ["js", "json", "ts"],
   "rootDir": "test",
   "collectCoverageFrom": ["**/*.(t|j)s"],
@@ -7,6 +8,7 @@
   "transform": {
     "^.+\\.(t|j)s$": "ts-jest"
   },
+  "transformIgnorePatterns": ["<rootDir>/node_modules/"],
   "verbose": true,
   "testTimeout": 5000
 }

packages/ecs/jest.config.json

@@ -1,4 +1,5 @@
 {
+  "preset": "ts-jest",
   "moduleFileExtensions": ["js", "json", "ts"],
   "rootDir": "test",
   "collectCoverageFrom": ["**/*.(t|j)s"],
@@ -7,6 +8,7 @@
   "transform": {
     "^.+\\.(t|j)s$": "ts-jest"
   },
+  "transformIgnorePatterns": ["<rootDir>/node_modules/"],
   "verbose": true,
   "testTimeout": 5000
 }

packages/graphics-2d/jest.config.json

@@ -1,4 +1,5 @@
 {
+  "preset": "ts-jest",
   "moduleFileExtensions": ["js", "json", "ts"],
   "rootDir": "test",
   "collectCoverageFrom": ["**/*.(t|j)s"],
@@ -7,6 +8,7 @@
   "transform": {
     "^.+\\.(t|j)s$": "ts-jest"
   },
+  "transformIgnorePatterns": ["<rootDir>/node_modules/"],
   "verbose": true,
   "testTimeout": 5000
 }

packages/graphics-2d/package.json

@@ -33,7 +33,8 @@
   },
   "dependencies": {
     "@nanoforge/asset-manager": "workspace:^",
-    "@nanoforge/common": "workspace:^"
+    "@nanoforge/common": "workspace:^",
+    "konva": "^10.0.2"
   },
   "devDependencies": {
     "@nanoforge/utils-eslint-config": "workspace:^",