sprite component

packages/client/src/Components/Character.ts

@@ -0,0 +1,59 @@
+import { Container, Sprite, signal } from "canvasengine";
+import { GameEngineClient } from "../GameEngine";
+import { spritesheets } from "../Resources";
+import { inject } from "../inject";
+
+export function CharacterComponent(props) {
+  const graphic = props.layout?.center.lines[0].col[0].value;
+  const { direction, x, y } = props;
+  const game = inject(GameEngineClient);
+  if (!graphic) {
+    return Container();
+  }
+
+  const controls = signal({
+    down: {
+      repeat: true,
+      bind: "down",
+      trigger() {
+        y.update((y) => y + 3);
+      },
+    },
+    up: {
+      repeat: true,
+      bind: "up",
+      trigger() {
+        y.update((y) => y - 3);
+      },
+    },
+    left: {
+      repeat: true,
+      bind: "left",
+      trigger() {
+        x.update((x) => x - 3);
+      },
+    },
+    right: {
+      repeat: true,
+      bind: "right",
+      trigger() {
+        x.update((x) => x + 3);
+      },
+    },
+  });
+
+  const spritesheet = spritesheets.get(graphic);
+
+  return Sprite({
+    sheet: {
+      definition: spritesheet.$decorator,
+      playing: "stand",
+      params: {
+        direction
+      }
+    },
+    controls: props.id == game.playerId() ? controls : undefined,
+    x,
+    y,
+  });
+}

packages/client/src/GameEngine.ts

@@ -0,0 +1,52 @@
+import { signal } from "canvasengine";
+
+export class GameEngineClient {
+  playerId = signal("");
+  session = signal("");
+  objects = signal<any[]>([]);
+
+  animationX: any;
+  animationY: any;
+
+  updateObject(obj) {
+    const { playerId: id, params, localEvent, paramsChanged, isShape } = obj;
+    const findObject = this.objects().find((o: any) => o.id == id);
+    if (!findObject) {
+      this.objects.mutate((objs) =>
+        objs.push({
+          id,
+          ...params,
+          x: signal(params.position?.x ?? params.x),
+          y: signal(params.position?.y ?? params.y),
+          direction: signal(params.direction),
+        })
+      );
+    } else {
+      if (paramsChanged.position?.x) {
+        if (this.animationX) {
+          this.animationX.stop();
+        }
+        this.animationX = findObject.x.animate(
+          paramsChanged.position?.x ?? params.x,
+          {
+            duration: 50,
+          }
+        );
+      }
+      if (paramsChanged.position?.y) {
+        if (this.animationY) {
+          this.animationY.stop();
+        }
+        this.animationY = findObject.y.animate(
+          paramsChanged.position?.y ?? params.y,
+          {
+            duration: 50,
+          }
+        );
+      }
+      if (paramsChanged.direction !== undefined) {
+        findObject.direction.set(paramsChanged.direction);
+      }
+    }
+  }
+}

packages/client/src/Presets/AnimationSpritesheet.ts

@@ -1,50 +1,59 @@
-import { Direction } from '@rpgjs/common'
+import { Direction } from "@rpgjs/common";
 
 export enum Animation {
-    Stand = 'stand',
-    Walk = 'walk',
-    Attack = 'attack',
-    Defense = 'defense',
-    Skill = 'skill'
+  Stand = "stand",
+  Walk = "walk",
+  Attack = "attack",
+  Defense = "defense",
+  Skill = "skill",
 }
 
-export const RMSpritesheet = (framesWidth: number, framesHeight: number, frameStand: number = 1) => {
+export const RMSpritesheet = (
+  framesWidth: number,
+  framesHeight: number,
+  frameStand: number = 1
+) => {
+  if (framesWidth <= frameStand) {
+    frameStand = framesWidth - 1;
+  }
 
-    if (framesWidth <= frameStand) {
-        frameStand = framesWidth - 1
-    }
-
-    const frameY = direction => {
-        const gap = Math.max(4 - framesHeight, 0)
-        return {
-            [Direction.Down]: 0,
-            [Direction.Left]: Math.max(0, 1 - gap),
-            [Direction.Right]: Math.max(0, 2 - gap),
-            [Direction.Up]: Math.max(0, 3 - gap)
-        }[direction]
-    }
+  const frameY = (direction) => {
+    const gap = Math.max(4 - framesHeight, 0);
+    return {
+      [Direction.Down]: 0,
+      [Direction.Left]: Math.max(0, 1 - gap),
+      [Direction.Right]: Math.max(0, 2 - gap),
+      [Direction.Up]: Math.max(0, 3 - gap),
+    }[direction];
+  };
 
-    const stand = (direction: number) => [{ time: 0, frameX: frameStand, frameY: frameY(direction) }]
-    const walk = direction => {
-        const array: any = []
-        const durationFrame = 10
-        for (let i = 0; i < framesWidth; i++) {
-            array.push({ time: i * durationFrame, frameX: i, frameY: frameY(direction) })
-        }
-        array.push({ time: array[array.length - 1].time + durationFrame })
-        return array
+  const stand = (direction: number) => [
+    { time: 0, frameX: frameStand, frameY: frameY(direction) },
+  ];
+  const walk = (direction) => {
+    const array: any = [];
+    const durationFrame = 10;
+    for (let i = 0; i < framesWidth; i++) {
+      array.push({
+        time: i * durationFrame,
+        frameX: i,
+        frameY: frameY(direction),
+      });
     }
+    array.push({ time: array[array.length - 1].time + durationFrame });
+    return array;
+  };
 
-    return {
-        textures: {
-            [Animation.Stand]: {
-                animations: direction => [stand(direction)]
-            },
-            [Animation.Walk]: {
-                animations: direction => [walk(direction)]
-            }
-        },
-        framesHeight,
-        framesWidth
-    }
-}
+  return {
+    textures: {
+      [Animation.Stand]: {
+        animations: ({ direction }) => [stand(direction)],
+      },
+      [Animation.Walk]: {
+        animations: ({ direction }) => [walk(direction)],
+      },
+    },
+    framesHeight,
+    framesWidth,
+  };
+};

packages/client/src/Resources.ts

@@ -0,0 +1,57 @@
+import { RpgClientEngine } from "./RpgClientEngine";
+/**
+* Get/Set images in resources
+ ```ts
+    import { RpgResource } from '@rpg/client'
+    const fileLink = RpgResource.spritesheets.get('resource_id')
+  ```
+* @title Get/Set image link
+* @prop { Map< string, string > } spritesheets
+* @memberof Resources
+*/
+/**
+* Get/Set sounds in resources
+ ```ts
+    import { RpgResource } from '@rpg/client'
+    const fileLink = RpgResource.sounds.get('resource_id')
+  ```
+* @title Get/Set sound link
+* @prop { Map< string, string > } sounds
+* @memberof Resources
+*/
+export async function _initResource(
+  memory: Map<string, any>,
+  _resources,
+  prop: string,
+  engine: RpgClientEngine
+) {
+  for (let resource of _resources) {
+    const pluralProp = prop + "s";
+    const propDecorator = resource.$decorator[pluralProp]
+    if (propDecorator && !resource.$decorator[prop]) {
+      for (let key in propDecorator) {
+        const instance = new resource();
+        instance.$decorator = resource.$decorator;
+        instance.$decorator[prop] = engine.getResourceUrl(propDecorator[key]);
+        delete instance.$decorator[pluralProp];
+        instance.id = instance.$decorator.id = key;
+        memory.set(key, instance);
+      }
+    } else {
+      const instance = new resource(engine);
+      const id = resource.$decorator.id
+      if (!id) {
+        throw new Error(`Resource ${resource[prop]} must have an id`);
+      }
+      instance.$decorator = resource.$decorator;
+      instance.$decorator[prop] = engine.getResourceUrl(instance.$decorator[prop]);
+      memory.set(id, instance);
+    }
+  }
+}
+
+export const spritesheets: Map<string, any> = new Map();
+
+export function _initSpritesheet(_spritesheets, engine: RpgClientEngine) {
+  return _initResource(spritesheets, _spritesheets, "image", engine);
+}