@cjcoding-git/gamelib 1.1.2 → 1.1.3

package/src/2D/GameLib.js

@@ -0,0 +1,317 @@
+import { GameLibCore } from "../Core/index.js"
+import { GameLib2D } from "./index.js"
+import { Coord } from "./Coord.js"
+import { Size } from "./Size.js"
+import { Box } from "./Box.js"
+import { Renderable } from "./Renderable.js"
+import { Sprite } from "./Sprite.js"
+import { Loading } from "../Core/Loading.js"
+import { InputManager } from "../Core/InputManager.js"
+class GameLib extends GameLibCore.GameLibBase {
+  constructor(renderCanvas, renderCtx, viewportCanvas, viewportCtx) {
+    if (GameLib2D.GameLib._instance != null) {
+      return GameLib2D.GameLib._instance;
+    } else {
+      super();
+      console.log("[GameLib] No GameLib instance found. Creating new instance.");
+      this._scene = "loading";
+      this._sprites = [];
+      this.clearColor = "#dddddd";
+      renderCanvas.setAttribute('style', 'image-rendering: pixelated;');
+      this._renderCanvas = renderCanvas;
+      this._renderCtx = renderCtx;
+      viewportCanvas.setAttribute('style', 'image-rendering: pixelated;');
+      this._viewportCanvas = viewportCanvas;
+      this._viewportCtx = viewportCtx;
+      this._viewport = new Box(new Coord(0, 0), new Size(this._viewportCanvas.width, this._viewportCanvas.height));
+      this._renderables = [];
+      this._background = {};
+      this._loadingScreen = Loading.DEFAULT_CONFIG;
+      this.oncontextmenu = null;
+      this.inputManager = new InputManager();
+      this.inputManager.addMouseListener('move', this.hoverButtons.bind(this), false);
+      this.inputManager.addMouseListener('click', this.checkButtons.bind(this), false);
+      window.addEventListener('contextmenu', this.contextMenu.bind(this), false);
+      this._listeners = {};
+      this.registerMainloop();
+      GameLib._instance = this;
+    }
+  }
+  contextMenu(evt) {
+    evt.preventDefault();
+    evt.returnValue = '';
+    if (this.oncontextmenu) {
+      this.oncontextmenu(evt);
+    }
+  }
+  static cursor(cursorType) {
+    document.body.setAttribute('style', 'cursor: ' + cursorType + ';');
+  }
+  hoverButtons(evt) {
+    var mousePos = this.inputManager.getCanvasMousePos(this._viewportCanvas);
+    var buttons = this._renderables.filter(renderable => typeof renderable.handleClick === "function" && typeof renderable.handleHover === "function");
+    var calcXY = new Coord(mousePos[0], mousePos[1]);
+    if (calcXY.x <= canvasRect.width && calcXY.y <= canvasRect.height) {
+      var buttonHover = false;
+      buttons.forEach((function(button) {
+        if (this._scene == button.scene && button.shouldRender() && button.isActive()) {
+          if (button.handleHover(evt, calcXY)) {
+            buttonHover = true;
+          }
+        }
+      }).bind(this));
+      if (!buttonHover) {
+        GameLib.cursor("default");
+      }
+    }
+  }
+  checkButtons(evt) {
+    var mousePos = this.inputManager.getCanvasMousePos(this._viewportCanvas);
+    var buttons = this._renderables.filter(renderable => typeof renderable.handleClick === "function" && typeof renderable.handleHover === "function");
+    var calcXY = new Coord(mousePos[0], mousePos[1]);
+    if (calcXY.x <= canvasRect.width && calcXY.y <= canvasRect.height) {
+      var buttonClicked = false;
+      buttons.forEach((function(button) {
+        if (!buttonClicked && this._scene == button.scene && button.shouldRender() && button.isActive()) {
+          if (button.handleClick(evt, calcXY)) {
+            buttonClicked = true;
+          }
+        }
+      }).bind(this));
+      this.hoverButtons(evt);
+    }
+  }
+  setScene(scene) {
+    this._scene = scene;
+    GameLib.cursor("default");
+  }
+  getScene() {
+    return this._scene;
+  }
+  static getContext(canvas) {
+    return canvas.getContext('2d', {
+      'willReadFrequently': true
+    });
+  }
+  static spriteImage(sprite, url) {
+    return GameLibCore.AssetManager.shared.loadImage(url).then(image => {
+      sprite.image = image;
+      return image;
+    });
+  }
+  addRenderable(renderable) {
+    if (renderable instanceof Renderable) {
+      this._renderables.push(renderable);
+    } else {
+      throw new GameLibCore.Error("Parameter renderable must be an instance of Renderable");
+    }
+  }
+  get sprites() {
+    return this._sprites;
+  }
+  get renderables() {
+    return this._renderables;
+  }
+  get canvas() {
+    return this._renderCanvas;
+  }
+  get ctx() {
+    return this._renderCtx;
+  }
+  get viewportCanvas() {
+    return this._viewportCanvas;
+  }
+  get viewportCtx() {
+    return this._viewportCtx;
+  }
+  moveViewport(dx, dy) {
+    this._viewport.move(dx, dy);
+  }
+  moveViewportTo(x, y) {
+    this._viewport.moveTo(x, y);
+  }
+  moveViewportToSprite(sprite) {
+    if (!(sprite instanceof Sprite)) {
+      throw new GameLibCore.Error("Parameter sprite must be an instance of Sprite!");
+    } else {
+      var x = sprite.x - this._viewportCanvas.width / 2;
+      var y = sprite.y - this._viewportCanvas.height / 2;
+      var width = this._viewportCanvas.width;
+      var height = this._viewportCanvas.height;
+      if (x < 0) {
+        x = 0;
+      } else if (x + width > this._renderCanvas.width) {
+        x = this._renderCanvas.width - width;
+      }
+      if (y < 0) {
+        y = 0;
+      } else if (y + height > this._renderCanvas.height) {
+        y = this._renderCanvas.height - height;
+      }
+      this._viewport.moveTo(x, y);
+    }
+  }
+  renderViewport() {
+    var newImageData = this._renderCtx.getImageData(this._viewport.x, this._viewport.y, this._viewport.width, this._viewport.height);
+    this._viewportCtx.putImageData(newImageData, 0, 0);
+  }
+  getSpritesOfType(spriteClass) {
+    return this._sprites.filter(sprite => sprite instanceof spriteClass);
+  }
+  getRenderablesOfType(renderableClass) {
+    return this._renderables.filter(renderable => renderable instanceof renderableClass);
+  }
+  clearRenderablesOfType(renderableClass) {
+    this._renderables = this._renderables.filter(renderable => !(renderable instanceof renderableClass));
+  }
+  addSprite(sprite) {
+    if (sprite instanceof Sprite) {
+      this._sprites.push(sprite);
+    } else {
+      throw new GameLibCore.Error("Parameter sprite must be an instance of Sprite");
+    }
+  }
+  clearCanvas(clearViewport = true) {
+    this._renderCtx.fillStyle = this.clearColor;
+    this._renderCtx.fillRect(0, 0, this._renderCanvas.width, this._renderCanvas.height);
+    if (clearViewport) {
+      this._viewportCtx.fillStyle = this.clearColor;
+      this._viewportCtx.fillRect(0, 0, this._viewportCanvas.width, this._viewportCanvas.height);
+    }
+  }
+  resizeViewPort(size) {
+    this._viewport.size = size;
+  }
+  mainloop() {
+    this.update();
+    this.draw();
+    this.registerMainloop();
+  }
+  stopLoading() {
+    this._scene = "init";
+  }
+  update() {
+    if (!this._active) {
+      return;
+    }
+    this.callHook('pre-update');
+    this._sprites.forEach((function(sprite) {
+      if (this._scene == sprite.scene) {
+        sprite.update();
+      }
+    }).bind(this));
+    this.callHook('post-update');
+  }
+  setBackground(image, scene, repeat = "repeat") {
+    this._background[scene] = this._renderCtx.createPattern(image, repeat);
+  }
+  setClearColor(color) {
+    this.clearColor = color;
+  }
+  renderBackground() {
+    if (this._background[this._scene] != null) {
+      this._renderCtx.fillStyle = this._background[this._scene];
+      this._renderCtx.fillRect(0, 0, this._renderCanvas.width, this._renderCanvas.height);
+    }
+  }
+  drawGrid(size, color) {
+    this._renderCtxstrokeStyle = color;
+    for (var i = 0; i < this._renderCanvas.height; i += size) {
+      this._renderCtxbeginPath();
+      this._renderCtxmoveTo(0, i);
+      this._renderCtxlineTo(this._renderCanvas.width, i);
+      this._renderCtxclosePath();
+      this._renderCtxstroke();
+    }
+    for (var i = 0; i < this._renderCanvas.width; i += size) {
+      this._renderCtxbeginPath();
+      this._renderCtxmoveTo(i, 0);
+      this._renderCtxlineTo(i, this._renderCanvas.height);
+      this._renderCtxclosePath();
+      this._renderCtxstroke();
+    }
+  }
+  draw() {
+    if (!this._rendering) {
+      return;
+    }
+    this.clearCanvas(false);
+    this.callHook('pre-render');
+    this.renderBackground();
+    this._sprites.forEach((function(sprite) {
+      if (sprite.checkCollision(this._viewport)) {
+        if (this._scene == sprite.scene) {
+          sprite.draw();
+        }
+      }
+    }).bind(this));
+    this._renderables.forEach((function(renderable) {
+      if (!renderable.overlay) {
+        if (renderable.isActive()) {
+          if (renderable.shouldRender()) {
+            if (this._scene == renderable.scene) {
+              renderable.draw();
+            }
+          }
+        }
+      }
+    }).bind(this));
+    this.callHook('post-render');
+    this.renderViewport();
+    this._renderables.forEach((function(renderable) {
+      if (renderable.overlay) {
+        if (renderable.isActive()) {
+          if (renderable.shouldRender()) {
+            if (this._scene == renderable.scene) {
+              renderable.draw();
+            } else {
+              renderable.overlaySkipped();
+            }
+          } else {
+            renderable.overlaySkipped();
+          }
+        } else {
+          renderable.overlaySkipped();
+        }
+      }
+    }).bind(this));
+    if (this._scene == "loading") {
+      Loading.render(this._viewportCanvas, this._viewportCtx, this._loadingScreen);
+    }
+  }
+  registerMainloop() {
+    window.requestAnimationFrame(this.mainloop.bind(this));
+  }
+  setLoadingScreen(config) {
+    this._loadingScreen = config;
+  }
+  listen(type, callback) {
+    if(!this._listeners[type]) this._listeners[type] = [];
+    this._listeners[type].push(callback);
+  }
+  _fire(type) {
+    if(!this._listeners[type]) return;
+    for(var i=0;i<this._listeners[type].length;i++) {
+      var listener = this._listeners[type][i];
+      if(listener && typeof listener === "function") {
+        listener();
+      }
+    }
+  }
+  resizeToWindow() {
+    this._viewportCanvas.width = window.innerWidth;
+    this._viewportCanvas.height = window.innerHeight;
+    this._viewport.size = new Size(window.innerWidth, window.innerHeight);
+    this._viewportCanvas.style.position = "fixed";
+    this._viewportCanvas.style.top = "0";
+    this._viewportCanvas.style.left = "0";
+    this._fire('resize');
+  }
+  fillWindow() {
+    window.addEventListener('resize', this.resizeToWindow.bind(this), false);
+    this.resizeToWindow();
+  }
+}
+export {
+  GameLib
+}

package/src/2D/Renderable.js

@@ -0,0 +1,31 @@
+import { GameLib } from "./GameLib.js"
+class Renderable {
+  constructor(scene) {
+    this.gameLib = new GameLib();
+    this.gameLib.addRenderable(this);
+    this._active = true;
+    this._canvas = this.gameLib.canvas;
+    this._ctx = this.gameLib.ctx;
+    this.overlay = false;
+    this.scene = scene;
+  }
+  makeOverlay() {
+    this.overlay = true;
+    this._canvas = this.gameLib.viewportCanvas;
+    this._ctx = this.gameLib.viewportCtx;
+  }
+  overlaySkipped() {}
+  shouldRender() {
+    return true;
+  }
+  isActive() {
+    return this._active;
+  }
+  setActive(active) {
+    this._active = active;
+  }
+  draw() {}
+}
+export {
+  Renderable
+}

package/src/2D/Rotation.js

@@ -0,0 +1,42 @@
+class Rotation {
+  constructor(deg) {
+    this._deg = deg;
+    this.rotateTo(this._deg);
+  }
+  static d2r(deg) {
+    return (deg * Math.PI) / 180;
+  }
+  static r2d(rad) {
+    return rad * (180 / Math.PI);
+  }
+  rotate(deg) {
+    this.rotateTo(this._deg + deg);
+  }
+  rotateTo(deg) {
+    this._deg = deg;
+    if (this._deg >= 360) {
+      this.rotateTo(this._deg - 360);
+    }
+    if (this._deg < 0) {
+      this.rotateTo(this._deg + 360);
+    }
+  }
+  valueOf() {
+    return this._deg;
+  }
+  get degrees() {
+    return this._deg;
+  }
+  get radians() {
+    return GameLib2D.Rotation.d2r(this._deg);
+  }
+  getVelocityMod() {
+    var rad = GameLib2D.Rotation.d2r(this._deg);
+    var vx = Math.sin(rad);
+    var vy = -Math.cos(rad);
+    return [vx, vy];
+  }
+}
+export {
+  Rotation
+}

package/src/2D/Size.js

@@ -0,0 +1,17 @@
+class Size {
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  mod(dw, dh) {
+    this.width += dw;
+    this.height += dh;
+  }
+  modTo(w, h) {
+    this.width = w;
+    this.height = h;
+  }
+}
+export {
+  Size
+}

package/src/2D/Sprite.js

@@ -0,0 +1,56 @@
+import { Box } from "./Box.js"
+import { GameLib } from "./GameLib.js"
+class Sprite extends Box {
+  constructor(pos, size, scene) {
+    super(pos, size);
+    this.scene = scene;
+    this.image = null;
+    this.fillColor = "#000000";
+    this.gameLib = new GameLib();
+    this.gameLib.addSprite(this);
+    this.ctx = this.gameLib.ctx;
+    this.triggers = [];
+  }
+  update() {}
+  draw() {
+    if(this.image != null) {
+      this.ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
+    } else {
+      this.ctx.fillStyle = this.fillColor;
+      this.ctx.fillRect(this.x, this.y, this.width, this.height);
+    }
+  }
+  addTrigger(triggerID, callback) {
+    this.triggers[triggerID] = callback;
+  }
+  trigger(triggerID) {
+    if(this.triggers[triggerID]) {
+      this.triggers[triggerID]();
+    }
+  }
+  checkBounds() {
+    if(this.x < 0) {
+      this.moveTo(0, this.y);
+      this.trigger('bounds');
+    }
+    if(this.x > this.gameLib.canvas.width - this.width) {
+      this.moveTo(this.gameLib.canvas.width - this.width, this.y);
+      this.trigger('bounds');
+    }
+    if(this.y < 0) {
+      this.moveTo(this.x, 0);
+      this.trigger('bounds');
+    }
+    if(this.y > this.gameLib.canvas.height - this.height) {
+      this.moveTo(this.x, this.gameLib.canvas.height - this.height);
+      this.trigger('bounds');
+    }
+  }
+  drawHitbox() {
+    this.ctx.strokeStyle = this.fillColor;
+    this.ctx.strokeRect(this.x, this.y, this.width, this.height);
+  }
+}
+export {
+  Sprite
+}

package/src/2D/UI/Button.js

@@ -0,0 +1,52 @@
+import { Renderable } from "../Renderable.js"
+import { GameLib } from "../GameLib.js"
+class Button extends Renderable {
+  constructor(pos, size, scene) {
+    super(scene);
+    this.overlay = true;
+    this._canvas = this.gameLib.viewportCanvas;
+    this._ctx = this.gameLib.viewportCtx;
+    this._box = new Box(pos, size);
+    this.hover = false;
+    this.cursor = "default";
+  }
+  moveTo(x, y) {
+    this._box.moveTo(x, y);
+  }
+  get x() {
+    return this._box.x;
+  }
+  get y() {
+    return this._box.y;
+  }
+  get width() {
+    return this._box.width;
+  }
+  get height() {
+    return this._box.height;
+  }
+  handleClick(evt, coord) {
+    if(coord.x >= this._box.x && coord.y >= this._box.y  && coord.x <= this._box.x + this._box.width && coord.y <= this._box.y + this._box.height) {
+      this.clicked();
+      return true;
+    }
+    return false;
+  }
+  handleHover(evt, coord) {
+    if(coord.x >= this._box.x && coord.y >= this._box.y  && coord.x <= this._box.x + this._box.width && coord.y <= this._box.y + this._box.height) {
+      this.hover = true;
+      GameLib.cursor(this.cursor);
+      return true;
+    } else {
+      this.hover = false;
+      return false;
+    }
+  }
+  clicked() {
+    this.hover = false;
+    GameLib.cursor("default");
+  }
+}
+export {
+  Button
+}

package/src/2D/UI/TextInput.js

@@ -0,0 +1,77 @@
+import { Renderable } from "../Renderable.js"
+class TextInput extends Renderable {
+  constructor(pos, size, scene) {
+    super(scene);
+    this.overlay = true;
+    this._canvas = this.gameLib.viewportCanvas;
+    this._canvasRect = this._canvas.getBoundingClientRect();
+    this.canvasX = this._canvasRect.x;
+    this.canvasY = this._canvasRect.y;
+    this._ctx = this.gameLib.viewportCtx;
+    this._box = new Box(pos, size);
+    this._active = false;
+    this._value = null;
+    this._element = null;
+  }
+  createElement() {
+    this._element = document.createElement('input');
+    this._element.setAttribute('style', this.getStyle());
+    this._element.setAttribute('type', 'text');
+    document.body.appendChild(this._element);
+  }
+  getStyle() {
+    return 'box-sizing: border-box;padding-left: 5px;padding-right: 5px;z-index: 999;display: block;position: absolute;left: ' + (this.canvasX + this.x) + 'px;top: ' + (this.canvasY + this.y) + 'px;width: ' + this.width + 'px;height: ' + this.height + 'px;outline: none;background: transparent;border: 0;';
+  }
+  draw() {
+    if(this._element) {
+      this._canvasRect = this._canvas.getBoundingClientRect();
+      this.canvasX = this._canvasRect.x;
+      this.canvasY = this._canvasRect.y;
+      this._element.setAttribute('style', this.getStyle());
+    } else {
+      this.createElement();
+    }
+    this._ctx.fillStyle = "#ffffff";
+    this._ctx.fillRect(this.x, this.y, this.width, this.height);
+  }
+  get value() {
+    if(this._element) {
+      return this._element.value;
+    }
+  }
+  overlaySkipped() {
+    if(this._element) {
+      this.removeElement();
+    }
+  }
+  removeElement() {
+    this._element.remove();
+    this._element = null;
+  }
+  setActive(active) {
+    super.setActive(active);
+    if(active) {
+      this.createElement();
+    } else {
+      this.removeElement();
+    }
+  }
+  moveTo(x, y) {
+    this._box.moveTo(x, y);
+  }
+  get x() {
+    return this._box.x;
+  }
+  get y() {
+    return this._box.y;
+  }
+  get width() {
+    return this._box.width;
+  }
+  get height() {
+    return this._box.height;
+  }
+}
+export {
+  TextInput
+}

package/src/2D/UI/UIElement.js

@@ -0,0 +1,10 @@
+import { Renderable } from "../Renderable.js"
+class UIElement extends Renderable {
+  constructor(scene) {
+    super(scene);
+    this.makeOverlay();
+  }
+}
+export {
+  UIElement
+}

package/src/2D/UI/index.js

@@ -0,0 +1,15 @@
+import { GameLibCore } from "../../Core/index.js"
+import { UIElement } from "./UIElement.js"
+import { Button } from "./Button.js"
+import { TextInput } from "./TextInput.js"
+class UI {
+  constructor() {
+    throw new GameLibCore.Error("Class UI may not be constructed!");
+  }
+  static UIElement = UIElement;
+  static Button = Button;
+  static TextInput = TextInput;
+}
+export {
+  UI
+}

package/src/2D/index.js

@@ -0,0 +1,24 @@
+import { Coord } from "./Coord.js"
+import { Size } from "./Size.js"
+import { Box } from "./Box.js"
+import { Rotation } from "./Rotation.js"
+import { Renderable } from "./Renderable.js"
+import { Sprite } from "./Sprite.js"
+import { GameLib } from "./GameLib.js"
+import { UI } from "./UI/index.js"
+class GameLib2D {
+  constructor() {
+    throw new GameLibCore.Error("Wrapper class GameLib2D may not be constructed!");
+  }
+  static Coord = Coord;
+  static Size = Size;
+  static Box = Box;
+  static Rotation = Rotation;
+  static Renderable = Renderable;
+  static Sprite = Sprite;
+  static GameLib = GameLib;
+  static UI = UI;
+}
+export {
+  GameLib2D
+}

package/src/3D/Camera.js

@@ -0,0 +1,25 @@
+import { Position } from "./Position.js"
+import { Transform } from "./Transform.js"
+import { Rotation } from "./Rotation.js"
+import { mat4 } from "../Core/Matrix/mat4.js"
+class Camera {
+  constructor(fovDegrees=45, near=0.1, far=100.0) {
+    this.transform = new Transform(new Position(0, 0, 0));
+    this.fov = Rotation.d2r(fovDegrees);
+    this.near = near;
+    this.far = far;
+  }
+  getProjectionMatrix(aspectRatio) {
+    var proj = mat4.create();
+    mat4.perspective(proj, this.fov, aspectRatio, this.near, this.far);
+    return proj;
+  }
+  getViewMatrix() {
+    var view = this.transform.getModelMatrix();
+    mat4.invert(view, view);
+    return view;
+  }
+}
+export {
+  Camera
+}