Feat/tilemap canvas caching

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tg-engine",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "a small sprite game engine for typescript, build with stenciljs, ALPHA VERSION",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

src/components.d.ts

@@ -6,15 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { IVector2 } from "./interfaces/IVector2";
-import { ICollider } from "./interfaces/ICollider";
-import { IParticleConfig } from "./interfaces";
+import { ICollider, IParticleConfig, ITile, IVector2 as IVector21 } from "./interfaces";
 import { IAnimation } from "./interfaces/IAnimation";
-import { ITile } from "./interfaces/ITile";
 export { IVector2 } from "./interfaces/IVector2";
-export { ICollider } from "./interfaces/ICollider";
-export { IParticleConfig } from "./interfaces";
+export { ICollider, IParticleConfig, ITile, IVector2 as IVector21 } from "./interfaces";
 export { IAnimation } from "./interfaces/IAnimation";
-export { ITile } from "./interfaces/ITile";
 export namespace Components {
     interface ExampleAnimator {
     }
@@ -48,7 +44,7 @@ export namespace Components {
         /**
           * @default new Vector2(0, 0)
          */
-        "vector": IVector2;
+        "vector": IVector21;
     }
     interface ExampleEntityWall {
         /**
@@ -83,7 +79,7 @@ export namespace Components {
         "width": number;
     }
     interface TgCollider {
-        "checkCollisionOnPosition": (x: number, y: number, width: number, height: number) => Promise<TgCollider>;
+        "checkCollisionOnPosition": (x: number, y: number, width: number, height: number) => Promise<HTMLTgColliderElement | null>;
         /**
           * @default false
          */
@@ -275,6 +271,14 @@ export namespace Components {
         "state": 'running' | 'paused';
     }
     interface TgSpriteMap {
+        /**
+          * @default ''
+         */
+        "colliderMapId": string;
+        /**
+          * @default false
+         */
+        "debugColliders": boolean;
         /**
           * @default 1
          */
@@ -283,6 +287,14 @@ export namespace Components {
           * @default 5
          */
         "height": number;
+        /**
+          * @default false
+         */
+        "registerColliders": boolean;
+        /**
+          * @default 'canvas'
+         */
+        "renderMode": 'dom' | 'canvas';
         /**
           * @default 1
          */
@@ -594,7 +606,7 @@ declare namespace LocalJSX {
         /**
           * @default new Vector2(0, 0)
          */
-        "vector"?: IVector2;
+        "vector"?: IVector21;
     }
     interface ExampleEntityWall {
         /**
@@ -830,6 +842,14 @@ declare namespace LocalJSX {
         "state"?: 'running' | 'paused';
     }
     interface TgSpriteMap {
+        /**
+          * @default ''
+         */
+        "colliderMapId"?: string;
+        /**
+          * @default false
+         */
+        "debugColliders"?: boolean;
         /**
           * @default 1
          */
@@ -838,6 +858,14 @@ declare namespace LocalJSX {
           * @default 5
          */
         "height"?: number;
+        /**
+          * @default false
+         */
+        "registerColliders"?: boolean;
+        /**
+          * @default 'canvas'
+         */
+        "renderMode"?: 'dom' | 'canvas';
         /**
           * @default 1
          */

src/components/engine/tg-collider/readme.md

@@ -31,7 +31,7 @@
 
 ## Methods
 
-### `checkCollisionOnPosition(x: number, y: number, width: number, height: number) => Promise<TgCollider>`
+### `checkCollisionOnPosition(x: number, y: number, width: number, height: number) => Promise<HTMLTgColliderElement | null>`
 
 
 
@@ -46,7 +46,7 @@
 
 #### Returns
 
-Type: `Promise<TgCollider>`
+Type: `Promise<HTMLTgColliderElement>`
 
 
 

src/components/engine/tg-collider/tg-collider.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, h, Method,Event,  EventEmitter, Host, Prop, ComponentInterface} from '@stencil/core';
 import { ColliderManager } from '../../../manager/collider.manager';
-import { ICollider } from '../../../interfaces/ICollider';
+import { ICollider } from '../../../interfaces';
 
 @Component({
   tag: 'tg-collider',
@@ -28,30 +28,30 @@ export class TgCollider implements ComponentInterface {
   }
 
   disconnectedCallback() {
-    this.manager.removeCollider(this);
+    this.manager.removeCollider(this.el);
   }
 
-  async checkCollisionOnName(name:string):Promise<TgCollider> {
-   const a = this.el;
-   const colliders =  this.manager.getColliders().filter(collider => collider.name === name);
+  async checkCollisionOnName(name: string): Promise<HTMLTgColliderElement | null> {
+    const a = this.el;
+    const colliders = this.manager.getColliders().filter(collider => collider.name === name);
 
-    for(let i = 0; i < colliders.length; i++){
+    for (let i = 0; i < colliders.length; i++) {
       const b = colliders[i];
-      if(a.x < b.x + b.width && a.x + a.width > b.x &&
-        a.y < b.y + b.height && a.y + a.height > b.y){
+      if (a.x < b.x + b.width && a.x + a.width > b.x &&
+        a.y < b.y + b.height && a.y + a.height > b.y) {
         return b;
       }
     }
     return null;
   }
 
   @Method()
-  async checkCollisionOnPosition(x:number,y:number,width:number,height:number):Promise<TgCollider> {
+  async checkCollisionOnPosition(x: number, y: number, width: number, height: number): Promise<HTMLTgColliderElement | null> {
     const a = this.el;
-    if(a.x < x + width && a.x + a.width > x &&
-      a.y < y + height && a.y + a.height > y){
-      return this;
-    }else{
+    if (a.x < x + width && a.x + a.width > x &&
+      a.y < y + height && a.y + a.height > y) {
+      return this.el;
+    } else {
       return null;
     }
   }

src/components/engine/tg-sprite-map/readme.md

@@ -7,17 +7,21 @@
 
 ## Properties
 
-| Property     | Attribute     | Description | Type      | Default |
-| ------------ | ------------- | ----------- | --------- | ------- |
-| `hFrames`    | `h-frames`    |             | `number`  | `1`     |
-| `height`     | `height`      |             | `number`  | `5`     |
-| `scale`      | `scale`       |             | `number`  | `1`     |
-| `src`        | `src`         |             | `string`  | `''`    |
-| `tileHeight` | `tile-height` |             | `number`  | `16`    |
-| `tileWidth`  | `tile-width`  |             | `number`  | `16`    |
-| `tiles`      | --            |             | `ITile[]` | `[]`    |
-| `vFrames`    | `v-frames`    |             | `number`  | `1`     |
-| `width`      | `width`       |             | `number`  | `5`     |
+| Property            | Attribute            | Description | Type                | Default    |
+| ------------------- | -------------------- | ----------- | ------------------- | ---------- |
+| `colliderMapId`     | `collider-map-id`    |             | `string`            | `''`       |
+| `debugColliders`    | `debug-colliders`    |             | `boolean`           | `false`    |
+| `hFrames`           | `h-frames`           |             | `number`            | `1`        |
+| `height`            | `height`             |             | `number`            | `5`        |
+| `registerColliders` | `register-colliders` |             | `boolean`           | `false`    |
+| `renderMode`        | `render-mode`        |             | `"canvas" \| "dom"` | `'canvas'` |
+| `scale`             | `scale`              |             | `number`            | `1`        |
+| `src`               | `src`                |             | `string`            | `''`       |
+| `tileHeight`        | `tile-height`        |             | `number`            | `16`       |
+| `tileWidth`         | `tile-width`         |             | `number`            | `16`       |
+| `tiles`             | --                   |             | `ITile[]`           | `[]`       |
+| `vFrames`           | `v-frames`           |             | `number`            | `1`        |
+| `width`             | `width`              |             | `number`            | `5`        |
 
 
 ## Dependencies