@rpgjs/client 5.0.0-alpha.32 → 5.0.0-alpha.35

package/src/RpgClientEngine.ts

@@ -18,11 +18,22 @@ import * as PIXI from "pixi.js";
 import { PrebuiltComponentAnimations } from "./components/animations";
 import {
   PredictionController,
+  type PredictionHistoryEntry,
   type PredictionState,
 } from "@rpgjs/common";
 import { NotificationManager } from "./Gui/NotificationManager";
 import { SaveClientService } from "./services/save";
 
+interface MovementTrajectoryPoint {
+  frame: number;
+  tick: number;
+  timestamp: number;
+  input: Direction;
+  x: number;
+  y: number;
+  direction?: Direction;
+}
+
 export class RpgClientEngine<T = any> {
   private guiService: RpgGui;
   private webSocket: AbstractWebsocket;
@@ -64,12 +75,18 @@ export class RpgClientEngine<T = any> {
   private prediction?: PredictionController<Direction>;
   private readonly SERVER_CORRECTION_THRESHOLD = 30;
   private inputFrameCounter = 0;
+  private pendingPredictionFrames: number[] = [];
+  private lastClientPhysicsStepAt = 0;
   private frameOffset = 0;
   // Ping/Pong for RTT measurement
   private rtt: number = 0; // Round-trip time in ms
   private pingInterval: any = null;
   private readonly PING_INTERVAL_MS = 5000; // Send ping every 5 seconds
   private lastInputTime = 0;
+  private readonly MOVE_PATH_RESEND_INTERVAL_MS = 120;
+  private readonly MAX_MOVE_TRAJECTORY_POINTS = 240;
+  private lastMovePathSentAt = 0;
+  private lastMovePathSentFrame = 0;
   // Track map loading state for onAfterLoading hook using RxJS
   private mapLoadCompleted$ = new BehaviorSubject<boolean>(false);
   private playerIdReceived$ = new BehaviorSubject<boolean>(false);
@@ -156,6 +173,8 @@ export class RpgClientEngine<T = any> {
 
   async start() {
     this.sceneMap = new RpgClientMap()
+    this.sceneMap.configureClientPrediction(this.predictionEnabled);
+    this.sceneMap.loadPhysic();
     this.selector = document.body.querySelector("#rpg") as HTMLElement;
 
     const bootstrapOptions = (this.globalConfig as any)?.bootstrapCanvasOptions;
@@ -200,6 +219,9 @@ export class RpgClientEngine<T = any> {
     window.addEventListener('resize', this.resizeHandler);
 
     const tickSubscription = this.tick.subscribe((tick) => {
+      this.stepClientPhysicsTick();
+      this.flushPendingPredictedStates();
+      this.flushPendingMovePath();
       this.hooks.callHooks("client-engine-onStep", this, tick).subscribe();
 
       // Clean up old prediction states and input history every 60 ticks (approximately every second at 60fps)
@@ -216,9 +238,56 @@ export class RpgClientEngine<T = any> {
       saveClient.initialize(this.webSocket);
       this.initListeners()
       this.guiService._initialize()
+      this.startPingPong();
     });
   }
 
+  private prepareSyncPayload(data: any): any {
+    const payload = { ...(data ?? {}) };
+    delete payload.ack;
+    delete payload.timestamp;
+
+    const myId = this.playerIdSignal();
+    const players = payload.players;
+    const shouldMaskLocalPosition =
+      this.predictionEnabled && !!this.prediction?.hasPendingInputs();
+    if (shouldMaskLocalPosition && myId && players && players[myId]) {
+      const localPatch = { ...players[myId] };
+      delete localPatch.x;
+      delete localPatch.y;
+      delete localPatch.direction;
+      delete localPatch._frames;
+      payload.players = {
+        ...players,
+        [myId]: localPatch,
+      };
+    }
+
+    return payload;
+  }
+
+  private normalizeAckWithSyncState(
+    ack: { frame: number; serverTick?: number; x?: number; y?: number; direction?: Direction },
+    syncData: any,
+  ): { frame: number; serverTick?: number; x?: number; y?: number; direction?: Direction } {
+    const myId = this.playerIdSignal();
+    if (!myId) {
+      return ack;
+    }
+
+    const localPatch = syncData?.players?.[myId];
+    if (typeof localPatch?.x !== "number" || typeof localPatch?.y !== "number") {
+      return ack;
+    }
+
+    return {
+      ...ack,
+      x: localPatch.x,
+      y: localPatch.y,
+      direction: localPatch.direction ?? ack.direction,
+    };
+  }
+
   private initListeners() {
     this.webSocket.on("sync", (data) => {
       if (data.pId) {
@@ -229,16 +298,27 @@ export class RpgClientEngine<T = any> {
 
       if (this.sceneResetQueued) {
         this.sceneMap.reset();
+        this.sceneMap.loadPhysic();
         this.sceneResetQueued = false;
       }
 
       // Apply client-side prediction filtering and server reconciliation
       this.hooks.callHooks("client-sceneMap-onChanges", this.sceneMap, { partial: data }).subscribe();
 
-      load(this.sceneMap, data, true);
+      const ack = data?.ack;
+      const normalizedAck =
+        ack && typeof ack.frame === "number"
+          ? this.normalizeAckWithSyncState(ack, data)
+          : undefined;
+      const payload = this.prepareSyncPayload(data);
+      load(this.sceneMap, payload, true);
 
-      for (const playerId in data.players ?? {}) {
-        const player = data.players[playerId]
+      if (normalizedAck) {
+        this.applyServerAck(normalizedAck);
+      }
+
+      for (const playerId in payload.players ?? {}) {
+        const player = payload.players[playerId]
         if (!player._param) continue
         for (const param in player._param) {
          this.sceneMap.players()[playerId]._param()[param] = player._param[param]
@@ -246,12 +326,12 @@ export class RpgClientEngine<T = any> {
       }
       
       // Check if players and events are present in sync data
-      const players = data.players || this.sceneMap.players();
+      const players = payload.players || this.sceneMap.players();
       if (players && Object.keys(players).length > 0) {
         this.playersReceived$.next(true);
       }
       
-      const events = data.events || this.sceneMap.events();
+      const events = payload.events || this.sceneMap.events();
       if (events !== undefined) {
         this.eventsReceived$.next(true);
       }
@@ -279,7 +359,8 @@ export class RpgClientEngine<T = any> {
       this.sceneResetQueued = true;
       // Reset camera follow to default (follow current player) when changing maps
       this.cameraFollowTargetId.set(null);
-      this.loadScene(data.mapId);
+      const transferToken = typeof data?.transferToken === "string" ? data.transferToken : undefined;
+      this.loadScene(data.mapId, transferToken);
     });
 
     this.webSocket.on("showComponentAnimation", (data) => {
@@ -342,9 +423,36 @@ export class RpgClientEngine<T = any> {
       });
     });
 
+    this.webSocket.on("weatherState", (data) => {
+      const raw = (data && typeof data === "object" && "value" in data)
+        ? (data as any).value
+        : data;
+
+      if (raw === null) {
+        this.sceneMap.weatherState.set(null);
+        return;
+      }
+
+      const validEffects = ["rain", "snow", "fog", "cloud"];
+      if (!raw || !validEffects.includes((raw as any).effect)) {
+        return;
+      }
+
+      this.sceneMap.weatherState.set({
+        effect: (raw as any).effect,
+        preset: (raw as any).preset,
+        params: (raw as any).params,
+        transitionMs: (raw as any).transitionMs,
+        durationMs: (raw as any).durationMs,
+        startedAt: (raw as any).startedAt,
+        seed: (raw as any).seed,
+      });
+    });
+
     this.webSocket.on('open', () => {
       this.hooks.callHooks("client-engine-onConnected", this, this.socket).subscribe();
       // Start ping/pong for synchronization
+      this.startPingPong();
     })
 
     this.webSocket.on('close', () => {
@@ -430,7 +538,7 @@ export class RpgClientEngine<T = any> {
     });
   }
 
-  private async loadScene(mapId: string) {
+  private async loadScene(mapId: string, transferToken?: string) {
     await lastValueFrom(this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap));
 
     // Clear client prediction states when changing maps
@@ -450,7 +558,10 @@ export class RpgClientEngine<T = any> {
     // Setup RxJS observable to wait for all conditions
     this.setupOnAfterLoadingObserver();
 
-    this.webSocket.updateProperties({ room: mapId })
+    this.webSocket.updateProperties({
+      room: mapId,
+      query: transferToken ? { transferToken } : undefined,
+    })
     await this.webSocket.reconnect(() => {
       const saveClient = inject(SaveClientService);
       saveClient.initialize(this.webSocket);
@@ -478,6 +589,7 @@ export class RpgClientEngine<T = any> {
     
     // Signal that map loading is completed (this should be last to ensure other checks are done)
     this.mapLoadCompleted$.next(true);
+    this.sceneMap.configureClientPrediction(this.predictionEnabled);
     this.sceneMap.loadPhysic()
   }
 
@@ -1075,22 +1187,24 @@ export class RpgClientEngine<T = any> {
       frame = ++this.inputFrameCounter;
       tick = this.getPhysicsTick();
     }
+    this.inputFrameCounter = frame;
     this.hooks.callHooks("client-engine-onInput", this, { input, playerId: this.playerId }).subscribe();
 
-    this.webSocket.emit('move', {
-      input,
-      timestamp,
-      frame,
-      tick,
-    });
-
     const currentPlayer = this.sceneMap.getCurrentPlayer();
-    if (currentPlayer) {
+    const bodyReady = this.ensureCurrentPlayerBody();
+    if (currentPlayer && bodyReady) {
+      currentPlayer.changeDirection(input);
       (this.sceneMap as any).moveBody(currentPlayer, input);
+      if (this.predictionEnabled && this.prediction) {
+        this.pendingPredictionFrames.push(frame);
+        if (this.pendingPredictionFrames.length > 240) {
+          this.pendingPredictionFrames = this.pendingPredictionFrames.slice(-240);
+        }
+      }
     }
-    this.lastInputTime = Date.now();
-    const myId = this.playerIdSignal();
 
+    this.emitMovePacket(input, frame, tick, timestamp, true);
+    this.lastInputTime = Date.now();
   }
 
   processAction({ action }: { action: number }) {
@@ -1119,6 +1233,127 @@ export class RpgClientEngine<T = any> {
     return this.sceneMap?.getTick?.() ?? 0;
   }
 
+  private ensureCurrentPlayerBody(): boolean {
+    const player = this.sceneMap?.getCurrentPlayer();
+    const myId = this.playerIdSignal();
+    if (!player || !myId) {
+      return false;
+    }
+    if (!player.id) {
+      player.id = myId;
+    }
+    if (this.sceneMap.getBody(myId)) {
+      return true;
+    }
+    try {
+      this.sceneMap.loadPhysic();
+    } catch (error) {
+      console.error("[RPGJS] Unable to initialize client physics before input:", error);
+      return false;
+    }
+    return !!this.sceneMap.getBody(myId);
+  }
+
+  private stepClientPhysicsTick(): void {
+    if (!this.predictionEnabled || !this.sceneMap) {
+      return;
+    }
+    const now = Date.now();
+    if (this.lastClientPhysicsStepAt === 0) {
+      this.lastClientPhysicsStepAt = now;
+    }
+    const deltaMs = Math.max(1, Math.min(100, now - this.lastClientPhysicsStepAt));
+    this.lastClientPhysicsStepAt = now;
+    this.sceneMap.stepClientPhysics(deltaMs);
+  }
+
+  private flushPendingPredictedStates(): void {
+    if (!this.predictionEnabled || !this.prediction || this.pendingPredictionFrames.length === 0) {
+      return;
+    }
+    const state = this.getLocalPlayerState();
+    while (this.pendingPredictionFrames.length > 0) {
+      const frame = this.pendingPredictionFrames.shift();
+      if (typeof frame === "number") {
+        this.prediction.attachPredictedState(frame, state);
+      }
+    }
+  }
+
+  private buildPendingMoveTrajectory(): MovementTrajectoryPoint[] {
+    if (!this.predictionEnabled || !this.prediction) {
+      return [];
+    }
+    const pendingInputs = this.prediction.getPendingInputs();
+    const trajectory: MovementTrajectoryPoint[] = [];
+    for (const entry of pendingInputs) {
+      const state = entry.state;
+      if (!state) continue;
+      if (typeof state.x !== "number" || typeof state.y !== "number") continue;
+      trajectory.push({
+        frame: entry.frame,
+        tick: entry.tick,
+        timestamp: entry.timestamp,
+        input: entry.direction,
+        x: state.x,
+        y: state.y,
+        direction: state.direction ?? entry.direction,
+      });
+    }
+    if (trajectory.length > this.MAX_MOVE_TRAJECTORY_POINTS) {
+      return trajectory.slice(-this.MAX_MOVE_TRAJECTORY_POINTS);
+    }
+    return trajectory;
+  }
+
+  private emitMovePacket(
+    input: Direction,
+    frame: number,
+    tick: number,
+    timestamp: number,
+    force = false,
+  ): void {
+    const trajectory = this.buildPendingMoveTrajectory();
+    const latestTrajectoryFrame =
+      trajectory.length > 0 ? trajectory[trajectory.length - 1].frame : frame;
+    const shouldThrottle =
+      !force &&
+      latestTrajectoryFrame <= this.lastMovePathSentFrame &&
+      timestamp - this.lastMovePathSentAt < this.MOVE_PATH_RESEND_INTERVAL_MS;
+    if (shouldThrottle) {
+      return;
+    }
+
+    this.webSocket.emit("move", {
+      input,
+      timestamp,
+      frame,
+      tick,
+      trajectory,
+    });
+    this.lastMovePathSentAt = timestamp;
+    this.lastMovePathSentFrame = Math.max(this.lastMovePathSentFrame, latestTrajectoryFrame, frame);
+  }
+
+  private flushPendingMovePath(): void {
+    if (!this.predictionEnabled || !this.prediction) {
+      return;
+    }
+    const pendingInputs = this.prediction.getPendingInputs();
+    if (pendingInputs.length === 0) {
+      return;
+    }
+    const latest = pendingInputs[pendingInputs.length - 1];
+    if (!latest) {
+      return;
+    }
+    const now = Date.now();
+    if (now - this.lastMovePathSentAt < this.MOVE_PATH_RESEND_INTERVAL_MS) {
+      return;
+    }
+    this.emitMovePacket(latest.direction, latest.frame, latest.tick, now, false);
+  }
+
   private getLocalPlayerState(): PredictionState<Direction> {
     const currentPlayer = this.sceneMap?.getCurrentPlayer();
     if (!currentPlayer) {
@@ -1151,11 +1386,21 @@ export class RpgClientEngine<T = any> {
   private initializePredictionController(): void {
     if (!this.predictionEnabled) {
       this.prediction = undefined;
+      this.sceneMap?.configureClientPrediction?.(false);
       return;
     }
+    const configuredTtl = (this.globalConfig as any)?.prediction?.historyTtlMs;
+    const historyTtlMs = typeof configuredTtl === "number" ? configuredTtl : 10000;
+    const configuredMaxEntries = (this.globalConfig as any)?.prediction?.maxHistoryEntries;
+    const maxHistoryEntries =
+      typeof configuredMaxEntries === "number"
+        ? configuredMaxEntries
+        : Math.max(600, Math.ceil(historyTtlMs / 16) + 120);
+    this.sceneMap?.configureClientPrediction?.(true);
     this.prediction = new PredictionController<Direction>({
       correctionThreshold: (this.globalConfig as any)?.prediction?.correctionThreshold ?? this.SERVER_CORRECTION_THRESHOLD,
-      historyTtlMs: (this.globalConfig as any)?.prediction?.historyTtlMs ?? 2000,
+      historyTtlMs,
+      maxHistoryEntries,
       getPhysicsTick: () => this.getPhysicsTick(),
       getCurrentState: () => this.getLocalPlayerState(),
       setAuthoritativeState: (state) => this.applyAuthoritativeState(state),
@@ -1222,6 +1467,10 @@ export class RpgClientEngine<T = any> {
     this.initializePredictionController();
     this.frameOffset = 0;
     this.inputFrameCounter = 0;
+    this.pendingPredictionFrames = [];
+    this.lastClientPhysicsStepAt = 0;
+    this.lastMovePathSentAt = 0;
+    this.lastMovePathSentFrame = 0;
   }
 
   /**
@@ -1292,7 +1541,7 @@ export class RpgClientEngine<T = any> {
 
   private applyServerAck(ack: { frame: number; serverTick?: number; x?: number; y?: number; direction?: Direction }) {
     if (this.predictionEnabled && this.prediction) {
-      this.prediction.applyServerAck({
+      const result = this.prediction.applyServerAck({
         frame: ack.frame,
         serverTick: ack.serverTick,
         state:
@@ -1300,6 +1549,9 @@ export class RpgClientEngine<T = any> {
             ? { x: ack.x, y: ack.y, direction: ack.direction }
             : undefined,
       });
+      if (result.state && result.needsReconciliation) {
+        this.reconcilePrediction(result.state, result.pendingInputs);
+      }
       return;
     }
 
@@ -1325,6 +1577,32 @@ export class RpgClientEngine<T = any> {
     }
   }
 
+  private reconcilePrediction(
+    authoritativeState: PredictionState<Direction>,
+    pendingInputs: PredictionHistoryEntry<Direction>[],
+  ): void {
+    const player = this.getCurrentPlayer();
+    if (!player) {
+      return;
+    }
+
+    (this.sceneMap as any).stopMovement(player);
+    this.applyAuthoritativeState(authoritativeState);
+
+    if (!pendingInputs.length) {
+      return;
+    }
+
+    // Keep replay bounded while still tolerating high-latency links.
+    const replayInputs = pendingInputs.slice(-600);
+    for (const entry of replayInputs) {
+      if (!entry?.direction) continue;
+      (this.sceneMap as any).moveBody(player, entry.direction);
+      this.sceneMap.stepPredictionTick();
+      this.prediction?.attachPredictedState(entry.frame, this.getLocalPlayerState());
+    }
+  }
+
   /**
    * Replay unacknowledged inputs from a given frame to resimulate client prediction
    * after applying server authority at a certain frame.
@@ -1505,6 +1783,8 @@ export class RpgClientEngine<T = any> {
       this.inputFrameCounter = 0;
       this.frameOffset = 0;
       this.rtt = 0;
+      this.lastMovePathSentAt = 0;
+      this.lastMovePathSentFrame = 0;
 
       // Reset behavior subjects
       this.mapLoadCompleted$.next(false);

package/src/components/scenes/canvas.ce

@@ -1,5 +1,5 @@
 <Canvas width={engine.width} height={engine.height}>
-  <Viewport worldWidth worldHeight clamp>
+  <Viewport worldWidth worldHeight clamp sortableChildren={true}>
     @if (sceneData) {
       <SceneMap />
     }

package/src/components/scenes/draw-map.ce

@@ -10,6 +10,10 @@
       }
     </Container>
   }
+
+  @if (weatherProps) {
+    <Weather ...weatherProps() />
+  }
 </Container>
 
 <script>
@@ -17,6 +21,7 @@
     import { effect, signal, computed, mount, on, tick } from 'canvasengine'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
+    import { Weather } from '@canvasengine/presets'
 
     const engine = inject(RpgClientEngine);
     const componentAnimations = engine.componentAnimations
@@ -25,6 +30,7 @@
     const sceneParams = map()?.params
     const mapParams = map()?.params
     const animations = engine.sceneMap.animations
+    const weather = engine.sceneMap.weather
     const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
     const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
 
@@ -45,4 +51,34 @@
       frequency: 10,
       direction: 'both'
     }
-</script>
+
+    const weatherProps = computed(() => {
+      const state = weather?.()
+      if (!state) {
+        return null
+      }
+      const validEffects = ['rain', 'snow', 'fog', 'cloud']
+      if (!validEffects.includes(state.effect)) {
+        return null
+      }
+      const params = state.params ?? {}
+      return {
+        effect: state.effect,
+        speed: params.speed,
+        windDirection: params.windDirection,
+        windStrength: params.windStrength,
+        density: params.density,
+        maxDrops: params.maxDrops,
+        height: params.height,
+        scale: params.scale,
+        sunIntensity: params.sunIntensity,
+        sunAngle: params.sunAngle,
+        raySpread: params.raySpread,
+        rayTwinkle: params.rayTwinkle,
+        rayTwinkleSpeed: params.rayTwinkleSpeed,
+        zIndex: params.zIndex ?? 1000,
+        alpha: params.alpha,
+        blendMode: params.blendMode,
+      }
+    })
+</script>

package/src/services/AbstractSocket.ts

@@ -2,6 +2,14 @@ import { Context } from "@signe/di";
 
 export const WebSocketToken = "websocket";
 
+export type SocketQueryValue = string | null | undefined;
+export type SocketQuery = Record<string, SocketQueryValue>;
+export type SocketUpdateProperties = {
+  room: string;
+  host?: string;
+  query?: SocketQuery;
+};
+
 export abstract class AbstractWebsocket {
   constructor(protected context: Context) {}
 
@@ -9,6 +17,6 @@ export abstract class AbstractWebsocket {
   abstract emit(event: string, data: any): void;
   abstract on(event: string, callback: (data: any) => void): void;
   abstract off(event: string, callback: (data: any) => void): void;
-  abstract updateProperties(params: { room: string, host?: string }): void;
-  abstract reconnect(listeners?: (data: any) => void): void;
+  abstract updateProperties(params: SocketUpdateProperties): void;
+  abstract reconnect(listeners?: (data: any) => void): Promise<void>;
 }