@rpgjs/client 5.0.0-alpha.13 → 5.0.0-alpha.15

package/src/components/animations/animation.ce

@@ -7,10 +7,9 @@
   const { x, y, animationName, graphic, onFinish } = defineProps();
 
   const client = inject(RpgClientEngine);
-  const spritesheets = client.spritesheets;
 
   const sheet = {
-    definition: spritesheets.get(graphic()),
+    definition: client.getSpriteSheet(graphic()),
     playing: animationName() ?? 'default',
     onFinish
   };

package/src/components/character.ce

@@ -1,4 +1,4 @@
-<Container x y zIndex={y} viewportFollow={isMe} controls onBeforeDestroy>
+<Container x={smoothX} y={smoothY} zIndex={y} viewportFollow={isMe} controls onBeforeDestroy visible>
   @for (component of componentsBehind) {
     <Container>
       <component object />
@@ -18,8 +18,8 @@
 </Container>
 
 <script>
-  import { signal, effect, mount, computed, tick } from "canvasengine";
-  import { lastValueFrom } from "rxjs";
+  import { signal, effect, mount, computed, tick, animatedSignal } from "canvasengine";
+  import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from "rxjs";
   import { Particle } from "@canvasengine/presets";
   import { GameEngineToken, ModulesToken } from "@rpgjs/common";
   import { RpgClientEngine } from "../RpgClientEngine";
@@ -28,7 +28,7 @@
   import Hit from "./effects/hit.ce";
 
   const { object, id } = defineProps();
-  
+
   const client = inject(RpgClientEngine);
   const hooks = inject(ModulesToken);
 
@@ -48,7 +48,8 @@
     emitParticleTrigger, 
     particleName, 
     graphics, 
-    hitbox 
+    hitbox,
+    isConnected,
   } = object;
 
   const particleSettings = client.particleSettings;
@@ -56,6 +57,13 @@
   const canControls = () => isMe() && object.canMove()
   const keyboardControls = client.globalConfig.keyboardControls;
 
+  const visible = computed(() => {
+    if (object.type === 'event') {
+      return true
+    }
+    return isConnected()
+  });
+
   const controls = signal({
     down: {
       repeat: true,
@@ -98,10 +106,28 @@
     },
   });
 
+  const smoothX = animatedSignal(x(), {
+    duration: isMe() ? 0 : 0
+  });
+
+  const smoothY = animatedSignal(y(), {
+    duration: isMe() ? 0 : 0,
+  });
+
+  const realAnimationName = signal(animationName());
+
+  const xSubscription = x.observable.subscribe((value) => {
+    smoothX.set(value);
+  });
+
+  const ySubscription = y.observable.subscribe((value) => {
+    smoothY.set(value);
+  });
+  
   const sheet = (graphicId) => {
     return {
-      definition: spritesheets.get(graphicId),
-      playing: animationName,
+      definition: client.getSpriteSheet(graphicId),
+      playing: realAnimationName,
       params: {
         direction
       },
@@ -111,27 +137,62 @@
     };
   }
 
-  // Track animation changes to reset animation state when needed
-  let previousAnimationName = animationName();
-  effect(() => {
-    const currentAnimationName = animationName();
-    
-    // If animation changed externally (not through setAnimation), reset the state
-    if (currentAnimationName !== previousAnimationName && object.animationIsPlaying && object.animationIsPlaying()) {
-      // Check if this is a movement animation (walk, stand) that should interrupt custom animations
-      const movementAnimations = ['walk', 'stand'];
-      if (movementAnimations.includes(currentAnimationName)) {
+  // Combine animation change detection with movement state from smoothX/smoothY
+  const movementAnimations = ['walk', 'stand'];
+  const epsilon = 0; // movement threshold to consider the easing still running
+
+  const stateX$ = smoothX.animatedState.observable;
+  const stateY$ = smoothY.animatedState.observable;
+  const animationName$ = animationName.observable;
+
+  const moving$ = combineLatest([stateX$, stateY$]).pipe(
+    map(([sx, sy]) => {
+      const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;
+      const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;
+      return !xFinished || !yFinished; // moving if X or Y is not finished
+    }),
+    startWith(false)
+  );
+
+  const animationChange$ = animationName$.pipe(
+    startWith(animationName()),
+    pairwise(),
+    filter(([prev, curr]) => prev !== curr)
+  );
+
+  const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {
+    if (curr == 'stand' && !isMoving) {
+      realAnimationName.set(curr);
+    }
+    else if (curr == 'walk' && isMoving) {
+      realAnimationName.set(curr);
+    }
+    else if (!movementAnimations.includes(curr)) {
+      realAnimationName.set(curr);
+    }
+    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {
+      if (movementAnimations.includes(curr)) {
         if (typeof object.resetAnimationState === 'function') {
           object.resetAnimationState();
         }
       }
     }
-    
-    previousAnimationName = currentAnimationName;
-    
   });
 
+  /**
+   * Cleanup subscriptions and call hooks before sprite destruction.
+   *
+   * # Design
+   * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.
+   * - Execute destruction hooks to notify modules and scene map of sprite removal.
+   *
+   * @example
+   * await onBeforeDestroy();
+   */
   const onBeforeDestroy = async () => {
+    animationMovementSubscription.unsubscribe();
+    xSubscription.unsubscribe();
+    ySubscription.unsubscribe();
     await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", object)) 
     await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, object))
   }

package/src/components/gui/dialogbox/index.ce

@@ -78,7 +78,6 @@
   }
   const dialogBoxTypewriterSound = client.globalConfig?.box?.sounds?.typewriter
 
-  const spritesheets = client.spritesheets;
   const sounds = client.sounds;
 
   client.stopProcessingInput = true;
@@ -140,7 +139,7 @@
 
   const faceSheet = (graphicId, animationName) => {
     return {
-      definition: spritesheets.get(graphicId),
+      definition: client.getSpriteSheet(graphicId),
       playing: animationName,
     };
   }

package/src/module.ts

@@ -22,6 +22,14 @@ export function provideClientModules(modules: RpgClient[]) {
           },
         };
       }
+      if (module.spritesheetResolver) {
+        const resolver = module.spritesheetResolver;
+        module.spritesheetResolver = {
+          load: (engine: RpgClientEngine) => {
+            engine.setSpritesheetResolver(resolver);
+          },
+        };
+      }
       if (module.sounds) {
         const sounds = [...module.sounds];
         module.sounds = {

package/src/services/mmorpg.ts

@@ -10,10 +10,14 @@ interface MmorpgOptions {
 }
 
 class BridgeWebsocket extends AbstractWebsocket {
-    private socket: any;
+  private socket: any;
+  private privateId: string;
 
   constructor(protected context: Context, private options: MmorpgOptions = {}) {
     super(context);
+    const id = localStorage.getItem("rpgjs-user-id") || crypto.randomUUID()
+    localStorage.setItem("rpgjs-user-id", id)
+    this.privateId = id
   }
 
   async connection(listeners?: (data: any) => void) {
@@ -25,6 +29,7 @@ class BridgeWebsocket extends AbstractWebsocket {
     this.socket = await connectionRoom({
         host: this.options.host || window.location.host,
         room: "lobby-1",
+        id: this.privateId
     }, instance)
 
     listeners?.(this.socket)
@@ -45,6 +50,7 @@ class BridgeWebsocket extends AbstractWebsocket {
   updateProperties({ room }: { room: any }) {
     this.socket.conn.updateProperties({
       room: room,
+      id: this.privateId,
       host: this.options.host
     })
   }