diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..9fb2ce3 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,3 @@ +# Local Examples + +These are some local example and do not meant to be hosted in production (but they may be). diff --git a/examples/delta-time/script.ts b/examples/delta-time/script.ts index 850a2b8..1aeb81e 100644 --- a/examples/delta-time/script.ts +++ b/examples/delta-time/script.ts @@ -1,4 +1,4 @@ -import { Engine, Point } from '../../lib'; +import { Engine } from '../../lib'; const engine = new Engine( document.getElementById('canvas') as HTMLCanvasElement, @@ -10,7 +10,7 @@ const engine = new Engine( }, ); -const { renderer, input } = engine; +const { renderer } = engine; const random = () => { return Math.random(); @@ -22,17 +22,21 @@ document.getElementById('checkbox')?.addEventListener('change', (e) => { engine.options.engineOptions!.clearEachFrame = (e.target as any).checked; }); -engine.update = (engine, deltaTime) => { - const point = renderer.point({ - show: true, - x: Math.random() * engine.width, - y: Math.random() * engine.height, - color: `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`, - radius: random() * 10, - }); +var lastTime = Date.now(); - point.update = (_) => { - point.options.x += speed * deltaTime; - point.options.x += speed * deltaTime; - }; +engine.update = (engine, deltaTime) => { + var currentTime = Date.now(); + if (currentTime - lastTime > 50) { + const point = renderer.point({ + show: true, + x: Math.random() * engine.width, + y: Math.random() * engine.height, + color: `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`, + radius: random() * 10, + }); + setTimeout(() => { + renderer.removeObject(point); + }, 200); + lastTime = Date.now(); + } }; diff --git a/examples/index.html b/examples/index.html index 277aa18..b7313b3 100644 --- a/examples/index.html +++ b/examples/index.html @@ -22,6 +22,7 @@

We got examples for you

  • Mouse Inputs
  • Keyboard Inputs
  • Update
  • +
  • Delta Time
  • diff --git a/lib/render/engine.ts b/lib/render/engine.ts index 9885296..bcbf896 100644 --- a/lib/render/engine.ts +++ b/lib/render/engine.ts @@ -76,16 +76,16 @@ export class Engine { let lowLimit = 1; let lastRenderTime = Date.now(); + let deltaTime = 1; const render = () => { - let deltaTime = Date.now() - lastRenderTime; if (deltaTime < lowLimit) deltaTime = lowLimit; - this.update(this, deltaTime); if (options.engineOptions!.clearEachFrame) { this.context?.clearRect(0, 0, this.width, this.height); } this.renderer.render(deltaTime); this.resetEvent(); + deltaTime = Date.now() - lastRenderTime; lastRenderTime = Date.now(); requestAnimationFrame(render); }; @@ -104,7 +104,8 @@ export class Engine { _engine: Engine, _deltaTime: number, ) => {}; - start: (engine: Engine) => void = (_engine: Engine) => {}; + + start: (_engine: Engine) => void = (_engine: Engine) => {}; // reset single frame events resetEvent() { diff --git a/lib/render/renderer.ts b/lib/render/renderer.ts index 9a53785..3609187 100644 --- a/lib/render/renderer.ts +++ b/lib/render/renderer.ts @@ -1,4 +1,4 @@ -import { forEach } from 'lodash'; +import _, { forEach } from 'lodash'; import { DefaultPointOptions } from '../constants'; import { BaseObjectInterface, BaseRenderer, PointOptions } from '../types'; import { Point } from './objects'; @@ -19,7 +19,9 @@ export class Renderer extends BaseRenderer { render(deltaTime: number) { forEach(this.objects, (object) => { - object.checkDrawConditionAndDraw(deltaTime); + if (object) { + object.checkDrawConditionAndDraw(deltaTime); + } }); } @@ -29,15 +31,23 @@ export class Renderer extends BaseRenderer { * @param {BaseObjectInterface} object * @returns */ - addObject(object: T): T { - this.objects.push(object as BaseObjectInterface); + addObject(object: T): T { + this.objects[object.id] = object as BaseObjectInterface; (object as BaseObjectInterface).renderer = this; return object; } + removeObject(object: T) { + delete this.objects[object.id]; + } + + getObject(id: string) { + return this.objects[id]; + } + point(options: PointOptions = DefaultPointOptions) { const point = new Point(options, this); - this.objects.push(point); + this.objects[point.id] = point; return point; } } diff --git a/lib/types/renderer.ts b/lib/types/renderer.ts index 18828cc..13e33f8 100644 --- a/lib/types/renderer.ts +++ b/lib/types/renderer.ts @@ -11,11 +11,11 @@ import { BaseObjectInterface } from './shapes'; export abstract class BaseRenderer { context: CanvasRenderingContext2D; - objects: BaseObjectInterface[]; + objects: Record; constructor(context: CanvasRenderingContext2D) { this.context = context; - this.objects = []; + this.objects = {}; } abstract render(deltaTime: number): void; } diff --git a/lib/types/shapes.ts b/lib/types/shapes.ts index 9ff0c11..3ff7c68 100644 --- a/lib/types/shapes.ts +++ b/lib/types/shapes.ts @@ -6,7 +6,7 @@ export interface BaseObjectInterface { /** * A Unique Id that will help us identify each object in the Engine */ - id?: string; + id: string; renderer: Renderer; }